AI Skill Report Card
SEO Informed Design
SEO-Informed Design
Quick Start15 / 15
Before any wireframing begins, complete this SEO brief:
SEO Brief Checklist:
- Primary keyword identified and search volume verified
- 3-5 secondary keywords mapped to page sections
- H1/H2/H3 hierarchy planned (max 1 H1, logical H2 flow)
- Above-fold content prioritizes target query intent
- Internal linking opportunities identified for navigation
- Image naming convention established for all assets
Recommendation▾
Add concrete input/output examples showing before/after design decisions (e.g., 'Bad H1: Creative Solutions' vs 'Good H1: Digital Marketing Consultant Denver')
Workflow14 / 15
Phase 1: SEO Foundation
-
Keyword Research First
- Identify primary keyword (main page focus)
- Find 3-5 secondary keywords for supporting sections
- Verify search volume and competition level
-
Page Hierarchy Mapping
- Map primary keyword to H1 (page title)
- Assign secondary keywords to H2 sections
- Plan H3 subsections for content depth
Phase 2: Design Integration
-
Visual Hierarchy = Semantic Hierarchy
- Design H1 as most prominent visual element
- Scale H2s proportionally smaller but distinct
- Ensure heading styles reflect SEO structure
-
Above-Fold Prioritization
- Place primary keyword content in hero section
- Address target query intent within first 600px
- Design CTA around primary search intent
-
Navigation Design with SEO
- Embed internal linking strategy in menu structure
- Use keyword-rich anchor text in navigation
- Plan breadcrumbs for category pages
-
Asset Preparation Standards
- Establish image naming:
target-keyword-descriptive-name.jpg - Plan alt text templates for each image type
- Include SEO requirements in asset delivery specs
- Establish image naming:
Recommendation▾
Include specific tools or metrics in the workflow (e.g., 'Use Semrush/Ahrefs for keyword volume', 'Target 1-2% keyword density')
Examples17 / 20
Example 1: E-commerce Product Page Input: Designing page for "wireless noise canceling headphones" Output:
- H1: "Wireless Noise Canceling Headphones - [Brand]"
- H2s: "Key Features", "Sound Quality", "Battery Life", "Customer Reviews"
- Above-fold: Hero image + primary keyword in headline + key differentiators
- Navigation: Link to "Audio Accessories" and "Headphone Buying Guide"
- Images:
wireless-noise-canceling-headphones-hero.jpg
Example 2: Service Landing Page Input: Designing for "digital marketing consultant" Output:
- H1: "Digital Marketing Consultant - Grow Your Business Online"
- H2s: "Services Offered", "Case Studies", "Pricing Packages", "Get Started"
- Above-fold: Value proposition addressing "hire digital marketing help" intent
- Navigation: Internal links to "SEO Services", "Social Media Marketing", "Content Strategy"
Recommendation▾
Provide a template or framework for the SEO brief rather than just a checklist
Best Practices
- Keyword Density in Design: Primary keyword appears in H1, first H2, and above-fold copy
- Mobile-First SEO: Ensure heading hierarchy works on mobile screens
- Loading Speed: Optimize image sizes during design phase, not after
- Schema Markup Planning: Design structured data elements (reviews, pricing, FAQs) into layout
- Local SEO Integration: Include location-based elements in design for local businesses
Common Pitfalls
- Don't keyword stuff headings - Keep them readable and natural
- Don't ignore search intent - Design for what users actually want when searching
- Don't treat images as afterthoughts - Poor alt text and naming kills SEO value
- Don't skip competitive analysis - Research what's ranking for your target keywords
- Don't forget about page speed - Heavy designs kill SEO performance regardless of keyword optimization
Progress Template:
- SEO brief completed
- Keyword hierarchy mapped
- Above-fold content planned
- Navigation structure defined
- Asset naming standards set
- Ready for wireframing