Five steps, no surprises.
Every site and tool I make goes through the same five steps, from a written goal to a live site that is looked after. Each step ends with something to see before the next one starts.
- 01Scope
A clear goal, written down
Every project starts with who the site is for and what it has to do, written down as a short scope: the pages, the goal and the look, before any design.
- Who the site is for
- The pages, features and content
- The look, in a few words
- A plan for each step
- 02Structure
Structure before pixels
A sitemap, the main journeys and clickable wireframes, so what goes where is settled before anything is designed.
- A sitemap
- The main user journeys
- Clickable wireframes
- Changes before any design
- 03Design
A look of its own
Colours, type and components as a small design system, light and dark, shown on the real pages and refined step by step.
- Colours, type and components
- Every page in light and dark
- Shown on real content
- Refined step by step
- 04Live
Built, checked, live
Code on a preview address, checked on every build, then launched on its own domain.
- A preview address
- Checks on every build
- The launch on its domain
- Notes for whoever runs it
- 05Care
Looked after after launch
Hosting, updates and statistics without cookies keep running after the launch, and new pages come as the site grows.
- Hosting and the domain
- Software updates
- Statistics without cookies
- New pages as it grows
One site, start to live.
Scroll and watch it happen: a brief for a made-up architecture studio becomes a wireframe, the wireframe its design, the design a live site, and the site is looked after.
- 01 · Scope
A clear goal, written down
Every project starts with who the site is for and what it has to do, written down as a short scope: the pages, the goal and the look, before any design.
- 02 · Structure
Structure before pixels
A sitemap, the main journeys and clickable wireframes, so what goes where is settled before anything is designed.
- 03 · Design
A look of its own
Colours, type and components as a small design system, light and dark, shown on the real pages and refined step by step.
- 04 · Live
Built, checked, live
Code on a preview address, checked on every build, then launched on its own domain.
- 05 · Care
Looked after after launch
Hosting, updates and statistics without cookies keep running after the launch, and new pages come as the site grows.
About the process.
Why structure before design?
Because what goes where decides most of how a site works. A sitemap and clickable wireframes settle that cheaply, before anything is designed or built.
Do you design in Figma or in code?
Both: Figma for sketches and layouts, and the design system itself as code, with colours, type and components that every page uses.
How do you test a site?
Every build runs type checks, unit tests, browser tests, a link check across every page and a weight budget per page, and the pages are checked for contrast and keyboard use in light and dark.
Does every site get a light and a dark theme?
Every site I build here has both, following the visitor's setting, with a switch to change it. Both are checked for contrast.
What happens after the launch?
The site keeps running on its hosting with updates and statistics without cookies, and new pages join the same design system as it grows.
Questions about how I work?
A question about a style, feedback on this site, or an idea to share: I read every message and answer it myself.