217 lines
4.3 KiB
Markdown
217 lines
4.3 KiB
Markdown
# Module 15: Visual Design
|
|
|
|
## Lesson 1: Making It Visible
|
|
|
|
**From specification to visual reality**
|
|
|
|
---
|
|
|
|
## The Transition
|
|
|
|
You have specifications. Complete, detailed, unambiguous.
|
|
|
|
But they're not visible yet.
|
|
|
|
This is where specifications become something you can see, click, and experience.
|
|
|
|
---
|
|
|
|
## Why This Matters
|
|
|
|
### For You
|
|
|
|
You can validate your specifications visually. Does it actually look right? Does the hierarchy work? Does it feel good?
|
|
|
|
### For Stakeholders
|
|
|
|
They can see what's being built. Visual prototypes are easier to review than documents.
|
|
|
|
### For Developers
|
|
|
|
Visual references reduce ambiguity. Code follows the visual more precisely.
|
|
|
|
### For Users
|
|
|
|
You can test with real people. Visuals enable usability testing before development.
|
|
|
|
---
|
|
|
|
## The Visual Design Loop
|
|
|
|
```
|
|
Spec → Generate → Review → Refine → Generate → Approve
|
|
```
|
|
|
|
It's iterative. Your first visual is rarely final.
|
|
|
|
1. **Spec** — Start with your complete specification
|
|
2. **Generate** — Create a visual version
|
|
3. **Review** — Compare to specification
|
|
4. **Refine** — Adjust based on feedback
|
|
5. **Generate** — Create improved version
|
|
6. **Approve** — Lock in the final visual
|
|
|
|
---
|
|
|
|
## What You're Designing
|
|
|
|
For each page:
|
|
|
|
### Layout
|
|
|
|
Where elements are positioned. The spatial organization.
|
|
|
|
### Visual Hierarchy
|
|
|
|
What draws attention first, second, third. The flow of importance.
|
|
|
|
### Typography
|
|
|
|
Font choices, sizes, weights. The text treatment.
|
|
|
|
### Colors
|
|
|
|
From your palette or brand guidelines. The emotional impact.
|
|
|
|
### Spacing
|
|
|
|
Rhythm and breathing room. The visual cadence.
|
|
|
|
### States
|
|
|
|
Hover, active, error — all the behavioral states visualized.
|
|
|
|
---
|
|
|
|
## Design Tokens
|
|
|
|
If you're in Design System Mode 2-4, you're working with tokens:
|
|
|
|
```yaml
|
|
colors:
|
|
primary: "#0066FF"
|
|
primary-hover: "#0052CC"
|
|
secondary: "#6B7280"
|
|
error: "#DC2626"
|
|
success: "#16A34A"
|
|
|
|
typography:
|
|
heading-1: "Inter, 32px, 700"
|
|
heading-2: "Inter, 24px, 600"
|
|
body: "Inter, 16px, 400"
|
|
small: "Inter, 14px, 400"
|
|
|
|
spacing:
|
|
xs: "4px"
|
|
sm: "8px"
|
|
md: "16px"
|
|
lg: "24px"
|
|
xl: "32px"
|
|
```
|
|
|
|
Tokens ensure consistency. Every blue button uses the same blue.
|
|
|
|
---
|
|
|
|
## Tools for Visual Design
|
|
|
|
### AI Generation (Stitch, html.to.design)
|
|
|
|
Give your specification to AI. It generates HTML/CSS.
|
|
|
|
```
|
|
"Generate a signup form based on this spec. Use Inter font,
|
|
primary color #0066FF, 16px base font size."
|
|
```
|
|
|
|
Output: Working prototype in minutes.
|
|
|
|
### Figma
|
|
|
|
Refine AI output. Polish the details.
|
|
|
|
- Import from generated HTML
|
|
- Adjust spacing, colors, typography
|
|
- Create component variants
|
|
- Export assets for development
|
|
|
|
### Browser Preview
|
|
|
|
View your prototypes live. Click through. Test on devices.
|
|
|
|
---
|
|
|
|
## Entry Points
|
|
|
|
Multiple ways to start visual design:
|
|
|
|
| Starting Point | Approach |
|
|
|----------------|----------|
|
|
| Specification only | Generate with AI |
|
|
| Rough sketch | AI refines into visual |
|
|
| Inspiration image | AI extracts and applies style |
|
|
| Existing brand | Apply tokens to generated output |
|
|
|
|
You don't have to start from scratch. Build on what you have.
|
|
|
|
---
|
|
|
|
## The Match Test
|
|
|
|
Your visual must match your specification exactly.
|
|
|
|
If there's a difference:
|
|
- Update the specification to match the visual, OR
|
|
- Update the visual to match the specification
|
|
|
|
**Never leave mismatches.** They create ambiguity.
|
|
|
|
---
|
|
|
|
## Design All States
|
|
|
|
Don't just design the happy path:
|
|
|
|
- **Default** — Initial state
|
|
- **Loading** — While data loads
|
|
- **Empty** — When no content exists
|
|
- **Error** — When something fails
|
|
- **Success** — When action completes
|
|
- **Disabled** — When interaction is blocked
|
|
- **Hover/Active** — Interactive feedback
|
|
|
|
Each state needs a visual representation.
|
|
|
|
---
|
|
|
|
## Responsive Considerations
|
|
|
|
Design for your primary platform first.
|
|
|
|
**If mobile-first:**
|
|
- Start with mobile layout
|
|
- Elements stack vertically
|
|
- Touch targets 44px minimum
|
|
- Then adapt for tablet/desktop
|
|
|
|
**If desktop-first:**
|
|
- Start with desktop layout
|
|
- Multiple columns allowed
|
|
- Then simplify for smaller screens
|
|
|
|
---
|
|
|
|
## What's Next
|
|
|
|
In the next lesson, you'll learn specific techniques for generating and refining visuals — working with AI tools and maintaining consistency.
|
|
|
|
---
|
|
|
|
**[Continue to Lesson 2: Visual Design Techniques →](lesson-02-visual-techniques.md)**
|
|
|
|
---
|
|
|
|
[← Back to Module Overview](module-15-visual-design-overview.md)
|
|
|
|
*Part of Module 15: Visual Design*
|