Wireframes, Figma and Navigation

Housekeeping

• Assignment 2 Announced
• Assignment Schedule adjusted
  • Journal entry: Due Thurs, Jan 20
  • Assignment 1: Due Fri, Jan 21
  • Assignment 2: Due Mon, Jan 24
• Ash covering Lab Time this afternoon

---

1. Wireframes

Materials

• How to Draw a Wireframe (Even if You Can’t Draw)
  • Video: How to Sketch a UI for Non-Designers
• How to Get Stakeholders to Sketch - A Magic Formula

Demo: Analog Wireframes

• User Flow: Buy a Desk on Amazon

2. Introduction to Figma

Materials

• Figma Tutorial Video Playlist
• Figma Drawing Tools Overview
• Figma Tutorials
  • Design Overview
  • Figma Components
• 5 of your favorite Illustrator tools in Figma

Demo: Annotations

• Overview of features
• Adding annotations to a wireframe to create a wireflow

3. Navigation

Materials

• Navigation Conventions

---

Lab Time

• Assignments
• Journal entry

Prep

UI fundamentals

• Visual hierarchy - Part 12 of 43 of The Freelancer's Journey

• Repetition - Part 13

• Grid systems & alignment - Part 14

• Space in design - Part 15

• Typography - Part 16

Navigation and layout

• 5 Tips to make navigation visible

• Link labels should follow the 4Ss

• Making Clickable Elements Recognizable

• Cards

Wireframes

• How to Draw a Wireframe (Even if You Can’t Draw)

• How to Sketch a UI for Non-Designers

  Related video version

• How to Get Stakeholders to Sketch - A Magic Formula

Figma

• Figma Tutorial Video Playlist

• Figma Drawing Tools Overview

• 5 of your favorite Illustrator tools in Figma