This 2 part series is based on website design processes and procedure at Plus Two a digital agency in London. We appreciate this is not in the end how all digital agencies work; but aim to give a solid foundation on what to expect when commissioning and building a website with a digital agency.
Our guide walks through the different stages of website design and development. In part one we cover the steps leading up to design sign off and in part two we look at how websites are built, delivered and supported. While having the potential to be quite lengthy we try to keep things brief; our guide should give insight and reassurance during a websites design and development.
Good web designers take great care when creating a solution for a client. There are a number of considerations including user experience, accessibility, aesthetic and function. Good digital agencies will involve a lead designer in some way during the design process. Lead designers have years of experience, during which they have built up a skill set which forms the base for good design and user experience.
In this section we cover some of the more important steps leading to good website design.
As a digital agency it is important to gain an understanding of your clients business, their customers and any existing guidelines which exist due to branding or other constraints, a good way of getting to grips with the bulk of this information quickly is with a good ol’ face to face discussion. From the clients perspective; face to face discussion allows for a better insight into how a digital agency works, clarifying what to expect during the course of a project.
It is essential that the key players within the client company take part in early stage meetings. Senior management or executives know their brand, products, services and company ethos better than Jane ‘that new girl in marketing”, it is these key people who know what content needs to be on the website and what information will be most important to the intended audience.
Content is King
- Who is going to be using the website?
- What purpose does the website serve?
- What content will be on the website?
- What is the best way to present the websites content?
These are all questions which should be at the forefront of a team’s minds when embarking on a new project, it is the specification created from this information which will insure the success of the website not the pretty graphics or the developers super human coding skills.
Content types and functionality
Only once the client and digital agency have established a mutual understanding of what needs the website will fill, it is time to define types of content and functionality, these are the fundamental building blocks which will influence the design and overall experience of the website.
Most websites will have funnels for driving leads towards the various website goals. In e-commerce this might be to take a warm lead and drive them towards a purchase or, for more service based companies this might mean capturing their email address via a form. Data capture is an important part of many websites; the aim being to capture contact details or behaviours for use in future marketing, many websites do this by offering whitepapers or free content accessed only via email submission.
What information will aid with the websites retention? How will this be presented? And what form does it take? Press releases, whitepapers, webinars, podcasts and HTML pages are all examples of the various chunks of information or resources which a website might be able to offer its users. Providing valuable resources will help to establish the site as an authority within its field encouraging back links which as you may know can only be good for SEO.
Once content types and core functionality have been defined and agreed the agency can then utilise this specification to create the sites information architecture and begin wireframing.
A sitemap is drawn up to show the way that pages relate to one another, this helps to align the clients and agencies understanding of how pages will sit with one another whilst providing greater insight into how many types of template/pages will need to be created for the website.
The design agency will sometimes ask for links to sites which are liked/disliked as the client, asking for reasons to support why they have chosen them. Using other sites in this way can form the basis on which the design grows. Do not forget however as a client you are paying a design company to come up with a creative solution and this is something which they do best – After all isn’t that why you hired them in the first place?
A mood board will be created, this will contain elements which the designers have decided will work best within the brief, this should outline type styles, border styles, layout ideas, colour pallets and other design elements.
Initially wireframes act as a communication tool used by the agency and client teams. To start they will be created by the agency to reflect how they think the website will function then over a course of requested amends and discussion they are refined to reflect a shared vision of how the website will function.
When a wireframe has been signed off by the client, it is then used as the specification on which the website design will be based. In more technical builds it is often the wireframe which is referred to by developers to ensure that the website operates as expected.
Moe, Larry and Curly
Many agencies will supply 3 homepage designs as a starting point for design discussions these occur after the mood board has been supplied and discussed, this means that the pending results should hopefully all have elements which appeal to the client for one reason or another.
When these 3 designs have been submitted for review the clients team inevitably pour over the designs and decide which elements they like and dislike, this feedback is key to the final design and a crucial part of the design process.
The final showdown
A final homepage design will be drawn up using the previous 3 designs and corresponding feedback as the blueprint. This design should be very close to the end result with only a few minor amends being required. Once this design is finalised then the agency will draw up designs for the remaining pages based around the themes and styles defined on the homepage.
The mobile web
There are 1000’s of internet enabled devices including various phones and tablets so an important consideration when crafting a website for today’s web is how to handle mobile. There are 3 basic options here; do nothing, make a mobile site or adapt the site according to screen size.
1) Decide not to have a mobile site. If its decided not to commission a mobile site then all is not lost, people will still be able to see the site on their devices though relevant testing must be undertaken to ensure forms, menus and other interactive components work or fail gracefully when not supported.
2) Get a separate mobile site. Creating a mobile version of a site is another common practice and can lead to a better mobile experience for users. Mobile websites serve up only the information that mobile users need to have access to and in manageable chunks of accessible digestible information. Using tools such as jQuery Mobile developers are able to supply an experience similar to that associated with mobile applications.
This is a designers favourite part of a project, the time when they amend their favourite bits of a design to meet the clients needs. Expect a bit of back and forth at this stage due to getting everything just right for both parties (remember – the client and digital agency are in this together).
Design sign off
Once everyone is happy then it is time for the client to sign off the design, a small word to the wise… further graphical amends may now come at cost.
All systems are go! The design is signed off so the digital agency will start the development cycle. This cycle is where those pretty graphics, the requirements, a bit of CSS and a spattering of technological wizardry are blended together to create a shiny new website.
During the process the client company should have been amassing content which will eventually end up on the website. Ideally content is delivered either at the end of the design stage or early into development. The sooner content is supplied the better! Early delivery allows the digital agency to identify potential issues or mismatches, for example the templates which were quoted for may not fit with the delivered content or images may be low resolution so are not suitable. Catching content issues early means that delays with the website launch can be minimised.
Supplied content should ideally be delivered optimised for SEO, though the digital agency should be able to help with this – either during its creation or its entry into the website.
Conclusions so far
Thus far we have covered the design phase of how digital agencies build websites. As you can see during a websites design phase clients are heavily involved with the process, expect many meetings, lots of emails and a good number of conference calls to boot. There are several decisions to be made and so a client should work closely with its digital agency making the best possible decisions ensuring a balance between function, budget and usability.
It is important to stay on top of assembling your content and any other client requirements for delivery. A digital agency will schedule your website in amongst other projects so any unexpected delays from the client such as not having content ready on time could unfortunately mean a delay in your website launch.
Continue on to The Website Design Process, A Digital Agencies’ Guide – Part 2 to delve into website development, website delivery and support.