The Principles of Good Web Design Part 3: Colour
September 24th, 2009 — 14 Comments
This is the third part in this series of The Principles of Good Web Design. The other parts are listed below:
Colour is an often underrated aspect of web design but can play a very important role in usability as well as convey the overall meaning of a brand as well as the overall mood of the website. Different colour combinations can evoke different emotions and reactions.
Colour design is often very subjective but it is important to keep usability in mind. Changing colour for subjective reasons may ultimately have a negative affect on usability.
Read more...42 Very Colourful Websites
August 31st, 2009 — 24 Comments
Great use of colour can really make a design stand out but deciding on an effective colour scheme can be a difficult thing to achieve. The following examples all use a number of different colours to create a visual impact which is the first thing a visitor is likely to notice. If the colours blend well together then that initial impact will almost always be a positive one.
Make Photoshop Faster
7 Techniques to Improve Your Web Designs
June 29th, 2009 — 16 Comments
In no particular order (except the first one) here are 7 ways that you can improve your web designs:
1. Learn to Code HTML and CSS
This probably belongs at number one as it’s probably the important thing to consider when designing for the web. Having an understanding of how sites are actually rendered in browsers prevents you from going crazy with a design that just will not work for online use. By keeping up to date with what is possible with CSS allows you to implement techniques into your design that may otherwise have not been possible.
Great Examples of Designs which had CSS in Mind
Here are some great examples of the use of the most up to date CSS3 techniques:
Atebits uses text-shadow on text, negating the need for the use of images. They also use -webkit-transform and -webkit-transition to add some animation to the three icons, which is currently only supported in webkit based browsers such as Chrome and Safari.
Elliot Jay Stocks uses a CSS3 method known as @font-face to allow the browser to download and use a specific font, in this case Graublau. This also negates the need to use an image.
2. Add Detail
Good use of detail in a web design can be the difference between a good design and a great one.
Examples of Detail
Metalab uses a good mix of shading, gradients and shadows to addd extra detail.
We Follow‘s subtle use of gradients and shadows adds effective detail to it’s user interface.
3. Effective Use of Whitespace
There’s nothing worse that trying to read something but the design has cramped the text right next to other elements on the page in order to fit more detail in a small space. It leads to a frustrating experience. Good use of whitespace can give elements such as text room to breathe, reducing the strain on users’ eyes and making for a pleasurable experience.
Examples of Effective Use of Whitespace
Soccernet makes very good use of white space in their articles. As you can seem the text is positioned away from other elements on the page improving readability.
Usability Post uses whitespace similarly to Soccernet.
4. Use of Imagery
It’s no good if you have a killer design but use poor quality images. Images should complement the design to help sell a product or convey a meaning or even just to look attractive.
Examples of Good Imagery
Palm uses a beautiful image as the header of the Palm Pre product page. This does a fantastic job of showing off the product in a bright and vibrant way.
Tomáš Pojeta uses illustrations to really bring his site to life.
5. Making the Most of Colour
Colour is often an underused property of web design. More attention should be applied to colour as it can help guide a user in the direction you want. For example, links on a page should be a different colour from the main text to help distinguish it as a link. If links are are of little contrast to the text then how can you expect users to notice them and click through to where you want them to go?
Examples that Make the Most of Colour
Sam Brown uses multiple colours on a dark background as well as a coloured background on hover to clearly display links.
MIX Online has colour coded navigation that also changes the appearance of whatever page you are on to the relevant colour.
6. Don’t Forget about the Footer
Footer designs are often neglected due to designer’s perception of the importance of them. They can be more useful than you think as they can contain extra information that doesn’t belong elsewhere on the page. They are also a good way of guiding users to other content on your site.
NOTE: I haven’t forgotten about the footer for Inspect Element! I will be adding to it in the coming weeks.
Great Examples of Footer Design
Jason Santa Maria places plenty extra information in an oversized footer.
Web Designer Wall tries to keep the user on the site by linking to recent posts and recent comments. This can be a particular technique on a blog where the user scrolls to the bottom of the page after reading an article.
7. Clear Navigation
Navigation is one of the most important areas of a site as it is the primary way of getting using the site. By using clear easy to use navigation, you are improving the usability of your site and reducing frustration as users try to find the content they are looking for.
Examples of Clear Navigation
Disambiguity uses a tab system to clearly define what section the user is on.
Dabs uses a tab system too but also uses a sidebar on the left to dive deep down into sub-categories which are colour coded for even more definition.
Always Look for Ways of Improving
Hopefully you already use these techniques in your designs as they can go a long way to improving a design. If you don’t then take not of it all. Do some research and find out who else uses these methods well so you can learn and try to improve on what’s out there.
Read more...20 Great Examples of the Use of Brown in Web Design
June 15th, 2009 — 23 Comments
This is an extensive follow up to a post that I wrote on my own personal blog a little while ago before Inspect Element was even a twinkle in my eye. Now time to let the designs to do the talking:
Read more...