Web Designer Blog

One of the most essential part of website is Navigation Menu, Navigation Menu guides visitors how to navigate, explore and interact with the other parts (web pages) of particular website, a navigation menu should be simple and easy to understand, should not conflict the mind of visitors.

SkyTechGeek explored numerous design sites and collected 21 beautiful high quality PSD files, so that users don’t need to explore hundred of Google Pages to find out an appropriate PSD file for their design, Designers and Web developers can use them in their upcoming projects and can give their websites stunning and beautiful look.

1. Simple Navigation Menu

Read on »

Website navigation is our common communication system between all other web pages. Interlinking through unique identifiers (URLs) has worked for decades. If anything navigation links have been with the basics of web design since the early days. Through advancements in digital arts and design we have seen new practices bubbling up everywhere.

Accessibility has turned into a major concern for Internet browsers. With more users on their mobile phones and tablet devices it’s important to develop a navigation around common themes. Below are some themes repeated in modern designs for good, clear website navigation. Read on »

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 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.

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

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

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

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

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.

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

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

Inkd
Good styling and usable because of size and separation.

On websites that have a lot of pages, breadcrumb navigation can greatly enhance the way users find their way around. In terms of usability, breadcrumbs reduce the number of actions a website visitor needs to take in order to get to a higher-level page, and they improve the findability of website sections and pages. They are also an effective visual aid that indicates the location of the user within the website’s hierarchy, making it a great source of contextual information for landing pages.

What is a breadcrumb?

A “breadcrumb” (or “breadcrumb trail”) is a type of secondary navigation scheme that reveals the user’s location in a website or Web application. The term comes from the Hansel and Gretel fairy tale in which the two title children drop breadcrumbs to form a trail back to their home. Just like in the tale, breadcrumbs in real-world applications offer users a way to trace the path back to their original landing point.

You can usually find breadcrumbs in websites that have a large amount of content organized in a hierarchical manner. You also see them in Web applications that have more than one step, where they function similar to a progress bar. In their simplest form, breadcrumbs are horizontally arranged text links separated by the “greater than” symbol (>); the symbol indicates the level of that page relative to the page links beside it.

In this article, we’ll explore the use of breadcrumbs on websites and discuss some best practices for applying breadcrumb trails to your own website.

When Should You Use Breadcrumbs?

Use breadcrumb navigation for large websites and websites that have hierarchically arranged pages. An excellent scenario is e-commerce websites, in which a large variety of products is grouped into logical categories.

You shouldn’t use breadcrumbs for single-level websites that have no logical hierarchy or grouping. A great way to determine if a website would benefit from breadcrumb navigation is to construct a site map or a diagram representing the website’s navigation architecture, and then analyze whether breadcrumbs would improve the user’s ability to navigate within and between categories.

Breadcrumb navigation should be regarded as an extra feature and shouldn’t replace effective primary navigation menus. It’s a convenience feature; a secondary navigation scheme that allows users to establish where they are; and an alternative way to navigate around your website.

Types of Breadcrumbs

Location-based
Location-based breadcrumbs show the user where they are in the website’s hierarchy. They are typically used for navigation schemes that have multiple levels (usually more than two levels). In the example below (from SitePoint), each text link is for a page that is one level higher than the one on its right.

Attribute-based
Attribute-based breadcrumb trails display the attributes of a particular page. For example, in Newegg, breadcrumb trails show the attributes of the items displayed on a particular page:

This page displays all computer cases that have the attributes of being manufactured by Lian Li and having a MicroATX Mini Tower form factor.

Path-based
Path-based breadcrumb trails show users the steps they’ve taken to arrive at a particular page. Path-based breadcrumbs are dynamic in that they display the pages the user has visited before arriving on the current page.

Benefits of Using Breadcrumbs

Here are just some of the benefits of using a breadcrumb trail.

Convenient for users
Breadcrumbs are used primarily to give users a secondary means of navigating a website. By offering a breadcrumb trail for all pages on a large multi-level website, users can navigate to higher-level categories more easily.

Reduces clicks or actions to return to higher-level pages
Instead of using the browser’s “Back” button or the website’s primary navigation to return to a higher-level page, users can now use the breadcrumbs with a fewer number of clicks.

Doesn’t usually hog screen space
Because they’re typically horizontally oriented and plainly styled, breadcrumb trails don’t take up a lot of space on the page. The benefit is that they have little to no negative impact in terms of content overload, and they outweigh any negatives if used properly.

Reduces bounce rates
Breadcrumb trails can be a great way to entice first-time visitors to peruse a website after having viewed the landing page. For example, say a user arrives on a page through a Google search, seeing a breadcrumb trail may tempt that user to click to higher-level pages to view related topics of interests.

Breadcrumb Navigation Design Considerations

When designing a breadcrumb navigation scheme, keep several things in mind. Let’s take a look at some questions that might arise when you’re working with breadcrumbs.

What should be used to separate link items?
The commonly accepted and most recognizable symbol for separating hyperlinks in breadcrumb trails is the “greater than” symbol (>). Typically, the > sign is used to denote hierarchy, as in the format of Parent category > Child category.

Article Scource: http://www.smashingmagazine.com/

Here at Design Shack we love a good navigation menu. Lately we’ve noticed a trend arising around menus that use icons either exclusively in place of text or as a support of additional textual information.

Adding icons to your navigation can not only give you an aesthetic boost but actually make for a quicker visual read of the link. Here’s a collection of over thirty icon-based navigation menus that we found online. We’ll conclude with a few resources you can use to snag some free icons to create your own fancy menus.

KK Media

Bite Club

Mac Rabbit

Narwhal Company

Pixel Resort

Fishing Cactus

Tutorial 9

Envira Media

Duarte Pires

Weblifting

This is a frameset page including iframe and wonderful DHTML menu. Here displays the iframe content. Click the menu item above to see the picture in the iframe window, and you will find that the item is be activated, which the icon is shining and its background color becomes into blue.

Steps:

1. Create an iframe page in Dreamweaver.
   Select the menu item, add the linked page and Enter the frame name in the target filed in Menu Item > General.
2. Set the icon for the menu item by type the image’ path in Menu Item Settings > Icon; set the background image in Menu Item > Background; and set the border in Menu Item > Border.
3. Set the global properties for the whole menu. Check the option “Auto highlight current item”; set text color, Bg colcor, border color, Bg image and icon as the highlighted items style; and check “Clear highlighted item’s link” and “Highlight parent menu item” for the menu in Global > Highlight.

Navigation menus have to be intuitive, precise and easy-to-use. One simple, basic principle, which is common for all kinds of nav bars you would ever want to use for your projects. In fact, navigation menu is probably the most important element in web design: after all, it is being used more often than any other element on a given page. Therefore it’s important to make sure that your visitors will find they way around the site structure – however complex the latter might be.

So how do designers cope with a challenging task to create an attractive and usable menu? Which results can be achieved? OK, that’s a tough one. Let’s take a look around.

Below you’ll find 8 beautiful and user-friendly Navigation Menus and solutions.

BREAKER DESIGN

folietto

Pulmad, peod, lillesalong… – Annilill Peoteenindus

coda.coza

EGOLOUNGE *Büro für digitales Design

Convan Design – Howdy

far from fearless

Erika Greco – Blog

In this post I’d like to take a look at more than 5 stellar examples of navigation menus that positively impact the design of a website. The list includes a great deal of variety. Regardless of what you personally prefer, there should be some inspirational examples in here for you.

Soula

Africa Oasis Project

Tisha Creative

Tennessee Vacation

Timothy Sykes

If you have published the menu in the method “Publish JS”

You can also set resource folder for js and image files manually and you should keep two points in mind:

1. The parameters marked green can be modified.

2. The setting folders marked red must be identical in stmenu.js file.

<script type=”text/javascript” id=”sothink_dhtmlmenu”> <!–
st_siteroot=”file:///E|/DHTML%20Menu“;
st_jspath=”/javascript/stmenu.js”;
if(!window.location.href.indexOf(“file:”) && st_jspath.charAt(0)==”/”)
document.write(‘<script type=”text/javascript” src=”‘+st_siteroot+st_jspath+'”><\/script>’);
else
document.write(‘<script type=”text/javascript” src=”‘+st_jspath+'”><\/script>’);
//–> </script>
<script type=”text/javascript”>
<!–
stm_bm([“menu0e98″,800,”/images“,”blank.gif”,0,””,””,0,0,250,0,1000,1,0,0,””,””,0,0,1,2,”default”,”hand”,”file:///E|/DHTML%20Menu“],this);