F 02/21

Theory: UI Design Principles
Design: Color + Type | Emphasis & Focal Point
Technical: Digital Imaging + Image optimization
Practice: Digital Mock-up

For Class

• Upload to your E-portfolio the items below addressing the issues you presented on Project 1: Worst of Web .
  • Proposal | Planning
  • Site Map | Information Architecture
  • Mock-up | Two Wireframes:
    • Home
    • About or Contact or A Link Page
• Collect images to create the Digital Mock-up.
• Tutorial 3 | Adobe XD Parts 1 and 2 – 4 videos.

In Class

• Attendance & Announcements
• Review: Principles Studies
  • Theory: UI Design Principles
    § Structure § Simplicity § Visibility § Feedback § Tolerance § Reuse
  • Design: Unity + Emphasis & Focal Point
    Unity: Continuation, Repetition, Alignment, Proximity
    Emphasis & Focal Point: Contrast, Isolation, Convergence, Unusual, Placement
  • Technical:
    • Digital Imaging
      • Raster x Vector
      • Resizing x Resampling | Photoshop
      • Best Extension
      • Optimizing images for web
      • Image Size:
        Area size in pixels (inches, etc.) + Resolution in dots (or pixels) per inch (dpi) = File size in bits
        Optimize for web: Area size not bigger than the site area, Resolution at 72 dpi, File size below 200 dpi
• Type + Color | Gestalt : Consistency
• Presentations
• Practice: Digital Mock-up in XD

For Home

Project 1: Worst of the Web

• Site layout in Adobe XD – 4 pages
  • Home
  • About
  • Contact
  • A Link Page

• Web
• Mobile

Tutorial 3 | Adobe XD Part 3