Due Date: Tuesday, May 26 at 10:00am (Design Draft in Figma)
Critique: Wednesday, May 26 at 10:00am

About This Assignment

This project builds on your knowledge of HTML positioning, flexbox, CSS grid, and tables and forms. You'll apply these skills in a real-world context: designing a landing page that showcases a product or service and converts visitors into customers.

Key Focus Areas:

• Design-first workflow using Figma
• Responsive design principles
• Visual hierarchy and conversion optimization
• Professional design documentation

Design-First Workflow

Phase 1: Design (You are here)

1. Research landing page examples (see Resources below)
2. Choose your product/service
3. Design a Product Foundation and Mood and Vibes board (due May 21)
4. Design complete layout for desktop and mobile in Figma (due May 26)
5. Participate in critique session (May 26)

Objective

Design a conversion-focused landing page for one of your products or services. Your design should create a clear path to action while establishing a cohesive visual system.

Examples of products/services:

• Physical product (headphones, sneakers, coffee maker, skincare)
• Digital product (app, software, online course)
• Service (consulting, design agency, fitness coaching)
• Event (conference, workshop, concert)

Deliverable

A link to your Figma file containing the following in pages or labeled in an infinite canvas:

• Style guide (typography, colors, spacing system)
• Complete desktop design (1440px width)
• Mobile responsive version (375-425px width)
• Hover/interaction states for key elements
• Form validation states (default, focus, error, success) - just examples
• Animation annotations (see Animation section below)

Required Design Elements

1. Hero Section

The first thing visitors see—make it count.

Must include:

• Impactful headline communicating your product's unique value
• Supporting subheading reinforcing key benefits
• Primary call-to-action button
• Background image/illustration treatment
• Clear visual hierarchy

2. Navigation

Must include:

• Fixed-position header with logo/brand mark
• Minimum 3 navigation links
• Mobile-responsive menu treatment (hamburger menu acceptable)
• Design hover/active states

Common nav links: Home, Features, Pricing, Contact, About

3. Video/Media Section

Must include:

• Video placeholder in your design showing thumbnail/preview image
• Clear dimensions and aspect ratio (16:9 recommended: 560x315, 640x360, or 1280x720)
• Consider placement: hero section, dedicated section, or within features area
• Mobile responsive treatment (how video adapts on small screens)

Design considerations:

• Use a frame in Figma with an image placeholder (screenshot from the video)
• Show play button overlay if desired
• Consider surrounding content (heading, caption, CTA)
• Plan for responsive scaling (video scales to container width, maintains aspect ratio)

4. Features Section

Showcase what makes your product valuable.

Must include:

• Minimum 3 key features/benefits
• Icon or image for each feature
• Consistent card layout (grid or flexbox pattern)
• Clear typography hierarchy

See student examples for inspiration.

5. Data Table (In-Page)

Choose ONE table type that fits your product:

• Product Specifications: Display technical details, dimensions, or capabilities
• Feature Comparison: Compare product tiers, versions, or packages
• Customer Testimonials: Reviews with names, ratings, dates
• Pricing Breakdown: Itemized costs or package details

Table Design Requirements:

• Minimum 3 columns, 4-5 rows
• Clear header row with distinct styling
• Readable text hierarchy
• Mobile-responsive strategy planned (scroll, stack, or hide columns)
• Fits naturally into your page layout

6. Contact Form Section

Design a conversion-focused contact form.

Required form fields:

• Name field with label
• Email field with label (show HTML5 validation state)
• Message/comment textarea with label
• Submit button with clear visual prominence

Design all form states:

• Default: How fields look initially
• Focus: Active field being typed in
• Error: Invalid input (red border, error message)
• Success/Valid: Correct input (optional green border)

7. Footer

Include:

• Link organization (sitemap or key pages)
• Copyright notice
• Optional: social media links, trust badges
• Consistent with overall design system

Mobile Responsive Design

Your mobile design (375-425px) must include all desktop content, adapted for smaller screens.

Mobile Design Strategy:

• Single-column layout: Stack sections vertically
• Navigation: Hamburger menu acceptable
• Video: Full-width with maintained aspect ratio
• Feature cards: Stack in single column
• Table: Horizontal scroll, stack rows, or hide less important columns
• Form: Full-width inputs, large touch targets (44x44px minimum)
• Typography: Scale down headings, maintain readability

Style Guide Requirements

Create a dedicated style guide page in your Figma file (due May 21).

Must include:

1. Typography System

• Typeface choices (1-2 font families maximum)
• H1, H2, H3, body text, and button text styles
• Font sizes, weights, and line heights
• Character spacing (letter-spacing) if applicable

2. Color Palette

• Primary brand color(s)
• Secondary/accent colors
• Text colors (headings, body, muted)
• Background colors
• Error/success state colors
• All colors with hex codes displayed

3. Spacing System

• Consistent spacing scale (e.g., 8px base: 8, 16, 24, 32, 48, 64)
• Padding and margin values
• Section spacing

4. UI Elements

• Button styles (primary, secondary, hover states)
• Input field styles
• Card/container styles
• Border radius values
• Shadow styles

Animation Requirements

Annotate at least ONE CSS transform and ONE CSS animation in your Figma design using text notes or comments.

CSS Transform Examples:

• transform: translateY(-4px) - Button hover lift
• transform: scale(1.05) - Card scale on hover
• transform: rotate(45deg) - Icon rotation

CSS Animation Examples:

• Fade-in on page load
• Slide-up stagger for feature cards
• Pulse effect on CTA button
• Nav link fade-in sequence

Before You Start Checklist

Before beginning your Figma design:

• ☐ Read the Unbounce article on landing pages
• ☐ Use the 01 Pre-Design page in your duplicated Figma file for inspiration, competitor notes, and content planning
• ☐ Choose your product/service
• ☐ Decide which table type fits your product best
• ☐ Find or plan video content for your product
• ☐ Collect or plan content (text, images)
• ☐ Review student examples to understand scope

Before You Submit Checklist

Before submitting your Figma link on May 26:

Style Guide:

• ☐ Typography hierarchy defined (H1, H2, H3, body)
• ☐ Color palette with hex codes
• ☐ Spacing system documented
• ☐ All colors meet WCAG AA contrast requirements

Desktop Design (1440px):

• ☐ Hero section with headline, subheading, CTA
• ☐ Fixed navigation with logo and 3+ links
• ☐ Video section with placeholder/thumbnail image (16:9 aspect ratio)
• ☐ Features section (3+ features with icons)
• ☐ Data table (in-page, product-specific, 3+ columns, 4-5 rows)
• ☐ Contact form (name, email, message, submit button)
• ☐ Footer with links and copyright

Mobile Design (375-425px):

• ☐ Single-column layout
• ☐ Hamburger menu design
• ☐ Video responsive (scales properly on mobile)
• ☐ Table mobile strategy implemented
• ☐ Touch-friendly button sizes (44x44px minimum)
• ☐ All content from desktop included (adapted)

Interaction States:

• ☐ Form states designed (default, focus, error, success)
• ☐ Hover states for buttons/links
• ☐ At least ONE transform annotated
• ☐ At least ONE animation annotated