PromptVisual design
Visual Hierarchy Design
Design effective visual hierarchy for layouts to guide user attention and improve readability.
Share
Actions
Tags
visual-hierarchygraphic-designlayouttypographycomposition
Prompt
Design the visual hierarchy for [page/layout]. Include:
1. Content Priority
- Primary content (most important)
- Secondary content
- Tertiary content
- Call-to-action placement
2. Visual Weight
- Size relationships
- Color contrast
- Typography scale
- White space usage
3. Layout Structure
- Grid system
- Content zones
- Alignment principles
- Proximity grouping
4. Typography Hierarchy
- Heading sizes (H1-H6)
- Body text sizes
- Emphasis techniques
- Line length and spacing
5. Color and Contrast
- Primary color usage
- Accent color placement
- Background colors
- Text contrast ratios
6. Visual Flow
- Eye movement patterns
- Scanning paths
- Focal points
- Content grouping
7. Responsive Considerations
- Mobile hierarchy
- Tablet hierarchy
- Desktop hierarchy
- Breakpoint adjustments
Format as a visual hierarchy specification with specific measurements and rationale.How to use
- 1Replace [page/layout] with your specific page (e.g., "landing page hero section" or "dashboard main content area")
- 2Add context before the prompt: Describe the page purpose, key content, and user goals. Example: "This is a landing page. Key content: Headline, value proposition, CTA button, feature list. Goal: Get users to sign up."
- 3If you have existing designs: Upload screenshots or describe current layout. Say "Improve the visual hierarchy of this layout: [describe or paste screenshot]"
- 4If you have content priorities: List what's most important. Say "Priority 1: Sign up CTA. Priority 2: Value proposition. Priority 3: Feature list."
- 5Paste the modified prompt into your preferred AI tool, like ChatGPT or Claude (preferably with vision if using screenshots)
- 6Review the hierarchy spec: Check content priority, visual weight, and layout structure
- 7Ask for alternatives: Request "Alternative layout approaches" or "Mobile-first hierarchy version"
- 8Apply to your designs: Use the spec to guide your Figma designs or code implementation
Pro Tips
- • Include layout screenshots: Upload current layouts for AI to analyze and suggest improvements
- • Specify content priorities: Clearly rank content importance so AI creates appropriate hierarchy
- • Request specific measurements: Ask "Suggest exact font sizes for H1, H2, body text" for actionable specs
- • For responsive design: Mention "Design hierarchy for mobile first, then scale to desktop"
- • Test hierarchy: After implementing, validate that user attention flows through your intended path
- • To explore three layout directions before Figma, use UI Layout & Composition Explorer; to critique an existing screen from a written description, use Visual Hierarchy Audit.
Related Prompts
Visual design
UI Component Specification
Generate a detailed UI component specification with states, variants, and interaction patterns.
uicomponentsspecification
Branding
Brand Identity Design Brief
Create a comprehensive brand identity design brief with visual guidelines and brand personality.
brandinggraphic-designvisual-identity
Branding
Brand Visual Language Generator
Turn a brand brief into digital-first visual DNA: personality spectrums, color and type direction, imagery, and what to avoid before pixels.
visual-designbrandingbrand-guidelines
Visual design
Design System Component Visual Spec Writer
Developer-friendly visual specs: anatomy, tokenized properties per variant/state, spacing, responsive behavior, and accessibility for one component cluster.
visual-designdesign-systemcomponents
New prompts & templates by email
Weekly copy-paste prompts, pattern notes, and AI UX resources on Substack - no spam, unsubscribe anytime.