Good website? Good process.

Great web design has a lot riding on it. It can make or break businesses, controlling how well or how badly their site performs. Getting the best from a web design project means you can’t just jump into Photoshop or your favourite editor and start making things. A successful design project has a process that it follows, some parts overlap with others and some can happen totally at the same time, but the rough order is correct,  You need to step back and look at how this happens over the long term.

Most web design project are comprised of the following eight steps.


Most websites don’t exist without a reason, these generally should be a strategic “what is the problem we need to solve” type session.  If it is a marketing problem then maybe a new website is the way to go, but maybe the website is fine and what the client really needs is more traffic, or a higher conversion rate or to spend less time updating their site, more time doing useful things.

So, firstly, we look at what problem we really need to solve in the client’s business and then develop a strategy that will solve that problem.  In poweredbycoffee’s case – our old website had no traffic and wasn’t converting.  It reflected our work poorly, didn’t showcase how good we are and made it difficult to get in touch with us.  It couldn’t be saved  so we decided to build a completely new site and turn that into a marketing project.

Now that we have decided that a new website is definitely the way to go how to we go about making sure that it’s going to actually do what we want and solve that problem for the client. Strategy, Strategy, Strategy.  We need to workout, with the client, three key things.  1) What do we want people to do on the site. 2) how will we get them to do it and 3) How will we get them there.

Signup to our mailing list

Ideas, thoughts, news; all the good stuff. Straight to your inbox.

2. Architecture & Planning

Let’s take everything we’ve learned here and start to turn this into the blueprint of the site.  Let’s take all the information we’ve learned from our consulting with the client and research into their market and start to turn that into a website.

The key to any good architectural phase is a blue print and the highest level blueprints we will have are our site map and content map.  These are essentially the same thing but offer a different view at the same thing.  A site map is a light level architecture of the site, which pages need to exist and how those pages relate to each other.  It is an early model of the site’s navigation.

The content map is more detailed, going through each page in the sitemap, detailing what the purpose of that page is, what content exists on that page and how that page fits into the overall goals of the site and what actions we want users to take on that page.

From the sitemap and the content map, in conjunction with the marketing funnel and site goals we will then model how we want users to move through the site to achieve different goals.

The final component in planning and architecture is WireFraming and prototyping.  We now know what pages are needed, how users need to move through the site, what goals are required for the site to be a success and what content goes where.  This is the highest detail blueprint that exists for the site.  This will go through page by page and map out where content goes on each page.  These are not about what the site will look like but they are about modelling the flow of content through the site.  They are about getting content on the page and seeing if the progressions make sense.  Good graphic design firms will usually do a single set of wire frames, bad web design agencies will do three sets of wireframes at different sizes, Good web design firms or specialist web agencies will do a proto type of the templates in HTML and CSS that responds to the size of the browser so that the client can actually see what the website feels like to use, rather than just looking at pictures.

The wire framing stage is very important, its a final chance to check the structure of the site and how it all fits together.

3. Visual Design

Visual design. The part of the process most people think of they think web design.  The visual design of a site is a function of the brand, trust building, content empowerment and usability.

Usually, we start by defining and using the brand as a basis – logos, colour schemes, typefaces and artwork can all come from here. It’s important to remember that the design is there to drive engagement with and support the content, not to be there for its own sake.  Visual design is there to communicate with the user, to help them understand and engage with your site more.

Having said that, beautiful things are better and it’s important that you are proud of the site.  Visuals will usually go like this.

  • Take what we can from your brand
  • We’ll ask you for sites you like and why you like them
  • We’ll ask you what you like and dislike about a few sites we suggest
  • Create few mood boards of things we like and think my suit your brand
  • Create a few comps of key pages from the selected visuals and the wireframes.
  • Design a visual component library

4. Development

We’ve finally got all the planning done.  Let’s build this thing.  We’ll take the Comps from the visual design phase and turn them into HTML and CSS. We’ll create the interactions using CSS and JavaScript being careful that nothing breaks when JavaScript isn’t available.

We’ll build a Content Management System for you so you can add, edit and manage your content more efficiently.  We want this to be your site, we want you to be able to add to it as you create.

We build sites so they work responsively, responding the size of the screen from the smallest smartphone to the largest iMac.  We build with Search Engine Optimisation and Accessibility in mind from the start.

Now it’s actually a website.

5. Deployment

Let’s get it online.  Let’s do final Quality Assurance Checks on the content and make sure everything is working.  Then let’s connect everything up and let it go live.

6. Market

A website that no one looks at is a completely useless thing.  In the planning phase we identified the group of people we want to reach with the website, the people we want to come and engage with it, the people we can help with whatever service or product we are selling.

We also identified the means by which we would attract them to our site, now we can execute on this part of our strategy, we can put in place and start are marketing funnel where we drive traffic and have it convert into leads or customers. This can be pay per click advertising, it can be content marketing through social media and search engine optimisation, it can be guest blogging.

7. Maintain

Let’s keep it tidy. Web sites can get messy and there is a lot to do every month to keep it alive.  Firstly, your site will need a server to live on somewhere, the faster the better.  Next, your Content Management system and its plugins will have security updates that need done to stop hackers, so will your web hosting.  Then you better be taking backups of the site every day just in case the worst does happen and everything gets lost.  Your performance is critical too, you should be regularly optimising your database for speed.

8. Optimise, Refine & Improve.

Now we’ve got traffic coming in we can test them.  A website is never really finished, there is always more to do.  Getting the first version up is just the best guess at what research says users will do and what they will respond to.  Now we have traffic, we can generate data and run tests.  We can A/B test variations of small details and pages to see which converts better over time, increasing conversion rate is the key to better return on investment in the long term.  You will probably always have to pay about the same for leads, but if you can convert those leads into customers more efficiently, it can make a significant difference to the business profits.  We can also see using data where problems are arising, where there are holes in the funnel, if people aren’t taking the actions we want them to. We can see what content resonates most will customers and caused them to convert best, we can then create more of that style content to attract and engage with


As you can see the Web Design process is long and involved, we have only provided an over view here of how we work.  In out next post we will dive deep into the Strategic phase at the start of the design process.

Stewart Ritchie Lead developer and founder of Powered By Coffee. Stewart has been building websites for 15 years and focusing on WordPress for 5. He founded Powered By Coffee in 2011 after finishing is masters degree. He lives in Guildford Surrey with his wife Sydney and their two cats.

Signup to our mailing list

Ideas, thoughts, news; all the good stuff. Straight to your inbox.