Complete the 01 Pre-Design page in the Figma template before moving into the full design.
Submit your duplicated Figma file link in Canvas and add it to the FIGMA PROJECT HERE

Pre-Design Requirements

Submit your duplicated Figma file link in Canvas

1. Product Foundation

What you're designing for:

• Product/service name
• Who needs it + why (2 sentences)
• 2–3 competitors + how yours differs

2. Audience & Goal

Define:

• Primary user (age, needs, pain points)
• Conversion action (the ONE thing visitors should do)

3. Style Guide

Provide:

• Fonts (family + why chosen)
• Colors (primary, accent, background, text, error/success + hex codes)
• Spacing system (base unit + scale: e.g., 8–16–24–32–48)
• Button/input/card style (describe or sketch)

Complete this on the Style Tile page in your Figma file

4. Structure Sketch

Wireframe showing: (draw/sketch this)

• Hero, nav, video, features, table, form, footer
• Mobile vs desktop differences
• Component notes per section

Finish in class on Thursday

5. Content Plan

Draft:

• Hero headline + subheadline
• 3+ key features with short copy
• Table type + 3 columns × 4 rows (sample data)
• Video plan (what it shows, where it goes)
• Form fields (name, email, message) + error/success states

6. Interactions

Annotate:

• 1 transform (e.g., "button lifts 4px on hover")
• 1 animation (e.g., "cards fade in on scroll")
• Hover/focus/error states for interactive elements

7. Final Check

Before submitting:

• ✅ All sections above completed
• ✅ 01 Pre-Design page complete in Figma
• ✅ Duplicated Figma file link submitted in Canvas