Design Brief: Product Landing Page Phase 1: Design

Figma design requirements and specifications

Due Date: Sunday, Nov 24 (Design Rough Draft in Figma)
Critique: Monday, Nov 25

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 Nov 19)
  4. Design complete layout for desktop and mobile (due Nov 24)
  5. Participate in critique session (Nov 25)

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 Nov 19).

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
  • ☐ Explore the Milanote board for inspiration
  • ☐ 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 Nov 24:

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