Quick Summary
Great design references help your team understand your vision and deliver better results faster. Learn what types of references to provide, how to share them effectively, and best practices for design communication.
What You'll Learn
- Types of design references to include
- Using inspiration sites effectively
- Providing brand guidelines
- Sharing color codes and fonts
- Creating and sharing wireframes
- Best practices for design communication
Why Design References Matter
Benefits of Good References
- Clearer Vision: Team understands exactly what you want
- Faster Design: Less guesswork, more confidence
- Better Results: Designs match your expectations
- Fewer Revisions: Get closer to final on first attempt
- Consistent Branding: Maintains brand identity
What Happens Without References
- Designer guesses your preferences
- Multiple revision rounds needed
- Mismatched expectations
- Longer turnaround time
- Frustration on both sides
Types of Design References
1. Inspiration Websites
What to Include:
- URLs of sites you like
- Specific elements to notice
- What you like about them
- What to avoid
How to Share:
"I love the hero section on https://stripe.com - specifically the clean layout, bold typography, and subtle animations. I want something similar but with our brand colors."
Good Sources:
- Awwwards.com - Award-winning designs
- Dribbble.com - Design inspiration
- Behance.net - Creative portfolios
- SiteInspire.com - Web design showcase
- Land-book.com - Landing page examples
2. Screenshots and Mockups
What to Include:
- Screenshots of designs you like
- Annotated images with notes
- Before/after examples
- Competitor websites
How to Annotate:
- Use arrows to point to specific elements
- Add text boxes with explanations
- Highlight areas of interest
- Number multiple points
Tools for Annotation:
- Skitch (Mac/iOS)
- Snagit (Windows/Mac)
- CloudApp
- Markup (built into Mac)
- Windows Snipping Tool
3. Brand Guidelines
What to Include:
- Logo files (SVG, PNG with transparency)
- Color palette with hex codes
- Typography (font names and weights)
- Brand voice and tone
- Usage guidelines
- Do's and don'ts
If You Have a Brand Guide:
- Share the complete PDF
- Highlight relevant sections
- Note any exceptions for this project
If You Don't Have a Brand Guide:
- Share logo files
- List brand colors (hex codes)
- Specify fonts used
- Describe brand personality
4. Design Files
Figma/Adobe XD (Preferred):
- Share view-only link
- Or give editor access if collaboration needed
- Include all artboards and components
- Add comments/notes in file
Photoshop/Illustrator:
- Export as PSD or AI files
- Include all layers (don't flatten)
- Package fonts if custom
- Include linked images
Sketch:
- Export as Sketch file
- Or use Sketch Cloud sharing
- Include symbols and styles
5. Wireframes
What Wireframes Show:
- Page layout and structure
- Content hierarchy
- Element placement
- User flow
- Functionality
Wireframe Tools:
- Figma (free)
- Balsamiq
- Whimsical
- Miro
- Even hand-drawn sketches work!
When to Use Wireframes:
- Complex layouts
- New page structures
- Custom functionality
- Multi-step processes
6. Style Tiles and Mood Boards
Style Tiles Include:
- Color swatches
- Typography samples
- Button styles
- Image treatment
- Overall aesthetic
Mood Boards Include:
- Images that convey feeling
- Color inspiration
- Texture and patterns
- Overall vibe
Tools:
- Pinterest boards
- Figma/Adobe XD
- Milanote
- Canva
Providing Brand Assets
Logo Files
What to Provide:
- SVG: Vector format (preferred for web)
- PNG: With transparent background
- Multiple Versions: Full logo, icon only, horizontal, vertical
- Color Variations: Full color, white, black
File Naming:
- logo-full-color.svg
- logo-white.svg
- logo-icon.svg
- logo-horizontal.png
Color Palette
Provide Hex Codes:
- Primary: #3B82F6
- Secondary: #10B981
- Accent: #F59E0B
- Text: #1F2937
- Background: #FFFFFF
- Gray: #6B7280
Color Usage:
- Specify which colors for what (buttons, headings, etc.)
- Note any color combinations to avoid
- Provide accessibility requirements (contrast ratios)
Typography
Font Information:
- Headings: Montserrat Bold (700)
- Body: Inter Regular (400)
- Buttons: Inter Semi-Bold (600)
Font Sources:
- Google Fonts (free, easy to implement)
- Adobe Fonts (if you have subscription)
- Custom fonts (provide font files)
Font Specifications:
- Font sizes (H1: 48px, H2: 36px, Body: 16px)
- Line heights (1.5 for body, 1.2 for headings)
- Letter spacing if specific
Using Inspiration Sites Effectively
How to Find Inspiration
Design Galleries:
- Awwwards.com - Award-winning sites
- Dribbble.com - Design shots
- Behance.net - Full projects
- SiteInspire.com - Categorized by style
- Land-book.com - Landing pages
- Webflow Showcase - Webflow sites
Competitor Research:
- Look at direct competitors
- Note what works well
- Identify gaps or opportunities
- Don't copy, but learn
Industry Leaders:
- Top companies in your industry
- How they present themselves
- Design trends in your space
How to Share Inspiration
Be Specific:
- ❌ "I like this site"
- ✅ "I like the hero section animation and color scheme on this site"
Explain Why:
- ❌ "Use this as reference"
- ✅ "I love how this site uses white space to create a clean, modern feel"
Note What to Avoid:
- "I like the layout but not the colors"
- "Similar structure but more minimalist"
- "This style but for our industry"
Creating a Reference Collection
Pinterest Board:
- Create a private board
- Pin inspiration images
- Add notes to each pin
- Share board link with team
Figma File:
- Create new Figma file
- Add screenshots of inspiration
- Annotate with notes
- Share view link
Google Doc/Slides:
- Create document
- Add images with descriptions
- Organize by category
- Share with team
Design Reference Best Practices
Do's
✅ Provide Multiple Examples: 3-5 references show patterns
✅ Be Specific: Point out exact elements you like
✅ Explain Why: Help team understand your taste
✅ Include Brand Assets: Logo, colors, fonts
✅ Show What to Avoid: Examples of what you don't like
✅ Organize References: Group by type or section
✅ Update as Needed: Add more references if helpful
Don'ts
❌ Don't Say "Make it Pop": Too vague, use specific terms
❌ Don't Provide Conflicting Styles: References should align
❌ Don't Expect Exact Copies: Inspiration, not duplication
❌ Don't Overwhelm: Too many references confuse
❌ Don't Skip Brand Guidelines: Essential for consistency
❌ Don't Assume Designer Knows: Be explicit
Design Communication Tips
Describing Visual Preferences
Style Descriptors:
- Modern, minimalist, clean
- Bold, vibrant, energetic
- Professional, corporate, trustworthy
- Playful, fun, creative
- Elegant, sophisticated, luxury
- Rustic, organic, natural
Layout Preferences:
- Spacious with lots of white space
- Dense with lots of information
- Grid-based and structured
- Asymmetric and dynamic
- Centered and balanced
Color Preferences:
- Bright and colorful
- Muted and subtle
- Monochromatic
- High contrast
- Pastel tones
Giving Design Feedback
Be Constructive:
- ❌ "I don't like it"
- ✅ "The layout is great, but can we try a different color scheme?"
Be Specific:
- ❌ "Something feels off"
- ✅ "The heading feels too small compared to the image"
Explain Impact:
- ❌ "Change the button"
- ✅ "The button doesn't stand out enough - users might miss it"
Platform-Specific References
WordPress Sites
- Note which page builder (Elementor, Divi, etc.)
- Share theme demo if using specific theme
- Provide plugin examples if needed
- Show similar WordPress sites
Webflow Sites
- Share Webflow showcase examples
- Note interactions and animations
- Provide CMS structure if applicable
- Show similar Webflow sites
Shopify Stores
- Share similar Shopify stores
- Note product page layouts
- Show collection page examples
- Provide checkout flow references
Landing Pages
- Share high-converting landing pages
- Note CTA placement and style
- Show form designs
- Provide social proof examples
Design Reference Checklist
Before submitting your request, ensure you've included:
✅ Inspiration Sites: 3-5 URLs with specific notes
✅ Logo Files: SVG and PNG versions
✅ Color Codes: Hex values for all brand colors
✅ Fonts: Names, weights, and sources
✅ Screenshots: Annotated with explanations
✅ Brand Guidelines: If available
✅ Design Files: Figma links or PSD files if applicable
✅ Style Description: Adjectives describing desired aesthetic
✅ What to Avoid: Examples of styles you don't like
✅ Target Audience: Who the design is for
Common Questions
Q: What if I don't have brand guidelines?
A: That's okay! Just provide your logo, preferred colors (hex codes), and fonts. Describe your brand personality.
Q: Can I provide too many references?
A: Yes. 3-5 well-chosen references are better than 20 random ones. Quality over quantity.
Q: What if I'm not sure what style I want?
A: Share a variety of examples and let your designer suggest options. They can create 2-3 style directions.
Q: Should I provide mobile design references too?
A: Yes, if you have specific mobile preferences. Otherwise, trust your designer for responsive design.
Q: What if the inspiration site is in a different industry?
A: That's fine! Good design transcends industries. Just explain what elements to adapt.
Q: Can I share competitor websites as references?
A: Yes, but be clear you want inspiration, not copying. Note what works and what to improve.
Q: What if I only have hand-drawn sketches?
A: Perfect! Sketches are great for showing layout ideas. Take clear photos and upload them.
Q: How do I find hex codes for colors I like?
A: Use browser extensions like ColorZilla or online tools like imagecolorpicker.com.
Need More Help?
Contact support@thrivepix.com or message your project manager