Course Notes - Session 2
- 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)
PDP == Product Display Page | Product Detail Page
Zero State == a page or element where nothing happens
Number Spinner == UI element to input a number, with +/- buttons
- Types of Menu Icons
Types of UI Elements
- 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
- 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 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