Course Notes - Session 2

Wireframes

  • Wireframe vs. Hi-fidelity
  • Wireframe is for ensuring we have all the technical/UI elements accounted for
  • No style, bare bones, zer "design" elements
  • Build great frames, and the hi-fis will be easy
    • Get requirements
    • Don't wireframe willy-nilly

Wireframing for Mobile vs. Desktop

  • Nathan doesn't design for mobile unless there's a use case, and vice versa
  • He doesn't buy in to the "Mobile First" trend (unless it should be)

Some Jargon

Types of Menu Icons

Types of UI Elements

Toggle

Table/list
Nav/menu
Sidebar
Logo
Icons
Buttons
Description
Profile Access
Login/logout
Timer
Header
Start/Stop Button
Trash
HR
Input field
Project Tags/Flair
Time
Mini-menu
View options
...and more!

Heatmaps

  • Feature Priority heatmap
    • Can show priority of features (Feature Fight™!)
    • Created from a Card-sort of all features
    • Helps get decisions made for development
    • Good to do the card sort with the client AND the users (separately)
  • Heatmap of where users are looking or clicking on a page

User Personas

  • Purpose: to completely define who we are designing for.
  • User Personas be like…
  • Lots of persona categories out there (see hand-out), a "good" persona probably uses 5-7 categories (there's that fucking law again...)
  • Demographics: Get a bunch of numbers, see where they live and how old they are
  • Story and Situation are similar, one is more about the origin of the persona. Bio is also similar but more historic-based
  • Capabilities may also contain "Digital Literacy" i.e. how good are they at tech. Skills is similar, but may be used differently pending your use case.
  • Brands can be brands, apps, or certain technologies
  • Personas don't need to be "designed" to look pretty, they can simply be a text document.
  • Charts and infographics can be used to display some of the categories. For instance you could show a list of apps (or brands, or technoolgies) a user likes/uses in a pie chart, with the percentage of use for each Thing™ shown in the chart.

User Persona Example

Homework Assignments

  • User Personas for our project (at least one, but if there are two or more go for it)
    • Do some research for our personas e.g. demographics, etc.
    • Can use people that are real, or do some Googling
  • Probably something else?

Class Session Resources

Click here to download a .zip file with all the files Nathan sent us.


This page was last updated: 11-6-2019