Quick answer: A solid web design process moves from discovery and brief, through information architecture and wireframes, into visual design, content, development, testing and launch. Each stage has inputs, outputs and an approval gate so you do not paint pixels before the structure is right, or code before content is real. Treat the process as a shared map for clients, designers and developers, not as paperwork for its own sake.
Why process beats “just start in Figma”
Skipping steps feels fast until a stakeholder rejects the homepage direction because the sitemap was never agreed, or development stalls because copy is still missing. Process exists to surface decisions early, when changes are cheap. It also creates artefacts you can reuse: brief, sitemap, component list, content inventory and QA checklist.
The stages below fit marketing sites and many brochure-to-ecommerce builds. Complex products add extra discovery and prototyping, but the spine stays similar.
Stage 1: Discovery and brief
Gather:
- Business goals and primary conversions
- Audiences and jobs to be done
- Brand rules and constraints
- Must-have pages and integrations
- Success metrics
- Timeline and budget boundaries
Workshops beat long email threads. Capture decisions in a written website brief. For software-heavy builds, extend into a software requirements document.
Output: agreed brief, project plan, RACI for approvals.
Stage 2: Research and content inventory
- Review analytics on the current site if one exists
- List top landing pages and drop-off points
- Inventory URLs to keep, merge or retire
- Note competitor patterns without copying them
- Clarify tone and examples of writing that fit the brand
If the site sells online, study product templates early; product page design decisions affect wireframes and data needs. For specialised industries, prior patterns help (for example real estate website design), but your brief still wins over generic templates.
Output: content inventory, SEO notes, research summary.
Stage 3: Information architecture
- Sitemap
- Navigation model
- URL strategy
- Template list (home, service, article, product, landing, form)
User testing at this stage can be lightweight: card sorting or simple tree tests with a few customers. Fixing a wrong navigation label now is cheaper than rebuilding templates later.
Output: approved sitemap and template list.
Stage 4: Wireframes
Wireframes show layout and priority without final visual styling.
- Homepage and key templates
- Mobile and desktop structures
- Form flows and error states at a basic level
- Notes for CMS fields
Keep stakeholders focused on order of content and calls to action, not button colour. If debate turns into visual preference too early, the process is slipping.
Output: approved wireframes for primary templates.
Stage 5: Visual design
Now apply brand: type, colour, spacing, imagery, components.
- Design system or UI kit for repeated elements
- High-fidelity mockups for key templates
- States: hover, active, error, empty where needed
- Accessibility basics: contrast, focus, text size
Design mobile layouts seriously, not as an afterthought; mobile first design thinking prevents desktop-only compositions that collapse on phones.
Output: approved UI for templates and components.
Stage 6: Content production
Content runs in parallel once IA is stable:
- Final copy for launch URLs
- Image capture or selection
- Metadata drafts
- Legal pages
Design with real or realistic copy whenever you can. Lorem ipsum hides overflow and awkward headings. Buttons and forms need real microcopy before build lock.
Output: content ready for CMS entry.
Stage 7: Build
Developers implement templates, components and integrations on staging.
- Component-based front end matching the UI kit
- CMS fields that match editor needs
- Forms, analytics hooks, redirects plan
- Performance budget and image handling
Follow a defined website deployment process so staging, review and production stay separate. Connect call to action buttons and forms to real endpoints early enough to test.
Output: staging site ready for QA.
Stage 8: QA and refinement
Test:
- Browsers and devices you committed to support
- Forms and emails
- Accessibility keyboard paths
- Broken links and redirects
- Spelling and leftover draft text
- Performance on key templates
Collect feedback in rounds with deadlines. Endless “one more tweak” loops are a process failure, not a design virtue. Park post-launch enhancements on a backlog.
Output: QA log cleared to an agreed threshold.
Stage 9: Launch and handover
- Launch checklist completed
- Analytics and Search Console verified
- Documentation and training for editors
- Backup and rollback plan
- Warranty window for defects
Handover should include how to edit common pages, who to contact and where credentials live. Without that, the beautiful process ends in a fragile site nobody wants to touch.
Roles and approval gates
Typical gatekeepers:
- Client lead: goals, copy approvals, brand
- Designer: IA, UI, design QA
- Developer: feasibility, build, technical QA
- Marketer: tracking, SEO essentials, campaigns
Each stage needs one named approver. “The committee liked it on the call” is not approval. Use written sign-off, even a short email, before the next stage starts.
How long each stage takes
Timelines vary with scope. A small brochure site may move through discovery to launch in several weeks. A large catalogue or custom app UI can take months. What matters is sequencing: do not book a launch date that assumes zero revision time. Build contingency into content and feedback, the two stages that most often slip.
Tools versus process
Tools change. The sequence does not have to. Whether you design in a browser-based UI tool or static mockups, you still need agreement on structure before polish. Whether you build in a CMS theme or a custom stack, you still need staging, QA and handover.
Avoid buying a new tool to fix a broken process. If feedback is chaotic, fix the approval gates. If launches are scary, fix the checklist and ownership. Tools amplify habits; they rarely replace them.
Content and design dependency
The most common schedule slip is content arriving after templates are coded. Reduce that risk by:
- Locking sitemap early
- Writing homepage and top service pages during visual design
- Using content templates (headings, word counts, mandatory sections)
- Refusing to treat “final design” as approved when it still uses placeholder copy for primary CTAs
Designers and writers should share a weekly sync during stages 4 to 7 so components and sentences evolve together.
FAQ
Can we skip wireframes if we already like a theme?
You can start from a theme, but you still need IA and content priority. Otherwise you are decorating a wrong structure.
Where does SEO sit in the process?
In discovery (keywords and intent), IA (URLs and templates), content (titles and copy) and build (technical basics). It is not a phase bolted on after launch.
What if stakeholders disagree late?
Return to the brief and goals. Late visual opinions should not silently rewrite the conversion strategy.
How do we handle change requests?
Log them, price or schedule them, and protect the launch scope. A clean change process keeps relationships intact.
From brief to a site people can use
A clear web design process reduces rework and makes launch predictable. Move through brief, research, IA, wireframes, UI, content, build, QA and handover with explicit approvals. If you want a team that runs that process with you, see how we help businesses turn visitors into customers.
