The Web Design Process

We are still basking in the glow of the fact that at only 6 months in, we can call ourselves an award-winning Digital Agency. To celebrate this, we have decided to share some insight into how we work and the process we use for web design and development.

Our web design process is everything to us, it provides our team of designers and developers and our clients with a transparent and highly collaborative path to launch. Processes establish lines of responsibility, create timings and deadlines, explain costs to the client and because it’s based on a system where one stage cannot be started until the previous stage is complete, it provides very clear approval milestones.

One size does not fit all… every project is different and our process is always tailored to suit. However, this is the base process we use to start a project.

Planning and Requirement Planning

Planning is the most important stage of any project. All the stakeholders in a web design project need a comprehensive understanding of the work that needs to be done, when it will be done and who is going to do it.

If you have a comprehensive plan when you start something it gives the whole process clarity, a shared vision, increases efficiency, reduces the chances of error and marks out areas of responsibility.

We kick off any web design project by meeting with our client, establishing the team and developing the requirements. We look at the goals and objectives of the new website and any problems with the client’s current online presence. We look at the competition and where possible, we carry out research by talking to the people who will be using the website.

Output: A detailed website spec and information architecture sitemap

Website Wireframes

A website wireframe is like a blueprint. It is the user experience (UX) design without the distraction of colour, typography, photography and style. It allows us to focus on the user’s journey through the website, the functionality, content structure and interactivity.

Only after we have agreed the website wireframes with the client can the design process begin.

Output: Wireframe sketches for each main web page template in various devise sizes

Design Brief

As part of the design process we collaborate closely with our clients to explore design direction. This is usually done through a design workshop where everyone brings ideas, examples and thoughts to the table and we discuss what the best direction is for the look and feel of the website.

We explore the brand, it’s personality and how it should to be presented online. We look at the competition’s web presence as well as unrelated websites. Notes are taken and opinions are collated.

Output: A written design brief with visuals to explain design direction, layout, typography, colours and photography

Artwork

We don’t believe in surprises at The Friday Agency. With close collaboration, the output of the design stage shouldn’t be a surprise as the client has had input and we have communicated our direction clearly. The expectation of quality is set by our previous work and what we referenced throughout the planning stages. The usual outcome would be that because of collaboration and detailed planning the first design iteration would be very close to the final design and layout.

Design is produced by referencing the wireframes and design brief. We usually start with the homepage on both mobile and desktop sizes and work through the website page by page.

Output: Artwork for each main web page template in various device sizes

HTML/CSS Markup

The first stage of development is HTML and CSS markup: this is where we take the website’s artwork and carry out what we call ‘slice & dice’. The website pages are marked up in clean and efficient HTML and CSS that is responsive across current and future devices.

Images are optimised to load as quickly as possible. We also future proof quality by optimising images for HiDPI or Retina displays. Vector SVG’s are used where possible to maximise load time and image quality.

Output: Browser tested responsive HTML/CSS files for each page template

Development

Web development is when we build the website with the assets already produced. Design and markup is integrated into the backend technology. Databases are set up, functionality is created through code, web servers are configured, security is locked down and content is migrated.

This is the stage of the project with the least amount of collaboration between agency and client: all the planning has led up to this point – we are building exactly what the client has requested so we combine this with our own input and expertise.

Output: Beta website

Testing

When we have a beta website we carry out our first stage testing. This covers user testing, layout, functionality, server, script efficiency and load time as well as multiple browser and device tests. The second stage is to share a beta link with the client so they can carry out their own review. Feedback is collated and changes are made if required.

Output: Final Alpha website

Website Launch

When everyone is happy we migrate the website to the live server and launch. In some cases we may do a soft launch, this is when the website is put live but is not announced or advertised. This allows us to get feedback from the public without it being seen by the masses.

Only after a website is launched can a Search Engine Optimisation (SEO) campaign be carried out. There is an entire blog post that could be written about how we manage this stage of a website project and we will cover this at a later date in detail.

Output: Live website