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.
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.
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.
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.
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.
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.
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.
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.
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?
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
- How To Elevate Your Website Design Process & Results
- From PSD To HTML: Building a Set Of Website Designs Step By Step
- 10 Principles of Effective Web Design
- 5 More Principles of Effective Web Design
- 10 Web Design Usability Issues You Should Be Aware Of
- Applying Devine Proportion To Your Web Design
- 8 Useful Tips To Help Your Website Convert
- 10 SEO Rules for Designers
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.