2.6 KiB
2.6 KiB
Flow C: ASCII Layout
Activates when: User chooses to create an ASCII layout
Introduction
Let's create a simple ASCII layout together.
⚠️ Note: ASCII is a last resort - sketches are much better for capturing design intent!
We'll create a basic box-and-text layout to show structure.
Gather Sections
What are the main sections from top to bottom?
Example:
- Header
- Hero
- Features (3 columns)
- CTA
- Footer
List sections:
Store sections_for_ascii
Generate ASCII
Generate ASCII layout:┌─────────────────────────────────────────┐
│ [HEADER] │
│ Logo | Nav | Contact │
└─────────────────────────────────────────┘
┌─────────────────────────────────────────┐
│ │
│ [HERO SECTION] │
│ │
│ Headline Goes Here │
│ Subheadline text here │
│ │
│ [CTA Button] │
│ │
└─────────────────────────────────────────┘
┌───────────┬───────────┬───────────┐
│ │ │ │
│ [Feature] │ [Feature] │ [Feature] │
│ 1 │ 2 │ 3 │
│ │ │ │
│ Icon │ Icon │ Icon │
│ Text │ Text │ Text │
│ │ │ │
└───────────┴───────────┴───────────┘
... (for each section)
Save as conceptual specification with ASCII visualization
Completion
✅ ASCII layout created!
⚠️ Remember: This is a rough structural guide.
Recommended next steps:
- Use this ASCII as a reference
- Create a proper sketch/wireframe
- Upload and run Page Process Workshop
ASCII is helpful for structure, but lacks:
- Visual hierarchy
- Spacing and proportions
- Typography details
- Color and visual design
- Actual content flow
Ready to move forward?