Learner Profile
1A. Type Scale
Create a type scale for your project. Start from body size (16–18px) and define at least 6 steps.
1B. Pairing Rationale
Select up to two type families and explain why they fit your product.
1C. Readability Checks
- Line length is ~60–80 characters for body text
- Heading spacing creates clear grouping
- Emphasis uses weight/size instead of caps
2A. 5-Color Palette
2B. Color Usage Notes
2C. Contrast Checks
Record your contrast test results (AA targets: 4.5:1 for body; 3:1 for large text).
3A. Spacing System
Define your 4/8px spacing tokens (example: 4, 8, 12, 16, 24, 32, 48).
3B. Grid Definition
3C. Before/After Notes
4A. Hierarchy Plan
Define how your design communicates priority using size, weight, position, and contrast.
4B. Hero Makeover (Notes)
4C. Microcopy
5A. Quick Checks
- Contrast meets AA (4.5:1 body; 3:1 large)
- Keyboard focus visible and logical
- Images with alt text (meaningful ones)
- Headings in order (h1–h4)
- Motion respects reduced-motion preferences
5B. Accessibility Notes
Portfolio Project — “Learn It” Mini-site (3 screens)
Deliverables: design file + PNG mockups + 200-word rationale
Rationale (≈200 words)
Export Tip: Include both light and dark previews if your color palette supports it.
Scoring Rubric (100 pts)
| Criterion | Description | Score |
|---|---|---|
| Typography (30) | Clear scale; readable body; rational pairing; consistent spacing. | |
| Color (25) | Meaningful roles; consistent use; AA contrast met for text & key UI. | |
| Layout (25) | Grid alignment; grouping; white space; responsive thinking. | |
| Accessibility (20) | Headings, labels, focus, alt text; no color-only cues. | |
| Total |
Submission Checklist
- Figma/XD file included
- PNG mockups (Home, Course Detail, Sign-up)
- Rationale (~200 words)
- Accessibility checklist completed
- Versioned files (v1, v2…)