8.6 KiB

Raw Blame History

Tutorial 15: Create Your Visuals

Hands-on guide to generating and refining visual designs

Overview

This tutorial walks you through generating visual prototypes from your specifications.

Time: 40-50 minutes Prerequisites: Working prototypes (Module 14), Components documented (Module 12) Agent: Freya What you'll create: Visual prototypes for your key pages

Before You Start

You'll need:

Your page specifications
Your component documentation
Design tokens (if using Design System Mode 2-4)
Access to Figma or browser preview

Freya will help you:

Generate initial visuals
Review against specifications
Identify refinements needed
Ensure accessibility compliance

Step 1: Choose Your First Page (2 min)

Start with a key page:

You say:

"Let's create visuals for the signup form (P02) from S01-User-Registration. Here's my specification."

Share your specification with Freya.

Freya acknowledges:

"I have your signup form specification. Let's generate a visual prototype and refine it."

Step 2: Define Visual Requirements (3 min)

Establish design tokens:

Freya asks:

"What are your visual requirements? Font family, primary color, and base sizing?"

You respond:

"Inter font, primary color #0066FF, 16px base, white background with light gray accents (#F9FAFB)."

Freya notes:

Visual tokens:
- Font: Inter
- Primary: #0066FF
- Background: #FFFFFF
- Accent/muted: #F9FAFB
- Text: #111827
- Error: #DC2626
- Base size: 16px
- Spacing scale: 8px increments

Step 3: Generate Initial Visual (5 min)

Freya generates prototype:

"Generating signup form prototype based on your specification..."

Freya produces:

<!-- Signup Form Prototype -->
<div style="max-width: 400px; margin: 0 auto; padding: 24px; font-family: Inter, sans-serif;">
  <h1 style="font-size: 24px; font-weight: 600; margin-bottom: 8px;">
    Start in 2 minutes
  </h1>
  <p style="color: #6B7280; margin-bottom: 24px;">
    No credit card required. Cancel anytime.
  </p>

  <form>
    <div style="margin-bottom: 16px;">
      <label style="display: block; margin-bottom: 4px;">Email</label>
      <input type="email" placeholder="you@example.com"
             style="width: 100%; padding: 12px; border: 1px solid #D1D5DB; border-radius: 6px;">
    </div>

    <div style="margin-bottom: 24px;">
      <label style="display: block; margin-bottom: 4px;">Password</label>
      <input type="password"
             style="width: 100%; padding: 12px; border: 1px solid #D1D5DB; border-radius: 6px;">
      <span style="color: #6B7280; font-size: 14px;">At least 8 characters</span>
    </div>

    <button style="width: 100%; padding: 14px; background: #0066FF; color: white; border: none; border-radius: 6px; font-size: 16px; font-weight: 500; cursor: pointer;">
      Create Free Account
    </button>
  </form>

  <p style="margin-top: 16px; font-size: 14px; color: #6B7280; text-align: center;">
    By continuing, you agree to our <a href="#">Terms</a> and <a href="#">Privacy Policy</a>
  </p>

  <p style="margin-top: 24px; text-align: center;">
    Already have an account? <a href="#">Log in</a>
  </p>
</div>

"Preview this in your browser and let me know what needs adjustment."

Step 4: Review Against Specification (5 min)

Compare visual to spec:

Freya:

"Let's verify the visual matches your specification. Checking each element..."

Checklist:

Element	Spec	Visual	Status
Headline	"Start in 2 minutes"	✓	Match
Subheadline	"No credit card required"	✓	Match
Email field	Required, placeholder	✓	Match
Password field	8+ chars, helper text	✓	Match
Submit button	"Create Free Account"	✓	Match
Terms link	Present	✓	Match
Login link	Present	✓	Match

Identify gaps:

Freya:

"I notice a few things:

Password show/hide toggle is missing from the visual

Strength indicator not shown

Error states not visualized yet

Should we add these?"

You respond:

"Yes, add the show/hide toggle. Skip strength indicator for MVP. We need error states too."

Step 5: Refine the Visual (10 min)

Add missing elements:

Freya updates:

"Adding password toggle and generating error states..."

Password field with toggle:

<div style="position: relative;">
  <input type="password" style="...">
  <button type="button" style="position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer;">
    👁️ <!-- Eye icon -->
  </button>
</div>

Error state:

<div style="margin-bottom: 16px;">
  <label style="display: block; margin-bottom: 4px;">Email</label>
  <input type="email"
         style="... border-color: #DC2626;">
  <span style="color: #DC2626; font-size: 14px;">
    Please enter a valid email
  </span>
</div>

Design all states:

Default (empty form)
Filling (content entered)
Error (validation failed)
Submitting (loading state)
Success (before redirect)

Step 6: Check Accessibility (5 min)

Verify contrast and sizing:

Freya:

"Running accessibility checks..."

Results:

Check	Result
Button text contrast	8.6:1 ✓ Pass
Input text contrast	13.4:1 ✓ Pass
Helper text contrast	4.8:1 ✓ Pass
Error text contrast	5.3:1 ✓ Pass
Focus visible	⚠️ Need to add
Touch targets	✓ 44px+

Add focus states:

Freya:

"Adding focus styles for keyboard navigation..."

input:focus {
  outline: 2px solid #0066FF;
  outline-offset: 2px;
}

button:focus {
  outline: 2px solid #0066FF;
  outline-offset: 2px;
}

Step 7: Generate Responsive Variations (5 min)

Create tablet/desktop versions:

Freya:

"Your base is mobile-first. For larger screens, do you want any layout changes?"

You respond:

"Center the form on desktop with max-width 400px. Add some padding around it."

Freya generates:

@media (min-width: 768px) {
  .signup-container {
    max-width: 400px;
    margin: 64px auto;
    padding: 32px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  }
}

Step 8: Save and Document (5 min)

Save the visual prototype:

Options:

HTML file — Save in scenario folder
Figma import — Use html.to.design
Screenshots — Capture each state

C-UX-Scenarios/
└── S01-User-Registration/
    ├── P02-signup-form/
    │   ├── specification.md
    │   ├── visual-prototype.html
    │   └── states/
    │       ├── default.png
    │       ├── error.png
    │       ├── loading.png
    │       └── success.png

Document visual decisions:

## Visual Notes

### Design Tokens Applied
- Primary button: #0066FF
- Error: #DC2626
- Text: #111827
- Muted text: #6B7280

### Deviations from Spec
- Strength indicator removed (MVP scope)
- Added subtle shadow on desktop

### Accessibility
- All contrast ratios pass WCAG AA
- Focus states visible
- Touch targets 44px+

Step 9: Move to Next Page (Optional)

Repeat for remaining pages:

Freya:

"Signup form visual is complete. The next pages in S01 are:

P01-landing-page

P03-welcome-screen

Which would you like to visualize next?"

Continue the process for each page in your scenarios.

What You've Created

For each page:

Visual prototype — Working HTML/CSS
State screenshots — All states visualized
Responsive variations — Mobile + desktop
Accessibility verified — Contrast, focus, targets

Ready for:

Stakeholder review
Usability testing
Developer handoff
Design delivery

Tips for Success

DO:

Start with specification, not visuals
Check against spec after every generation
Design all states, not just default
Verify accessibility before approving
Document deviations

DON'T:

Skip error states
Ignore responsive behavior
Approve without contrast check
Leave spec-visual mismatches

You've Completed Module 15!

Your specifications are now visible. You have:

Working prototypes
All states designed
Accessibility verified
Responsive behavior defined

Next Module

Module 16: Design Delivery →

Package and deliver your design.

← Back to Lesson 2 | Back to Module Overview

Part of Module 15: Visual Design

8.6 KiB Raw Blame History

Tutorial 15: Create Your Visuals

Overview

Before You Start

Step 1: Choose Your First Page (2 min)

Start with a key page:

Step 2: Define Visual Requirements (3 min)

Establish design tokens:

Step 3: Generate Initial Visual (5 min)

Freya generates prototype:

Step 4: Review Against Specification (5 min)

Compare visual to spec:

Identify gaps:

Step 5: Refine the Visual (10 min)

Add missing elements:

Design all states:

Step 6: Check Accessibility (5 min)

Verify contrast and sizing:

Add focus states:

Step 7: Generate Responsive Variations (5 min)

Create tablet/desktop versions:

Step 8: Save and Document (5 min)

Save the visual prototype:

Document visual decisions:

Step 9: Move to Next Page (Optional)

Repeat for remaining pages:

What You've Created

For each page:

Ready for:

Tips for Success

You've Completed Module 15!

Next Module

8.6 KiB

Raw Blame History