Smashing Magazine we smash you with the information that will make your life easier. really.

Module Tabs in Web Design: Best Practices and Solutions

By Jacob Gube, June 24th, 2009 in Design Showcase | 54 Comments

A module tab is a design pattern where content is separated into different panes, and each pane is viewable one at a time. The user requests content to be displayed by clicking (or in some instances hovering over) the content's corresponding tab control.

Module tabs are seeing an increase of use as websites and web applications push for optimizing web page screen areas without sacrificing the amount of information presented at once. For example, in weblogs, they are used in secondary content sections (such as the sidebar) to present relevant and interesting information such as a listing of blog posts which users can interact with to get to web pages quicker. This inevitably allows for an unobtrusive and compact manner of presenting content.

This article discusses the use of the module tabs design pattern for use in websites and web-based applications. We share with you some best practices to consider when using module tabs, a listing of real-world examples of websites the take advantage of module tabs, as well as tutorials and free downloadable scripts for building and deploying module tabs in your sites.

Read more...
Showcase Of Well-Designed Tabbed Navigation

By Matt Cronin, April 6th, 2009 in Design Showcase | 88 Comments

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.

Read more...
Designing Drop-Down Menus: Examples and Best Practices

By Matt Cronin, March 24th, 2009 in Design Showcase | 143 Comments

As a general rule, most Web developers, especially usability enthusiasts, say it is bad practice to use drop-down menus because they are confusing, annoying and oftentimes dysfunctional. From a design standpoint, however, drop-down menus are an excellent feature because they help clean up a busy layout. If structured correctly, drop-down menus can be a great navigation tool, while still being a usable and attractive design feature.

Yes, that's right: drop-down navigation menus can be user-friendly. Just yesterday Jacob Nielsen the results of his recent drop-down menus study, in which he found out that big, two-dimensional drop-down panels that group navigation options help users to avoid scrolling and can precisely explain the user's choices with effective use of typography, icons, and tooltips.

In this article we take a closer look at the nature of drop-down navigation menus, analyze situations in which they should or should not be used, discuss various implementations and finally showcase a couple of bad and good examples of such menus. The article also includes various tips and suggestions to help you work with your drop-down menus.
Read more...
50 Beautiful And User-Friendly Navigation Menus

By Matt Cronin, February 4th, 2009 in Design Showcase | 147 Comments

Usability is an essential goal of any website, and usable navigation is something every website needs. It determines where users are led and how they interact with the website. Without usable navigation, content becomes all but useless. Menus need to be simple enough for the user to understand, but also contain the elements necessary to guide the user through the website — with some creativity and good design thrown in.

Below we present over 50 excellent navigation menus — we feature CSS-based design solutions, CSS+JavaScript-based menus and Flash-designs. However, they all have something in common: they are user-friendly yet creative and perfectly fit to the style of their respective websites.

Please also consider our previous articles:
- CSS-Based Navigation Menus: Modern Solutions, which lists modern solutions for CSS-based navigation.
- Navigation Menus: Trends and Examples is an inspirational collection of navigation menus.
Read more...
A Short Story About “Back To Top” Links

By Smashing Editorial, November 27th, 2008 in Design Showcase | 65 Comments

Often it is the close attention to small details that makes a design outstanding. During the development of a website, designers tend to quickly forget about small details and focus on major design elements, such as navigation, typography and layout. If done properly, the result is usually a solid, impressive and highly professional design that communicates information. However, it is not memorable. The reason is that such designs often do not have a memorable voice: they may look visually appealing, but they don't provide a vivid anchor for users to remember a website after leaving it.

In this post, we showcase the design of "Back to top" links, a forgotten and rarely used link that helps users jump to the top of a given page. A visitor can achieve this effect by pressing the "Home" button on his or her keyboard; however, not every user is aware of that shortcut, and most probably use the vertical scroll bar in the browser for that purpose. As designers, we can help our users out by adding a stand-alone "top" link to our designs.

Read more...
Footers In Modern Web Design: Creative Examples and Ideas

By Smashing Editorial, April 8th, 2008 in Design Showcase | 181 Comments

According to classic principles of web design, everything at the bottom of the page isn't that important. Most users think like that. And most designers are convinced that this is true. Site elements at the bottom of the page aren't really able to catch visitors' attention which is why footers are often forgotten or ignored and not given the attention they deserve.

In fact, most footers are rather boring and uninspiring. Designers often use the bottom area to mention everything they haven't found place for at the top of the site. E.g. disclaimers, W3C-buttons, copyright, "back to the top"-link and contact details. But if most designers forget it, why don't make use of it? Why don't use footers to impress visitors with something they actually don't expect at all?

This post presents creative examples of footers and ideas for footer design. We've tried to identify some trends and some interesting approaches you may want to use or develop further in your projects.

You might also want to take a look at the posts
- CSS-Based Footers: Modern Solutions which showcases even more excellent examples of CSS-based footers.
- Navigation Menus: Trends and Examples with recent trends, examples and innovative solutions for design of modern navigation menus.
- Pagination Gallery: Examples And Good Practices with good practices of pagination design as well as some examples of when and how the pagination is usually implemented.
- Tag Clouds Gallery: Examples And Good Practices presents creative examples and ideas for design of tag clouds.
Basically, footers need to provide users with the information they are looking for. This is why contact details and a brief information about site or / and site owners needs to be placed in the footer. Corporate designs may need to provide driving directions, telephone number, a web form or at least an e-mail.

Read more...
39 Creative Flash Designs

By Smashing Editorial, April 2nd, 2008 in Design Showcase | 90 Comments

Flash is powerful. Using it properly, you can create stunning visual experience and offer your visitors incredible user interaction. Although Flash is definitely not the favourite medium for usability and accessibility advocates, it has its advantages. With Flash designers can achieve results which simply aren’t possible with (X)HTML and CSS. Whether you like Flash or not, it empowers the Web with functionalities which make it an incredibly interactive medium.

Flash-based web-sites can look not like web-sites at all; Flash-designers tend to use colorful, dynamic, loud and extremely vibrant approaches, with effects and animation, music and videos, stunning visual elements and interactive navigation menus. Below you'll find 39 examples of creative, beautiful, shocking, unusual, but always outstanding Flash-based designs.

You might also want to take a look at the articles
- 65 Excellent Flash Designs which features 65 examples of outstanding Flash-based web-sites.
- Showcase Of Creative Flash Preloaders which may serve as an inspiration for your Flash-projects.
- Adobe Flash Tutorials: Best Of with hand-picked professional Flash tutorials which can enrich your design skills and improve the quality of your works.
Read more...
Navigation Menus: Trends and Examples

By Smashing Editorial, February 26th, 2008 in Design Showcase | 259 Comments

Navigation is the most significant element in web design. Since web-layouts don't have any physical representation a user can stick to, consistent navigation menu is one of the few design elements which provide users with some sense of orientation and guide them through the site. Users should be able to rely on it which is why designers shouldn't mess around with it.

That's why in most cases it's where simple, intuitive and conventional solutions are usually the best option. However, it doesn't mean that they need to be boring. One year ago we've presented modern approaches of navigation design. Let's take a look at what's different now, which trends one can observe and what ideas you can develop further in your projects.

This article presents recent trends, examples and innovative solutions for design of modern navigation menus. All images are clickable and lead to the sites from which they've been taken. We've missed something? Definitely! Let us know in the comments!

Read more...
Paper Strips Menus

By Smashing Editorial, December 17th, 2007 in Inspiration | 64 Comments

The beauty of an excellent design lies in designer's attention to smallest details. Conventions are our friends; however, to stand out, a design needs a creative spin, an elegant play of colors, some unique flavour — a small detail that would make a big difference.

Where the boundaries between traditional solutions and unusual approaches become fuzzy, designers tend to get creative. However, to come up with unusual ideas isn't that easy, particularly if you are dealing with some daily routine-tasks.

Deb Sofield sticks posts on a paper pile.

Still, nothing is impossible. Even if you're designing a navigation menu there are a number of possibilites you can explore. For instance, have you ever thought of... navigation in form of paper strips?

Read more...
Pagination Gallery: Examples And Good Practices

By Smashing Editorial, November 16th, 2007 in Design Showcase | 160 Comments

Structure and hierarchy reduce complexity and improve readability. The more organized your articles or web-sites are, the easier it is for users to follow your arguments and get the message you are trying to deliver. On the Web this can be done in a variety of ways.

In body copy headlines and enumerations are usually used to present the information as logically separated data chunks. An alternative solution is pagination, a mechanism which provides users with additional navigation options for browsing through single parts of the given article. Parts of the article are usually referred to by numbers, hints, arrows as well as "previous" and "next"-buttons.

Search engines almost always use pagination; newspapers tend to make use of it for navigation through the parts of rather large articles. And there are situations when pagination is also necessary for weblogs. Additional navigation can simplify the access to some site pages — e.g. make it easier for users to browse through the archives of the site.

In most cases pagination is better than traditional "previous - next" navigation as it offers visitors a more quick and convenient navigation through the site. It's not a must, but a useful nice-to-have-feature.

Let's take a look at the good practices of pagination design as well as some examples of when and how the pagination is usually implemented.

Read more...
Tag Clouds Gallery: Examples And Good Practices

By Smashing Editorial, November 7th, 2007 in Design Showcase | 190 Comments

Compared to conventional navigation patterns tag clouds don't necessarily offer a more convenient and intuitive navigation. However, used properly, they can provide visitors with an instant illustration of the main topics, giving a very specific and precise orientation of the site's content. Since human beings tend to think in concepts and models, it's easier to get an idea of presented content if the main concepts are given straight away — in digestible pieces, and prioritized by their weight. In fact, the main advantage of tag clouds lies in their ability to highlight the most important or/and popular subjects dynamically which is not the case in conventional navigation menus.

Tag clouds offer a quite interesting approach for site navigation; although the technique is sometimes considered to be an "alternative", it shouldn't replace the "common" navigation but support it giving users additional clues about the content of the site. Due to their "cloudy" form the design of tag clouds sets them apart from other design elements on a page. And although designers don't really have that much choice in designing them, they still find their ways to break through the bounds of creativity and come up with some unusual approaches and solutions.

This article offers some selected examples of tag clouds, its shortcomings and also some suggestions for tagging data and links in a more profound and effective way.

Read more...
65 Excellent Flash Designs

By Smashing Editorial, October 30th, 2007 in Design Showcase | 150 Comments

With Flash you can do more than just displaying videos. You can create stunning visual experience and offer your visitors incredible user interaction. Although Flash is definitely not the favourite medium for usability and accessibility advocates, it has its advantages and it empowers the Web with functionalities which make it an incredibly interactive medium. With Flash designers can achieve results which simply aren't possible with (X)HTML and CSS.

The results can be creative, impressive, beautiful and fascinating. Under two conditions: 1) if designers find the right mixture between graphics, animation, video and sound and 2) if designers follow the guidelines of usability and user interaction.

However, since there is a number of things that can go wrong in Flash, it's easy to get it wrong. In fact, there are thousands of examples where it is the case. In Flash any experiments with navigation and layouts are possible and in most cases it's extremely hard to find a creative yet intuitive approach. Flash is commonly used by designers, agencies, advertisers and interactive web sites, and not on the sites where simplicity and quick access to information are important.

In this post we present 65 examples of outstanding Flash designs with excellent use of graphics, visual elements, interface design and graphics motion. This showcase (mostly) presents "pure" web designs; we've tried to avoid Flash-based games and advertising.

Read more...
Splash Pages: Do We Really Need Them?

By Smashing Editorial, October 11th, 2007 in Design Showcase | 89 Comments

Yes, sometimes we do. Should we use them? No, we probably shouldn't. Splash screen (or splash page) is a front page of a web-site that don't provide the actual content, but offers visitors some kind of intuition or background information for what the site is about. Designers use splash pages in their portfolios to impress potential clients with eye-candy. Companies tend to make use of them to draw users' attention to their latest products. And users literally can't stand them, because splash pages usually take a long time to load and provide (almost) no navigation options — except of "entering the site".

Depending on designers' creativity, splash pages use more or less attractive visual elements, sometimes with interactive Flash-movies which sometimes start to play automatically. Splash pages usually have a very simple structure — mostly just an image with few text lines and links. The design of these pages sometimes isn't related to the overall site design. And although most sites don't use them, splash pages are sometimes necessary and therefore remain popular. In fact, there are some situations in which we might want or might even need to use them. Even although we shouldn't — for our visitors' sake.

Read more...
404 Error Pages: Reloaded

By Smashing Editorial, August 17th, 2007 in Design Showcase | 464 Comments

Three weeks ago we’ve showcased some of the most beautiful, creative and user-friendly 404 Error Pages; we’ve collected some interesting ideas one can use to help out the visitors once they got lost ony your page. We’ve also asked our readers to design their own 404 pages and promised to present the best solutions afterwards.

We’ve received over 100 entries. The choice wasn’t easy, so evaluating the quality of the entries we’ve considered - among other things - the communication with visitors, precise and clear navigation, the use of graphics, creative ideas and some outstanding solutions. Some of the solutions presented below might not be as helpful as they could or should be, however they include some creative approaches you should be aware of designing your 404 error pages.

We’d like to thank to everyone who participated, your input means a lot for us and for web-designers worldwide. You help to improve the quality of the Web. Don’t underestimate it.

So here is what you’ve come out with: over 45 working examples of user-friendly, creative and outstanding 404 error pages - in a brief overview.

Read more...
Wanted: Your 404 Error Pages

By Smashing Editorial, July 25th, 2007 in Design Showcase | 270 Comments

Every day you visit one of them. The pages, which don't exist any longer, have moved to a new server or have never existed at all. Once you've missed your intended destination, either through a bad or outdated link, or a typo in the page you were hoping to reach, you'll hopefully get an internal error message from the server. However, by default these messages aren't that helpful - after all, you are looking for the information, not for the reason you can't find this information. Good news - it doesn't have to be this way. You can style server error messages just the way you style any other pages. It's not only a more elegant way to deal with errors, but is also extremely useful for keeping users on your web-site, finding new clients or communicating with the old ones.
We'd like you to create a beautiful, functional and user-friendly 404 error page for your own web-site. We'll collect the most creative, usable and elegant solutions and review them in one of our next posts.
Read more...
14 Tab-Based Interface Techniques

By Smashing Editorial, April 18th, 2007 in Developer's Toolbox | 120 Comments

The popularity of tabs, well-known from tabbed document interfaces (TDI), is rapidly growing, challenging the creativity of both developers and designers. The development of efficient and user-friendly interfaces is quite hard to deal with, and tabs can guarantee a quick access to information without need to open and close dozens of windows at the same time. Tabs-based interfaces allow multiple documents to be contained within a single window and tabs can be used to navigate between them. And exactly this idea is being used more frequently recently. However, it doesn't have to be that complex. Using modern approaches, you can create and improve tab-based interfaces in few minutes. With CSS, JavaScript, DHTML and XMLHttpRequest (alltogether Ajax) almost everything is possible. Information isn't loaded in new windows, but loaded instantly with Ajax-based techniques. You can also use Back-button without worrying about losing your data. Let's take a look at some of the most interesting techniques we've found in the Web, searching for tab-based interface techniques.
Read more...
CSS-Based Navigation Menus: Modern Solutions

By Smashing Editorial, March 14th, 2007 in CSS | 243 Comments

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 53 beautiful and user-friendly Navigation Menus and solutions web-designers came up with using basic CSS styling. PS: Over the last few months we've reviewed CSS-Based Techniques, CSS-Based Forms and CSS-Based Tables and CSS-Based Footers (yes, some of these techniques use not only CSS, but also JavaScript and PHP). You'll find even more CSS-related articles in our CSS Section.
Read more...
List of CSS Tools

By Smashing Editorial, September 2nd, 2006 in CSS | 141 Comments

What can be better than simple, useful and handy tools you can use "on the fly" in the development process? Whether you'd like to test font size, generate online-forms, create rollover-navigation, create a slide-show, format CSS code or optimize your code - you can use dozens of tools to make your life easier. We've collected them. At least most of them, and compiled them in a brief and precise overview. And here what we've come out with - most useful CSS-Tools you can use developing tableless web-sites.
Read more...