UX Series: Designing Web Navigation | Eva Kaniasty | Skillshare

UX Series: Designing Web Navigation

Eva Kaniasty, User Experience Consultant

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
13 Lessons (1h 30m)
    • 1. Trailer

      1:44
    • 2. Housekeeping

      IANav-01-Housekeeping.pdf
      4:12
    • 3. IA in Context

      5:15
    • 4. Classification / Organizational Schemes

      2:57
    • 5. Design Patterns

      9:22
    • 6. Competitive Review

      IANav-03-CompReview.pdf
      7:22
    • 7. Content Inventory/Content Audit

      6:20
    • 8. Affinity Diagramming

      5:12
    • 9. Site Mapping

      4:24
    • 10. Design Concepts (Gestalt)

      IANav-05-Gestalt.pdf
      8:21
    • 11. Sketching, Wireframing & Prototyping Basics

      6:28
    • 12. Balsamiq Walkthrough

      19:37
    • 13. Solidify Walkthrough

      8:55

Project Description

Home Page & Navigation Design

Intro to Information Architecture

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

  2. Choose a scenario

    Choose one of the design scenarios provided by the instructor, or choose a custom project.

Competitive Research

  1. Create template

    Follow the example provided by the instructor to create your own competitive review screenshots & tables template. 

  2. 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
  3. 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

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

  2. Affinity Diagram your IA

    Use post-it notes to apply Affinity Diagramming technique to your IA

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

  1. 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).

  2. 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:

  3. 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 a free 30 day Solidify trial here:

    http://www.solidifyapp.com/

Additional Resources

Student Projects

Amanda Pike
3 comments
Latty B
5 comments
4 comments
Alice Meade
2 comments
3 comments
Krishna Knabe
3 comments
2 comments
Alia Vahed
1 comment
Elizabeth H.
6 comments
4 comments
2 comments
2 comments
3 comments
2 comments
7 comments