8 Tips To Improve Your Website Designs

by
Rachel Hurry
8-tips-to-improve-your-website-designs-02
If you’re just starting out in web design or you’ve been doing this a while and just want continue improving you’re in the right place. In this post we’re going over 8 tips for refining your web design skills and delivering higher-value, more refined designs to your clients.

01 - White space is your friend

The holy grail of all web design tips - MORE WHITE SPACE!!!

Great web design is just as much about the spaces you leave “un-designed” as it is about the spaces you fill up with content and imagery.

White space (also called negative space) is essentially referring to the “gaps' ' between your design elements; the space between images and content, the padding between sections and the margins that determine how far away from the edge of the screen your content sits etc…

This intentional use of space helps the user navigate a page layout more efficiently. It creates the necessary pause in digesting what’s in front of them, allowing them to focus on a certain area before moving ahead to the next. Effective use of white space can immediately make a design look and feel more premium and put together. Unless you’re going for a maximalist design where clutter and chaos are part of the concept, white space will always be your friend - use it!

02 - Use proper hierarchy with your type

One of the key goals of a strong website design is to give the user a good experience. This can’t be done if the user can’t tell which piece of text is more important from the other.

Type hierarchy is the technical term for organizing your written content by priority using size, color and font selection to show a user which piece of text they should read first. Without this balance, the user is met with a large wall of text that they will most likely skim right over.

To do type hierarchy properly you want to focus on 3 key aspects:

  1. Choose only 2-3 fonts for your design at a maximum, and then decide what role each font will have in the design (i.e. headings, sub headings and body copy)
  2. Play with weights, formatting and styling to create differentiation. eg. all subheadings are uppercase and bold, while the body copy is sentence case and set at a regular weight.
  3. Size differentiation helps create visual priority - the bigger the text the more likely a user is to see it first. However, you don’t want to go over the top here and make all your headings so enormous they’re unreadable - at all times, your priority should be legibility.

03 - Bad quality images are a no no.

There’s no real way to beat around the bush on this one - the days of pixelated, grainy imagery are gone. You need good quality imagery in your designs. Whether you select images from a stock website or hire a photographer to take new photos, good imagery can make or break a user’s experience. We are primarily visual creatures and process images up to 60,000 times faster than text (source) and so it is key that the images your users see are good.

But not only that, you want them to align with the brand - from the tones of the images to the subject matter, it’s no good if the image is super high resolution and looks great, but is totally off-brand and out of context.

All three of the images below are for jewelry brands, but all three have a different look and feel. When choosing or art directing your website’s images, consider the brand carefully as well as the audience who will experience them.

04 - Colour: use it wisely

In web design we often talk about the 60/30/10 rule which is a great starting point for designers to use when selecting colors for their designs. Whether you get given a color palette from the brand guidelines of the business you’re designing a site for, or you’re tasked with selecting a new palette, this rule will stand you in good stead for success.

it works like this:

60% of the design should be the dominant color, 30% should be the secondary color and 10% the accent color. See this rule in action below:

In theory it can be applied as follows:

  1. 60% for backgrounds
  2. 30% for Text
  3. 10% for buttons, links and accents

Check out the post we did on this rule on instagram, and if you want more of a guide on different ways to apply color to a design, have a look at this post.

05 - Give your user feedback

I don’t mean literally telling them they’re doing a great job while scrolling… I mean users are always searching for clues that they’re going in the right direction. In the digital world, because it is far less tactile than the real world, we rely on digital methods of receiving information about our actions online.

This “feedback” can take the form of hover states on buttons and clickable elements, states on form fields that tell us if what we’ve typed in will work or not, and subtle clues that helps us understand where on the website or page we’re at, such as a nav link changing colour. These small details help users feel safe and informed during their time on the website.

it is a common misconception that these states are something that gets left for the development phase, but that would be incorrect. It’s vital that you consider these details early on and design for them appropriately so that you ensure your developer (if it’s not you) implements them properly.

Small details like this take a website to the next level and can make it feel more dynamic, alive and interesting to interact with. Check out this YouTube Short we did on making cool looking buttons in Webflow.

06 - Focus on your Footer!

I see too many designers neglect their footers. This is a key aspect of a website’s success and is often the last things a user sees if they make it to the bottom of your pages. A great footer can keep your user engaged, provide additional value and can even help you rank better on Google!

A great footer can include the following information if you’re stuck for ideas:

  1. Business information: contact details, registration numbers, addresses or locations etc.
  2. Key nav links: either additional links to more info and resources or a shortened version of your nav
  3. social media links: keep your users engaged by linking off to other platforms that might interest them
  4. Privacy policy and terms of use links: two vital pages on any website and should be easy to access from the footer.
  5. Copyright information if relevant

Don’t shy away from footers! They can be as large or as small as you’d like but should be designed carefully and intentionally and definitely not neglected!

07 - Include a clear navigation

Following on from having a great footer, you also want to ensure your navigation is clean, easy to use and most importantly; easy to find! There is nothing more frustrating that not being able to find your way around a website.

Here are some basic tips for a great nav:

  1. Don’t put it somewhere unexpected: as tempted as you might be to make your nav something totally new and cool, if your user cant find it, it’s utterly useless.
  2. Avoid too many drop downs: according to usability studies from the NN Group, drop downs are being labeled as annoying. They are also difficult for search engines to crawl.
  3. Keep your nav simple: Too many links will give your users decision paralysis and lead to them avoiding taking any action at all. Unless of course you’re designing an e-commerce website and it’s expected that the menu will include 70 million items.
  4. The order of your nav links is key: Psychology studies show that, attention and retention are highest for things that appear at the beginning and at the end. It’s called the “serial position effect,” - read more on it here.

08 - Keep your user in mind

It should go without saying but I’m adding it in here anyway. When designing, always keep your users in mind. What works for one audience, may not work for another. Make sure you’ve done proper research into who you’re designing for (your client’s clients) and then check every design decision you make to ensure you’re keeping them top of mind. Ask yourself:

  1. Will this resonate with the user?
  2. Does this help them get to their goal faster?
  3. Will this make sense to the user?
  4. What am I trying to do with this element?
  5. What is the user supposed to do here?

The world of web design is ever-changing and as technology advances and as businesses change web design will change too. But the fundamentals of great design probably wont. When in doubt, go back to the basics and get those right first. Once you’ve mastered the basics you can start breaking the rules with style.

If you want to learn how to design and deliver incredible websites, check out Web Design Becoming a Professional - our pro course on leveling up your web design business and creating sites that are totally brag-worthy. We’ll see you inside 😇

Free E-Book

The Ultimate Guide For Color Psychology

Download For Free

Join Our Mailing List!

Get our weekly updates, including high-value tips and free resources that will help you take your design career to the next level.