DSGN 270 Day 2 - UI (user interface design) for developers

Today's Padlet

Housekeeping

• Reminder for Tony: Hit record!
• Recordings post set up in Slack

Trophy of the Day: Image assets and design examples

Submit the following for today's Daily Submission:

• Pick some favourite [open-source image assets]( '/open-assets/' | url }}) for future projects.
• Create some screen caps of some inspirational designs that you can use for future projects. Try searching best card designs of 2020 or similar.

1. Figma tour

• Reference: Figma Tutorial Video Playlist
  • Video: Setup account, teams, projects, and files
    • Create a free account and set up a Team.
  • Video: Get a tour of the Editor
  • Video: Any other videos in this playlist that interest you.
• Video: Figma Drawing Tools Overview
• 5 of your favorite Illustrator tools in Figma

2. Usability and web conventions

1. Layout conventions
2. Content conventions

3. Activity: Point and Crit

In groups of 3 or 4, select a website to roast (or praise). You may decide to critique this program website. If you do, submit an Issue and your instructors will work on them this Saturday.

• How does the site use visual hierarchy to promote prominence of content?
  • Size
  • Color
  • Space (proximity)
  • Typography
• How does it succeed, how does it fail at visual hierarchy?

Select a member of your group to summarize and report your findings to the rest of the class.

4. Lab: Open-source Assets

• Open Asset Treasure Hunt

Prep

UI fundamentals

• Videos: Parts 12-16 of The Freelancer's Journey (43 Parts)
  • Visual hierarchy
  • Repetition
  • Grid systems & alignment
  • Space in design
  • Typography

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)
  • Related Video: How to Sketch a UI for Non-Designers
  • How to Get Stakeholders to Sketch: A Magic Formula

Treasure hunt

Based on the material covered thus far, find 3-5 websites that:

1. Are well designed, aesthetically pleasing and useful, OR;
2. Aren't.

We'll be discussing these and other examples in breakout activities.