Weekly Assignments

Personal/Client Design System

Final Deliverables (required):

1. Personal Design System: Core Slides
   (link to FINAL shared Adobe XD Prototype, for client view)
2. Personal Design System: SourceFile.xd
   (link to FINAL Adobe XD file)

In-class Design System Exercises

Images exported from Adobe XD (not required):

• Core Slides
  • Typography
  • Type Specimen
  • Branding & Colors
• Core Structural UI Sections
  • Desktop Header/Footer + Grid
  • Mobile Header/Footer + Grid
  • Mobile Nav Overlay
• Core Layouts:
  • Home Page + Mobile
  • Sub Page + Mobile

Other/Bonus (Going Futhur)

Optional out-of-class exercises (not required):

• Slides
  • UI Components
• Layouts:
  • LandingPage/Single Page Site + Mobile
  • Contact Page
  • Product/Image Grid Page
  • Product/Post Listing Page
  • Product Detail Page
• Prototypes
  • Prototype: Single Page Site - Desktop
  • Prototype: Single Page Site - Mobile
  • Prototype: Multipage Site - Desktop
  • Prototype: Multipage Site - Mobile

PROJECT #1: Web Design

Definition Phase

1. Project Brief for Project #1 (Jane Doe Photographer Web Site)

Draft Phase

2. Conceptual Plans for Project #1(Web Site)
   • Site Map
   • Lo-Fi UX Wireframes
     (link to published/shared Adobe XD Prototype)
   • Style Tiles: A | B | C
     (e.g. Color Studies, Type Studies, etc)

Design Phase

3. Round 1 for Project #1(Web Site)
   • R1 Hi-Fi UI Design A
   • R1 Hi-Fi UI Design B
   • R1 Hi-Fi UI Design C
   • R1 Code Test
4. Round 2 for Project #1(Web Site)
   • R2 Hi-Fi UI Design D + Sub D1)
   • R2 Hi-Fi UI Design E + Sub E2)
   • R2 Code Test
5. Round 3 for Project #1(Web Site)
   • R3 Hi-Fi UI Design F + Subs F1, F2, ...
   • R3 Code Test

Final Deliverable

6. FINAL Portfolio Entry for Project #1 (Web Site)

Other/Bonus (Optional)

Source Files:

• xd-janedoe-photographer.xd - Jane Doe Photographer Adobe XD Design Source File (containing the original artboards for all of the above deliverables)

PROJECT #2: App Design

Definition Phase

1. Project Brief for Project #2 (Mobile App)

Draft Phase

2. Conceptual Plans for Project #2 (Mobile App)
   • Site Map
   • Lo-Fi UX Wireframes
     (link to published/shared Adobe XD Prototype)
   • Style Tiles
     (e.g. Color Studies, Type Studies, etc)

Design Phase

3. Round 1 for Project #2 (Mobile App)
   • R1 Hi-Fi UI Design A
   • R1 Hi-Fi UI Design B
4. Round 2 for Project #2 (Mobile App)
   • R2 Hi-Fi UI Design C + Subs C1, C2, ...

Final Deliverable

5. FINAL Hi-Fidelity Prototype for Project #2 (Mobile App)
6. FINAL Portfolio Entry for Project #2 (Mobile App)