Design Brief: Product Landing Page Phase 1: Design

Figma design requirements and specifications

Due Date: Tuesday, May 26 at 10:00am (Design Rough Draft in Figma)
Critique: Tuesday, May 26 during class
Use the P4 Figma Template: Duplicate P4 Product Landing Page Student Template so the 01 Pre-Design page, style tile, desktop and mobile starter frames, component states, and critique notes all live in one file.

About This Assignment

This project builds on your knowledge of HTML tables and forms from Web Code 1. 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
  • Semantic HTML structure (tables and forms)
  • Responsive design principles
  • Visual hierarchy and conversion optimization
  • Professional design documentation

Design-First Workflow

Why design first? Creating a complete visual design before coding helps you plan the entire user experience, make design decisions without code constraints, identify potential problems early, and have a clear roadmap when coding begins.

Phase 1: Design (You are here)

  1. Research landing page examples (see Resources below)
  2. Choose your product/service
  3. Create style guide (due May 21)
  4. Design complete layout for desktop and mobile (due May 26 at 10:00am)
  5. Participate in critique session (May 26)

Phase 2: Implementation (starts after design)

  1. Build HTML structure
  2. Apply CSS styling
  3. Implement responsive design
  4. Test and deploy

Objective

Design a conversion-focused landing page for one product or service of your choice. 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)
All content—including your data table—should support and describe your chosen product.

Deliverable

A link to your Figma file containing:

  • 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)
  • 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

Example for wireless headphones:
Headline: "Sound That Moves With You"
Subheading: "Studio-quality audio. 40-hour battery. Zero wires."
CTA: "Shop Now" or "Hear the Difference"

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

REQUIRED: Embed a video related to your product.

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)

Video options:

  • Product demo or promotional video
  • Customer testimonial video
  • How-it-works explainer
  • Brand story video
  • Product review or unboxing

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

Example for headphones:
• Feature 1: "40-Hour Battery" (icon: battery) - "Listen for days, not hours"
• Feature 2: "Active Noise Cancellation" (icon: sound waves) - "Block out distractions"
• Feature 3: "Premium Comfort" (icon: headphones) - "All-day wearability"

See student examples for inspiration.

5. Data Table (In-Page)

IMPORTANT: Your table displays product-specific data and appears in the page (not in a modal).

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)

Mobile considerations:

  • Touch-friendly sizing (minimum 44x44px)
  • Visual feedback for validation states
  • Clear error messages

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
Test your mobile design at multiple widths (375px, 414px, 428px) to ensure flexibility.

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
Ensure all color combinations meet WCAG AA contrast requirements (4.5:1 for normal text, 3:1 for large text).

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
Use Figma comments or text annotations to describe: "This button lifts 4px on hover using transform: translateY(-4px)"

Before You Start Checklist

Before beginning your Figma design:

  • ☐ Read the Unbounce article on landing pages
  • ☐ Complete the 01 Pre-Design page in your duplicated Figma template
  • ☐ 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 at 10:00am:

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