How We Work: The Website Design Stage

How We Work: The Website Design Stage

What happens at the design stage of our website process? Find out more about how we work.

When designing websites we have specific planning, design, and development stages. The goal here is to provide the building blocks of the site, then the visual design, finally building the interactive product as the final step.

More goes into this design process than you might think, let’s break it down.

Research:

This might be as simple as finding out what sort of look and feel the customer wants; but will likely include analysis of competitors, several meetings regarding approach and feasibility, design proposals and analysis of potential audience. All this comes together to help shape how we go about coming up with a prospective design

The wireframe:

Just as artwork may start with a pencil outline, a site design will start as building blocks of content areas to be worked in and linked. Much of this will be driven by the planning phase and the decisions made early on regarding visitor journey, goals and click paths. 

We create an outline of what the page structure will look like and how it will be navigated on both landscape (desktop) or portrait (mobile / tablet) devices.

The page design proposal:

We’ve got multiple feedback stages through the website design process, specifically designed to engage the customer as much as required. This approach means that: 

  • We truly understand what the customer likes in terms of design
  • Elements can be refined for the finished product
  • The customer feels involved and helps shape the site
  • There’s maximum freedom in terms of making changes

Initially we create the homepage design in full, this can sometimes have the site content included, where available, but will often use “lorem ipsum” filler text to illustrate how the site design will present content. This makes the finished site easier to visualise for the customer. 

Site design feedback:

At this stage the customer is free to make whatever changes they feed are necessary to the design, we use Adobe XD which gives a collaborative feedback section where customers can annotate notes or changes effectively in a visual manner.

We actively encourage participation at this stage, any customer ideas or requests can be incorporated and the end result should be a homepage design that accurately depicts the brand, message, appearance and style the customer is looking for.

Secondary pages:

Once the homepage is signed off, we then build out the secondary pages of the site along a familiar visual style, building on the approach agreed upon when tackling the homepage. Examples of secondary pages are:

  • Content pages; About us, Contact, Privacy 
  • Service pages; Generally a top level descriptive page with key, then “child” pages which expand upon each topic
  • E-commerce; Specific page designs for transactional website, these can be category, product, checkout and basket pages

Depending on the site size, this can be done in stages with approval and feedback sought at design milestones, again changes can be easily made at this stage.

Finalising the design:

Once the site is designed in it’s entirety, we’ll generally sit down as a team and ensure all goals have been met from our end and we’re happy with the product. Now is the time to sit down and look at the website design holistically. We can look at the customer journey, from inception to goal completion. From a customer point of view, this is when we’d look to agree the finalised design and implement any changes required.

The actual design process is very visual, it’s purpose is to be able to move elements around, change appearances, and alter the pages in a time-efficient manner. Once the site is signed off, and the customer is 100% happy with the proposed site design, it’s time to push forward to the development stage. This is where the design is moved across to our development team and turned into an interactive site rather than a flat 2d mock-up, essentially bringing the design to life.

How We Work: The Website Design Stage
Charles Sellers
By Charles Sellers

Categories: