Blog for Designers

Navigation Designs

Designer — Thu, 15 Jul 2010 06:23:34 +0000

There are an extensive amount of roads you can take in web design, specifically in navigation. Here, we will talk about one specific navigation technique, tab-based navigation. If properly carried out, tabbed navigation can be very clean and organized within a web layout.

So what is tabbed navigation? Well, it is essentially a set of buttons most often set horizontally. Tabs generally follow numerous different styling guidelines. First, a tab set usually is attached to or slightly protrudes from a container, like in the example below. Also, notice how the open tab matches the background color of the container, and the other buttons are darker. This is another common styling guideline.

When you look at tabbed navigations, you will also notice many styling trends. First, many tabs will have rounded corners on buttons. This helps to create a clean look. Also helping to make a clean look is the use of separation between buttons. Most designs use space to separate buttons, but a bevel, single line, or background color contrast will also look nicely.

You will also see the use of hover effects, which is a common usability characteristic of the tabbed navigation. Gradients, radial and linear, help to achieve an impressve hover effect that brings dimension to the button that the user is selecting. Actually, you will notice that many tab buttons, selected or not, will use a slight gradient to add depth and demension to the button. This is a very simple detail often used to bring extra styling to many different user interface elements, such as buttons. The most important aspect in the design of tabbed navigation is that the active tab needs to be clear and obvious. This is what separates a tabbed navigation from an ordinary horizontal row of buttons or hyperlinks (thanks, Allen).

So, with all of that in mind, take a look at these 50 excellent tabbed-navigations shown below. Look for the trends, and follow the link to further inspect the usability of the tabbed navigation and how it looks with the rest of the design.

You may want to take a look at the following related posts:

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #1 is Professional Web Design, 242 pages for just $9,90.]

Good Tab Based Navigation

ExpressionEngine
This tab set is beautifully styled. It uses a bevel to seperate tabs, large buttons, and clean typography with icons.

Astratos
Another tab navigation that is clean because of rounded corners and use of a gradient to style.

WorldCat
Rounded corners and clean separation.

Veer
These tabs have beautiful styling. Notice the use of different colors and a drop shadow for separation purposes.

365 Days of Astronomy
Use of different colors and a drop shadow to separate the tabs not in use.

Wire & Twine
This is some excellent texture use with a clean layout.

Komodo
A good example of tabs used in a module.

Inkd
Good styling and usable because of size and separation.

Jepco Storage
This button set uses dark colors to fade out the tabs not in use, and a great border on the buttons.

Kinder-Aktuell
Good gradient use and separation.

FidesVita
Tabs used with a sub navigation.

Apple Movie Trailers
Excellent styling and a strong example of a vertical tab layout.

PBwiki
Simple yet clean tabs.

Fancast
Another vertical tab set up, this time used in a slider instead of content navigation.

College Park Church
Nicely styled tabs with good colors and a sub navigation.

One Button Mouse
Excellently designed buttons in a simple tab layout with good icons as a visual support.

Mint
Tabs used in a very content heavy module

District Solutions
Vertical tabs are used very rarely. But they can look good!

23andMe
Good coloring and use of a border to differentiate the tabs from the body background.

Tumblon
Very clean tabs with a border.

STUDIO7DESIGNS
This tab styling uses a gradient for a cool fading appearance, and a sub navigation is included.

WWD
A simple yet usable tab system with a sub navigation.

Ministry of Sound
On this tab system, a gradient is used to add depth to the selected button.

Disambiguity
Use of rounded corners and a strong color difference to separate the tabs not in use.

Fontcase
A clean tab layout in a very nice design.

Mixx
This tab system uses a different size, color, and styling to bring out the button selected.

Concentric Studio
A very simple and usable tab navigation.

Domestika
A vertical tab layout with coloring.

crowdSPRING
A simple tab system. This one uses a large size as well as a different color to make the selected button pop.

Ready Made
A well-styled tabbed navigation.

The Mindset Game
Another very simple and easy tab navigation that works perfectly.

nclud
A little bit different tab setup that only styles the selected button.

The Invoice Machine
The navigation below uses a strong color difference, usable buttons, and borders to separate tabs from the rest of the design.

FreeAgent
A good example of the background of the container flowing with the button.

Web Notes
This is very organized, and it appears to tab down instead of up like most.

Magpie
Doesn’t get much more simple than this, but still a good example.

Two December
Nice styling that works perfectly with the rest of the layout.

Lanbruck’s
Another very beautiful tab layout, notice the slight hover effect that can be seen on the second tab over.

LittleLines
This is one of the better examples of styling in this showcase because of the gradients to add dimension to the buttons and strong borders.

Thuiven
A very nice color harmony and contrast between the selected tab and the others.

Headscape
Another button that uses a gradient to fade out, creating an awesome appearance.

Space Collective
Very simple but functional at the same time.

Jobs on the Wall
More brilliant styling, these tabs fit perfectly with the other elements on the site.

Designsensory
Very basic styling with strong colors and a sub navigation.

Ad Fed
Here is another smooth and visually appealing tab navigation set.

OS Communications
Basic color-based styles with a pointer to show the selected tab.

Hoefler and Frere – Jones
Use of slanted sides instead of rounded corners makes this tab-based navigation interesting and unique.

Track My People
These buttons use gradients for depth, and a drop shodow to add demension to the tabs behind the selected one.

Revolution Drviving
Brilliant button backgrounds that aren’t over the top make these tabs really great.

City of Grace
A good example of tabs that work nice colors into a usable layout.

Lorem Ipsum Dolor Sample Text

Designer — Thu, 03 Dec 2009 06:47:00 +0000

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut laboreet dolore magna aliquyam erat.

Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Shutdown Your PC With a Timer

Designer — Wed, 02 Dec 2009 09:33:00 +0000

Simply follow these easy steps and shut down your computer anytime you like.

Method 1

1. Right click on your desktop and create a short cut

2. It will now ask you to “Type the location of the shortcut”

3. Type shutdown -s -t 3600 there. Note that 3600 are seconds means 60secsx60mins= 3600secs.

4. Now to disable the timer. Create another short cut and enter shutdown -a You’re done

Method 2

This one is really simple. All you need to is run the RUN command from Start Menu.

Type in the time when you would like your PC to shut down itself. Use the command in this format at 11:35 shutdown -s
To disable it run the RUN command again and type shutdown -a

Note: : The timer will set the time in 24hr format which means if u would like to shutdown your PC at 10:30pm, you will need to type at 22:30 shutdown -s
I hope this helps.

Animation Vs. Animator

Designer — Wed, 02 Dec 2009 09:18:00 +0000

Designer — Fri, 06 Nov 2009 05:04:00 +0000

Fonts

Flash CS4 – Mask in Mask

Designer — Sat, 31 Oct 2009 15:01:00 +0000

1. Create a mask layer
2. Create a simple layer put something on it and then drag the key frame on the mask layer
3. Drag it under the mask

Motion Tween in Flash

Designer — Sun, 22 Feb 2009 14:04:00 +0000

First, let’s imagine that you place a box on the table. Now, imagine, that after 10 seconds, the box suddenly disappears and magically appears again a few inches to the right of where it had been originally. Pretty strange isn’t it?

Well, if you could rewind your past minute and watch it again, what will you see? You will see the box suddenly disappear and appear again in a different position with no cohesion or “animation” in the 10 seconds that elapsed. Here is where motion tweening comes in. With motion tweening, instead of the square disappearing and reappearing, you will instead see the square slowly moving itself to its new position – no disappearing acts at all! A motion tween, simply put, fills in the missing sequences between a starting position and the ending positions to create a full animation.

This tutorial will explain how to create a motion tween in Flash MX 2004, and hopefully you will understand more about motion tweens.

Steps:

First, launch Flash MX 2004. Once the program loads, you should see a new, blank area called your workspace. If you do not see anything resembling a white box, create a new animation by going to File | Flash Document. There, you should be all set!
Now, click on the Rectangle tool from the set of icons on the left.
Once you have clicked the Rectangle tool icon, go to your drawing area, and draw a square by clicking your mouse and dragging – then releasing once you have a square. Try to ensure that your square is close to or hugging the left edge of your white drawing area
After the square has been drawn, take a peek at your timeline. Your timeline is the large area toward the top with numbers and small, vertical boxes.
The solid dot signifies that something substantial exists on that frame – Frame 1. In our case, the “something substantial” is the square you created! Now, look a little to your right and find the number 20. Right click directly at the box under the number label 20 and select “Insert Keyframe”
Once you select Insert Keyframe, you will see another black dot appear in Frame 20. Don’t worry – that’s a good thing! Now, make sure you select the keyframe on Frame 20 by clicking it with your mouse pointer.
With the keyframe selected, go down to your square again. Notice that your entire square is also selected. Now, press your Right arrow (on the keyboard) a few times to make it move a few centimeters from the right-most edge of your movie area
Now, with your mouse pointer, click on Frame 1 of your movie in the timeline. Notice where the square is! It is on the left. Without hesitation, now click on Frame 20. Notice that the square is to the right. Click anywhere else on Frame 10, and notice the square finds its way back to its original, left position
Enough of me chattering, It’s time to motion tween! Click on Frame 1 and highlight all the frames between Frame 1 and Frame 20. While all the frames are highlighted, right click and select “Create Motion Tween”
If everything worked out well, your highlighted frames will take on a purplish color with a large arrow leading from Frame 1 to Frame 20. Click anywhere on the timeline, and notice that you can “track” the square’s position through its 20 frame journey.
Go to File | Save to save the animation. From there, go to File | Publish Preview | HTML. You should see your square gradually moving from the left toward the right.

Drawing Board in Flash

Designer — Tue, 16 Sep 2008 05:05:00 +0000

Use key ‘c’ to clear the screen.

Send Questions/Comments

Designer — Tue, 19 Aug 2008 05:20:00 +0000

Widget Ad

Designer — Fri, 18 Jul 2008 06:48:00 +0000