Design Objectives
The first step in building our static website was to visualize the layout and user interface. We used Canva to rapidly prototype the structure, ensuring a clean and user-friendly experience before writing any code.
Visual Hierarchy
Establishing clear headings, content sections, and call-to-action areas.
Color Palette
Selecting a cohesive color scheme (Teal & Slate) for a professional look.
1
Wireframing the Layout
We started by defining the core sections of the landing page:
- Header/Hero Section: High-impact title, subtitle, and navigation.
- Features Grid: A 2-column or 3-column layout to showcase key capabilities.
- How It Works: A step-by-step visual guide.
- Footer: Copyright, links, and secondary information.
2
Canva Prototype
Using Canva's drag-and-drop interface, we created a high-fidelity mockup.
[Placeholder for Canva Design Screenshot]
The design focuses on whitespace and readability.
Key Takeaways
- Planning First Designing in Canva saved time during development by providing a clear visual reference.
- Component Thinking The design was broken down into reusable components (Cards, Buttons, Sections) which maps directly to CSS classes.