What are the steps of website design?

This is a question that I am often asked by clients when they make an initial enquiry about website design or redesign.

Having just completed a complete website rebuild for one of my clients I thought I would share with you the rpocess that I follow to bring about a successful website redesign.

My clients, The Pesso Boyden Training Institute UK approached me to carry out a complete overhaul of their website which reached it’s conclusion this week.

They approached me in January to completely overhaul the outdates website.

What are the steps of website design - the old website

What are the steps of website design – the old website

As you can see the site was very old fashioned, having been built a number of years ago, and was neither attractive or effective in today’s modern internet environment.

The brief was to build a modern website that would fully support the training organisation. The main points to be considered were:

  • Creating an attractive modern design
  • Developing a site that would be easy to navigate and use
  • Mobile responsive design
  • Optimised for search engines
  • Future proof
  • Easy to self-manage


The Process of Website Development

Having met the key organisation members, the meeting was a good two hours, we explored the goals of the website redesign and how the new site could support the business.

The key points on what the website would need to achieve as a tool for the business were:

  • To develop the Pesso Boyden brand
  • Increase enquiries for the training course
  • Reduce the administration time spent on answering questions regarding the course


Quote and Scope of work

Following our meeting I reviewed the current site and developed a plan of action and a quote for the project as discussed.

Plan of action

This outlined the weaknesses of the current site and the areas that needed development

Obviously the site would need a complete rebuild but there was also a need to review exactly what information visitors to the site would be looking for.

The plan of action laid out all the division of the necessary work that would be required to complete the project.

As a rule this division of work falls into three groups:

  • Work that Webtime will complete – the structural work, the keyword research, the build of the site
  • Work that the client will complete – the editing or creation of content, review of website model and design suggestions, the final sign off
  • Work that is collaborative or that could be completed by either Webtime or the client or a third party – this can be content creation (text, images, videos, audio), design elements (logos or complete website layouts), creation of other web elements e.g. Google profiles, Bing business pages, directory listings etc

It is usually this area where the quote will be effected the most. If the client wishes Webtime to write content, create online profiles, make directory entries then the time to do such elements of the project will be charged for.

In this project the client provided just the one piece of design, the logo that they had already commissioned, and asked me to develop the site around it.

What are the steps of website design - the new logo

What are the steps of website design – the new logo

Stage One of the project

The first stage of the project was to review all the information that we had captured during the meetings and following the feedback I obtained from my report that I created following our initial meeting.

This review allowed me to move forward and build a model structure of the proposed new website. This model, called a wireframe, is a structural representation of the site with sections and pages connected to each other and gives an accurate working representation of how the finished website will be built, but it doesn’t represent the design element.

The wireframe allows the client to see and confirm that all the sections and pages are in the right place and that the main elements of the site are in roughly the right position e.g. navigation bar, contact forms, banners etc.


What are the steps of website design - the wireframe model

What are the steps of website design – the wireframe model

The part of the process is essential for both client and developer to ensure that any major discrepancies are picked up before the real website build.

It is also useful to supply a site map to help the client ‘visualise’ how the pages sit on the site and what relationship they have to each other.

Site maps also help identify any pages that may have been forgotten about.


What are the steps of website design - the site map

What are the steps of website design – the site map

Webtime were asked to come up with a design and so the second part of stage one of the project was to send some simple design ideas to the client.

Often this is in the form of ‘clipped’ images of similar website designs with notes on the ideas, a little like a mood board used by an interior designer.

What are the steps of website design - the mood board

What are the steps of website design – the mood board


Stage two of the project

Once the client has given feedback on both the wireframe and the initial design thoughts, the actual build begins.

We require copy and other content to be able to complete this stage of the project.

I often discuss with clients at the initial meeting, the timeframe of the project and confirm that they will have sufficient time and thinking space during the first month of the project to devote to providing the necessary content for the project.

If the client is uncertain then I will delay beginning the project until they can commit time to it.

The new website will be built on a separate web domain so that the client is able to review the site progress and be part of the evolution of the site.


Stage three of the project

At the point when the website redevelopment or rebuild is complete the client is asked to sign off the changes before the site goes live.

If a current site exists then the new site will replace it.

This process ensures that here is full continuity for the client during the development and build and that the new website is not released to the general public until the client is ready.

What are the steps of website design - the completed website

What are the steps of website design – the completed website

I hope that this give a good idea of how Webtime approach the process of working on client’s websites and how the project generally progresses.

The process is logical and can be completed in manageable chunks.

If you are thinking about overhauling your website then give me a call and lets have a conversation.