Inspect Element Redesign
July 7th, 2009 — 1 Comment
A month ago I launched Inspect Element with the aim of sharing what I learn in web design and development with the world. The basic problem was that the design just wasn’t up to my usual standard. It wasn’t rushed or pushed out early but had quickly become something that I wasn’t proud of. The combination of that and the fact that this is something I’ll be working seven days a week meant that I had to do something about it sooner or later.
Read more...Creative Uses of Navigation
July 6th, 2009 — 1 Comment
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.
Read more...7 Techniques to Improve Your Web Designs
June 29th, 2009 — 17 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...Web Design Podcasts that You Should be Listening to and Watching
June 25th, 2009 — 4 Comments
One of the ways that I started learning about web design was by listening to podcasts related to web design while working in a warehouse, assembling equipment for the disabled. I learnt a lot from this relatively new form of media and best of all, it didn’t cost me a penny! So take advantage and make sure to at least check out the podcasts below:
Read more...
Creating a Web Design from Scratch: Getting Started
June 23rd, 2009 — 4 Comments
Often the most difficult part of web design is getting a design off the ground. It is important to sufficiently research whatever project you’re working on before you really get stuck into the design. Even then you may find yourself staring at that daunting blank PhotoShop screen. There are a couple of things that can help you get going.
Read more...
Superb Examples of Form Design
June 22nd, 2009 — 20 Comments
Following on from our look at fantastic login pages comes a look at more comprehensive form design such as contact forms, order forms, sign up forms and comment forms. Below are just some of the best examples on the web.
WPCoder uses a high quality image of a clipboard for their order form.
20 Great Examples of the Use of Brown in Web Design
June 15th, 2009 — 24 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...