How To Make Your Next Website Design Pop

in Design, How To, Webdesign

Bubblegum - Photo by Porcelaingirl °

Web design is one of those areas that when done right, you know it. It looks polished, refined and generally, just well done – it pops! There are a number of ways that you can achieve this and that is by ‘polishing’ off your design. Here we look at some of the ways to do just that.

1. Layout The Fundamentals

Before you go about making your website pop, you first must have your basic fundamentals in place. By this stage you would have done the research, laid out your website appropriately and done most of the basic design work: but you have not yet done ‘the polish’. In this tutorial we are looking at some techniques put in place for a chocolate delivery website; however, these techniques can be applied anywhere.

On another note, you may also like to read about the logo design process for the UKE logo you see below.

Layout The Fundamentals

2. Check Alignment & Spacing

Alignment and spacing in web site design creates order, organises the page and groups parts of the website for easy navigation. In the screenshot below you can see the guidelines in place ensuring everything is aligned (the grid is from www.960.gs). Notice how the logo and all of the text is left aligned? Also, take note of the even spacing around the boxes and text. Use the guidelines in Photoshop to ensure all of your elements are aligned which can be done by dragging ‘rulers’ from your rulers tab. Press Ctrl+R to turn rulers on.

Alignment & Spacing

3. Apply Anti-Aliasing To Text

Something that is often over looked when designing for the web is the use of Anti-Aliasing in your text. For those who don’t know, anti-aliasing is the technique of minimising distortion artefacts. There are a few ways to minimise this distortion in your text but the best way is to make use of your ‘Character’ panel. You can choose between None, Sharp, Crisp, Strong and Smooth. The best way to see what works best is to experiment as different fonts and sizes will yield different results; however, the Sharp setting usually prevails.

Anti Aliased Text

4. Add a 1 Pixel Stroke

Something that really makes a difference in making a website pop is the use of 1 pixel stroked borders and lines. These stroked borders really add that extra crispness to the design as it gives extra contrast to the surrounding elements and gives the design more depth. Notice the zoomed-in screenshot below; see the inner purple lines that run alongside the inside of the boxes? You can add these 1 pixel borders by using your stroke option found in the ‘Blending Options’ panel. This technique also works great for large text.

Pixel Border

5. Add Subtle Gradient Effects

Gradients are popping up everywhere in web design and for a reason – they add depth and real aesthetic to the design. Unlike print design where gradients seem flat, on the screen they make a design come alive. Notice the slight dark to light purple gradient in the screenshot below? Also take note of the slight transparency. These effects give the design a new dimension, making the image come off the screen so to speak. Use the ‘Blending Options’ in Photoshop to create these nice subtle (emphasis on subtle) effects.

Gradient Effects

6. Add Subtle Drop Shadows

Used in conjunction with the gradients and stroked borders is the use of subtle drop shadows. Once again, these shadows add a new depth and dimension to your design as it makes the different elements on the page play against each other so that they pop out at you. Notice in the screenshot below; the logo, text and boxes all have subtle drop shadows applied to them which break them away from the other elements. You can use the Photoshop ‘Blending Options’ to achieve these effects – but make sure you use them in moderation.

Drop Shadow

7. Have a Hierarchy & Call to Action

When someone first visits your website what is the first thing they are going to do? Is there a clear hierarchy of what to read or do first? What is the purpose of the site? These are all questions that you should have considered at the start of the project however now is a good time to go back and reflect on these decisions. Can you adjust the colours, size or position to achieve better results? Notice in the screenshot below that the call to action on the UKE website is the ‘Pick a Basket’ button which is placed conveniently after the main opening slogan.

Call to action

8. Colour Correction & Sharpening

In web design, photos, icons and images are usually quite prominent so you should ensure that they are of the utmost highest quality. Check the color balance, sharpness and contrast of each image and make certain that it balances with the rest of the page and other images. A good way to do this is to make use of Photoshop’s ‘Levels’, ‘Unsharp Masking ‘ and ‘Curves’ functions.

Levels Curves

9. Less Is More.

In web design, the old saying goes, “less is more” (in most cases). After completing your web site design, have a break and come back to it.

  • Is there anything that you can remove, fix, replace, move, change or edit?
  • Does one element take up to much space or draw too much attention?
  • Are there too many colours?
  • Does the site balance?
  • Is there consistency?
  • Can I make use of more white space?

10. Summary

Next time you set out to design your next website you can ask yourself these questions:

  • Have I got the basic fundamentals in place?
  • Can I improve my alignment or spacing?
  • Have I used the appropriate anti-aliasing?
  • Can I sharpen my images or text with strokes or borders?
  • Can I give more depth to the page by using gradients or drop shadows?
  • Is there a clear hierarchy with a call to action?
  • Are all of the images colours corrected, balanced and sharpened?
  • And last of all, ask yourself this: does the website pop?

11. Recommended Web Design Reading

and for lots more recommended web design reading, just search “web design” on Smashing Magazine or view the Interface section on PSD Tuts.

Pictures of Layers Magazine

This tutorial was originally written for Layer’s Magazine May / June edition. Below you can see a few quick snaps of the above article in Layers Magazine.

Categories: Design How To Webdesign

Tags: