Layout & Composition
Layout is the skeleton of your design. Learn how to describe spatial relationships, alignment, and information flow to guide your users through the experience.
Visual Blueprints
The Z-Pattern
Best for landing pages with a single CTA. Leads the eye from Logo → Login → Hero → Main Action.
The F-Pattern
Best for content-heavy pages like Blogs or Dashboards. Users scan horizontally then down the left.
The Holy Grail
Classic SaaS layout: Header + Sidebar + Main Content + Footer. Maximum utility and navigation.
Grid Prompting
"Use a strict 12-column grid system. Feature cards should span 4 columns each, with a 2-column offset on the left."
Flexbox Prompting
"Center all elements vertically and horizontally. Space items out evenly with 'space-between' logic."
Pro Layout Phrases
Whitespace
Ask for "Generous negative space" or "Airy breathable layout".
Containment
Use "Max-width containers" to prevent text from stretching too wide.
Z-Indexing
Prompt for "Layered overlapping elements" to add depth.
Alignment
Specify "Perfectly flush center aligned" or "Hard left anchored".
Responsiveness
Ask for "Stack categories vertically on mobile".
Visual Weight
Prompt to "Make the primary CTA much larger than surrounding text".