Skip to main content

Day 3 - Visual Hierarchy and User Flows

Announcements and Questions

Morning Activity: Altitude

  • Time: 20 Minutes
  • Goal: Think about the ways a user could use a site or app, establish a perceived “intended” use and brainstorm other ways a user might approach the site/app

Debrief

  • How many variations did you discover?
  • Did the presentation of content lead you down any potential rabbit holes?
  • What was the most suprising revelation about the site/app that your team reviewed?

Break 15 Min

Visual Hierarchy

  • Video: Design Principles - Visual Hierarchy The Freelancers Journey
    • Put yourself in the shoes of your client’s client
    • Overly complex and cluttered designs are hard to get information from
      • Avoid letting information compete for prominance
  • Video: Design Principles - Repetition - The Freelancers Journey
    • Use repeating patterns, sizes, and shapes to communicate meaning, set expectations, and create a pattern which can be strategically broken
  • Video: Design Principles: Grid Spacing and Alignment
    • Grids are commonly used in design to organize content
      • If content isn’t balanced in sized, a traditional grid might not be the best way to organize content
  • Video: Design Principles - Space
    • Empty space is used to:
    1. create rhythm
    2. establish relationships between content
    3. give elements the ability to breathe
  • Video Design Principles - Typography
    • Display and Text typefaces
    • Typography makes a statement and creates identity

Activity: Design Review

  • In the same groups as the first activity, review your website’s use of the following design pattners
    1. Visual Hierarchy in general (how is some information made more important than others?)
    2. Reptition (How is it used?)
    3. Grid and Alignment (Is there a grid? or is it more fluid?)
    4. Typography (How are fonts giving character to the design? How are they affecting visual hierarchy?)

Debrief

  • Each group discuss 1 aspect of design from your site

Break 15 Min

User Flows

  • Initial Discussion Based on Homework Readings
    • What is our current understanding of users flows based on the readings?
  • Watch User Flow Tutorial

Types of User Flows

  • Establish an idea of who your users are and and what their goals are
  1. Task Flows (the mental steps and tasks)
  • Steps that a user goes through to achieve their goal
  1. Wireflows (lo-fi rendering of how the tasks are achieved)
  • Sketch screens that the user will go through
  1. Screen flows (hi-fi)
  • mockup version that shows what the app will actually look like

In Class Example

Break

Activity: Create a Task Flow (30min)

  • In same groups at the 1st 2 activities, you will create a user flow for 1-3 aspects of your site
  1. Create a new figjam file for your group’s user flow
  2. Based on your use cases from the 1st activity, outline users and their potential goals
  3. Each team member should be able to create a user flow based on an identified goal
  4. Create a Task flow as demonstrated during the in class example
  5. Pick a user flow to show to class

Debrief

  • Each team will walk through 1 user flow

Lab Time

  • Work on Assignment 1
  • 1 on 1 Sessions with Ash

Homework