Three Techniques you Should be using when Designing a Website
Web design continues to evolve at an alarming rate but in the past two or three years I have been designing, I have found that there are two or three techniques, that when followed, always lead to visually stunning website design. When designing websites some people may instinctively follow these techniques, others, due to experience may have learnt to follow them, but for the people who sometimes struggle with designing aesthetically pleasing website design and are just missing that certain ‘touch’, I suggest you try the following techniques.
Consistency
One of the most important techniques is consistency. If you use the default styling of a website you will notice how consistent the styling remains. Links have the colour blue and are underlined, lists look like lists with bullet points or numbers. I understand that styling can vary slightly between browsers but the consistency is present.
By being consistent you are reducing confusion and improving the user’s experience. If a person visits your website and can’t find a single underlined blue word he/she immediately has to determine how the links are styled on the website. If the user accomplishes this and finds out that links are highlighted brown then the user will then know what links are available and what to click on. If however some links are styled differently on the page there is a high chance that the user may miss or ignore them. For this reason it is essential that the number of different stylings you have for any element is kept to a low value, I would recommend about three. Of course to be fully consistent only one styling should be given to each element with perhaps some differentiating values for padding and margin to position elements.
One website I particular enjoy that maintains link consistency is CSS Wizardry by Harry Roberts:
He actually uses four link stylings on the page but the majority of links have one particular styling. Links that he has styled differently are renowned to be links no matter how they’re designed. These include navigation and the logo/name of the website.
I mentioned padding and margin values above and stated that they can vary for positioning purposes. Although this is true, again the less number of different values you use for margin and padding you will find the better your design will look. CSS Wizardry (without looking at the source) looks very consistent. The same line-height is maintained throughout the design, as well as indentations. There are also very few variations in font-sizes.
Subtlety
Another technique that involves websites with more rich designs that use a number of images, is subtlety. Many designers choose to question whether an element or image is required on a webpage, if it is not they discard it. Web designers that tend to do this are more likely to find minimalism is their acquired skill. However, although some elements may be removed, there are some that when made more subtle their effect magnifies.
Liam McKay of WeFunction is somewhat of an expert with this technique, just view his work on Dribbble and you will understand the true meaning of subtlety.
Even Google emphasises the importance of subtlety after their logo redesign. The previous logo with its bold and outdated bevelled surface and dark shadow is reduced to a logo with a hint of bevelled surface and a drop shadow.
White space
A final technique is the use of white space. There have been many articles regarding this topic and so you should be familiar with this term. However, for the few who aren’t, white space is in a way, emptiness. It is areas of design that contain no elements. For example, if you were to give an element a padding value of 20 pixels then that space would be white space (unless of course there is something absolutely/relatively position there).
Now when it comes to white space I believe the more the better, it is for this reason that I can’t understand why some designers would want to cram two elements close together. A website should never be cluttered and if it is, then it needs a rethink and a redesign/realign. Like many techniques white space continually gets used more and more every day.
Two websites that I believe use white space effectively are:
Kaleidoscope
WPBundle
For each section on both websites almost a whole screen resolution is given. This puts traditional website designs to shame with 2,3 even 4 columned layouts. Every section clear and there is no confusion to what section you are reading.
In summary
By following the above techniques I am certain that your website designs will improve. As long as attempt any of these techniques you should see an improvement in your work. Of course there a number of other techniques that can and should be used but I feel the ones mentioned are the most important. Well there you have it, I hope you enjoyed this article and I look forward to your new website designs.
This entry was posted on Monday, July 26th, 2010 at 16:56 and is filed under Articles. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
nice article buddy 😀
Cheers bud 🙂
“By being consistent you are reducing confusion and improving the user�s experience. If a person visits your website and can�t find a single underlined blue word he/she immediately has to determine how the links are styled on the website.”
This is wrong, I mean c’mon. How many websites do you see these days with blue underlined links? The whole point of a client contracting a web designer is to make their website usable and accessible. If it’s the case that a visitor has difficulty determining what are links and what is text, the web designer has failed to their job correctly.
Great article, however.
well, i do agree with this because when you look at it from the visitors point of view, and with this i mean the people who aren�t experienced with usability etc. They do look for those blue underlined links.
For example when your grandmother, uncle or father where browsing the web and visiting a site, they will look for those blue underlined links because there used to. And I�m sure there are plenty of users who think this way.
When we as designers and developers don�t want this then we do need to find different solutions to make visitors aware of these links.
Hi!
Enjoyed the article about the use of white space.
Took her into service.
Thank you.