Our 4 Step Design Process

An insight into how we design and deploy websites here at Every Last Pixel.

Our 4 Step Process

When pitching for new work or just generally explaining to clients how the design process works I have often thought it would be useful to have a visual guide of the process to talk through. So, here it is. An explanation of how we design, build and then ultimately deploy our websites.

Step 1: Plan

example wireframe layoutEverything always starts with a wireframe of the all the pages and sections required to design the website. This gives an overview of where all the information on each page or page template needs to be and allows for a discussion to take place between myself as the designer and the client who will be using the site on a daily basis. To avoid distraction and focus on the layout the wireframe is always in greyscale only and has no real design elements in place. This stage allows for lots of discussion between myself and the client and allows us to move things around quickly on the screen (often via a video call) to make sure everything is included and easy to find. During this process a private web link is provided to the client where they view the wireframe and leave comments. This link gets continually updated as I implement changes. When everyone is happy the wireframe layout is signed off we are good to go onto Step 2.

Step 2: Design

With the layout agreed we move onto the design process where we start adding client branding, fonts, colours and images and start thinking about interactions and movement. This is the part where after just looking at greyscale layouts everything starts to come to life. Usually we start with just one page (often the homepage) to get things that appear across the site such as the menus and footers agreed. Once happy we then work up the rest of the site until all the pages and templates have been reviewed by the client and agreed. There is lots of opportunity for change and discussion at this stage as once this stage is completed we sign off the design stage and move onto the build process.

Step 3: Build

coding exampleNow the designs have been signed off and agreed the website build takes place. There is little client involvement at this stage as it mainly consists of writing the code for the website. This involves building the pages, adding the content management system (the software that enables the client to update the site) and testing everything for usability and accessibility across different screen sizes, browsers and mobile/tablet devices. This process usually takes between 2-6 weeks depending on complexity. During this time the client can be busy populating the site by uploading text and images so everything is good to go once the build is complete. Once the final website is ready a final private review link is sent to the client for live testing of their final site. Then, once everyone is happy the site is as per the signed off designs we are ready to launch and make live.

Step 4: Launch

Making live or 'deploying' the site is the last step of the process and often the quickest but there are still some crucial jobs to do. The client's domain name must pointed to the site along with setting up the web hosting to run and update the site as the content is edited in the future. Once all this done though is it simply a case pressing OK on the deployment and letting the client know their new website is live and ready to use!

Author: Pete Murray

Published on: