9/9/24 - Class 2

• Topics covered: Design Principles for the Web, Figma, Style Guides, and Sitemaps
• Link to slides
• Link to class recording
• Assignment:
  1. Create a sitemap for your website in Figma. Add to the sitemap project
  2. Eventually for your midterm, you will need to submit a sitemap, a style guide, and 3 pages of design in both desktop and mobile sizes. You might want to start working on this now to get feedback in class.
  3. If you missed Class 2, be sure to complete the in-class exercise of creating a blog post in Figma so that you will be prepared for next class.

Assignment Help

• Link to example site map
• Sitemaps & Information Architecture (IA)
• Link to example Figma design and style guide
• Creating A Style Guide

Useful tools

• A website for pairing fonts
• Character counter for line length
• Golden Ratio of Typography Calculator
• Figma Shortcuts
• Cool tool for picking colors
• Lorem Ipsum to copy and paste
• Figma Ninja Game
• Hex Invaders Game
• Cant Unsee Game

Additional Reading

• Youtube Video - Figjam 101 (Covers Sitemaps)
• Youtube Video - Figma UI Tutorial
• Choosing Web Fonts: A Beginner’s Guide
• 3 Secrets of Font Pairing
• The ideal line length & line height in web design
• 6 Golden Rules Of Layout Design (YouTube video)
• Why Does a Design Look Good?
• HSL vs HSB Color (YouTube video)
• The psychology of color in web design
• The 4-Point Grid
• Hexcodle - Wordle game for Hexcodes