In an ever-changing world of advancements in technology, from AI to augmented reality, the basic principles of website design haven’t changed much over the last 20 years.
Every year, without fail, we see new articles pop up on our timelines that detail “the top web design trends you need to know about in X”. To be fair, they often include valuable information that is worth reading. Like the world of fashion, website design is often evolving and following different trends. However, one thing to note, the core fundamentals of good quality web design, the elements that differentiate a stunningly designed website to that of a poor one, were the same as they were 2 decades ago.
So don’t worry too much about artificial intelligence and chatbots for the second. We are going to take you down the nursery slope by laying out the elements that make up a clean, concise, user-friendly site, as well as highlighting the do’s and don’ts to keep your site looking smart.
the good
a clear user journey
Before you invest too much into the design of your site, you need to take quality time to establish your sites key purpose. Is it to provide information? Provide a service? Show entertaining content? Or is it to sell a product? Let’s say for example that you are designing a site with the objective of “selling designer men’s watches to a global audience”. As simple as this may sound, people still tend to skip this step. Without a clear objective, it’s all too easy to forget about your end-user.
Once you have identified the purpose your site serves, then you can start to fiddle with the user journey. Where do you want your users to go and where do you want them to end up? What actions will they need to take for them to convert into a sale? The simplest way to do this is to use clear calls to action which helps the end-user navigate through your site. Imagine the analogy of a supermarket labelling where all of their items are like the fruit and veg section, the cereal, the eggs and most importantly, the location of the checkout. You need to take your customer by the hand and guide them every step of the way.
Information that is easy to find
A key feature to the design of any website is deciding on what you want your users to find when they land on your site and then giving it to them in a simple and organised way. Regardless of what the end goal is of your site, your users should have all of the information they are seeking at their fingertips, without having to search around for it. If you make it too difficult for them to find things you will lose them forever.
Let’s take an e-commerce site, for example, your top navigation bar should include the categories of all the different products that you sell so that this bitesize information is easy to digest. It should also contain subcategories including ‘new’ and ‘sale’. Within the navigation bar, there should also be a search bar that is easy to use for your users to look for specific products.
By taking the time to think about the steps that you want your end-user to take will enable you to build a clear navigation menu to help them to get to their destination quickly and efficiently. Think about how you trim the fat and reduce the steps in their journey, such as creating bold call to action buttons like ‘purchase’ and ‘call now’. This will help your conversions in the long run. It’s also wise to add your business’s contact details, address (if applicable), FAQs, social links, and terms and conditions.
Mobile takes centre stage
Whilst most of the core elements of web design have remained the same since the mid 90’s, there is one major difference. You guessed… mobile browsing. The rise of smartphones means that most people consume content through mobile browsing, which means that designers have to take a great deal of care creating sites that look aesthetically pleasing when viewed on a smartphone. Rather than smartphone design being an afterthought, mobile design should be the starting point.
Designing for mobile means that your design should be adapted to suit smaller screen size and also cater to bandwidth limitations. With keeping these parameters in mind, it means you now have to prioritise what your end-user views first (almost like a hierarchy of content). How will you go about fulfilling your site’s objective? What can you do to prioritise your homepage’s visuals so they are not missed by would-be buyers?
Making your site visually engaging
Creating a visually engaging site is all about finding the balance between design and practical usability. It is a fine-line, you need to attract without overwhelming people with content and call to actions. You also need to make sure the site specifically resonates with your target audience. An example of this would be a luxury-fashion consumer will expect an entirely different user experience in comparison to that of a fast-fashion consumer.
In an ideal world, your site should have a clean design, easy to read fonts and minimal amounts of text. The colour scheme that you choose should also compliment the content and not distract from it. If your web design is consistent with your brand then you can’t really go wrong.
It can be difficult to determine whether or not your site needs updating. Although the fundamentals of web design remain the same, you should still aim to refresh your site every 2-3 years. With the changing of screen-size, new devices and different trends, it can be easy for your site to become outdated. If you haven’t given your site a fresh lick of paint in over 5 years, then don’t be surprised when your end-users notice.
Accessible
Accessibility is one of the most important pillars when it comes to design. A comment from the inventor of the World Wide Web explains that -“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.
The best websites that are designed are those that put the user experience first and not the designers or developers. Put simply, your website has to be accessible to all users, from all browsers and devices. Just so you can get familiar with the World Wide Web Consortium, have a look at this Web Content Accessibility Guidelines (WCAG).
Accessibility doesn’t just suit disabled people – it also helps people of the older generation such as your grandmother or your old aunt Mildred, people in rural areas or third world countries and numerous others. All areas of the site has to be visually optimised whether that’s the font size, the way the images are laid out and also your calls to action.
Accessibility also correlates quite closely with business. According to WC3 “accessibility overlaps with other best practices such as mobile web design, device independence, multi-modal interaction, usability, design for older users, and search engine optimization (SEO).”
the bad
A complicated journey
We see quite often that more sites are using features such as Filters, quizzes and lookbooks and although these may seem to be great quirks, they shouldn’t be the primary way you instruct your users to shop.
There is nothing wrong with giving your end-user an option that allows them to refine their search, in fact, if you have a large catalogue of products then it could be a good idea. The main aim of the game, however, is making the journey from homepage to checkout as simple and as streamlined as possible. So make sure you are not over complicating the journey for them by giving them too many subcategories or filters.
Not enough information
Not giving your customers enough information can be a huge hurdle for them to overcome, especially if they are new. When it comes to designing your site, make sure you build in relevant information that not only ties in nicely with the design but also offers helpful links in easy-to-find places. An example of this could be a returns policy in the footer that your customers can see, if you didn’t have this, it could quite easily put some people off from purchasing in the first place.
Style over substance
I am sure you are familiar with the expression “style over substance”, but with website design, it’s far more accurate to describe it as “style over usability”. Even some of the biggest companies out there with websites often sacrifice ease of use for a stunning design. If your choice of website styling impacts your customers browsing experience then it is a bad design… period.
The Zara website is a perfect example of this. Although the design of the website is imaginative and different, compared to the experience of what you would usually expect from an e-commerce site it s difficult and somewhat confusing to search for products as the product image sizes seem to vary with three or four small images per row, whilst using a combination of large images. In our opinion, the site is way too loud.
Slow site speed
Slow site speed is one of the biggest reason why you lose customers, especially if people are casually viewing your content on a smartphone. On average, people who visit your site will only wait two seconds for a web page to load, after that, bounce rate starts to skyrocket. While a lot of the factors of load speed are down to development, some things overlap with the site’s design.
One of the biggest culprits to slow site speed is the size of images and videos that people load onto their sites. Capping your file sizes at 1MB and using JPEGs and PNGs are a few simple ways that you can optimise your sites loading speed.
the ugly
Scrolljacking
Although we think it’s a good idea to experiment with design, some sites, however, end up on the wrong side of the experimental/ usability divide. One of the most prominent mistakes is what’s referred to as scrolljacking.
Scrolljacking (also named Scroll hijacking) is when a designer or developer manipulates the scrollbar to behave differently to what it normally should. This can be done through animated effects or fixed scroll points.
Scrolljacking seems to be a bit of controversy in the website design world, some big names and agencies use it to try and reinvent the user experience. While it’s true that it can make the user experience more of an interesting, interactive experience, it can also negatively affect usability.
Infinite scrolling
Infinite scrolling is a design technique where new content loads continually as the user scrolls down the page, thus eliminating the need to have lots of different interior pages. You will most commonly find this on Social Media and content sharing sites. Infinite scrolling absolutely has it’s place in web design, but quite often you’ll find it is misused.
Like scrolljacking, if you use it incorrectly it can have a massive impact on your user’s experience. A good example of this is your site’s footer. Most sites have a footer at the bottom of the page which contains useful information, but having a neverending stream of content makes it almost impossible to access.
Infinite scrolling can give your user’s too much choice. Take social media as an example, how many people out there are culprits of mindlessly scrolling through their timelines… we think quite a few. Rather than have a homepage with an endless stream of content, break it down into categories so it’s much easier to digest.
Overusing animations
Animations are perfect for increasing engagement, adding variety and delighting your users overall. Like most elements of web design, you can have too much of a good thing… just like chocolate.
Animations are normally used sparingly in things such as micro-interactions and transitions, but they can also be used too frequently which can draw your user’s away from the information that actually matters.
Not only does have too many animations on your site harm site speed and, ultimately, your Search Engine Optimisation, but it can also be too much of a distraction thus making your site redundant. In essence, overusing animation can harm your engagement rather than help it.
