We are  going to start this week by tackling the issue web designers (and developers) for that matter always face at some stage in their careers; a loss of creative juices. Sometimes losing your creative juices can’t come at a worst time; i.e. you have an appointment to go through a concept with your boss in 1 hour and you haven’t started! Oh Oh!

So let’s get going and look at a couple of ways which have helped me get my creative juices flowing in the past.

Web design inspiration: Getting your groove back…

1. Look around you for inspiration

Where we live, work, eat, sleep and more has a lot to offer in terms of inspiration. Whether it be the retro ‘Astro Boy’ poster on your wall or pattern-infused bed sheets – look around you and you will find something that will get your visual and creative juices flowing. Next time you are on a trip in the car or on a bus/train, look around you. Signage, foliage, Zebra-stripes and more can help.

2. Check out web design galleries

Web design galleries have been shown to offer tons of inspiration. Galleries like: CSS Remix, CSS Mania, CSS Drive, CSS Elite, CSS Beauty, CSS Vault, CSS Import, Screenfluent, Screenalicio.us, We Love WP, Design Snack, Web Creme, Best Web Gallery and more showcase some exceptional design work which will definitely give you a bit of an edge when designing your own websites.

3. Visit your local record store

You may think this is a bit left-field, but there have been numerous times when I have rummaged through a record store for inspiration. Record stores hold a lot of design inspiration in the form of CD/DVD album art. I have found that many alternative/rock bands have cool album art – generally not a physical representation of the band, but a graphical or uber-cool concept art. Here are some examples of cool album art that can offer plenty of design inspiration.

We shot the moon album art

Joint effort album art

James Blunt - All the lost souls album art

Dashboard Confessional - The shade of poison trees album art

4. Visit an art gallery or museum

Art galleries are a great place to find inspiration. Whether it be a painting, or a statue of a 15th-century water creature – but above all, the buildings themselves! – as they say, don’t knock it till you’ve tried it!

Denver Art Museum

5. Buy some books

Books are always great for inspiration – even non design-based books! Anything from the spine of the book to the front or back cover can provide inspiration – however, actual books based on designs are great too.

Some of the best books I’ve read/found to help with inspiration include:

6. Check out other designer’s work

This is an important one… There is nothing like looking at your peers’ designs for inspiration. Start with sites like Deviant Art and  Threadless – both design communities which are constantly updated with heaps, and I mean heaps of design and other forms of inspiration.

7. Take some photographs of interesting objects and textures

Next time you’re out on a walk or driving around with mates, keep a camera handy. It doesn’t have to be a $900 SLR or anything like that – just anything which is capable of taking, ahh, photos! This is an important step in getting your groove back because you just never know what you come across that offers some sort/form of inspiration. It could be as simple as graffiti which gets those juices flowing, or maybe the sun setting above green pastures. Seriously – what do you have to lose? Try it!

8. Walk around a thrifty or antique store

You know those beaten-down stores that you might have to travel 20km or miles to get to? Yup, those stores that only seem to invite in old(er), men or women – or in certain cases, maybe your mum (or dad, for that matter) seeking that something special. Perhaps a dog-eared special edition of a novel which you cannot find anywhere else, or maybe that Tibetan-inspired lamp. Rummage through these stores for ideas – you will never know how much visual ‘gold’ they store until you walk into one.

As they say, one person’s  trash, is another man’s treasure. If you don’t want to buy something, at least take a notepad and a pencil, or perhaps a camera and take happy snaps… As long as the shop owner doesn’t mind, that is!

9. Plan out your designs by creating wireframes and prototypes

I feel that when I have a mental blank and can’t come up with any design goodness, i mockup a few ideas around grid-based designs. Axure or Microsoft Visio are great tools to do this on.

Just remember, designs don’t always start out in Photoshop (or whatever you use!). Great designs have a back-story; a skelaton, per say. Start by laying down the basic foundations – i.e. logotype on the top left, search/login on the top right, navigation, sub-navigation, content area and footer – and you will find you are half way there. Simple ideas such as effects on hovers, etc. will guide your design juices into the right direction. Combine that with some imagery and a bit of flair, and you’re suddenly the main actor in ‘How Stella Got Her Groove Back II’.

10. Check out other types of media for inspiration

Turn on the TV, check out the local newspaper – heck, even listen to the radio. You will most likely see or hear something that will get you off the beaten track. I find magazines and newspapers have plenty of inspiration. Something as simple as a telephone advert in a newspaper can give you ideas about your next gig. It’s that simple. I know it sounds like something every designer shoud know – but apparently some designers believe that the only medium they can seek an oracle on is the ‘net. Reality check, anyone?

So there you go guys – another one bites the dust. I will hopefully have a bit more time on my hands to draft up some more inspiration but for now sign up to the RSS Feed for more news and articles. Till next time, C.

Thank you all for the lovely comments and feedback I have been receiving! I thought I’d take a bit of a change from the normal tutorials and/or reference articles for one post and go through just some online (as well as offline) advertising I really like.
I hope that these ads will inspire you to create great designs or inspire you to think a little bit outside the box; because that is what makes them impressive to me. Not only that – but great web designers achieve design inspiration from the world around them, and more importantly, other great design; whether it’s a web page or billboard.

Online advertising as well as other forms are great for igniting that creative spark you may need to get you through those rough times!

Feel free to drop me a comment and let me know what you think of them or head over to Ads of the World for more.

Bandaid – Sweat Proof

Cheb’s thoughts: Awesome concept and art direction.

What is the ad trying to portray? That Bandaid’s are so sweat-proof that they are being used for a undercover bust!

Rating: 5/5

Bic Shaver

Cheb’s thoughts: This ad might not make sense to everyone, but regardless, still a memorable one! Great marketing ploy to connect two product segments.

What is the ad trying to portray? Bic make shavers, but they also make those notable Bic pens. Appearing as a ‘running gag’ over multiple pages, the man has suddenly looks ‘well shaven’!

Rating: 3.5/5 (Not everyone will get the ‘Bic also makes pens’ bit!)

Brisbane Council – Boy Meets Girl & Short Story

Cheb’s thoughts: The first one is a ‘Romeo and Juliet’ classic, followed by a ‘Lord of the Rings’ style ad. Great direction and Photoshop work but the idea is heavily overdone.

What is the ad trying to portray? If you worked for Brisbane Council you would actually have time to read the books/novels rather than having to hear the ‘two second’ intro, plot and conclusion in one.

Rating: 4/5

Comedy Central – The chair

Cheb’s thoughts: Another running gag, this one is a crowd-pleaser. Smart, easy on the eyes, and effective – it sells the Comedy Channel!

What is the ad trying to portray? This one is a funny one. The first page shows two pins on a chair; classic school-boy trick on a teacher! A few pages later, it get’s funnier, with the pins now spot-on where it is going to really hurt the person who is going to sit on the chair! – Hilarious to think about.

Basically, it is saying that there is funny, then there is funny! – I.e. Comedy Central funny!

Rating: 5/5

Ford Expedition – Rearview camera Kitten and Tricycle

Cheb’s thoughts: Another set from Ford. Great direction and even better retouching. I like!

What is the ad trying to portray? The rear view camera on the Ford Expedition is so good that small things like a cat or kitten, and a child on a tricycle are now huge comparatively.

Rating: 4.5/5 (Some people may think this is a little misleading!) [Note: I stress "some"]

Gardena – Quite Mower

Cheb’s thoughts: Cool, simple post-production work. Good use of white space.

What is the ad trying to portray? Gardena lawn mowers are so quiet that not only are they mowing the lawn, but they are also silencing the ‘lawn’ or the sound frequency, from higher to silent in the areas that are freshly cut!

Rating: 4/5

Nestle Kit-Kat – Have a break…

Cheb’s thoughts: Another great use of white space as well as needing to use nothing more visually than the product’s logotype/tag line and the product itself.

What is the ad trying to portray? Simple! a pair of Kit-Kat’s setup in the ‘Pause’ position, as you would normally see on a audio player, etc. It is simply saying pause your life, take a break, and have a Kit-Kat!

Rating: 5/5

Olympus Zoom – Koala (Australia)

Cheb’s thoughts: Great post-production and Photoshop work.

What is the ad trying to portray? Olympus binoculars and more importantly their zoom-factor is so good, that the object you are viewing; in this case a Koala will appear ‘right before your eyes’, or again, in this case, ON the binoculars! In this actual ad, it appears as though the Koala has been catapulted into tourist’s face!

Rating: 5/5

Pain without borders – Cambodia

Cheb’s thoughts: Great 3D rendering, animation, and post-production work

What is the ad trying to portray? Pain in Cambodia is a continuous cycle. There seems to always be grief and suffering and it is shown clearly by the revolving belt.

Rating: 5/5

Pedestrian Council of Australia – Don’t Speed

Cheb’s thoughts: Great concept, direction and implementation.

What is the ad trying to portray? Another simple one. The crossing itself has become the jail cell for the ‘purpotretor’ – who we can only imagine has ran over someone whilst speeding and as a result of his actions has been sentenced. This obviously is more of a concept rather than a real case – but is a reality of what is possible if you speed.

Great use of ambiance and everyday scenarios.

Rating: 5/5

Rolling Stone – Steve

Cheb’s thoughts: Cool idea. Simple, but unfortunately places a little too much emphasis on the object and not as much on the product itself.

What is the ad trying to portray? The masked-man in this ad, Steve, can now benefit from Rolling Stone’s guide to restaurants, cinemas, books, etc and does not have to waste time downloading at work’s expense!

Rating: 3.5/5

Surf -White Nurse

Cheb’s thoughts: Excellent direction! Love the nurse’s facial expression and the doctor’s looking so ‘deep in thought’ only adds realism.

What is the ad trying to portray? Surf leaves your whites looking so white that you can be used as a X-Ray light screen and save your hospital electricity bills! ;p

Rating: 5/5

Vegemite – Cricket car

Cheb’s thoughts: Finally, another nice ambient shot with great post-production and Photoshop effects to boot.

What is the ad trying to portray? Vegemite, an Australian icon, is known to have vitamins which support growth and strength. Obviously the ad is targeted for an Australian audience, and lovers of Cricket.

The ad is trying to say that the Australian side must have had thier Vegemite before the game, because they have so much strength that the shot flew out of the stadium; shown in the background!

Rating: 4.5/5

So there you go guys, another design inspiration post! Feel free to share this post with a friend and subscribe to our RSS feed for further posts.

Till next time, Cheb.

Below are some sites I have either worked on, been involved with, or simply come across during my visits on the world wide web. Don’t forget to subscribe to the RSS feed if you’d like to keep up-to-date, or digg this post if this list has inspired you or you liked it.

LogicWeb

Good, clean tabbing. contrasting colour scheme and blue – what else do I have to ask for?

Mozilla

The makers of the great Firefox know what they are doing – not just in terms of application design, but also web design. Using a gradient for the background, creates a nice offset. Definitely a great colour palette.

Authentic Jobs

I like the red v.s. cremes scheme. The inner drop shadow adds dimension to the tabs and somewhat shows realism. Good way to graphically

Australian College of Physical Education (ACPE)

Designed and developed by good friends at Glassonion, the design is easy on the eyes, has a low-intensive colour palette and is easy to navigate. Importantly, the site itself doesn’t use tabs, but using tabs for this ’selection tool’ makes it easy to fit information into a limited area and at the same time, still be nice to view.

Actionhead studios

Though not necessarily using ‘tabs’, this design is bright and energetic and still maintains noteworthy aspects of tabs in design, including breaking apart elements around the navigation, and offsetting selected tabs.

Channel 10 Australia

I like the shows on Channel 10, but the recent redesign has added some tabs to the interface. Mostly used in “tabular” form to ’sort’ through elements, once again, the gradient, or inner shadow (depending on how you see it), really helps to accentuate the feeling of depth.

Comiqs

Great new website that allows you to make your own comics online!! Awesome shading and a web 2 design scheme. Especially cool is the ‘interface tabs’ as seen above, ‘Photos, graphics and text’. tabs are also used in other sections of the website.

Commonwealth Bank

I don’t really like talking about banking websites but this one has it’s pros. I love the very contrasting yellow and gray scheme. The white on gray is easy to follow, and black on yellow for top-level navigation has the same affect. More importantly, the two levels of navigation really work well. For example, unless you’ve been living under the ‘web design rock’ for the last ten years, you’d know that you’re in the ‘Personal’ section, and so, clicking on ‘Accounts’ for example, should take you to the ‘Personal Accounts’ section of the Commonwealth Bank’s website. Yay!

Food Network

I like the tabs on the ‘#1 Cooking Site’ apparently? somewhat of a drop-shadow on the tabs gives a sense of ‘layers’. This site also uses another feature of tab design; Same, or almost-same colour text on a different background tab depending on active/inactive states. E.g. above ‘Recipes & Cooking’ is active, so the background of the tab is white. The tabs which are ‘inactive’ do not have the same, ‘pop-in-yo-face’ colour. Smart design.

FOWD: Future Of Web Design

One of a few similarly-designed websites by the same organisation (Carsonified) – nice scheme.

Gradient dropshadow curve

The online weblog of friend, Henry Tapia, gradient dropshadow curve utilizes a cool, new-age tab system. Including ‘onMouseOver’ tab effects and nice use of opacity to tie it all together.

Hidalgofoto.net

Interesting use of side-way tabs. I guess it all started off like this? Most ‘real-world’ tabs, such as those found on notebooks and the like, are usually vertical, not horizontal, and this one is a great example of vertical tabs on a website.

HP (Hewlett-Packard) Australia

I really like the way HP has worked this section of the website. As in the ACPE case above, when you click each section, there is a overlay which presents the user with more information on the topic – in this case ‘Home & Home Office’. Great use of dividers (simple black and white lines side-by-side), colour scheme (re-used through-out those particular sections on subsequent pages) and overall site design.

Iconbuffet

From the makers of really-sweet icons comes this incarnation. Using tabs for not only primary-level navigation, but also sorting through website content, offsets allow inactive sections to sit nicely in the background and overall helps the website to not be ‘busy’ whilst remaining functional.

Iconomix

Ahh, love the blue and green contrast – not to mention the cool block design. Great use of opacity, and outer shadow? to create a sense of lighting and convexity. Nicely done.

KFC Australia

Simple, clean tabs. Respects branding and colour guidelines set by client whilst choice of font allows for more tabs to fit from left-to-right.

Barloworld Bayside

A little Wiliam gem. This little beauty not only looks stunning, incorporating an amazing flash piece, but is another great example of vertically-based tabs in website design. The Sydney web design company got this one right! Props to RK!

Media Temple (mt)

This hosting-giant has a very dark, moody feel to their new design. Awesome use of shadow and light between active and inactive tabs. Great use of tabs as well on the

Merixstudio

Cool, squared-edges design. Kind of a change from the default rounded-rectangular tabs.

PizzaHut Australia

Another good example of sticking to design guidelines. Nice edging and rounding to create somewhat of a container to house the top-level navigation.

Sensis.com.au

Good example of what I like to call ‘tab-encapsulation’. Wrapping a whole section with a colour or style, based on which tab the user clicks on, creates a sense of direction and isolation. We know that everything in the green box above must belong to ‘Yellow’ and they do!

Virgin Blue

One of my favourite tab-based websites, whether part of the Sydney Web Design circuit or not. Great use of multi-level tabbing. I know that I’m in the business tab, not just because I see ‘Business Home’, but also because ‘Personal’, ‘Velocity Rewards’ and the slightly-off-screen ‘Holidays’ are a different, darker colour. Perfect solution for dealing with a lot of content that is split up into ‘categories’. Hat’s off to the design/dev team for getting it right.

Microsoft Windows

Not everyone’s favourite website, but I’m sad to report that the Redmond-based software giant got this one right. Great use of multi-level tab navigation. I can easily tell I’m looking at Products page, and all it takes is a little opacity and a little stroke. Simple yet effective!

Microsoft Windows Vista

Once again, Microsoft shows us a cool example of vertical-based tabbed nav. Easy to follow and easier to navigate. Usable and fast-loading. Well done.

Youtube

Ahh, our good friend, the Google-owned YouTube. They stuffed up by removing the ‘Home’ tab and replacing it with ‘Categories’. They soon realised the consquences of this were that not all users knew that clicking on the logo would take them back to the front-page; and before you could say ‘Ajax is my best friend because it let’s me code in JavaScript and XML AT THE SAME TIME!!!’ it was replaced. Old-school, easy tabs – but they work…

Zurich

Good example of sticking the ‘home’ tab on sub-pages of the website. The tab design on this site shows tabs a lot closer to each other, as apposed to YouTube, directly above. However, the closeness (no padding) results in a small effect. It makes everything seem like they fall under the same umbrella; in this case, ‘Financial Services’, yet still be separate entities.

Cheb.com.au

Well? of course I had to add this. What is a post on tabs used in web design without a little plug? I’m not going to comment heavily on this; I’ll let you guys be the judge – Although, I must say for version one of my blog design, they don’t do too badly. I decided not to use the ‘active’ colour ‘onMouseOver’ of the inactive links, but just a simple underline to guide the user to the link.

Good-old oldies (tabbed-designs we’ll miss)

Apple

Yahoo!

Amazon

So there we go, another design inspiration blog post. Hope the designs above have inspired you in some way or another. tabs are really cool to work with. Let me know if I’ve missed any other cool tab-based designs and more importantly, feel free to highlight your own creations. Please subscribe to our RSS feed for further updates and once again, please digg this post if you enjoyed it or it has helped you.