Middy We'll revisit your To-Do list later, but first, let's get started with design itself before auditing.
Week 1 – UI/UX Basics (Figma)
☐ Learn design principles: hierarchy, spacing, typography, color theory, contrast
☐ Understand UX fundamentals: personas, user journeys, wireframes, usability
☐ Get familiar with Figma: frames, shapes, text, alignment.
Watch this Quick Figma Overview
Project – Redesign a Coffee Shop Menu Card
Brew & Bite is a cozy neighborhood café that wants a fresh, modern menu card for its website and in-store digital display. The goal is to make it visually appealing, easy to read, and consistent with the café’s warm, welcoming brand. You’ll use Week 1’s design principles, UX fundamentals, and Figma skills to create a high-quality single-screen menu card.
Step-by-Step Application
1. Design Principles
Hierarchy: Make the café name and section titles (e.g., “Hot Drinks”) larger and bolder than descriptions.
Spacing: Keep even spacing between sections and around the edges.
Typography: Use no more than two fonts — one for headings, one for body text.
Color Theory: Choose 2–3 complementary colors (e.g., coffee brown, cream, soft orange).
Contrast: Ensure text stands out from the background for readability.
2. UX Fundamentals
Persona: Create one quick persona (e.g., Tunde, a 25-year-old student who needs a quick latte before class).
User Journey: Sketch 3 steps — open menu → pick drink → pay.
Wireframe: Make a low-fidelity grayscale layout before adding visuals.
Usability: Keep buttons large enough to tap and text easy to scan.
3. Figma Skills
Frames: Use a desktop or mobile frame for your design.
Shapes: Use rectangles for buttons and circles for icons.
Text: Add menu names, prices, and short descriptions.
Alignment: Use Figma’s align tools for clean, consistent layouts.
Deliverables in One Figma File
Page 1 – UX Prep
1 persona card (name, short bio, needs, goal).
1 simple user journey (3–4 steps in boxes with arrows).
Page 2 – Wireframe
- Low-fidelity grayscale version of your menu card.
Page 3 – Final Design
High-fidelity menu card applying hierarchy, spacing, typography, color theory, and contrast.
Must visibly use frames, shapes, text, and alignment.
Submission
Name your file:
Week 1 – [Your Name]
Click Share → Copy link → set permissions to Anyone with the link can view.
Paste the link into your submission form or email.
