A bespoke website design service making websites suited to your specific needs and branding.
Website design is the first step in creating your website. The content, design, layout and structure of your new website are explored and a wireframe of the website with content can be created for your approval.
Strategy & Content Architecture
Before opening Webflow, define the "skeleton" of the site.
- Site Map: Map out the pages (Home, Services, Case Studies, etc.).
- Content Inventory: Gather copy, images, and branding assets.
- CMS Planning: Identify what content is "dynamic." For example, if you have a blog or a portfolio, you’ll need to structure a CMS Collection to handle those recurring data types.
Wireframing & UI Design
While you can design directly in Webflow, Relume is excellent for starting a website.
- Low-Fi Wireframes: Focus on layout and user flow without getting distracted by colours.
- High-Fi UI: Apply styles, typography, and spacing.
- Design System: Create a style guide (H1-H6 tags, button styles, colour palette) that you can easily port over to Webflow.
Setting Up the Webflow Style Guide
Once you move into Webflow, don't start building the homepage immediately.
- The Style Guide Page: Create a hidden page where you style all global HTML tags (All H1s, All Links, Body).
- Client-First/Class Naming: Establish a naming convention for your classes (e.g.,
section-padding, container-large). This prevents your project from becoming a "CSS mess" later on.
The Build (Structure & CMS)
Now, you build the actual pages using Webflow's Box Model logic.
- Structure: Use Div Blocks, Sections, and Containers. Think of it as nesting boxes within boxes.
- The CMS: Build out your Collections. If you’re making a portfolio, create fields for "Project Title," "Main Image," and "Project Description."
- Components: Turn repetitive elements (Navbar, Footer, Card designs) into Components so you can update them once and have them change site-wide.
Responsiveness & Interactions
Webflow excels at making sites feel "alive."
- Mobile-First Check: Work down from Desktop to Tablet, Mobile Landscape, and Mobile Portrait. Webflow’s cascading styles mean changes on Desktop flow down to smaller screens.
- Interactions: Add scroll animations, hover effects, or "reveal" triggers.
Pro Tip: Keep animations subtle. Over-animating can hurt the user experience and page load speed.
