Website Design Process Today

back to blog

Traditional Website Design Process

imagePlanning, Wireframing, Design and Development. For many years, this is the way we used to approach the website design process. Almost daily changes are happening to the website design industry.

  • New devices with new resolutions are appearing
  • More and more people from every demographic group are accessing the internet from their mobile devices
  • Multiple browsers render content differently.

All these factors create flaws in the traditional website design process thinking.

Static comps

A static comp was used to show the client what the layout would look like for every device resolution and would ultimately not properly represent the final layout. This could leave the client unsatisfied. We started presenting the client with a dynamic design prototype that can be viewed and approved on multiple devices.

Not in isolation

Before when the UX designer was done with wireframes it got passed to the visual designer, and when the design got approved, it passed onto a front-end developer. Nowadays, the end result is so complex that the project will go back and forth between those people, often getting them together to try and resolve problems.

Content is first

Content drives wireframing and design so getting content all ready upfront really helps avoiding any issues down the road.

What we do now

Considering all the above we had to modify how we approached the website design process. Below are the steps we created for a new website design process.

Content Analysis

At this point you make the decisions as to what is important and what is not for your user. Organizing and getting all your content ready at this stage is a good idea. It will help you to uncover some hidden problems early in the game and save you time later. Creating your content in a linear way is also very important at this stage, as it allows us to prioritize it for mobile.

Wireframing

This stage is very similar to what we traditionally used to do. It’s a good idea to make your wireframe as simple as possible so client doesn’t get caught up on details like design and layout. The one change we had to make in this stage is we started making our wireframe responsive. This way you can see what happens to the various parts of the page when you view at different resolutions.

Static Design mock

This is still an important step of website design process. We present a static mock of the page and ask client to focus on fonts, colors, imagery and overall layout.

Dynamic prototype

Next we translate a visual language of the static mock into a dynamic design prototype that can be tested on multiple devices.

Digital Styleguide

A digital style guide will be created before development to help guide developers with styles, sizes and colors of main HTML elements on the page.

Development

The responsive website is coded while taking into consideration the design of the original static mock, the responsive design prototype, the direction of the styleguide and is integrated with the content management system.

Testing

Website is thoroughly tested by using multiple devices to review for accuracy, usability and find anything that went wrong.

This process isn’t set in stone. It changes based on the project and client requirements, but we try to stick to it as closely as we can.

We also visually illustrated the entire process that is described above in the Responsive Design Workflow Infographic.

Written by on November 5, 2013

Leave a Reply