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 — 11 total)
  1. CSS "Test" (does not count towards points)
  2. Layouts w/ Floats
  3. Article Layout Reproduction
  4. Playlist + Quiz
  5. Layout w/ CSS Positioning
  6. Typespecimen Mockup
  7. Playlist + Quiz
  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 and 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: Shelby, Nathaniel, Kirk

The Discovery Center: Dominic, Mario, Mai

Meux Home Museum: Erik, Abby, Salina

African-American Museum: Ashley, Madison, Cindy

Fresno Art Museum: Daniel, James

# 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.

HTML Structure

Due 10/20

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/18

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/13

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/11

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:

Final Type Specimen Project

Due 10/6

To turn in your finished type specimen, upload it to your web directory. Save it into the folder "typespecimen" and name it "index.html".

# 8

Due 9/29

Web Typography 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/22

Lynda Playlist: CSS Layout 1, + Quiz

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

Backup link:

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

# 6

Due 9/20

Project: Responsive Type Specimen
Phase 1: Design Mockup

Using the Illustrator templates attached here, lay out two versions of a type specimen design using 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

Turn in on Tuesday:

  1. PDF of your design, arranged for desktop browser (landscape)
  2. PDF of your design, arranged for tablet (portrait)

# 5

Due 9/13

Layout with CSS positioning

Using the CSS Zen Garden pen in my codepen account, design a layout using CSS positioning properties. There are three sections: 

  1. the header  <header>
  2. the main article  class="preamble"
  3. the summary paragraph class="summary"

Make the header a fixed position element. For the other two sections, you decide which gets a relative or absolute property. Use these properties to create a unique layout.

# 4

Due 9/15

Lynda Playlist: CSS Positioning, etc. + Quiz

Watch all the videos in my playlist called "CSS Positioning, etc." It should take you about 42 minutes.

Backup link:

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

# 3.2

Due 9/8

Article Reproduction — finished

Have Assignment 3 perfected, with appropriate web fonts and detailed styling.

# 3.1

Due 9/6

Article Reproduction — main structure

Your goal is to analyze an existing webpage and create it's HTML structure. You will be using an article page of your choice from The objective is to think in terms of boxes and getting them to align themselves correctly. We are not concerned with type and images, however you will want to control the spacing as much as possible.

Save your code in codepen and add the finished pen to your "GD 150" collection.

assignments 2
assignment 3

# 2.1 – 2.3

Due 9/1

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

assignments 2
assignments 2