Assignment Catch-Up & Grading

Due 12/13

About Unfinished Assignments

This semester, I will excepting past-due assignments. They will be deducted 20%.

These include

  • Codepen Exercises
    Check my codepen collections for each exercise. If you don't see yours in there, then it hasn't been turned in. If it's complete, be sure to let me know via email so I know to look for it.
  • Quizes
  • Website Projects
    Check the Typespecimen and One Page Site gallery pages. If you don't see yours, then it is not considered turned in. Make sure you have it uploaded and in the correct directory.
  • Other Docs
    Check Blackboard for any assignment that needs to be uploaded there.

When grading, I will be dropping one homework assignment in the final tally. If you completed everything, then you will receive extra credit.

Grading Breakdown
Homework Assignments (10 points each)
  1. Basic HTML Tags
  2. Nesting Divs
  3. First Stylesheet
  4. Playlist + Quiz
  5. Layouts w/ Floats
  6. Nav Bar
  7. Typespecimen Mockup
  8. Reading + Quiz
  9. Playlist + Quiz
  10. Content Outline for One-Page Site
  11. Mood Board
  12. Playlist + Quiz

Projects (30 points each)
  1. Typespecimen Website
  2. One-Page Info Site

Final Project: Mobile Website Redesign (50 points)

The final project grade is influenced by the final testing and edits, as well as the following process documents.

  • Card Sorting Data
  • Balsamiq Wireframe Prototype
  • Static UI Style Guide + Screen and Navigation Mockups
  • Coded Style Guide

These documents should be uploaded into a folder named documentation in the same directory as the final site, except for the wireframe prototype which I can view through Balsamiq.

Final Edits

Due 12/6

List of Final Edits for Launch

Based on your user testing today, identify at least three items that need to be adjusted on the site, and why. You will expected to have those changes made by the final class.

Send your team's list to my email.

Final Project: Beta Launch

Due 12/6

Complete Mobile Website Redesign

For the Beta Lauch of your site, you should have a finished redesign of your "clients" website. You are only required to have the mobile version of the site completed. The minimum required components are...

  1. finished and functional navigation
  2. finished home page
  3. three finished interior pages
  4. master template for all other interior pages

The website should be live a ready for user testing.

Style Guides

Due 11/29

Complete UI Style Guide

"A style guide is a living document of code, which details all the various elements and coded modules of your site or application. Beyond its use in consolidating the front-end code, it also documents the visual language, such as header styles and color palettes, used to create the site. This way, it’s a one-stop place for the entire team—from product owners and producers to designers and developers—to reference when discussing site changes and iterations. Several companies have even put their guides online; Starbucks is the most well known of the bunch, but others exist." —Susan Robertson

For Tuesday, your team should have a complete style guide that defines and displays the design of all elements on the site. A static guide will be accepted, although a coded one will be due by Thursday 12/1.

Important: Try to design at 100% resolution as much as possible. That means that the design area on your screen should be as close to the actual size of a mobile device as possible.

Free Book: The Critical Components of Web UI Style Guides

Crafty Rusty Offerings: Template of HTML elements to style


Creating Style Guides by Susan Robertson

Inspirational Examples of UI Style Guides

Testing and Mockups

Due 11/22

Final Wireframe and Nav Mockups

Assign each team member one of these three jobs.

  1. One team member will complete the final balsamiq wireframe prototype. Not every single page on the site has to be represented, but the navigation's organization and behavior should be clear. A user should be able to successfully execute each one the three tasks you defined in class.

  2. Two team members will design mockups for the navigation, in all its various states. Each mockup should show at least one whole screen with the navigation in context — more if the navigation has more than one state (i.e. collapsed and expanded). It should also have a color palette, font choices, and icon styling (if applicable).

    Each designer should create their own mockup so that on Tuesday the whole team can discuss the various design options.

Wireframe Prototyping

Due 11/17

Wireframe Prototyping

In your team's Balsamiq account, lay out all the screens necessary to create a clickable prototype that will allow a user to complete the first two of your three targeted tasks. Be care when working separately but simultaneously; don't save over each other's work.

If you have not been added to your team's Balsamiq account, please email me.

Gather Data

Due 11/15

Gather Card Sorting Data

Using the cards you created in class, conduct the activity using four participants outside of class. Be sure to use a script so that you give each participant the same instructions. Record your data results in your spreadsheet and bring it to class.

Sample moderator script

Spreadsheet template

Card Sorting

Due 11/10

Lynda Playlist: Card Sorting

Watch all the videos in my playlist called "Information Achitecture 1" It should take you about 27 minutes.

Backup link:

Final Project Assignments


Website Redesign Teams

Armenian Museum of Fresno: Kendall, Vong, Chantel

The Discovery Center: Jordan, Taylor, Josh

Meux Home Museum: Kristine, Nanju, Jaime

African-American Museum: Ghada, Vincent, Bruno, Fred

Fresno Art Museum: Carla, Xeng, Elisa

Arte Americas: Madison, Elaine, Zach, Eddie

# 12

Due 11/8

Lynda Playlist: User Experience + Quiz

Watch all the videos in my playlist called "User Experience" It should take you about two hours.

Backup link:

When you have finished watching the videos, take this quiz:

Usability Reading

Due 11/3

Reading: Don't Make Me Think

For Thursday, read chapters 1 and 2 in Don't Make Me Think, by Steve Krug. This should take about 20 minutes.

Click here for the epub file.

Final One-Page Website

Due 11/1

One-Page Informational Website

Have your final one-page responsive website ready to present at the beginning of class. Be sure that it is saved on the server as index.html inside a folder called one-page-site. The path name should look something like this:*your name*/one-page-site.

Check the project gallery page to make sure you saved it corectly.

Site Stucture in HTML

Due 10/18

Main Site Structure in HTML

Using your wireframe as a reference, build the main structure of your site. At minimum, it should look like a bunch of boxes. Go ahead and start adding content if you can.

Save your file as index.html into a folder called one-page-site in your FTP server directory.

assignments 2
assignments 2

# 11

Due 10/13

One-Page Site: Mood Board

A Mood Board is a collection of images that are tied together by a particular theme, keyword, or concept. In addition to photos, you can include color palettes, typography, and textures.

Starting by gathering as many inspiring images as you can find. Then filter them down to those that seem best suited for the project you are working on. Organize them visually and play with different combinations and compositions. Be sure to include a color palette and type choices.

For Thursday, save your mood board as a PDF and upload to Blackboard.

Visual Reference:
assignments 2
assignments 2
assignments 2
assignments 2
assignments 2
assignments 2
assignments 2
assignments 2
assignments 2
assignments 2

# 10

Due 10/11

One-Page Site: Content Outline

For the one-page, informational website you will be designing, choose your topic and gather the copy (text) you will be working with. Organize that copy into a formally structured outline (see example below).

No dummy copy! This is the text you will be working with. You don't have to write it yourself, but it needs to be final.

Click here for example.

Bluegrass Instruments

  1. Washboard
    1. Description
      1. Mutley, you snickering, floppy eared hound. When courage is needed, you're never around. Those medals you wear on your moth-eaten chest should be there for bungling at which you are best..
    2. Masters
      1. Clive Clementine
        1. Thunder, thunder, thundercats, Ho! Thundercats  are on the move, Thundercats  are loose. Feel the magic, hear the roar, Thundercats  are loose.
      2. Ray Hogg
        1. So, stop that pigeon, stop that pigeon, stop that pigeon, stop that pigeon, stop that pigeon, stop that pigeon, stop that pigeon.  Howwww! Nab him, jab him, tab him, grab him, stop that pigeon now.
      3. Lil’ Pearl
        1. Top Cat! The most effectual Top Cat! Who's intellectual close friends get to call him T.C., providing it's with dignity. Top Cat! The indisputable leader of the gang.
    3. Soundfile

  2. Banjo
    1. Description
      1. Ten years ago a crack commando unit was sent to prison by a military court for a crime they didn't commit. These men promptly escaped from a maximum security stockade to the Los Angeles underground
    2. Masters
      1. Mojo  Nixon
        1. La la la la la, la la la la la la la, la la la la la la la, la la la la la la la la la la la la la, so - Barnaby The Bear's my name, never call me Jack or James, I will sing my way to fame, Barnaby the Bear's my name.
      2. Bob Beaver
        1. One for all and all for one, Muskehounds  are always ready. One for all and all for one, helping everybody. One for all and all for one, it's a pretty story.
      3. Goose Hill
        1. Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. He's got style, a groovy style, and a car that just won't stop. 
    3. Soundfile

  3. Jaw harp
    1. Description
      1. Knight Rider, a shadowy flight into the dangerous world of a man who does not exist. Michael Knight, a young loner on a crusade to champion the cause of the innocent, the helpless in a world of criminals who operate above the law.
    2. Masters
      1. Bobby Jack
        1. There's a voice that keeps on calling me. Down the road, that's where I'll always be. Every stop I make, I make a new friend. Can't stay for long, just turn around and I'm gone again. Maybe tomorrow, I'll want to settle down, Until tomorrow, I'll just keep moving on.
      2. Penny Sue Montana
        1. Hey there where ya goin', not exactly knowin', who says you have to call just one place home. He's goin'  everywhere, B.J. McKay and his best friend Bear. 
      3. Ellie Mae Dallas
        1. Mutley, you snickering, floppy eared hound. When courage is needed, you're never around. Those medals you wear on your moth-eaten chest should be there for bungling at which you are best. 
    3. Soundfile

# 9

Due 10/6

Lynda playlist: HTML5 Semantics, + Quiz

Watch all the videos in my playlist called "HTML5 Semantics" It should take you about 38 minutes.

Backup link:

When you have finished watching the videos, take this short quiz:

Type Specimen Website

Due 10/4

Final Website Due

On Tuesday, your final Type Specimen Webpage is due at the beginning of class. You won't have to formally present your work, but we will have a peer critique exercise.

# 8

Due 9/29

Reading + Quiz

For Thursday, read chapters 1, 2 and 6 from the book On Web Typography, by Jason Santa Maria. It should take about an hour to read.

Then take this quiz.

# 7

Due 9/2

Type Specimen Mockup

Using the Illustrator templates attached here, design the mockup of the type specimen that you will eventually layout as a web page. You may use the font of your choice. Be sure to choose one with a known history and designer. A font with historical significance is recommended. You can find inspirational images here and here.

The design needs to include the following elements

  • typeface name
  • designer
  • year
  • a paragraph of historical information about the typeface and/or designer
  • sample characters (as many as you like)
  • sample of each font in the family
  • sample text block

Upload a PDF of your design to BB.

# 6

Due 9/15

Navigation Bar with Psuedo Elements

In class we learned how to construct a navigation bar in the industry-standard way: using a list <ul>. We also learned about pseudo classes and how they affect the different states of any given element (i.e. hover, active, visited, etc...)

Your assignment is to design a horizontal navigation bar using the <ul> structure, and incorporating pseudo classes.

Title your pen "Assignment 6" and add it to your GD 50 collection in codepen.

# 5.1 – 5.3

Due 9/13

Layouts with Floats

Recreate these three layouts in HTML and CSS, using responsive widths. Save your work into your codepen collection.

assignments 2
assignment 3

# 4

Due 9/8

Lynda Playlist: CSS Basics + Quiz

Watch all the videos in my playlist called "CSS Layout 1" It should take you about 46 minutes.

Backup link:

When you have finished watching the videos, take this short quiz:

# 3

Due 9/13

First Stylesheet + Reading
  • typeset the body copy with you own font and spacing
  • add color using hexadecimal values
  • add a border to contain all the elements

Do not change the HTML.

Place your final design in your GD 50 collection in codepen.

Part 2

Reading: By Tuesday, read the article "Opening the Box Model" by Shay Howe.

# 2.1 – 2.2

Due 9/1

Nesting divs

Recreate these screen shots with nested divs. Start by opening my codepen example "Nesting divs exercise" and forking a copy of it for yourself. I have written styles in that pen that will make your divs visible as you code them. You will only be working in html.

Name your pens 2.1 and 2.2 and add them to you GD 50 collection in codepen.

assignments 2
assignment 3
assignments 2
assignment 3

# 1.1 – 1.4

Due 9/6

Using the HTML tags we have learned so far (scroll to bottom for list), complete the following three exercises. Save your work in codepen and be sure to name each assignment by its name (i.e. 1.1, 1.2...), and place the pen in your GD 50 collection.

1.1 — The List

Create a list of your choosing (i.e. grocery, to do, pet peeves, favorite baked potato toppings...). All the items should be numbered (hint: the numbering with be created automatically if you use that right tag). Give your list a heading.

assignments 2
assignment 3
1.2 — The Letter

Compose a letter, using HTML tags as your typesetting tools. The letter should have at least two paragraphs in the body, and five of the words or phrases should be italicized. Make it fun by using some creative dummy copy.

assignments 2
assignment 3
1.3 — The Special Cat

Using the HTML codes for special characters, produce the "word" you see below.

assignments 2
assignment 3
1.4 — Codecademy Tutorial

Complete the following interactive tutorial on

Unit 1: Intro to HTML >> Lesson: HTML basics

When you accomplish that section, take a screen shot of your "Congratulations" badge and upload it into this assignment module.

HTML tags from class:

# 0

Due 8/25

For Thursday, watch videos #1 and #2 from

Video 1: Not a Series of Tubes
Video 2: HTML: Hamburger Text Markup Language