Thursday, February 26, 2009

Free and Stock Icons


A new website called Icon Dock has launched affordable (and a few free) icons for use on websites. Many people don't have time to design a full-fledged icon for simple functions like:

- forward and back buttons
- links to different pages
- visual guides to page and topic headings

Icon Dock makes this much easier by providing appropriate (adjustable) icons.

Here are more reasons why Icon Dock thinks their stock icons would be of use to you:

Affordable

Buy only what you need. There is no minimum quantity. You can buy Icons individually or buy a complete set for better savings.

Flexible

Our vector icons are scalable, so you can export them to any size for web purposes or high resolution print materials like brochures and advertising.

Editable

Edit icons with any vector software (such as Adobe Illustrator) – easily change the gradient and stroke color to fit your designs.

Combinable

Create your own icon by combining a few of ours. Try combining the “page icon” with the “plus icon” to get a “create new page” icon. The possibilities are endless.

They are just starting out, so their choices are limited. But, according to their terms of use, icons you download are flexible in a number of ways (as explained above), which gives you more options than just what they have provided.

Make sure to check their blog for news, and also for new icons (both free and stock).

A good idea that goes just a little further than the clip arts of yonder years.

Thursday, February 5, 2009

Original Navigation Menus

A unique navigation menu makes your website that much more interesting.

You have to be careful, though, that the theme of the navigation menu fits the theme and overall design of your website. Being too original can also distract your visitors from going through the information on your website and finding what they want.

For example, don't make the navigation menus:
- Too complicated
- Have too much information
- Take up too much space
- Have too many unnecessary links (cut down as much as possible)

Navigation menus are tools for...navigation. That should be their primary purpose.

Here are some suggestions for original and successful menus from Smashing Magazine.

I agree with the authors on the majority of their suggestions (they have written helpful blurbs on each choice, and provided links to the actual websites), but I still think some of the designs could have gone a little further with the ideas.

For example, when hovering over a link on a menu, it would be useful to have some visual cues as well. Like the hover produces a different colour, or a different script, just to indicate that the link is "active".

Another suggestion would be, why not take the design to its logical conclusion?

Here is a navigation menu which look like piano keys (not quite, but that is the impression I got when I first saw this design.) It is the second example on the list at Smashing Magazine.

The original design just lets you click on each link, without changing anything. See the original design at the website, or here below.

Original design, with no interaction

Why not add a "sliding" component when you hover over each link, and change the colour as well? This fits in with the overall design, isn't too overwhelming, helps isolate that particular link and shows it is active. And it adds an interesting interaction for the visitor.

I have redesigned (using Flash) this menu. I've changed only the "About" link just as a demonstration. You can view it here below.

Click on the "About" link to see it sliding forward and changing colour. This feature is not on the original, and I think it makes their design better (more interesting and more functional.)

Redesigned "About" link to add more interactivity

I think many of the examples the authors gave could have gone just this extra mile (or inch.)