Quick Summary

Thrivepix provides professional UI/UX design services in Figma, Adobe XD, and Sketch. Learn about design deliverables, the wireframing process, design revisions, and how designs are handed off to development.

What You'll Learn

• Design deliverables and formats
• Wireframing process
• Design revision workflow
• Design handoff to development
• Brand consistency guidelines
• Common design request examples

Design Deliverables

Design Tools We Use

Figma (Preferred):

• Cloud-based, easy sharing
• Real-time collaboration
• Component libraries
• Prototyping capabilities
• Developer handoff tools
• Free for viewing

Adobe XD:

• Professional design tool
• Prototyping features
• Design systems
• Developer handoff

Sketch:

• Mac-only design tool
• Popular for web design
• Plugin ecosystem
• Symbol libraries

What You'll Receive

Design Files:

• Figma link (view and comment)
• Or Adobe XD link
• Or Sketch file
• Organized layers and artboards
• Named components
• Design system/style guide

Exported Assets:

• Images (PNG, JPG, SVG)
• Icons (SVG)
• Logos (SVG, PNG)
• Graphics and illustrations
• Proper naming and organization

Design Specifications:

• Colors (hex codes)
• Fonts (names, weights, sizes)
• Spacing and padding
• Component states
• Responsive breakpoints

Design Process

Step 1: Discovery and Requirements

What We Need:

• Project goals and objectives
• Target audience
• Brand guidelines (if available)
• Content and copy
• Reference sites you like
• Technical constraints

Step 2: Wireframing (Optional)

Low-Fidelity Wireframes:

• Basic layout and structure
• Content hierarchy
• Navigation flow
• No colors or branding
• Focus on functionality

When to Use Wireframes:

• Complex layouts
• New page structures
• User flow planning
• Stakeholder alignment

Step 3: High-Fidelity Design

Visual Design:

• Full color and branding
• Typography and spacing
• Images and graphics
• Interactive elements
• Responsive layouts

Design Deliverables:

• Desktop design (1440px or 1920px)
• Tablet design (768px)
• Mobile design (375px)
• Component library
• Style guide

Step 4: Revisions

Revision Process:

• Review initial design
• Provide specific feedback
• Designer makes revisions
• Review again
• Approve when satisfied

Step 5: Handoff to Development

Developer Handoff:

• Design specs and measurements
• Color codes and fonts
• Exported assets
• Component documentation
• Interaction notes

Wireframing Process

What Are Wireframes?

Purpose:

• Plan layout and structure
• Define content hierarchy
• Map user flows
• Align on functionality
• Quick to create and iterate

What Wireframes Show:

• Page layout
• Content blocks
• Navigation
• Buttons and CTAs
• Form fields
• Image placeholders

What Wireframes Don't Show:

• Colors
• Fonts
• Images
• Branding
• Final styling

Wireframe Request Example

Title: Create Wireframes for E-commerce Site

Description:
Create wireframes for e-commerce website:

Pages Needed:
1. Homepage (hero, featured products, categories, testimonials)
2. Product listing (filters, product grid, sorting)
3. Product detail (images, description, add to cart, reviews)
4. Cart (product list, totals, checkout button)
5. Checkout (shipping, payment, review)

User Flow:
Homepage → Category → Product → Add to Cart → Checkout → Confirmation

Requirements:
- Mobile-first approach
- Simple, clean layout
- Focus on usability
- Include annotations

Reference: Similar flow to https://example.com
Deliverable: Figma file with wireframes

High-Fidelity Design

Design Request Components

What to Include in Request:

• Project type (website, landing page, app, etc.)
• Number of pages/screens
• Design style preferences
• Brand guidelines or assets
• Content and copy
• Reference designs
• Target audience

Design Style Preferences

Describe Your Style:

• Modern and minimalist
• Bold and colorful
• Professional and corporate
• Playful and creative
• Elegant and sophisticated
• Clean and simple

Provide Examples:

• 3-5 websites you like
• Explain what you like about each
• Note what to avoid

Design Request Example

Title: Design Landing Page in Figma

Description:
Design landing page for SaaS product launch:

Sections:
1. Hero (headline, subheadline, CTA, product screenshot)
2. Features (3 features with icons and descriptions)
3. How it works (3 steps with illustrations)
4. Testimonials (3 customer quotes with photos)
5. Pricing (3 tiers with features list)
6. FAQ (5 questions, accordion style)
7. Final CTA (headline, button)

Style:
- Modern, clean, professional
- Tech/SaaS aesthetic
- Lots of white space
- Bold typography
- Subtle animations (note in design)

Brand:
- Primary color: #3B82F6
- Secondary: #10B981
- Font: Inter
- Logo: See attached

Content: See attached Google Doc
References: https://stripe.com, https://linear.app
Deliverable: Figma file with desktop, tablet, mobile designs

Design Revisions

How Revisions Work

Unlimited Revisions:

• Request as many revisions as needed
• We iterate until you're satisfied
• No additional cost

Revision Process:

1. Designer shares initial design
2. You review and provide feedback
3. Designer makes revisions
4. You review revised design
5. Repeat until approved

Providing Design Feedback

Be Specific:

• ❌ "I don't like it"
• ✅ "Can we try a different color scheme? The blue feels too dark."

Reference Elements:

• ❌ "Change the header"
• ✅ "Make the header headline larger (current: 48px, try: 64px)"

Explain Why:

• ❌ "Move this section"
• ✅ "Move testimonials above pricing so users see social proof before pricing"

Use Figma Comments:

• Click on specific element
• Add comment with feedback
• Designer can respond
• Keeps feedback organized

Revision Request Example

Feedback on Landing Page Design:

Thanks for the initial design! Here are my revision requests:

1. Hero Section: Make headline larger (try 72px) and bolder (try font weight 700)
2. Features Section: Change icon color from blue to green (#10B981) to match secondary brand color
3. Testimonials: Add company logos below each testimonial
4. Pricing: Highlight middle tier (add "Most Popular" badge and different background color)
5. Overall: Increase spacing between sections (add 80px padding)

Everything else looks great! The color scheme and typography are perfect.

Design Handoff to Development

What's Included in Handoff

Design Files:

• Final Figma/XD/Sketch file
• Organized layers and artboards
• Named components
• Design system

Design Specifications:

• Colors (hex codes)
• Typography (fonts, sizes, weights, line heights)
• Spacing (margins, padding)
• Border radius
• Shadows and effects
• Component states (hover, active, disabled)

Exported Assets:

• Images (optimized for web)
• Icons (SVG format)
• Logos (multiple formats)
• Graphics and illustrations
• Organized in folders

Documentation:

• Component usage notes
• Interaction descriptions
• Responsive behavior notes
• Animation specifications

Figma Handoff Features

Inspect Mode:

• Developers can inspect designs
• See measurements and spacing
• Copy CSS code
• Export assets
• View component properties

Developer Mode (Figma):

• Optimized for developers
• Code snippets
• Asset export
• Measurement tools

Design to Development Workflow

1. Design Approved: You approve final design
2. Handoff Prepared: Designer prepares handoff package
3. Development Request: You submit development request
4. Developer Receives: Developer gets design files and specs
5. Development: Developer builds from design
6. Review: You review built site vs design
7. Adjustments: Any needed adjustments made

Brand Consistency

Maintaining Brand Identity

Brand Guidelines:

• Logo usage rules
• Color palette
• Typography system
• Image style
• Voice and tone
• Do's and don'ts

Design System:

• Component library
• Button styles
• Form elements
• Cards and containers
• Icons and graphics
• Spacing system

Providing Brand Assets

What to Provide:

• Logo files (SVG, PNG)
• Brand colors (hex codes)
• Fonts (names and files if custom)
• Brand guidelines PDF (if available)
• Existing designs to match
• Photography style examples

Brand Consistency Example

Brand Guidelines for Design:

Colors:
- Primary: #3B82F6 (use for CTAs, links)
- Secondary: #10B981 (use for success states, accents)
- Neutral: #6B7280 (use for body text)
- Background: #F9FAFB

Typography:
- Headings: Montserrat Bold (700)
- Body: Inter Regular (400)
- Buttons: Inter Semi-Bold (600)

Style:
- Modern, clean, professional
- Lots of white space
- Rounded corners (8px border radius)
- Subtle shadows
- Minimal, not cluttered

Photography:
- Bright, natural lighting
- Real people (not stock photos)
- Lifestyle shots
- Consistent color grading

Assets: See attached brand-guidelines.pdf and logo-files.zip

Common Design Requests

Website Design

Title: Design 5-Page Website in Figma

Pages: Homepage, About, Services, Portfolio, Contact
Style: Modern, minimalist, professional
Deliverables: Desktop, tablet, mobile designs
Brand: See attached guidelines
Content: See attached Google Doc
References: https://example1.com, https://example2.com

Landing Page Design

Title: Design Product Landing Page

Sections: Hero, features, how it works, testimonials, pricing, FAQ, CTA
Style: Bold, colorful, energetic
Deliverables: Desktop and mobile designs
Brand: See attached
References: https://example.com

App Design

Title: Design Mobile App Screens

Screens: Login, dashboard, profile, settings (10 screens total)
Platform: iOS
Style: Clean, modern, user-friendly
Deliverables: Figma file with all screens and components
References: Similar to Airbnb app

Email Template Design

Title: Design Email Newsletter Template

Type: Weekly newsletter
Sections: Header, hero, 3 articles, CTA, footer
Style: Match website design
Deliverables: Figma design and HTML email template
Brand: See attached

Design Best Practices

Before Requesting Design

Prepare:

• Write all content and copy
• Gather brand assets
• Collect reference designs
• Define target audience
• Set project goals

During Design Process

Communication:

• Respond to questions quickly
• Provide specific feedback
• Use Figma comments
• Be open to designer suggestions

After Design Completion

Review:

• Check all pages/screens
• Verify brand consistency
• Test responsive designs
• Approve when satisfied

Common Questions

Q: Which design tool do you recommend?
A: Figma. It's cloud-based, easy to share, and has great collaboration features.

Q: How many revisions can I request?
A: Unlimited revisions until you're satisfied.

Q: Can you match my existing website design?
A: Yes, we can design new pages to match your existing style.

Q: Do you provide source files?
A: Yes, you get the Figma/XD/Sketch file with all layers and components.

Q: Can you design and develop?
A: Yes! We can design in Figma, you approve, then we develop it.

Q: How long does design take?
A: Simple landing page: 2-3 days. Full website: 5-7 days. Depends on complexity.

Q: Do you do logo design?
A: We can create simple logos, but recommend a specialized logo designer for complex branding.

Q: Can you create design systems?
A: Yes, we can create component libraries and design systems in Figma.

Need More Help?

Contact support@thrivepix.com or message your project manager