Top 5 Tips for a Website Facelift

by | Brand Identity, Emily's Advice, Website Design, Website Tips & Tricks

When you know it’s time for an upgrade

Maybe you’ve had a website for a while and these days it looks a bit dated or not as sharp as you’d like. Or perhaps you’ve had it done recently, and you know it needs some visual tweaking but you can’t put your finger on where the work needs to be done. If that’s the case, then here are 5 design tricks to improve the look of any website:

 

1. Add adequate & consistent spacing to your website’s content.

Unfortunately, it’s quite common for websites to be built with a ton of information crammed into as small of an area as possible. Perhaps the logic is that the viewer may not notice the content at all if it’s not visible straight away, or that it will seem more professional to have a whole lot of extra information included in an area, or that the site will look too empty and under-designed. Whatever the good intention, the truth is, adequate spacing is SO important when breaking up information and making it easily digestible for your audience. In the website world, this is called ‘white space’ and it gives the user breathing room to focus on each key element one at a time.

Tips & Tricks:

  • Break up your individual website sections with adequate spacing so it is clear to your users that they ARE separate sections (30px height minimum)
  • Consider white space from all angles, ie: in the top, left, bottom and/or right areas of each section.
  • Be consistent with how you much space you include between sections and around images.

 

2. Fix any image sizing, position or resolution issues.

There is no doubt about it if a website has blurry or pixelated images; it instantly discredits your brand. Even if these photos are perfectly relevant to your business, the first thing your visitor will notice is its poor quality. This can also be said for how an image is cropped, positioned or even stretched into a column within your site. A rule of thumb is, if you have to question whether it is good enough, the chances are that it isn’t.

An example of a subtle blur which really needs correcting to best represent the quality of the business:

Tips & Tricks:

  • Make sure that your images in any given section have the same dimensions if they are meant to line up in a column. Consistency is key!
  • Avoid using images that have a really low resolution, are blurry or are too under or overexposed. In these cases, you’d likely be better off finding a stock image or getting more photos taken. Choose the best stock images.
  • If the image seems perfect, but just isn’t showing up right, it’s likely an issue with the dimension settings within the website is the cause. In this case, get in touch with your designer to help you with these web image configurations!

 

3. Maintain colour scheme consistency with as few colours as necessary.

It’s easy to get really excited about all the different colours you can use for different products you may have or different pages on your website. Unfortunately, the use of too many colours often gives off a message of lack of direction and can make your branding fall short. If you look at most major brands, you will notice that they have one or two dominant colours, followed by one or two additional complimentary colours. For example, think about Coca Cola, Amazon, or BMW. Their branding colours hold true throughout their websites and other marketing materials which gives people confidence in their brand’s identity.

Tips & Tricks:

  • Stick to between 1 – 3 main colours on your website that match your branding.
  • Be consistent with how you use your colour scheme on each page of your website. For example, if your section titles are all blue except a few, it will be confusing so make them all blue!
  • Be very careful to not overlay colours that clash and consider colour blindness (8% of men are colour blind!!) when putting colour text over colour backgrounds. Examples of colour clashing:

 

4. Use limited font styles (fontfaces) and sizes.

Just like colours, if you have too many different fonts of all different sizes on your website, it will look confusing and unprofessional.

Tips & Tricks:

  • Pick 2 or 3 font styles (fontfaces) for your website
  • Separate your fonts and sizes into the different content elements, for example, ALL section titles are Arial font and 32px in size.
  • Pick font styles and sizes that are EASY TO READ. Even if they look really cool, if you’re website users can’t read it, they will get frustrated and find another business instead of yours!

 

5. Align your content into a clear grid structure.

Professional websites are divided up into columns and rows so that the content is consistently aligned. Not done, the effect can be really hard to pin point consciously, but if is floating anywhere and everywhere, it looks really confusing and messy. News websites have mastered the use of grids as they have carried the classic structure over from print layouts, but you don’t have to go through a super technical process to make a big difference to the look of your website.

Tips & Tricks:

  • Check your website content has defined rows and columns. In any given row, are the columns’ texts lining up? Are images the right sizes to match the text block next to them?
  • Check that there is a defined and consistent margin on both the left and right sides of your homepage so that content is generally flush with them from top to bottom.
  • Read this great article for a ton of great information and examples: www.canva.com/learn/grid-design/

 

You may have noticed my consistent use of the word CONSISTENCY! This is the key to any great design because it pulls everything together into a neat and digestible package. If your website isn’t looking quite right, you can be nearly positive that it’s due to a discrepancy in one or more of these website design areas.

As always, if you would like a website audit or free consultation to help you with these improvements, don’t hesitate to get in touch!