Home Page & Navigation Design

Intro to Information Architecture

Master navigation design concepts
Based on lecture and readings, become familiar with common classification schemes and design patterns.

Browse the web with an eye toward discoverying a range of navigation design patterns that you can apply in your design.
Choose a scenario
Choose one of the design scenarios provided by the instructor, or choose a custom project.

Competitive Research

Create template
Follow the example provided by the instructor to create your own competitive review screenshots & tables template.
Conduct competitive review
1. Choose 3 websites to compare
2. Look for classification schemes and design patterns
3. Define the target audiences of your competitors
Define your target audience
Hone in on the target audience(s) for your design. Be specific - trying to design for everybody is not a good strategy.

Content Inventory & Site Maps

Conduct a content inventory
In a spreadsheet (see example below), list all the content that will be part of your website.

If you are redesigning an existing website, the term content audit might be used interchangeably with content inventory.
Affinity Diagram your IA
Use post-it notes to apply Affinity Diagramming technique to your IA
Finalize your Site Map
1. Use Slickplan (free for 30 days) or another visualization tool (Balsamiq, Omnigraffle, Visio, PowerPoint) to create a visual site map (Examples)
2. Use your content inventory as the starting point for a detailed outline site map

Sketching, Wireframing & Prototyping

Sketch
Work on a set of thumbnail sketches to explore design approaches.

Remember, your goals is to create 8 different versions of the same page (i.e. the home page).
Build wireframes
1. Create wireframes of your site home page
2. Create wireframes of all navigation menus/UI elements
3. Export wireframes to PNG format and share in your project
If you are using Balsamiq:
- Sign up for 30 day free trial, and/or
- Install 7 day desktop free trial
Create a simple prototype
1. Use Balsamiq hot spots/links to create a clickable PDF navigation prototype
2. Use Solidify and PNG files to create an online navigation prototype
3. Share the link to your PDF or Solidify prototype.
If you are using Balsamiq:
- Sign up for 30 day free trial, and/or
- Install 7 day desktop free trial
Sign up for a free 30 day Solidify trial here:

http://www.solidifyapp.com/

Additional Resources

Unit 1 Slides
Beginner’s Guide to Information Architecture
Organization Schemes in Information Architecture for the World Wide Web

(please read pages 56-64, which are available for free)
Design Patterns Readings
- Article: Guide to Website Navigation Design Patterns
- Article: Responsive Navigation Patterns
Additional Readings
- Article: Content-first design
- Article: Five Design Decision Styles
Competitive Review Tools
- Awesome Screenshot
  For annotated screenshots to include in your competitive review:
- Powerpoint or Keynote or MS Word
  For creating your competitive review report
- Dropbox
  To share PDF deliverables in your project.
Extra credit reading:

Article: Defining And Applying Personas to UX Design
Unit 3 Slides
Super sticky Post-it notes
Slickplan

Slickplan is a visual site mapping tool. You can sign up for a free 30 day trial at slickplan.com.
Gestalt Principles of Design
Optional Readings
- 35 Excellent Wireframing Resources from Smashing Magazine
- 20 best wireframing tools for designers
Unit 4 Methods Slides

Chris Dizon

--