Showing posts with label Interface Elements. Show all posts
Showing posts with label Interface Elements. Show all posts

Tuesday, 3 May 2011

navigate in style or fail miserably

Good navigation is the most important aspect of a well designed website. If the visitor is not presented with a clear navigation, it won't matter how well your site is designed, it is highly likely that they will leave your page in a matter of seconds. It is a very tough challenge to create a meaningful and unambiguous yet stylish navigation that allows users to view content easily.

Some of the most important rules of a good navigation are;

1- Visibility: Make sure that your navigation is one of the first things that catches the eye. Do not make it obscure. Don't let it get hidden because of clutter or problematic placement.

2- Consistency: Make certain it has a certain style and placement that it keeps on every page.

3- Clarity: Make sure that every item in the menu is %100 understandable. No one likes to guess where the link will take them. Use either clear names, or little explanations, hover titles are a good way as well. If you are using thumbnail images as links in your menu, make sure they are clarified one way or another.

4- Creativity: Creative navigation will always make your site stand out more, just make sure you don't overdo it, sometimes simplicity is the real creativity.

Good Examples of Stylish Navigation

It is both stylish and easy to use. Very clear menu with a classic top tier placement.



Clear well designed navigation. Nice use of typography.



This is especially for those designing blogs, very slick and clear navigation ina 3 column design. Nice use of sidebars and top level menu design.



A very good example of how to fit massive amounts of content into a navigation in a stylish way.

Clear, playful, hand-drawn and animated navigation.



Simplicity, minimalist design, left aligned side navigation.



Nice clear navigation.



Playful navigation consistent with the style and content of the page, usability is top-notch.



Very simple and very attractive, everything is easy to follow and you always get to where you want to go.



Creative way of categorization. Easy to follow, the only problem is it is a bit space consuming.



Interesting and creative menu design. Takes a little bit of getting used to but the filter and sorting menu is a must see.



Impressive use of top tier navigation, clear simple and yet stylish.



Good example of Apple inspired navigation, everything is consistent and clear.



Little explanations when you hover over the menu items is a great way of guiding your visitors through your site.



Another clear navigation



Very slick navigation. 2 tier top level navigation, the sub tier works especially nice in works section. It is a bit graphic heavy when you use the works next, previous project navigation, but it looks really cool.


Unconventional right-side tabbed navigation does actually work very well in this site. Scroll down to see how the navigation changes style beautifully.

Also see these...










And when it fails....




First of you are presented with bouncing links that kind of sattle later on. And guess what not everything that looks like a link is clickable, not a very satisyfying navigation for a visitor.



Seriously.. where is the navigation. Am I supposed click on those bottles, is that it?



Don't get fooled by the top lunch and dinner items, they are unclickable. There is a small thing under the disturbing video called navigation, well it seems to work if you refresh the page 10 times.



When simplicity fails miserably. Worst use of top tier navigation. It looks like a word document rather than a webpage. And that isn't the worst part, just go on, decrease the size of your browser window and see what happens.



Wow simply amazing, the middle menu runs away when you move your mouse to click. Plus the content font is so small that it is impossible to read. Check out the news section and you will see.



Menu items continuously change into images that don't give any clues to what they are connected. Very irritating navigation.

.................................................................................................................................

Sunday, 27 March 2011

playing around with photoshop layer styles


I downloaded the styles mostly from 22 pixels, however I may have looked elsewhere too. Just pull in a whole bunch and put them in the styles folder under photoshop presets. Then click on the little right arrow at the top of the styles palette in photoshop to load them. And my advice is to leave their values more or less as they are. It is quite easy to lose the effect altogether if you start tweaking them too much. I used the vector shape tool and I also installed a few dingbat fonts since layer styles seem to work especially nicely with shapes. (The two circle arrows on the right are in fact dingbats).

Only other thing I did was that I added a little divider line between the menu items. A tiny little vertical 1 pixel grey stroke and then gave that a motion blur at 90 degrees exactly, so that it faded out at both ends.

And the photoshop file, where you can also see how I aligned the stuff, is here:

.................................................................................................................................

Sunday, 13 March 2011

huge big GUI elements pack

There are some really nice people out there: All WebAlys asks of you is that you link back to the page from where you got these elements. This is a mega pack, containing icons, various types of GUI components, and a styles library for Adobe Illustrator.


The download page is here:
http://www.webalys.com/design-interface-application-framework.php

 (Important:  Once again, remember that if you use any of this the author will have to be credited through a link-back to the above URL.  ) 

...............................................................................................................................

a very nice set of buttons


For those of you who want to build a website from scratch, these are crisp and clean vector files which you can download in Illustrator format, as a JPEG or as an SVG file. And bloggers might also make good usage of them inside posts or even with custom created widgets on the sidebar. 

So, go get them while they are hot: http://www.gosquared.com/liquidicity/archives/96

Saturday, 12 March 2011

design: hierarchy / text / lightness values



Since a website usually has very little white space (space which is empty of informational content, that is) the hierarchical components of a site will often end up being placed very close to one another. 

The two images above should hopefully explain it: If you make all of your text one color (white in this case), it will be quite difficult for people to know where to look first when they come to your site. If however, you use various tones of gray then it will become far more obvious where the most important stuff is, and then what comes after that. As a rule, things on the side bars are less important than your post, these should be darker than the post. Inside those, visited links are less important than unvisited ones, and the rollover link should pop out the most.

Inside the post itself it is a good idea to highlight or make bold the stuff which you would like to stand out. (I prefer highlight since I do not like the way bold text looks on websites at small sizes - becomes smudgy).

Size is also an element that can be used for establishing visual hierarchies, however since most of the text will have to be on the small side you can only really use that for post titles and the header: When it comes to body text, a change from 13 pixels to 14 or 15 is not going to give you enough difference and will only make your design look 'ambiguous' - a term which designers fear like death! So, tonal values for type hierarchies are one of the best ways to go in web design, I think.

.................................................................................................................................
Girls Generation - Korean