Website Design Process

Tips and Tricks

I thought I’d write up a short article that explains how I go about processing a website design project.

In the early stages, it’s really all about establishing why the client feels they need a new website or to improve a website they already have.

It’s important to figure out what measurable results the website should deliver, and not just what fonts, colour palette or graphics will be on display. From this, the actual budget needed will be firmed up. All too often I speak to clients who either have no budget set aside or have no real value placed on their website and end up unable to understand the reason that they have to invest properly. Prices can vary, but so can results so it’s something that does need to be established before a single bit of code is written.

Assuming we have an agreement on what the website needs to do, the delivery timeframe and the budget, we can get started on the actual project.

Stage One – Content

Although a website is a visually impactful entity, it’s the written word that sets the tone of voice, addresses the reader’s questions and attracts visitors to the websites. With the content written and available, the structure and configuration of the website is going to be a smoother process and likely a faster project to complete. From the written content, pages and sections can be worked out in advance and alongside the website architecture.

Stage Two – Site Architecture

This stage allows us to map out the pages required and the configuration of the navigation menus to be used in the main header of the site as well as links in the footer and other places. These days I use Figma to create these website architecture documents since I can share them easily with my clients, collect comment and gain approvals all online and without a complicated email trail.

Stage Three – Wireframes

This is where I layout page designs we’ve agreed. These are usually simple representations of each page that will be built. They are normally represented using a basic font, no real graphics or images and in black and white. Doing this means we can focus on the page layouts and on the final visuals at this stage. If the content from stage one has been supplied, then it’s used here to help make sure that the site’s text and messaging are in the correct locations and flows correctly. I’d normally use Figma to complete this stage since again feedback and approval can all be gained collaboratively and 100% online with minimal email traffic.

Stage 4 – Site Build

This is the big one. The site is now given life through a colour palette, a font pairing and the full-colour images and graphics. If everything has been approved up to stage three, then this stage should be fairly straight forward. If any changes are introduced at this stage, then it can lead to delays and missed deadlines. This prototype is built 100% in the browser in readiness for final approval and launch.

Stage 5 – Site Launch

This stage comprises of a few technical processes to ensure the site will load quickly, the site is secure and will be search engine ready. Connection of the site to the client’s domain happens at this stage and the site is set to “live”

Post Launch

A 30-day bug-free guarantee comes standard with any website I launch, so this kicks in on launch day. Beyond that, it’s highly recommended that if the website is built on WordPress a Care Plan is set in place to ensure the site continues to perform and remain secure. After the investment a client has made, it doesn’t make sense to protect that investment. With a Care Plan in place the ongoing improvement, monitoring and development can continue since a website should always really be seen as a “work in progress”.

The stages above are the ideal scenario and based on many projects that have been completed. They are written with many difficult, failed and disappointing project from the past in mind and point towards a process that if adhered to will deliver a successful website design project.