Guide to great web design

What is web design?

Let’s clear the air here. We’re calling the development of a website ‘web design’. But there are plenty of synonyms. Web or website development; web building; digital design; Internet development; mobile design. If the result is a website, then we’re calling it web design, regardless of whether it’s viewed on a PC, tablet or smartphone!

In our world this gets more complex when we look at the capabilities of the team. We have those who focus on the ‘front end’ – in other words, the look and feel of the site, or user experience. We also have those who look at the ‘back end’ – which is the code and functionality that sits behind the visual site. The latter is involved with developing code, plugins, modules and so on, much of which is in the world of ‘open source’. More about that later.

Content managed systems

Our clients expect to be able to edit their own website, and add new content over time. This is most easily achieved by building the site in a content management system (CMS). This is effectively a database of content with a WYSIWYG editor, so that someone without coding skill can edit the site.

There is plenty of choice when it comes to a CMS. For example, common technologies include Drupal, Joomla!, and Umbraco. Our favourite CMS is WordPress, which is the CMS of this website. We’ve found it to be extremely user-friendly, and when it comes to web design it is also very capable. You can see why here.

Brand identity

Your brand is vitally important, and your website is a brand asset. The website should be aligned with your brand identity. It must both complement your brand and communicate the right message in a way that is memorable and ‘on brand’ – so we’re talking tone of voice and ease of communication. See our other posts on this topic:

Branding
Guide to writing great web content

Web design takes colour, imagery and copy into account. But it’s how those messages come across that’s important. So we think about the font sizes, tags, positioning and sentence length in particular.

Maintaining brand colour is important, so you need to know the web colour versions of your brand colours. Similarly, web fonts may be different and you should understand what fonts are close replacements. Google fonts is a great starting point.

Functionality

Our clients have wide-ranging demands for functionality – which can something as basic as a contact form to a complex full e-commerce store.

Typical functionality we’re asked for includes:

Sign-up forms

We can gather people’s contact details and store them in a database, and trigger emails too. It’s vital that forms such as this are GDPR compliant, so storing data about their preferences is essential.

Payments

If you intend to sell something, or enable someone to subscribe then you will want to take payments. We tend to use Stripe as a payment processor due to its low cost and high security. https://stripe.com/gb

Map integration

Having a scalable map on your site to show where you are can be vital, especially if your address is not easily recognisable. But with this comes some complexity, such as enabling the Google Maps API to be able to use a map on your site.

Video

People have an expectation around video these days, because we all carry powerful video capture around with us in the form of a smartphone. You can embed video into your site, or link to the common video hosts such as YouTube and Vimeo.

Responsive design

Viewing a website on a smartphone or tablet is second nature, but some websites provide a poor user experience. Often we’ll start with the mobile view before we even think about the desktop view if a site is likely to have more mobile users. Responsive functionality ensures the website adapts, seamlessly, to the technology the viewer is using to provide the best experience.

Video and imagery

Our clients have wide-ranging demands for functionality – which can something as basic as a contact form to a complex full e-commerce store.

It can be fairly simple to put video and photography on a website, but it is wise to think first about how you want to do it. Video can be high in bandwidth, and therefore slow to view, especially when streaming via mobile such as 4G. This can provide a poor user experience.

The quality is also important. The imagery you use must reflect your brand values. Cheap royalty-free images may not be representative of your viewers. The colours may not reflect your brand. While we have a subscriptions to enable us to access good quality imagery, we also handle bespoke photography and video to ensure that it’s perfect – and, of course, that you have the sole rights to use it.

Here’s an example of an animated video we created for a local authority. It gets around the issue of people photography in a video by using illustration creatively.

Legality of a website

There are certain elements of a website that must be in place to be legal. This can be as basic as stating the correct legal name of your business, registered business address and number, and VAT number (if you don’t handle transactions through the website).

GDPR also imposed a wide range of guidelines that need to be taken into account. This includes:

• Preferences on contact forms
• Making it easy to withdraw consent or opt-out
• Collecting a minimum amount of data
• Notifying people about cookies
• Having a data breach process in place.

You also need to have a disclaimer and privacy policy in place.

One of the key, overlooked area is the Equality Act 2010 and you must ensure that your website design makes it accessible to everyone who needs it. Take a look at the MCAG guidelines to find out more. https://www.gov.uk/service-manual/helping-people-to-use-your-service/understanding-wcag

Search engine optimisation

A website, no matter how well designed, may be ineffective it is not easy to find using a search engine. There are plenty of things we take into account when it comes to the structure of the website. These include:

• W3C compliance.
• Unique meta data per page for SEO relevance (system generated), and confirming HTML improvements in Google Webmaster Tools.
• Establishing relevant ‘schema’ to assist Google search.
• Ensuring header tags, alt tags and file naming conventions comply with SEO guidelines.
• Reducing file sizes (where possible): All file sizes will be reduced to speed page load times, which is relevant where images or PDFs have been supplied by you.
• Sitemaps: Ensuring these are created and registered with Google Webmaster Tools/Search Console.
• SEO friendly filenames: Making filenames SEO friendly with keywords where applicable.
• Duplicate content: Ensuring all website content is unique.
• Redirects, 404 and robot.txt both for search engines and the user experience.

SEO copywriting is also vital, which means understanding how to write the content of a website to relevant hits. Whether you consider it a dark art or simply writing well for your website viewer, it takes skill and patience as well as research to fully understand what your users wants from your site.

The stages of web design

While most web design agencies will have their own way of doing things, we like to keep the development of your website simple and structured. We provide a proposal with more detail, but in summary this is Oxygen’s approach:

Workflow

We agree the basic workflow, or in other words the outline process for building a website. The workflow of our website build starts off with the proposal, which is used as a basis for the Project Plan document. This holds all the information required for the website build. It is used to keep you up to date with the build process and to add in key details. Once the website is built on the test server and approved we go through a go live checklist before making the website live. We then supply a handover document with relevant log in details, hosting information, training and so on. This will be within a defined time schedule.

Site map

We’ll agree the final site map, so we know exactly what content is required, how many page templates will be used and what functionality is in place.

Wireframes

Once we’ve had a scoping meeting, and thought about the site navigation, we start looking at wireframes. These are simply guides to what needs to be on relevant pages, and their structure. You won’t see design at this point.

Visuals

This is where our design team starts work – and we start to think about the look and feel of the website. We’ll often have 2 or 3 visuals and refine how the site will eventually look.

Web build

Now we’ll crack on with the build. This is the complex bit, because as well as the WordPress structure, we need to ensure that the copy, the images, videos and other content is prepared and ready.

Go live

This part of the build is the final stage. We’ll have created hosting and potentially mapped out redirects from your old site, and will have completed browser testing and snagging. Once the button is pushed, that’s it. Web design done. Sit back and wait for enquiries!

What to do if you have questions about web design

If you have any query regarding web design, then please do get in touch. You can speak with our digital team and get answers from the people who know. We don’t have an account management structure, and we’re all do-ers. That means you go straight to the expert.

Visit our contact page

Thanks for reading.