6 Tips to Give Your Website an Instant Facelift

November 17, 2015

If your website or application hasn’t had a touch of a professional designer yet, try the follow tips to give it an instant facelift. These are my compilations from the most common mistakes I’ve seen and will work in most cases.

1. Delete

This is the hardest! Take a look at your page and remove as many details as you can that are adding almost no value. Unless you have a strong justification for it and can back it up with data, remove it.

You might feel that every feature, every section is important. But by keeping all of it, you end up diluting the focus.

Try this exercise alone or with the team:

• Start with $100

• Distribute the money appropriately to the sections on the screen based on importance.

• Once you've exhausted all of it, deliberate if you can get rid of the sections that received little or no money.

• Consider doing a squint test by leaning back and looking at the screen while squinting your eyes.

2. Highlight

The most important detail and actions on the screen should be easy to spot. If you did the exercise, you know what the important details are. Make sure their importance is represented visually too.

Here are a few techniques to do that:

• Make the text larger or bolder

• Add contrast by changing the color of the text or background to a more contrasting one.

• If it’s the text on an image, add a black overlay to the background and a black text shadow.

3. Simplify

Unless you are creating an art, we often like to see uniformity in what we see. Reduce the number of things the user needs to get used to.

How many typefaces, text sizes and colors are you using? Try limiting the base colors and typefaces to two. Use the shades of the chosen color if required. Also try using single column layouts.

4. Add more white space

When in doubt, err on the side of more white space. For paragraphs, try a line height of 1.4 to 1.7 times the font size. Add a good amount of spacings between title and paragraphs. Make sure there is enough room around text in buttons and around them too.

5. Limit characters in content

Limit characters to 60 to 70 in a line. You can do this by adjusting font size and the width of the test area.

6. Align everything

Draw grid lines and try to align as many elements as you can. Also try keeping equal spacings around each element.

With these 6 tips, your web or mobile application should see a facelift. But the techniques mentioned here have more than what meets the eye. A professional designer will use the right techniques at the right places to meet the desired outcome.