Week 10

More Color Scheme Generators

• Lyft's colorbox Site

Card Sorting & User Personas

• Usability.gov - Card Sorting
• Usability.gov - User Personas

Style Tiles

• Style Tiles
• Style Tile Example: The Washington Examiner
• Style Tile Example: Georgia gov

Wireframes

Sketching

• Using sketchboards to design great user interfaces
• 6-up Template

Basics

• Usability.gov - Wireframing

From Fuzzy Math series

• Fuzzy Math: How to read a wireframe
• Fuzzy Math: How to evaluate a wireframe
• Fuzzy Math: How to design a wireframe

Homework

Reading

Mood Boards and Style Tiles

• Style Tiles as a Web Design Process Tool
• Style Tiles in Practice (lots of repeating from article above)
• Why Mood Boards Matter

Wireframe Resources

• Communicating Design: Wireframes
• A Project Guide to UX Design: Wireframes and Annotations
• I ♥ wireframes: Tumblr blog with lots of links to other sites
• Fuzzy Math: How to read a wireframe
• Fuzzy Math: How to evaluate a wireframe
• Fuzzy Math: How to design a wireframe

Exercises

Don't forget that the animated story postmortem is also due on Friday, November 15 by 6pm.

Final Project

Style Tiles

Your formal Style Tiles should give an idea of the look and feel of the website. You may start with the downloadable psd file from styletil.es, but you must substantially modify it to make it your own. You should also consider using Sketch or Adobe XD.

• Complete two distinct style tile concepts for class
• Be prepared to discuss them in class

Wireframes

You will need to complete a high fidelity wireframe for each section of your website (2-3 total). Each page variation on your site should be a separate wireframe.

You should start your wireframes by sketching ideas on paper. Start with smaller sketches, about six to a page, and try out several ideas. Do at least six for each wireframe version. Sketch one or two that you like using a full size letter paper. These can be done using a sharpie or pen on a piece of letter sized paper.

Your high fidelity wireframes are to be neatly rendered on a computer. Sketch is great for this, but if you do not have access to Sketch you can use Illustrator or InDesign.

Deliverables

Each of these should be uploaded and attached to your project page. Email me your medium or high fidelity wireframes and style tiles before class.

• Complete 6 thumbnail sketches for each wireframe version
• Complete 2 full size (8.5x11) sketches for each wireframe version
• Scan all of your sketches in and upload them to your final project page.
• Complete 2-3 high fidelity wireframes on the computer (number is dependent on site structure and concept)

Come to class prepared to present your style tiles and wireframes.