๐ง Section 2: Understanding the Design Process - FadiZahhar/WebflowTraining GitHub Wiki
๐ง Section 2: Understanding the Design Process
๐ฏ Why the Process Matters
Before touching Webflow or any design tool, itโs essential to follow a structured design process. This ensures:
- Alignment with business and user needs
- Time and resource efficiency
- Easier development handoff
- Scalable, reusable design systems
๐ 2.1 Project Brief
A project brief is your north star. It defines the what, why, and for whom.
What to include in a brief:
- Project goals and KPIs
- Target audience and personas
- Brand guidelines (voice, tone, colors)
- Functional requirements (e.g., blog, e-commerce, booking)
- Technical constraints (CMS, integrations)
- Timeline and budget
โ Good briefs reduce back-and-forth and align all stakeholders from day one.
๐จ 2.2 Mood Board
Mood boards help lock down the visual language before diving into design.
Mood board elements:
- Color palettes
- Fonts and typography inspiration
- UI references (from Dribbble, Behance, Awwwards)
- Brand imagery and tone references
- Layout examples
Best tools to create mood boards:
- Figma
- Milanote
- Canva
๐ฏ Think of a mood board as the emotional and stylistic anchor of your design.
โ๏ธ 2.3 Why Wireframing
Wireframing is the blueprint phase. It's where structure, layout, and hierarchy are explored without design distractions.
Benefits:
- Define user flow and interaction priorities
- Validate concepts early with stakeholders
- Save time by solving layout issues before styling
- Easier feedback cycle
Low-fidelity wireframes: Boxes, placeholders, basic layout
High-fidelity wireframes: Accurate spacing, fonts, UI components
๐ ๏ธ 2.4 Figma as a Foundation Tool
Figma is widely used for everything from brainstorming to development-ready handoff.
a. Figma Styles
- Color tokens (primary, secondary, text)
- Text styles (headings, body, captions)
- Effects (shadows, borders)
Using styles = scalability and consistency.
b. Figma Components
- Buttons, Cards, Modals โ built once, reused many times
- Variants allow switching states (e.g., button: hover, active)
Think of them as Webflow Symbolsโ inspiration.
c. Wireframe Kits in Figma
- Pre-built UI libraries for fast prototyping
- Layout templates for home pages, forms, blog posts, etc.
- Easily swappable with your own design system later
Popular Kits:
- [Wireframe.cc](https://wireframe.cc/)
- [Untitled UI](https://www.untitledui.com/)
- [Figma Community Wireframes](https://www.figma.com/community)
๐ Summary
"Design is not decoration โ itโs strategy."
Good Webflow development is rooted in good design thinking. With a strong brief, a clear visual direction, and structured design assets, you can:
- Build faster
- Collaborate better
- Maintain easily