What's the process for designing a website?

I’ve wanted to write an article for a while that helps website owners –or anyone commissioning a website, to understand the process thus enabling a better more successful design and project. What sparked me to do it now was a recent client asking this question when commissioning us to redesign their website:

“On look and feel of the site, please can you expand on your process. Do you produce one design and then if we don’t like it charge for having another go or do you produce a couple of options or something else? Or do you always get it right first time?”

What is design?

Design can be a subjective thing. However there are certain elements that are always there in a good quality design.

Colour, shape, pattern, texture and lines all affect how your website looks. Then there are principles such as balance, harmony and rhythm amongst other things that affect the flow of design. Look at any website and check those elements. Think: does this website look balanced? Are the features harmonious or is the headline colour clashing with the background?

Our original design process

Designing websites has changed significantly over the years. With the advent of new tools and techniques –not least the advent of a multiplicity of devices and screen sizes, this process had to change.

Here's an example of my original process which I used with slight variations for many years.

  • Initial phone call or meeting with client
  • Ask questions about the project
  • Sketch some initial ideas
  • Create artwork using photoshop to create three pixel perfect designs
  • Present to client via printout in meeting or PDF via email or online
  • Receive feedback
  • Combine elements of all visuals to one final draft
  • Build website

I didn't really use briefing sheets back then so the information I received from clients varied enormously. Some –especially the larger companies, would have full and well thought out briefs; others, full but not so well thought out. Some started with nothing, having no experience of building websites, and needed full guidance to find what they really wanted.

In principle, the process doesn't seem too bad. The real problem points are: not using a client briefing sheet to get the right information, the unnecessarily time-consuming nature of providing three visuals, and presenting a website via a non-web medium (i.e. not in a browser).

Clients briefs

A designer cannot design something that connects to a group of people if he/she doesn't know who those people are. The more you can help the designer get under the skin of your customers –or the people you want visiting your website, the better.

What images, colours, patterns do they respond to? What language and words connect with them? A good starting point can also be knowing what doesn't connect with them. This often leads to what does.

Your website should exist to solve a problem. This will be the motivation for a potential customer to visit your site.

Think about the specific problem you are solving for your customers and how you want your website to communicate this. Any good web designer will help guide you through this.

In our Project Briefing Sheets which we request all potential clients to fill out, we ask some of those questions plus many more.

This is really useful to get you thinking more about your business and how to use your website more effectively –even if you're not ready to commission a site yet.

Can I have another option?

During the late nineties and early noughties, many designers I talked to also used the set process of designing three visuals. The thinking was that it gave you (the client) some options to choose from.

The expectation for each visual was pixel perfection. By that I mean each had to look like a finished website–or at least a few pages of it.

The trouble with this is that it can take a lot of time to create. As a designer, I found myself designing the third visual just to be different from the from the first two, rather than thinking about the brief in a different way. To do this well would have required significantly more time than was allowed by most budgets at the time. So usually, the last idea was pretty pointless.

If I designed one or two ideas, I'd often be asked to 'give me another option'. Normally I did it.  But why? Why is another option needed?

If the client thinks the first design doesn't work, it’s important to ascertain why it doesn't work. What's this opinion based on? Is it personal preference? Is it the feelings and experience of your target audience? Has your designer not correctly understood the brief? Has something subsequently come up that changed the scope of the project? –we've had that one a lot. It happens. But communicating to your designers is key.

Websites are viewed in the browser

When it came time to show clients the wonderful designs we'd come up with, we usually arranged a face to face meeting in which we would print out sheets for the client to view.

It wouldn't be until the first demo build that the client would actually see anything presented in the very medium for which they were having the project designed.

This now just seems crazy. It’s a website. It makes complete sense to show as much as possible –and as early as possible, in the web browser. That way you can see it as your visitors will eventually see it.

I won't get into issues like browser differences here, just to say any issues can be picked up earlier as you will see them in your own browser.

Another huge change has been that of responsive design. You may already be aware that in some business categories, mobile usage of websites exceeds that of desktop views. Tablets have consistently been on the rise too. Thus it’s important to make sure your site works seamlessly everywhere.

It’s worth noting here, that if your target audience does not –and is not likely to, view your site on a mobile, then there is a use case to build just for desktop. Even still, different sizes of screen need to be taken into account. You don't want visitors leaving your site as it’s too small to view on their device.

With all these considerations, showing work in the browser makes sense as it can mean you will quickly see how your site will work across multiple devices and screen sizes. Showing work early and often can help the success of the whole process.

Our new process – can seem messy

Tackling some of those key issues has led us to a new way of working. Generally we know far more about the project –the goals, objectives and target audience, than ever before due to our Project Briefing Sheet and having more informed discussions with clients.

Our process from there involves:

  • Sketching out ideas (as before)
  • Coding up 'style tiles' –more about these here (essentially they are a quick way to show concepts and ideas for colour, typography, image styling and object elements –such as pull out quotes and social media buttons, all in the browser; we provide as many or as few elements depending on size of site and budget)
  • Build prototype
  • Iterate

The whole process is not precisely defined, but purposefully so, as it takes into consideration that people are different. For example, some people will struggle with the style tile approach and may need a bit more of a prototype developed –such as a couple pages coded up, to really get the concept. That's ok.

So back to my client’s questions at the start.  Yes, we do produce one design –so to speak, but style tiles, which we've been using for over a year now, help us take several quick steps to get there and the 'design' is coded up almost immediately.

Like anything, no process is full proof but at least this way it’s easier to take new eventualities into consideration.