This document is a short explainer for building websites using the wireframe-to-development process.
Websites are built in two main stages. First we outline the structure of the website. Then once that is approved by you we proceed to apply the stylistic elements to the site to finish it off.
Approach
1. Wireframe stage
During the wireframe stage, you will have a high level of input. This is where we agree on page structure, section order, content flow, and overall hierarchy.
Wireframes are based on draft or representative content. Final copy can be refined later, but significant changes in content length or intent may require layout adjustments.
The wireframe intentionally uses neutral fonts, placeholder elements, and minimal styling so that feedback stays focused on structure rather than visual design.
The site will not look finished at this stage, by design.
- Page structure and content flow set up with minimal styling
- Default fonts, neutral colours and placeholder elements used
- Focus is on layout and hierarchy rather than visual design
- Client review and sign-off of structure
Once the wireframe is approved, the structure is locked. Any changes to layout, section order, or content structure after this point are treated as additional work.
An example of a wireframe. See working demo.
2. Build and styling stage
At this stage we apply the final fonts, colours, spacing, and logo, and refine the visual design across desktop and mobile.
- Application of final fonts, spacing, colours and logo
- Responsive behaviour for desktop and mobile
- Revisions are included during the build and styling stage to refine the design based on your feedback.
- To keep the project moving efficiently, feedback should be consolidated where possible and focused on visual refinements such as colours, typography, spacing, imagery, and UI details.
- Requests that introduce new sections, significant layout changes, or alternative design directions may require a review of scope and timeline.
- Final preparation and launch
