Due 12/12

Website Redesign: Final Site + Documents

Below is a list of the deliverables (things you have to turn in) for your final project.

  1. Website — minimum of three pages: the home page plus two interior pages. The two interior pages should be the ones that satisfy the primary purpose/s of the website. For example, if it is a pet adoption site, you should complete the pages that allow the user to engage in that process. I highly encourage you to complete the entire site if possible.
  2. Wireframe Prototype — every part of the site should be represented as a wireframe sketch and incorporated into an interactive prototype — the one that you used for testing during the design process. It does not have to represent your final UX design decisions.
  3. Style Guide — all fundamental elements that appear in the site should be documented in the style guide. This should be an html document.
  4. Proposal

With the exception of the proposal (which you have already turned in), these deliverables are all due on the day of our final presentations (Dec. 12).

When you present your final website, be prepared to talk about your team's design process and workflow. What did you learn from your user testing and how did it influence your design decisions? Do you think you were successful in designing a solution for the problem statement in your initial proposal?

More info about wireframes and style guides...

A Beginner’s Guide to Wireframing
I ♥ wireframes
marvel prototyping app/site
example wireframe prototype

How To Create a Web Design Style Guide
some style guide examples: [1] [2] [3]


Due 11/16

Website Redesign: Proposal

For this final project, you will be working in groups to redesign a website for a local non-profit organization.

Step 1: Choose a Site

Visit the websites listed below to preview their content and design.

Now use this link to choose which site you would like to work on. You will asked for a first choice and a second choice. I will use the results to form your teams.

Step 2: Initial Testing

Before we leave class today, let's do some quick, casual usability testing. Review the current website with your group and write down two specific tasks that you think are important to the success of the website. Then ask a couple classmates from different teams to execute those tasks while you observe. Be sure to ask them to think out loud. This should give you a little insight into problems areas you may need to address in your redesign of the website.

It is important that the tasks you make up are very specific. This will allow you to watch someone navigate the site in a realistic way. Here are some examples.

Poorly written task: "Learn more about the museum."

Well written task: "Find out if the museum is appropriate for children under two years of age."

Step 3: Proposal (due Thursday)

By Thursday, you will create a proposal document for the redesign project. It should include:

  1. A brief description of the main purpose of the website. This is sometimes known as a problem statement. Be as specific as possible. What exactly does the organization need to acheive with this website?
  2. A paragraph or two describing your inicial impressions of the site, both aesthetically and functionally. What jumps out at you? Identify some good parts and bad parts. What did you learn from the testing you did in class?
  3. Sitemap: provide a diagram representing all the content that currenting makes up the website.

Name your proposal proposal.html, save it into a folder named redesign, and upload it into your GD50 directory on the server. Each member of the team should upload a copy of the file into their own directory.

Design Teams
Centro de Folklor, group A Centro de Folklor, group B Meux Museum Feral Paws Rescue
Monica Javier Hargobind Michelle
Carlos Jenny Bruno Brenda
Seth Montanna

Assignment #14

Due 11/9

Card Sorting Exercise

During class, you went out in groups and gathered data from participants about how they would categorize a collection of navigation items. The next step is recording and analysing that data. I suggest using a spreadsheet to type out the different organizational patterns of your participants. Refer to the last couple videos in the playlist from Tuesday for tips on how to how to do that.

Look for patterns in their naming choices, are they using verbs or nouns, did certain cards cause confusion, etc.

Based on your analysis, come up with your own information architecture (how the navigation will be organised — what will each section category be called and what will it contain?

Here's more info about the specific pages on that site. And here's a sample spreadsheet of data and navigation choices.

Have one person in your group email me your data and navigation choices.

Assignment #13

Due 11/14

Information Architecture: Playlist

  1. Watch this Lynda playlist on card sorting (duration: 27 minutes). The videos give instructions for an activity we will be doing in class, so be ready!

  2. Make sure you watch the playlist assigned last week, and take the quiz.

Assignment #12

Due 11/7

User Experience: Playlist + Quiz

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

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

Assignment #11

One-Page Site: Mockup

A mockup is a visual representation of the layout and design of your website. Use your content as structure and your mood board as your artistic "north star." Since this is a one-page site, you will probably need to design something as a long rectangle, in order to include all the scrollable content. Or perhaps you think of it as separate screens that scroll up in sections, like a slide show. Maybe you invision a sideways scroll. Design your mockup however best represents your vision.

Here are some great examples of different things you could do with this assignment.

Take note: some have a lot of text while others rely mostly on images. It all depends on your subject.

one-page website screenshot one-page website screenshot one-page website screenshot one-page website screenshot one-page website screenshot one-page website screenshot one-page website screenshot one-page website screenshot one-page website screenshot one-page website screenshot

Save your mood board as a pdf named mockup.pdf and upload it into your one-page folder on the server.

Example of a full-length mockup

Assignment #10

Due 10/17

One-Page Site: Mood Board

A Mood Board is a collection of images that are tied together by a particular theme, keyword, or concept. Think of this as a collage, like an interior design would gather photos and swatches to convey the mood of the space they are creating. In addition to photos, you can include color palettes, typography, and textures.

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

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

Turning in it

Save your mood board as a pdf named mood.pdf and upload it into your one-page folder on the server.

Assignment #9

Due 10/12

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.

Save you work in any type of text format (i.e. .docx, .txt., etc.). Place it in a folder named one-page and upload it into your GD50 directory on the server.

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

Assignment #8

Due 10/10

Pseudo Selectors

Here is a zip file with an unfinished webpage. Download it and apply styles to all the different link elements. You will need to create four different syles for the following types of elements:

  1. body copy text link
  2. text links in the list
  3. next button
  4. cancel button
  1. All the styles should also have the pseudo selectors :link, :visited, :hover, and :active.
  2. Each type of link should have something visually different about it. You don't have to change the appearance on each state. At minimum, style the hover effect.
  3. Design the buttons so that they look "button-like".

Feel free to add your own classes.

Save the files into a folder named hw8-1 and upload it into your GD50 folder on the server.

Meet the Pseudo Class Selectors
w3schools page

Video: Typography Hierarchy

Watch this video.

Assignment #7

Due 10/6

Using Images on the Web

Now that you know how to upload files to a server and link them in your html with specific file path names, you are able to include more media assets into your pages, such as images.

For Thursday, do the following...
  1. Watch these two videos about web graphics file formats and how to resize and compress them in Photoshop.
  2. Watch my screencast, where I go through the process of creating the page you will be creating.
  3. Create a webpage that displays three photos that have have been sized equally and appropriately. See the screen shot below for an example.

Name your html file index.html, save it into a folder named hw7-1 and upload it into your GD50 folder on the server. You can name and organize your image files however you like, as long as the file path names are correct in the html.

For a review of the uploading/FTP procedures, go to the resources page on this site, or watch this video.


Type Specimen Project

Due 10/3

Final Web Type Specimen

Your final type specimen should be in html and css and uploaded to the server (see Resources section for FTP instructions). Be sure that it includes all the elements listed in the mockup instructions.

Save your html and css in a folder named type-specimen and upload it into your GD50 directory on the server. Be sure to name your html file index.html.

Assignment #6

Due 9/19

Type Specimen Project: Mockup

In typography, type specimen refers to a presentation of a certain typeface to showcase its design and/or use.


For this extended project, you will be creating a web version of a typeface specimen. You may use the typeface of your choice, as long as you can provide information about its history and/or designer, so be sure to do your research and select carefully.

The first part of the project is to design a mockup of the specimen, using the design tool of your choice (PS, AI...). Your design needs to contain the following elements:

  • name of typeface
  • examples of all the characters
  • examples of all fonts in the family
  • at least one paragraph of body copy
  • information about the typeface's history and/or designer

Your overall layout and design should evoke the spirit of the typeface and be an example of the type of design it is best suited for.


Google image search
Historical examples

Assignment #5

Due 9/14

CSS Layouts: Floats

Before completing this assignment, be sure you watch the playlist for the online class (posted below).

Starting with the pen I have created for you (embedded below), recreate the screenshot using what you learned from the videos. You can also find the pen in the "Exercises" collection in my codepen account.

Save your layout as Assignment 5 and add it to your GD 50 collection in codepen.

See the Pen layout exercise by Rusty Robison (@rustyrobison) on CodePen.

Recreate this screenshot

Online Class


CSS Layouts: Floats

  1. Watch this Lynda playlist all about creating layouts in CSS using floats and other tricks.

  2. Complete the coding exercise described in Assignment 5 (above).

Also, you might find this short video to be helpful when trying to visualize how CSS floats work.

Assignment #4

Due 9/12

Typographic Quote: Phase 1
  1. Watch my tutorial on using Google web fonts.

  2. Find a quote you like. Choose something that you think you can express well using typography. Here are some visual examples. You might find a quote you like from Bruce Mau's An Incomplete Manifesto for Growth.

  3. Choose the typeface/s you want to use and incorporate them into codpen with your text. We will work on this in class Thursday, but at least have the font applied to the quote.

Typographic Quote: Phase 2

Create a sketch of your design (pencil/paper, Photoshop, Illustrator, whatever...), then recreate it in html and css. Play with as many new properties as you can.

When finished, name it "Assignment 4" and add it to your GD 50 codepen collection.

Assignment #3

Due 9/5

Two Videos on Classes and IDs

Here are two videos for you from my Youtube playlist. Enjoy!

Assignment #2

Due 8/31

Lynda Playlist

CSS Basics, duration: 37 minutes

After you've watched that, take this short quiz.

First Stylesheet

Fork the pen below and apply your own styles to the HTML.

See the Pen Terms & Conditions by Rusty Robison (@rustyrobison) on CodePen.

Be sure to...

  1. typeset the body copy with your own font and spacing
  2. add color using hexadecimal values
  3. make the "I Agree" element look like a button
  4. add a border to contain all the elements

Do not change the HTML.

Name your final design 2.0 and place it in your GD 50 collection in codepen.

Assignment #1

Due 8/29

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

I highly recommend that you watch videos #1 and #2 from

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

HTML tags from class: