1. CSS-Based Navigation Menus
LoodoA colorful menu that adds to the feel of the website.
Steven Wittens takes a look at the navigation menu from a quite unusual perspective.
Web Design Ledger has an excellent menu; its large size is convenient but doesn’t intrude on the content.
UX Booth uses a a stylish text box under the navigation as a sort of subtext for each menu item.
Vertical navigation menus are used very rarely, for the simple reason: they are harder to use. However, some designers risk unusual approaches. Nopoko Graphics uses an arrow and a hover-effect for its vertical navigation menu.
This website uses a large image-based menu on the home page. The user’s attention is drawn directly to this large menu, making it convenient for users.
This large and colorful menu is very noticeable and uses a slight hover effect to further define the menu items.
An intuitive drop-down navigation that uses 2 colors effectively to communicate the active navigation item and the passive ones.
Smallstone, a U.S. record label, presents its navigation menu in the form of a the so-called Space Echo Roland SE-201.
It’s pretty hard to find a nice-looking drop-down menu. This one is a beautiful exception.
Clearleft uses a couple of paper pieces for its navigation.
A simple, clean and beautiful navigation with a nice hover effect.
An excellent example of block navigation that shows how effectively “speaking” hover effects can be used with a clean and simple navigation menu.
A navigation menu doesn’t have to look like a traditional navigation menu. Ronny Pries uses a floor plan to lead site visitors through the pages of the site.
Jiri Tvrdek presents the navigation options of his site as leaves on a tree. Creative, unusual and memorable.
Patricia Abbott uses clothespins for the navigation options.
Matt Dempsey highlights his navigation options with a brush stroke.
The current navigation option is pressed — clear and intuitive.
Vertical tabs are used very rarely. But they can look good!
Jayme Blackmon seems to like setting “done”-marks…
Why not try a sloping navigation options once in a while?
A really unusual navigation menu that uses some kind of a mindmap to illustrate the navigation. And, apart from that, the navigation menu is hand-drawn!
A subtle yet distinct menu that is out of the way of content. Excellent colors and a nice hover effect also add to the menu.
This Portuguese designers uses handwriting and a piece of paper for its main navigation.
Sometimes typography is just enough…
Vivid typography in use.
Some designers integrate a stamp in the contact navigation option.
This website uses large navigation buttons and has a good hover effect.
This menu has a clean and smooth layout, and it has a great sub-menu that uses transparency to separate it from the main menu.
Icons reinforce the menu items on this website and add emphasis to each option.
This website has a great grunge style, and the menu fits right into the layout.
This menu is located close to the content, where it is easy to use. It uses large icons, which adds a visual element to the navigation. Also, the menu on other pages uses the same icons in a vertical layout, bringing consistency to the website. The icons may not fit perfectly, but it’s a nice idea.
This navigation has a rather unique style that emphasizes selected items. Also, the menu layout stays consistent throughout the whole website.
Tutorial9 recently got a nice redesign, which came with a very usable and well-organized menu.
2. CSS Menus With JavaScript
Agami CreativeDesigners sometimes use tooltips for their navigation. However, tooltips and aqua are quite an unusual combination.
A perfect example of how one should organize huge amounts of content into clear and easily distinguishable sections. Also, excellent design of the drop-down menu.
AppStorm is a new website by Envato. A jQuery effect is used to create an excellent and very usable drop-down menu.
Eric Johansson, a designer from Sweden, uses tall vertical blocks and images for his navigation.
This conveniently located menu has a beautiful hover effect. The sub-menus are consistent and include every item.
Dragon Interactive has a colorful jQuery-based menu with a great effect.
I am a big fan of this navigation layout. I like how the menu fits in with the grunge theme. It also uses another jQuery drop-down effect.
For its recent redesign, Abduzeedo introduced a jQuery slider into the navigation.
3. Flash-Based Menus
IipvapiColorful sloping Flash-based navgation from an Indian Web design agency.
Most entertainment websites use Flash and unusual navigation menus to capture users’ attention. On this one, an instant classic, navigation items are put on cards.
Nick Tones, with a dynamic, colorful and yet still somehow usable navigation menu.
This Argentinian design agency puts CDs and books on a table, each representing a navigation option, of course. When hovered over with a mouse, each object reveals what can be found inside.
The designers of this Flash-based site came up with something truly original. The navigation menu is put on a ribbon; each navigation item has a nice and simple hover-effect: when an icon is hovered, it is replaced with the site area the icon stands for. Usually tooltips are used for this puprose, here designers use a different approach. Outstanding!
A beautiful and very colorful Flash menu that is a good example of excellent usability.
This unique website is all about easy-to-use navigation.
This amazing portfolio has very well-thought out and convenient navigation.
4. Highly Usable Navigation
tap tap tapThis website has a beautiful layout and a menu with great effects.
Apple has one of the more exceptional websites, particularly because of the navigation layout. The Mac menu is quite amazing. With images, it couldn’t be easier to find items and move through the menu.
Visitors here use a large and well-laid out slider to move through news items.
The content on the home page of this portfolio website has an extremely simple yet usable organization.
This visually stunning Flash-based portfolio uses an accordion-like layout for the content, so there is no loading of new pages. The large type stresses the importance of menu items.
Colourpixel has a very interesting layout for its portfolio. It combines all of its sections onto a single page, and allows each item to be hidden or revealed, as demanded by the user.
Yet another excellent Flash-based portfolio. This website organizes all gallery items onto an interesting revolving list.
This portfolio is rather well known for its beautiful layout. An accordion effect allows users to navigate through projects and portfolio items.
Porsche Canada’s website has very user-friendly navigation, with many sub-items for each menu item. The convenience and usability of this menu is great.
This architecture portfolio has a unique layout that allows users to easily browse the website. The line of menu items has many effects and transitions that make it very convenient.
Firstborn, a well-known design studio, uses scrollable, horizontal navigation for its portfolio. The navigation items can also be displayed in other modes, such as thumbnails, making it even better.
This portfolio has a vertical slider that automatically moves through menu items. Many large items are placed together in a single glowing menu.
Another stunning portfolio with creative navigation, this one with Flash-based “color samples” to choose from. Like items are grouped together.
Accordions are useful when trying to squeeze many items into a small space. Jason Reed used a stylish accordion in his portfolio to allow users to navigate pages.
Another usable accordion menu that groups portfolio items.
5. Vertical Navigation Layouts
Danny BlackmanDanny Blackman’s website is often regarded as one of the better portfolios out there, in part because of the amazing vertical layout.
This website is yet another portfolio that uses a vertical layout to incorporate multiple pages onto one, while allowing users to move vertically between sections.
Volll uses a vertical layout with a beautiful illustrated landscape background.
Mediocore is an awesome portfolio. It has a few more elements than usual on its pages, but still looks excellent.
6. User-Friendly Sidebar Menus
FreelanceSwitchFreelanceSwitch organizes its articles using a great menu.
The redesign of Fubiz brings an excellent sidebar. Slide effects are used to fit a large amount of content into a small sidebar.
Checkout has a stunning website. An extremely clean list-style menu in the features section also displays nice icons.
Ruby Tuesday has a very nice website. The sidebar menu has exceptional icons and smooth hover effects.
A simple and minimalist menu with sliding effects.
President Obama’s website has a well-spaced and nicely contrasting list-style sidebar menu.
Another clean and well-spaced list menu.
No comments:
Post a Comment