First Set: 5 Portfolio Project
These hands-on projects are designed to demonstrate your mastery of color theory, typography, hierarchy, and layout—essential skills gained in Course 1.1.
1. The “Color & Accessibility” Audit Project 🎨
This project directly tests your understanding of **color theory, contrast, and accessibility standards (WCAG).
Project Goal
Audit and redesign an existing website’s primary color palette and typography to meet WCAG AA contrast standards.
Deliverables
- 1. Audit Report: Document the original site’s key failures (e.g., low text/background contrast, poor button contrast).
- 2. Redesign Mockup: A hi-fidelity redesign of 3 core screens (Homepage, Product Page, Checkout) using a new, accessible color palette.
- 3. Color Palette Documentation: Show your 8-point color system (Primary, Secondary, Success, Warning, Error, Gray Scale) and document the passing contrast ratios.
Guidance & Key Principles:
💡 WCAG: Use tools like WebAIM or Stark to ensure all color combinations pass AA standards (a contrast ratio of at least 4.5:1 for normal text).
💡 Color Theory: Choose a new primary color and build a harmonious, complementary, or analogous palette around it. Focus on creating sufficient visual weight to denote hierarchy.
2. The “Information Hierarchy” Redesign Project 📰
This project challenges you to use Gestalt principles, typography, and visual hierarchy to make dense content digestible and scannable.
Project Goal
Redesign a complex data-heavy page (e.g., a stock market tracker, a legal terms and conditions page, or a dense news aggregator) to improve readability and primary content recognition.
Deliverables
- 1. Before & After: Screenshots showing the original and your redesigned page.
- 2. Wireframe: A grayscale wireframe of the new layout focusing purely on placement and structure.
- 3. Rationale: A detailed write-up explaining your use of font size, weight, line height, and line length (typographic scale) to guide the user’s eye.
Guidance & Key Principles:
💡 Typographic Scale: Use a clear type scale (e.g., major third) to establish a distinct hierarchy for titles, subtitles, and body copy.
💡 Whitespace (Proximity): Use generous whitespace to group related elements and separate unrelated blocks, making the page less intimidating.
💡 Scanning Patterns: Design the layout to optimize for F-pattern or Z-pattern reading, ensuring the most important elements are in key scanning areas.
3. The “Consistency & Affordance” Component Project 🖼️
This task requires you to create a small design system focusing on the consistency of key UI components and ensuring they *look* usable (affordance).
Project Goal
Design a family of 5 core UI components (Button, Input Field, Card, Modal, and Toggle Switch) across three different states (Default, Hover, Disabled) and one variation (Primary/Secondary).
Deliverables
- 1. Component Library: A file (Figma/Sketch) containing all 30 variations (5 components x 3 states x 2 variations).
- 2. Style Guide Snippet: Documentation defining the border radius, shadow depth, padding, and font used for the components.
- 3. Demonstration Screen: A simple application screen using only your newly created components to demonstrate consistency.
Guidance & Key Principles:
💡 Affordance: Ensure buttons look clickable (e.g., shadow, color) and input fields look writable (e.g., border, placeholder).
💡 Consistency (Repetition): Use the exact same padding, corner radius, and font family across all components to establish a predictable system.
4. The “Alignment & Grid Systems” Layout Project 📐
This project focuses on the precise application of grid systems and layout principles to create professional, scalable designs.
Project Goal
Redesign the main landing page for a fictional SaaS product using a strict 12-column grid system, ensuring perfect vertical and horizontal alignment across all elements.
Deliverables
- 1. Desktop Mockup (12-Column): A high-fidelity screen with the 12-column grid overlay visible.
- 2. Mobile Mockup (4-Column): The same content organized using a responsive 4-column grid.
- 3. Grid Documentation: Explain why you chose your column width, gutter size, and the baseline grid (vertical rhythm) you used for text alignment.
Guidance & Key Principles:
💡 Grid Discipline: Use the grid for every layout decision. Show how your margins, cards, and image placements align perfectly to the column boundaries.
💡 Rhythm & Flow: Use consistent vertical spacing (e.g., always multiples of 8px) to create a visual rhythm down the page.
5. The “Visual Metaphor & Imagery” Branding Project 📸
This creative project tests your ability to select and manipulate imagery and graphical elements to establish a cohesive and intentional visual metaphor.
Project Goal
Create a mood board and three hero sections for a new brand (e.g., a sustainable coffee delivery service, a personal finance app, or a smart home device) where the visual style, photo choices, and graphics consistently convey a single, specific brand personality (e.g., Trustworthy, Playful, or Minimalist).
Deliverables
- 1. Mood Board: A collection of 10-15 images, colors, and textures that define the brand’s look and feel.
- 2. Three Hero Sections: Full-screen mockups demonstrating how the imagery, iconography, and color scheme are applied consistently across different promotional messages.
- 3. Brand Rationale: Explain the chosen visual metaphor (e.g., “The brand represents growth,” so you used upward lines, natural textures, and light green accents).
Guidance & Key Principles:
💡 Visual Metaphor: Ensure every image and graphic reinforces the brand’s core message. Avoid generic stock photos.
💡 Image Cropping: Demonstrate an understanding of the Rule of Thirds or effective focal points when cropping hero images to maximize visual impact.
Second Set: 5 Portfolio Project
These projects are designed for learners who have completed Course 1.1 — Design Fundamentals & Visual Principles. Each project applies real-world scenarios and can be showcased in a portfolio or interview.
1. Redesign a News Article Page
Goal: Apply hierarchy, typography, and white space to improve readability.
- Choose an existing cluttered news article page.
- Redesign the layout focusing on typography hierarchy (headings, subheadings, body text).
- Use white space strategically to reduce visual noise.
- Ensure contrast ratios meet accessibility standards.
Deliverable: A redesigned article mockup (Figma/Sketch) with annotations explaining design choices.
2. Mobile App Onboarding Screens
Goal: Demonstrate visual consistency, color systems, and alignment.
- Design a 3–4 screen onboarding flow for a fictional app (e.g., fitness tracker).
- Apply a consistent color palette and type scale.
- Use grid systems (8px spacing) for alignment and balance.
- Highlight visual rhythm with icons, illustrations, and text placement.
Deliverable: A clickable prototype showing the onboarding flow.
3. Accessible Form Design
Goal: Apply accessibility principles (A11y) to form elements.
- Design a sign-up form with fields for name, email, password, and preferences.
- Ensure labels are clear and properly associated with inputs.
- Provide error states with sufficient color contrast and text feedback.
- Use button hierarchy (primary vs. secondary actions).
Deliverable: A working HTML/CSS prototype with accessible markup.
4. Responsive Landing Page
Goal: Demonstrate responsive typography, layout, and visual balance.
- Create a landing page for a fictional product (e.g., eco-friendly water bottle).
- Use a responsive type scale that adapts across devices.
- Apply F-pattern or Z-pattern layout principles for content flow.
- Test spacing and alignment using the 8px grid system.
Deliverable: A responsive HTML/CSS landing page hosted on GitHub Pages or CodePen.
5. Design Tokens Starter System
Goal: Show understanding of scalable design systems.
- Create a design tokens file (colors, typography, spacing, shadows).
- Apply tokens consistently across a small UI kit (buttons, inputs, cards).
- Document how tokens improve consistency and scalability.
- Show how tokens can be updated to re-theme the UI quickly.
Deliverable: A documented design tokens file with a mini component library.