The 5 Golden Rules of quality Web Design

There’s no shortage of web design advice online, after all, everyone is an 'expert' in this field. You are you are only ever a simple search away from having a wealth of information and opinion. However, a lot of these guides, information and best practice recommendations relate solely to the practice of design, and neglect other very important aspects.

What other aspects? Besides the design you also need to consider layout and usability, the theory behind choices of colours and branding and typography are equally important. There is also a separate branch of theory around ‘eye-tracking’ and hotspots (i.e. highly visible) regions of the page to ensure optimal engagement. So the simple design now start to encroach User Experience (UX) as well.

With this in mind, we surveyed our team to identify the 5 most important rules when designing a website.

Mobile First Design, Mobile Responsiveness and Content

All modern websites should now be responsive, or have some other provision for handling mobile devices and tablets. Why? Well 2016 was the year in which we saw the number of mobile users overtake the number of desktop users for the first time ever and this figure has continued to grow. This means, if you are still developing a website for desktop only today, then you are building a website for far less than 50% of your user base!

It is now also widely accepted that not all content is relevant to all users and that there is a need to optimise content for mobiles. Where a desktop has plenty of space in the page to handle visually impressive slideshows, a mobile is a lot more limited. Even if the mobile had enough space to display the slideshow, do you really want to force users to download many megabytes of images using their mobile network when they just wanted to find your company contact information? The prevailing thoughts here are around how the user will consume the information.

Iterative Design, Prototyping and Testing

Modern web design is very complex. Ideally you want to be able to give the customer a preview of how the finished design will look before you start work. Notice how this presents a bit of a ‘chicken-and-egg’ situation. The customer may make different design decisions upon seeing the final design, by which point it's too late to easily change some of the fundamentals.

Iterative design is a cyclic process allowing feedback to be taken on board at each stage. Prototyping a website means producing wireframe 'mock ups' before the real coding begins. This allows feedback from the customer at each stage of development, which may be brought back to the design board at each stage to refine and improve the design before producing the next version. This helps to ensure 'small' steps of gradual improvement as the design progresses. The downside here is that this costs a lot of additional time and therefore money, something which many clients don't want to or cannot justify paying for.

Data Driven Design

Designing a website can be very subjective: you may like certain aspects, but it can be hard understanding if this is your personal taste filtering through or if the design really does lend itself more readily to the needs of the website itself. Does this look good or is it actually functional?

It’s vital you base your decisions on the needs and requirements of the data the website contains, especially if this is a redesign of an existing site where you may have plenty of ‘real-world’ data to base the design on.

Suppose you’re designing a website which lists the ‘latest 5 blog posts’ on the homepage. It’s tempting to use sample placeholder text in the design and colour it to look fantastic before sending to the customer to sign off. However, have you actually tested whether the customer's existing blog post headings and synopsis fit nicely into the space the new design provides?

This seems like an obvious one, but we see many missing this minor test. Not doing this, means the developers now will either need to (1) Truncate the text after (say) 100 characters, which can lead to some very odd looking sentences on the site or (2) Create a separate ‘synopsis’ field for the customer to use, which will now mean the customer needs to update hundreds of blog post entries for every blog post that has ever been added to the site. Neither being ideal.

Keep it simple

When working on a new project, it’s tempting for developers to let their creativity run wild. This often leads to a desire to chase programming paradigms, utilise the newest features and latest technologies without actually stopping to ask if any of these actions are helpful to the end result. This can often lead to an ‘over-engineered project’.

“Everything should be made as simple as possible, but no simpler.”

- Albert Einstein

The truth is, the more complex the website is, the greater the opportunities for it to go wrong. Obviously it needs to be fit for purpose, so it’s equally worth considering what growth may occur in future and whether there could be a future-need for anything that isn’t obvious at this first stage?

So our advice here is to keep it as simple as possible, but allow room for the project to grow!

Design Testing

Due to the level of complexity of modern webs design, testing the design is vital, possibly more so than the final website. You need to be confident the design will work just as well on a mobile, tablet and desktop, even though they are very different devices. For example, there are some actions and gestures on a desktop that actually don’t exist on a mobile and vice-versa.

You can easily ‘hover’ on a desktop to find out more before clicking an item. How do you hover on a mobile, thats right, you can't. By the same token, you can swipe left or right on a mobile, but how would this work on a desktop display? In some areas of usage, these have very different requirements which is why it’s important the design is fully tested on all mobile devices and desktops before the real ‘heavy lifting’ begins and you actually build the website. It’s much more difficult to fix design and layout snags to a website that has already been built.

Summary

In summary, it's hard to think of every aspect of the design process yourself so why not take advantage of agencies such as ourselves which can do it all for you? We'd love to chat to you more about how we can take your vision and turn it into a reality - get in touch to find out how we can help.