Inspect Element

Web Design & Development Blog

Creative Uses of Navigation

July 6th, 2009 — No Comments

With the combination of javascript and CSS, navigation doesn’t have to be static transitions between content or just another standard boring menu. Below is a showcase of creative navigation that can make the user experience more interesting and memorable.

Tap Tap Tap smoothly slides in and out product information.

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.