9 Key Steps To Improving Your Web Design
A visitor will never tell you if your web design is poorly done. They will simply vanish and never return.
As soon as they lose the slightest hint of trust in your website, they’re gone.
People are more sceptical of online brands than ever before. It’s critical to get your design right and keep them browsing.
In this short article, we’re going to point you in the right direction by offering nine critical steps to improving your web design.
It wasn’t long ago that bright, flashing animated popups were all the rage. While there aren’t “rules” in web design, specific tactics and principles will help improve your site’s design.
It’s important to note that good web design and high converting designs aren’t always the same. Simple techniques that don’t distract the user can often achieve the highest conversion rates, especially in eCommerce.
This article isn’t intended to provide advice about designing to achieve better conversion rates. It’s a general roundup on how to improve your web design.
These tips will be helpful across any website and may unintentionally improve conversion rates.
Enough with the introduction. Let’s get into the tip.
1 – Reduce your colour diversity
Using a lot of incongruent colours is a typical beginner web design mistake.
If you’re struggling to get your colour combinations to look good, pick a primary and secondary colour and leave it there. And if you’re unsure how to choose colours that work well together, then use a tool like coolors.co to generate your pallet for you.
There are a thousand colour pallet generators available that mathematically pair colours that will look good together.
These generators will usually give you a pallet with five options. If you’re feeling adventurous, there’s no need to use more than a primary colour, secondary colour, and maybe another accent.
Another tip that helps keep your web design looking tidy reduces your colour diversity is mainly straight white or very dark backgrounds.
Backgrounds shouldn’t ever command your visitors’ attention, so it’s wise to avoid adding your distracting colours there.
We’ve written a great article covering how website colours impact reader attention and psychology in more depth.
Stripe.io has been analysed to death, but it remains an excellent example of getting the most out of a simple colour pallet.
Despite having a rainbow top fold, the site only showcases two primary colours combined with white or dark background sections.
2 – Pick the colour theme that suits your brand.
The colour theme we’re referring to here is light or dark.
Each theme carries some connotations, so it’s crucial to pick the right one for your website.
For example, websites like frame.io have taken a dark theme. This fits with their brand identity because they’re in the film industry and have made their site feel like a cinema.
Another example is elastic.co/ who provides cybersecurity services. Their website is designed with a light theme. This was a good decision because they don’t want their service associated with dark criminal activities.
If you’re running a small agency, it won’t matter as much as the theme you choose. However, your site design will benefit from the consistency of a light or dark theme.
3 – Add a 12 column grid and standard margin.
Consistency and alignment are subtle but significant forces in web design.
One of the best ways to ensure that everything on your site is aligned correctly is to overlay your design with a 12-column grid.
Make sure you add a bit of margin on each side of the page.
Using a 12-column grid makes life significantly easier for your web developer at the end of the day.
Assuming that your site is being built with a reputable framework like WordPress or GatsbyJS, your developer will use CSS to align each element to the correct column.
When smaller devices access your website, the number of columns on the page reduces, and each element automatically resizes.
This saves you and your developer the hassle of creating multiple website versions to fit specific devices.
Most web design tools will allow you to apply this kind of grid with a few clicks. In our preferred tool, Figma, it’s as simple as selecting the object you want to add a grid to and then picking the option from the side menu.
4 – Standardise your components & sections
Where possible, try to standardise the sections that get reused across your website.
These include but are not limited to; navigation, footer, heroes, authoritative content, videos, and contact forms.
Consistency across a website looks tidy and makes for an excellent user experience. Visitors will notice when components and sections don’t follow a consistent pattern.
This tip extends to icons, buttons, links, text styles, typography, form inputs, etc. It often helps to group these components into a design system or component library.
When you need to extend the design, you can quickly grab the components and arrange the new page without introducing variation or inconsistency.
5 – Find attractive typography.
Please don’t default to using Montserrat. It’s not the worst typography globally, but it’s everywhere, especially on lower-budget websites.
Distance yourself from the rest of the pack by finding stylish typography that matches your brand and theme.
We enjoy the fonts offered by Apito Foundry. In most cases, you can access the fonts for free or under a pay-what-you-want model.
Apito Foundry isn’t as well known as many larger font retailers, so the chances of seeing the same font plastered all over the web are reduced.
If you can’t find a font that does what you need, you can always browse through Google Fonts’ massive collection.
A word of warning, though, finding a great font in Google’s library can be a huge time sink that yields little result.
Implementing typography on your site design should be approached similarly to colours. Don’t try to use too many fonts.
Two is plenty and can be used in different combinations to highlight content to significant effect.
6 – Ditch the Alegria “corporate art style.”
Alegria is a design style that A LA-based design firm called Buck created in 2017 specifically for Facebook. It’s commonly referred to as the “corporate art style”.
This art style features flat, vector-based, 2-dimensional illustrations of disproportionate people performing overly happy activities. From 2017 to 2020, it was everywhere.
While this style has nothing “wrong”, it’s become synonymous with big tech companies.
While this trend has started to break, for a while there, you could see this corporate art style on Facebook, Google, Slack, and just about every other giant in the tech scene.
When the industry leaders do something, it’s always worth noting, but in this situation, it triggered an oversaturation of this style on the entire web.
The biggest issue with this corporate art style is it doesn’t leave much room for variation. The cartoon people all end up looking the same as every other site.
As an alternative, we recommend bringing a more modern, fashionable style like neumorphism into your web design.
Neumorphism is the successor to skeuomorphism, the “in” trend adopted by Apple in the early days of the iPhone. The new approach is the practice of turning flat icons into realistic 3D objects.
It features a “plastic” look that incorporates drop shadows to create layered, 3D looks.
This is a trend you’ll see a lot more of in 2022 and beyond, so it’s worth getting on board early!
7 – Use high-quality images
Avoid free stock images where possible. Generic, happy-looking people performing meaningless tasks are the web design equivalent of white noise.
It’s easy enough to think that viewers will resonate with the happy mood of the people in the stock imagery, but it rarely achieves this result.
High-quality images usually cost money, but finding some hidden gems on Unsplash or Pexels for free is possible.
Once you’ve found some attractive photos that reflect your website’s messaging correctly, it can help to dress them up with exciting borders and shapes.
Not only does this slight modification make your images look more “designed”, but it also provides the opportunity to crop out some of the less critical parts of the image.
Just about every website on the internet has a header and footer. The key functional components of a website, and to be honest, most websites take the same approach.
While we don’t suggest going too crazy with the operation of your navigation and footer, adding some creative flair goes a long way to distinguish your site from the pack.
We’ve been enjoying a navigation style recently: the full-width dropdown that features an image on one side to introduce the user to the selection.
We’ve also been appreciating more giant footers that call the user to act in some way. There’s no point wasting the bottom of your page.
If a user makes it to the bottom, they’re probably looking for something. Take the chance to ask them to do something.
9 – Provide a single focus
One habit inexperienced designers tend to lean towards is adding too many attention-grabbing elements in the same area of a web page.
Defining “too many” elements is kind of tricky, but a general approach is thinking about the page as four quarters and checking where your attention is drawn in each quarter.
It’s wise to treat visitor’s attention with scarcity.
Adding multiple calls to actions, buttons, or interactive elements in the same page area is a recipe for overwhelm. If users don’t know which element to focus on, they will not focus on anything.
If your design is intended to focus a user’s attention in one area, then don’t give them any options.
Removing elements from your design can feel like you’re “not doing enough”. But quite often, having fewer visual options makes for a much cleaner look.
Providing a single focus is a contextual suggestion. Some situations require fitting as many possible options into a small area.
This is pretty common for travel websites where users don’t usually have any reason to scroll because their objective is achieved in the top fold.
When there’s not a solid reason to add clutter and distraction to your page, avoid it at all costs.
Improving your Web Design Wrap up
We’ve outlined our favourite nine critical steps to improving your web design.
None of these tips is revolutionary, but they will hopefully give you some considerations to apply to your design approach.
The most important “change” any web design can make is simplicity and organisation.
Every website has a lot to say, and it’s challenging to figure out which part of the content should feature in the most prominent location.
This decision can often lead to design teams trying to squeeze every inch of real estate out of a given screen.
Overcrowding a page, using too many colours, or inconsistent components quickly creates a messy look.
Visitors are already a sceptical, skittish lot.
They require a familiar design that doesn’t force them to figure out what they’re looking at.
You can achieve this with good website design without being overly creative.
Consistency, alignment, a simple colour scheme, and high-quality images will help your web design improve dramatically.
Author Bio: Lori Wade is a writer interested in various spheres, from eCommerce to web development and new technologies. If you are interested in the above topics, you can find her on LinkedIn. Read and take over Lori’s valuable insights!
