Layout Specification — Hwang Yoo-Yup Digital Legacy Platform
| Property | Value |
|---|---|
| 🏷️ Status | Complete |
| 📅 Project | Hwang Yoo-Yup · Responsive Website |
| 🎯 Type | Storyboard |
| 🔖 Scope | Grid System · Component Placement · Spacing · Interaction Thinking |
| 🌐 Stage | Structure becomes system — layout decisions are locked here |
Mid-fidelity wireframes translate structural decisions from lo-fi into a real layout system. This is where column grids, spacing rhythms, component types, and content proportions are defined. The shift from lo-fi to mid-fi is the shift from what exists to how it behaves — and where design thinking becomes demonstrably systematic.
⚠️ The core shift: Lo-fi asks “what goes here?” Mid-fi asks “how much space does it earn, and what does it do?” Every decision at this stage has a reason, and that reason connects back to the user.
All pages share a single governing grid. Consistency here is not aesthetic — it is structural. Users should never feel disoriented moving between pages.
| Property | Value |
|---|---|
| Columns | 12 |
| Margin | 80px |
| Gutter | 24px |
| Spacing Rhythm | 8 / 16 / 24 / 40px system |
The hero moves from a simple image-plus-title block (lo-fi) to a proportioned layout with defined column widths and typographic hierarchy.
| Element | Width |
|---|---|
| Artwork image | Full width or 10 columns centered |
| Title block | 8 columns |
| Subtitle | 8 columns |
| CTA buttons | 2 buttons inline |
Typographic Hierarchy: H1 — Exhibition Title → Subhead — Artist Line → CTAs below
Spacing between elements follows a consistent 24–32px vertical rhythm. Nothing floats arbitrarily.