BlogmyQuery – BMQ

Good navigation is the main cornerstone of an effective website. In practice, however, it’s often a tough challenge to come up with a meaningful, unambiguous way to organize, arrange, and display content to users; and it’s often not much easier to find a visually interesting solution either. The wide adaption of JavaScript libraries like jQuery is making it increasingly easy to add various kinds of sleek animations to navigation design. For instance, many recent promo websites are essentially single page websites with an array of animation effects used to make navigation a smoother and richer user experience.

We need to be very careful and cautious when using these dynamic effects in our designs. A simple, calm navigation is usually much more user-friendly than an evolved, dynamic one. Users want to use the website, not be baffled by the weird and hardly usable navigation. But that’s not to say that a creative navigation should be avoided at all costs; in some contexts, an interactive menu does make sense, especially when it comes to promotional websites such as online campaigns, portfolios or advertising — on these sites, interactive navigation can lend some dynamics to an otherwise dull and boring experience.

Below we present some interesting examples of website navigation menus — they are not necessarily very usable, but they are certainly inspiring and original and thus you could build your designs upon the ideas presented below: use them, tweak them and improve upon them. We also discuss the potential usability problems of each of the techniques presented in this post. Before using a similar technique in your design, please make sure that it fits the context of your design. Test, validate and verify that the technique would actually make sense in your website. Approach these techniques with caution. Let’s take a look at some interesting ways to present navigation menus content for both smaller promotional pages and deep informational websites.

Parallax and Scrolling

Parallax is an animation effect that allows layers to move in response to a particular viewpoint. The effect is used to add a three-dimensional depth illusion to the design and make interaction more responsive and interesting. Recently, this technique has been frequently used to animate background images, as in the famous Nike Better World site.

Nike Better World

Rich graphics and parallax 3D effects

Vertical scrolling navigation with parallax background effects

On the Nike page, the effect is visible when a user scrolls the page vertically. The background images seem to overlap, as if they were piled up in a slide deck. This effect is particularly strong when you click on the circles in the right area of the site. Notice the dashed horizontal and vertical lines which are displayed as you scroll the page. They vividly connect parts of the site and help to create a more consistent user experience.

One drawback of the navigation here is that the navigation controls are very subtle. In fact, on many sites which use this technique, the strong emphases are on the rich, detailed illustrations which make it a bit more challenging to actually find the navigation. In this example, perceiving the dots on the right side as navigation and not mistaking them for part of the design may take a while. Still, a very original and memorable design.

Rosso Carmilla

Horizontal parallax animation

Horizontal scrolling with parallax animation

Rosso Carmilla features an interesting twist on a combination of the Parallax-effect and scrolling navigation. The designer uses a horizontal rather than a vertical orientation, with a classic navigation menu at the top. As the user hovers over visual elements, they seem to move, creating the illusion of depth. The limited color palette and original illustrations work very well with the animation to create a memorable experience. The subtle animations are visible only when the user hovers over the content area.

The idea is very interesting, and the execution is done fairly well. However, a larger font size and additional navigation controls for a smooth transition between sections might improve the overall usability of the site: the horizontal scroll bar at the bottom of the page isn’t easy to notice and isn’t very comfortable to use.

Discover Tennessee Trails & Byways

Horizontal scrolling navigation, clarified.

Horizontal scrolling with parallax animation and clarified navigation

Discover Tennessee Trails & Byways incorporate a “trail viewer” navigation for their users. The designers of the site use the same idea of horizontal scrolling navigation with a Parallax animation, but they decided to explain to users first how to use the navigation on the site. Usually, this is not a sign for an effective navigation, but it works quite well in this example, especially because the overall design appears to be very novel, playful and experimental to users anyway. In the case of uncommon or particularly innovative design techniques, this kind of instruction might be necessary until users understand the paradigm of the new navigation pattern.

When the user clicks on a trailer icon, further related details are displayed in a lightbox. Also notice how the “map” with trailer on the right side moves when the user uses the main “trail viewer” navigation. The other interesting navigation menu on the site is the one displayed at the bottom of the page; when a user selects an area, secondary options are displayed in the menu on the right side and this selection doesn’t change wherever the user’s mouse is. This navigation menu is also very nicely integrated in the overall site’s design.

Siebennull

‘Cluttered desk’ meets Parallax

A unique and original take on the ‘cluttered desk’ style

Strikingly original, Siebennull features a’cluttered desk’ style wooden theme, along with a 3D feel provided in part by shadows and other realistic graphics and in part by the Parallax effect which is applied to the whole page. The overall effect feel very interconnected without too much clutter.

One pitfall with an animated background, however, is that the background doesn’t necessarily hold still while the user is viewing something in detail, whether in a model box or a simple zoom-in. This can make it more difficult to read large blocks of text. The page does feel a bit difficult to focus on due to a strong Parallax-effect. This is probably an example of the Parallax-effect being used too strongly, thus deteriorating the purpose of navigation.

Storytelling

It’s common practice to keep the design as simple and intuitive as possible, making it very easy for the user to click from one page to the next, almost mindlessly — “don’t make the user think” is the rule. However, you could as well engage users on your site, making them think about what’s going on in the page and involving them in the experience on a deeper level. For instance, you could employ storytelling to increase the engagement on your site by telling a story that your users would like to pursue or interact with.

One way to make your visitors feel involved is to turn the website into an interactive journey. While users interact with the page, they can learn something along the way, being baffled by the originality and uncertainty of the site. This technique is probably best-suited to promotional landing pages rather than content-heavy websites. If a story is intriguing and presented in an interesting, perhaps unconventional way, it will capture users’ attention and encourange them to continue through to your site’s call to action. A few fine examples of these types of navigation are highlighted below.

Ben the Bodyguard

A narrated landing page

An exciting user experience, creating user-engagement with design and effects

The designers of the Ben the Bodyguard landing page have chosen a very memorable metaphor for their main character. Instead of presenting a generic “coming soon” page with a description of the upcoming service, the site effectively tells a story. The main tagline of the page is “A Frenchman protecting your secrets. Yes, seriously.” Next to this statement, a description of the tool is presented subtly. The mysterious character is displayed in the background, yet it very well captures users’ attention and interest.

The actual interesting part of the page happens when you scroll the page slowly. If you pay attention to illustrations and read all the details presented, you can watch as a story unfolds. While the narrator walks down the street, he gives you some explanation, but only enough to raise your interest. As you keep scrolling, the story reaches its climax and ends with a prominent call-to-action buttons. Notice that the design is responsive and the illustrations adjust to the user’s viewport. On the whole, it’s not classic navigation, but it’s not a traditional site either. Ben the Bodyguard is a remarkable website and storytelling works very well in this context of a promotional piece. That’s the reason why the site has received so much attention when it was initially released.

Youzee

Smooth, gentle storytelling

Smooth, gentle parallax animation

Youzee is another example of a smooth, vertical one-page scrolling navigation which employs storytelling. The page has the main navigation at the top, yet it is not linked to separate pages, but rather to the sections of the loaded page. In fact, each section slides up neatly, with a bit of animation but not enough to make the user dizzy.

Notice how carefully the designers use storytelling to involve the user in a story and engage them in learning about the tool. Opposite to Ben the Bodyguard, the design doesn’t rely heavily on a character, but rather uses more familiar, existing metaphors to unfold the story. The main area on the top isn’t saying what the service is about; the user learns it along the way as he scrolls the page. Also notice how well designers use the “Turn on” metaphor for the button on the top of the page; it looks as if it wanted to be clicked on and responds appropriately to a click. Well done, guys, well done.

Scrolling Navigation

Tried and true, scrolling navigation is a simple and elegant way to guide users through your content. Many designers are experimenting with scrolling navigation on single page designs which accomodate the full information of a website on one page rather than spreading it across multiple pages that would load separately. Usability studies are required to determine if this navigation pattern is more effective than a classic one, and it would be wrong to apply it to contexts without verifying its usefulness first. Some ways of making your scrolling navigation unique are highlighted below.

Polecat

Back to the basics

Simple solid scrolling navigation

Polecat is a yet nice example of a single page site with scrolling navigation. The primary navigation in the upper right corner is very minimal, plain text almost, but it works well because it’s not in the way; it’s clearly available and makes the user feel like they know exactly where they are. The illustrations are unique and engaging. When you visit the page for the first time, you might feel overwhelmed with a number of information items thrown at you, but this feeling goes away shortly after the site is explored in more detail.

When a navigation item is clicked, the page smoothly scrolls to the chosen section of the page. The interesting part is that various parts of the page are clearly divided using distinctive background colors, so the user always knows exactly where a section begins and where it ends. Also, each section is vividly illustrated, leaving a lasting and memorable impression. It has a more interesting and engaging design for a portfolio website than many of the similar websites out there.

The main drawback: at first glance, it’s not quite clear which elements are clickable and how the navigation works, which can be a bit confusing at first.

Cornerd

Simple vertical scrolling navigation

Simple vertical scrolling navigation

Very much like Polecat, Cornerd features lots of illustrative eye-candy. The monster theme is working very well and subtle eye movements of the monsters create an inviting, playful atmosphere. The designer Denise Chandler does not take herself too seriously and this is exactly what invokes empathy and sympathy on the site, making it easier to develop trust for designer’s ability to produce engaging and attractive work.

The sections of the page work well, but a fixed navigation at theop might really help to establish more of a sense of freedom, especially in the long sections like the portfolio section. Instead of that, the user is only provided with the option to move back up.

Curious Generation Group

Single page scrolling with a twist

Single page scrolling with a twist

While clean and organized, Curious Generation Group feels a bit unexpected with its colorful round shapes. A simple static navigation bar at the top is both subtle and plays well with the overall design of this website. Sometimes a fixed navigation bar can feel clunky and distracting, but this one feels light and airy with its transparency. The positioning of the content works well with the animation of the scrolling and does a good job of leading your eye through the website. Notice that all single areas are interconnected: for each area, there is a sidebar navigation displaying further navigation options. A very vivid, colorful and memorable design.

Eric Johansson

Riding on a scooter

Riding on a scooter, featuring parallax animation

Eric Johansson does a couple of things that make the exploration of his site interesting for the user. The page provides subtle cues on how to use the navigation and there is also a (kind of) horizontal scrollbar which appears within the context of the page. It’s a small difference, to have a scrollbar a few pixels above the bottom of the window as opposed to using the browser scrollbar itself, but it provides almost enough distinction to make it clear that the user is supposed to click and drag.

As the users scroll the page, they need to look out for arrows and handles that need to be clicked on in order for further navigation options to be displayed. Eric is playing with the users, and does so in a very unique way. Users that do not feel comfortable with it are nevertheless provided with the option to View the extended & “normal” site. The graphics on the page could be improved a bit to make the design look a bit realistic, but maybe it is designed this way on purpose. But it would be great if the users could scroll the page without necessarily using the integrated scroll bar on the bottom of the page (see Scroll Page Horizontally With Mouse Wheel).

Haunted Cathouse

Vertical scrolling navigation with storybook graphics

Vertical scrolling navigation with storybook illustrations

Haunted Cathouse is a yet another, very detailed and very illustrated page which breaks the flow of the page by displaying unique illustrations between the sections of the page. As the user scrolls vertically, he can either see the current section, jump to the previous one or to the next one.

Clicking on the little owl in the lower right corner reveals a slide in navigation bar at your service wherever you are on the site, a better indicator however may save the visitor some time. While some users may be happy to start scrolling away on their mouse to get to the content, in this particular design it might be useful to provide multiple options. A top-level navigation bar also provides a way to highlight what kind of content users can expect to find below.

Sam Web

Horizontal scrolling within horizontal scrolling

Horizontal scrolling nested within horizontal scrolling

Sam Web’s horizontal scrolling panels, while a fairly classic navigation model, are very cleanly executed. It’s also nice that some sections slide horizontally while the contact link scrolls to the bottom, since that element is present globally.

The interesting thing here is the nested horizontal scroller on the portfolio page. Since it scrolls in the same direction as the main content area, but isn’t controlled by the same navigation, it has some potential to confuse users. The left and right arrows are visual indicators that something is different about this section, but it also might benefit from being a slightly different kind of scroller, or using some other interaction to navigate that content. It’s a tricky thing, finding a slick way to add navigation to subcontent already inside of some sort of interactive navigation.

Denny’s Restaurant

Too much of anything is bad for you

Combined horizontal and vertical scrolling

The designers of Denny’s Restaurant probably overshot when searching for a way to accommodate a lot of content. The combination of horizontal and vertical scrolling is rather disorienting than helpful. Without the small hint on the home screen, the user may even miss the content only reachable through the extra vertical scroll. Additional content is hidden in sliders and it seems easy to get lost. In addition to being confusing, the site is not very friendly to mobile users, looking to order or find a restaurant on the go. The site might create a feeling of “fluid content” which is a bit difficult to grasp and focus on, since everything is moving; everything is interactive and everything is changing. The design could use a bit more calm.

Experimental Navigation Menus

It seems that designers often feel a bit underwhelmed with classic navigation pattern and inventing new methods of navigation or just add a new twist to convenient design patterns. The sites featured below present navigation in some interesting ways.

Ferocious Quarterly

The more unconventional tabs

Interesting illustrations

Ferocious Quarterly’s tabs in the upper section of the site are a little out of the ordinary. The single fact that they are presented in a different way, creating an illusion of depth, makes the design stand out a bit. A good example of how a small detail can make an otherwise quite unspectacular design look a bit more interesting.

Zut Alors [Warning: First five seconds may cause a headache!]

Pop-up-mania at its best

Front and center tabbed navigation

Overall, ZUT ALORS! is extremely avante garde and very non-traditional. The large front and center letters are the only content on the page, and they are the navigation. Each letter pops open a series of thoroughly arranged pop-ups with subsequent page content.

While this approach is unique and bound to stand out, it will also deter average users. The short, simple statement on the landing page isn’t very informative and makes the user get confused. The pop-up secondary pages could backfire though: if the user has many windows open, the new opened ones won’t necessarily be the primary focus, which could make the design confusing. Although it is possible that that was the intention of designers in the first place. A very weird, noisy and extremely memorable design. Please do not try this at home.

Method Design Lab

Up-to-date news

Graphic equalizer selector

Method Design Lab’s menu to follow their feed is one of a kind. Following their activity on the site is made easy by the graphic equalizer-like history in the top right hand corner. Clicking on an hour brings up all posts, media releases and tweets of the past hours. Differentiating between the different types is easy since each is assigned a specific color. A click on one of the news bubbles pops open a window with the actual message. Both the idea and the implementation are quite refreshing and do not overstrain the visitors patience.

The Web Standards Sherpa

Skipping through content

Clear and easy — as long as the content is limited

The Web Standards Sherpa basically comes without much of a navigation. The content is presented on slides that can be skipped through. The arrows clearly indicate the preceding and following articles. While it is still manageable to skip through less than ten articles, this type of navigation is of no greater use once more than twenty articles are up for view. The link to a list of all published articles as well as the search function takes care of this. A level deeper into the site, the horizontal navigation only consists of three clear options that leave no one in the dark about their whereabouts.

BonLook

Illustrated Drop-Down Menu

Offering choice by shape using pictograms

BonLook features a nice example of a clean and simple illustrated drop-down menu. Choosing glasses by shape instead of brands makes the product catalog easier for any customer’s browser. In general, using pictograms in menu contexts eases orientation and helps customers find what they are looking for.

Design Intellection

Right-side dynamic navigation tabs

The right-hand navigation changes its appearance

The guys at Design Intellection present their portfolio-style site with a tab navigation on the right hand side. Interestingly enough, the navigation changes appearance when scrolling into the context section of each page, replacing the original literal menu with small icons. A click on the icons brings the user back to the top of each section, giving them a quick hint that the icon style is simply a smaller version of the main menu, not a submenu for the specific content section.

Generally a nice and intuitive menu style worth adapting and easily extended to cover subsections of content.

Bernat Fortet Unanue

A creative and interesting way to present your work

Clear and interesting categorical menu design

Fortet features 22 categories of work in the form of circular navigation buttons. The full menu reappears at the end of every page, making the site easy to skim through. Even though it is quite space intensive, the user is already used to its look and recognizes the visited categories. Another example of a clear visual indication contributing positively to the look and feel of the site.

Lega-Lega

Intuitive and clear pictograms with roll-over titles

Straightforward Navigation

The Lega-Lega is simply structured and slick. The menu only consists of seven categories, each featuring a single layer. Only minus: the horizontal scroll-bar may easily be mistaken for part of the layout rather than being recognized as a scroller. Adding a mouse-over effect might fix the issue. A clean and easy site with straightforward navigation — you certainly will not get lost here.

Bluecadet Interactive

Clean submenu

Letting the user choose the category

Bluecadet sets an example in implementing a clean version of a graphics-heavy submenu. The design features a slider on the right side; as the user browses the items of the slider, the background image changes as well. Once an item in the navigation is chosen, the page displays the previous and next projects as well as provides a link to get back to the main menu. Also, the user can personally check the categories being displayed.

Danilo Iurlaro

Creative animation effects

Creative animation effects

Danilo Iurlaro features a creative use of scrolling animation effects, and it certainly stands out in a crowd. However, the text that jumps down from the top whenever a navigation item is clicked is truly annoying and distracting. At first, it gives the impression that this text is the title of the page, not just a transitional graphic, which actually isn’t the case. Letting the users scroll down manually to view the actual content with such a large navigation area is quite a challenge.

When using novel navigation techniques that many users might be unfamiliar with, it’s really important to utilize clear labelling to help them find their way through the site.

Fantasy Cartography

A map of navigation

A map of navigation

Fantasy Cartography is a site showcasing maps, with navigation that is modelled after a map itself. While the content sections are basically a take on scrolling navigation, the organization and layout of the navigation options is unusual. The site is also full of ‘soft effects’ which tie it well in with the illustrations.

Clear visual indication using the link-corresponding dots correlates the active tab with the displayed content. Labelling is key in atypical navigation situations.

C&C Coffee Company

Charming animation

Simple and fun, animation that enhances the navigation without distracting from it

The upper navigation of C&C Coffee Company is an example of animated navigation that is minimal, simple, and although being dynamic, doesn’t force itself onto users. The dynamic navigation elements fit nicely to the overall design of the page which also contains other “hand-written” elements, giving the brewery a more personal, friendly touch. Still, having seen the animation once may be enough for some visitors.

Breadcrumbs

NOS

Context-sensitive breadcrumbs

Interactive breadcrumb

The top-level navigation in this example is really simple, but very clever. NOS displays sub-categories to the right of each top-level category when clicked, almost like a breadcrumb. This is a really interesting take and a good way to handle a large content-heavy site with a lot of categories. It lends itself well to the blog format where a lot of different new categories may be coming and going constantly.

MDM Bank

Persistent breadcrumb

Persistent breadcrumb

One of the main goals of having a website, whether it be a portfolio website or a business website, is to declare your presence on the Web. There are thousands upon thousands of websites out there; it’s pretty well established that you are competing for your audience’s interest and attention. To this end, it’s important to make those few seconds count when making a first impression.

There are many things happening in web design today. One of the interesting developments is the emergence of responsive web design, in which fluid grids, flexible images, and CSS media queries are used to create more adaptive layouts and hence more elegant user experiences. These designs can adapt to the browser’s viewport, completely changing the layout or the overall design of the page altogether, to fit the available space.

In responsive web design, as described in Ethan Marcotte’s article, fluid grids, flexible images, and CSS media queries are used to create more adaptive layouts and hence more elegant user experiences.

We also see a rising popularity of soft :hover and :active/:focus-effects, where buttons, navigation items and links feel more responsive and engaging as well. The transitions are smooth, and often subtly or vividly animated. Another important development is of course the rich web typography, made possible with the emergence of font embedding services. We have much more freedom for our typographic decisions which is an opportunity to create more diverse, unique and therefore memorable designs.

How To Design A Memorable Website?

• Make use of original and unique graphics. Having a large, punchy or slightly quirky graphic on your portfolio can help separate you from the competition.
• Feel free to experiment with non-traditional color combinations. Experiment with various contrasts to create tension, but put readability always first. Invite the users to feel engaged, but keep the page usable.
• Use original, compelling language to clearly emphasize your differences. Unfortunately, your visitors are likely to read only a small percentage of the text on your website. You can pack the most punch in that percentage by using confident opening statements, catchphrases or interesting summaries to pique the interest of your audience.
• Keep things organized. This might go without saying, but if visitors can’t navigate through your website or figure out who you are from the start, chances are they won’t stay around to see your amazing portfolio.

Let’s now take a look at some recent examples of striking, memorable designs.

Zinguh! Creativ

Modern Minimalism and Cool Green Accents

Zinguh Creativ features a large, bold slide show and a memorably detailed green leaf favicon. This is a nice example of a slide show spanning the width of the page; it’s both funky and neatly executed. Notice the high quality of product images throughout the site.

Green accents in the navigation, and in the favicon, are a unique touch, but could be improved for better readability

The green highlights for text are a bit harsh on the eye, a slightly darker green would probably work better. A minimalist arrangement of the images is a nice touch.

United Pixelworkers

Pixelly Images: A Visual Pun!

United Pixelworkers features a subtly pixellated, textured background as well as foreground images with blocky edges, creating a play on their name which is fun, cute and smart. The texture is so rich, and the information architecture so clean, that this website feels far more content-rich than it actually is.

United Pixelworks uses a static, left-aligned navigation bar

The left-aligned sliding navigation bar is an example of static navigation done right. It’s there, but it doesn’t get in the way of the content and isn’t too obnoxious or obvious. The select color palette and letterpress-style links at the bottom are a nice final touch.

Outback Creative Studio

Large Original Illustrations

Outback Creative Studio features innovative, large navigation buttons on the right side which is a fresh, colorful and inviting approach. The colors, the graphics and the blocky feel of the layout work together to create a bold and unique statement.

Outback Creative Studio has “night” and “day” themes, emphasized with a rooster graphic

The “night” and “day” button allows the user to switch between themes, a creative and unique presentation reinforced by the central rooster graphic. The graded orange and purple color scheme is rich and unusual, and lends the design a unique look and feel.

Mike Kus

Right-aligned, Interactive Logo

Mike Kus has an eye-catching interactive logo with a motto that displays on mouse-over. DEAD stands for “Dreaming Everyday About Design,” which stands out and is easy to remember. DEAD is featured in the favicon too, adding more places for users to see and absorb the tagline.

Interactive logo

The light background again leaves the emphasis on the work, which is strong enough to stand on its own. Punches of color and the use of images lead the eye down the page very well; notice how well each project’s description and related images are grouped, making the page flow very smoothly.

Wez Maynard

Right-aligned Graphic Mayhem

Wez Maynard uses offbeat graphics, creative layout and original content phrasing to make his website memorable. The design is completely right-aligned, which is quite unusual to see and feels truly novel. The ribbon sidebar on the left is interesting and unique, and the vintage graphics and blue, textured footer are fun and visually interesting. The quirky messaging is a great example of how to use language to create an impression. This is a nice example of an original, unique and interesting design.

Quirky graphics, and messaging to match

Epic Web Agency

Bookplate Graphics, Rainbow Textures and Grunge

Epic Web Agency lives up to its name with its portfolio website. With grungy textures, plenty of bold, contrasting color and Spartan-like helmets as themes in the graphics and images, this site is certainly “epic.” The loud typography and punches of orange add excitement. The colorful logo adds a bit of saturated color to the header. Notice how visual tension is created with a thick diagonal line on the home page. The website uses various background images across its second- and third-level pages, all related to the “epic” look.

Texture, color and type work together seamlessly

The artwork used here is all the more unusual because it’s in a much more traditional style, usually reserved for print media. Epic Agency uses plenty of graphics, and does so in a very original way, making for a very visually striking user experience.

Ryan O’Rourke Presents

Elegant, Dark, Responsive Layout

Rourkery.com features a vivid, majestic, theatrical theme which juxtaposes well with playful typography and colorful graphics. Using a distinct theme can be a good way to ensure that content, graphics and messaging work together in a focused way. The website’s centered logo and navbar are both unusually and elegantly done, aligned in the center and using a subtle navy pattern.

Theatre theme keeps content and graphics focused

Potential downsides to note are the leading of the text, as well as the visibility of the home page link, which is the logo in the center of the header. Notice how well orange is used as the main color across various design elements. The layout and images resolutions also nicely respond to changes in the browser window size, responsive design at its best.

Christina Ung Illustration

Bold, Unique Use of Typography

Christina Ung Illustration is all about the typography. The liberal use of bold and lighter font-weights, along with the mix of lowercase, uppercase, and mixed serif and sans-serif fonts, all work together to make the type as visually interesting as the use of graphics would be.

Bold typography logo

The clear, dark logo anchors the eye on the left-aligned navigation, which leaves plenty of room for the portfolio content occupying the main part of the page, to be the main focus. Large screenshots allow the content to be seen very easily without clicking through the actual blog posts. The pink highlights feel fun and fresh, but not overpowering.

Josh Sullivan

“Droll” is Memorable

JoshSullivan.me is a good example of how even a one-page website can pack a punch. The large header graphic is very unique and memorable, with its old-fashioned “nature book” feel. The background is an interesting mix of textures, colors, geometric shapes and historical-feeling images. While nothing is really clickable, this is just a calling card so nothing really needs to be; the social networking and email address links serve as the page’s call to action.

Interesting stew of background images

The color palette may look a little offbeat, in keeping with the graphics, but this all helps make the website as memorable as it is visually appealing. One small suggestion would be to make the links on the page a bit more prominent so that users don’t end up wandering. A stronger contrast between the text color and the background color would help. The main graphic is so central that it might be a bit overpowering for some, but this really does depend on who the audience is.

Jake Przespo

Fun Graphics and Clean Organization

The portfolio of Jake Przespo features another very creative central graphic. The “fun factor” goes a long way toward making a website memorable, and this is one that adds fun, very effectively. As users navigate through the website, the graphic flips around. The words in the red banner stand out, with subtle hover effects and woodcut detail.

Whimsical central image flips around as users navigate through

The minimal colors and splash of red keep the page a clean, minimal background for the front-and-center images. The readability of the content would certainly benefit from an increased font size, though.

Cooper Graphic Design

Large, Bold Header Graphic

The colors really draw the user into Cooper Graphic Design. The shades of brown, with texture and punches of turquoise, feel very bright and upbeat. The layout is clean and systematic, while the main, large center graphic contrasts with the more subtle background graphics in an interesting, attention-grabbing way. The top-level navigation is also very clear, making this an effective and visually appealing portfolio website. Also notice an interesting background image that lends the page more visual appeal. And don’t forget to resize the browser window, too.

Bold header graphic contrasts with subtler background

One small usability problem, however, might be the tabbed navigation at the bottom of the page. The use of tabs often signifies internal navigation, rather than external. In this case, these tabs seem to link out to external pages, which might confuse users a bit.

Brandon J. Schmidt Design & Photo

Watercolor Graphics

The watercolor graphics on Brandon J. Schmidt Design & Photo are very prominent and visually appealing, especially on the front page. The black, white and yellow color scheme feels minimal and modern, an interesting juxtaposition with the old-world feel of the watercolor.

Soft watercolor graphics

The logo graphic on the home page is faded into the background on the website’s second-level pages, keeping the website logo as the focus and leaving a lasting impression on users.

Water’s Edge Media

Minimal Design With Floral Illustrations

The simple, solid navigation structure and design of Water’s Edge Media stands out even without the illustrations, but the illustrations help make it more memorable. The logo, in particular, is very fresh and modern.

Fresh, modern color palette and pretty floral illustrations

The slide show of recent work is neat, but it could use some polish, especially the slider buttons. The left alignment adds a modern feel. Overall, however, a little more variance in font type and size would make the design just a bit more interesting.

Jordan Gray Creative

Minimal Design With Left-aligned Navigation

Jordan Gray Creative features seamless left-aligned navigation below a clean, minimal typography logo. This design is super-minimal, relying on the work in the slide show for content and appeal. Subtle details like the favicon and CSS spacing keep the design from seeming too simple.

Striking minimalism lets the work speak for itself

Eight Hour Day Design & Illustration

Bold and Colorful

Using the portfolio as the graphic element, Eight Hour Day Design & Illustration integrates a lot of color through relying only on the work. The select color palette of the page itself is crisp and bright. The type is clean and vivid. Although it’s simple, the hint of subtle patterning and shadowing at edge borders and between navigation menus effectively keeps things from looking flat.

Colorful elements are drawn directly from the Eight Hour Day portfolio

It’s Not My Type

A Typography Blog About Typography

It’s Not My Type makes good use of the richness of Web typography—with strong slab serif typography widely used across the various design elements, including the Web form, date and comment areas.

Fonts change as users navigate through the website

The scrolling content panel works pretty well here; the colors and subtle textures are clean, and add visual appeal.

McKinney

Simple But Elegant

McKinney features a minimal design with accent graphics that are not textures, but geometric shapes like lines, circlesand triangles. The red, gray and black palette is striking yet subtle.

Elegant touches through geometric accents

One thing that would be fun, is if the slide show controls were draggable. More hover effects would also give the page a more dynamic feel, making it more interactive and responsive (some elements do, however, respond when clicked on). The consistency of the layout and color choices of the website’s internal pages, also deserves a mention.

Shaping the Page

Playful Origami Animations

Shaping the Page uses a soothing, light and airy color palette as a backdrop for fun, whimsical, animated origami illustrations, which are a visual pun on its name.

Elephants, butterflies and more!

The lightly textured blue background and the wispy social networking graphics at the bottom of the page are downright charming. The portfolio page is nicely organized and right-aligned, which seems to work well with the playful, moving illustration on the left to visually balance the content.

Broken Pencils

Pencil Sketch Illustrations

Broken Pencils, Inc. has a prominent and visually striking logo. Although the navigation is split into bottom and top sections, it doesn’t look redundant since the top is more understated and the bottom uses different colors. The slow color transitions on hover effects on the “Services” page are a nice surprise as well. All of the graphics are simple and modern. The most striking part of the design, however, is the pencil sketch illustrations, in keeping with the “pencil” theme.

Pencil sketch illustrations echo the website theme and company branding

Who is Leon

Fun With Interaction!

The background animation of Who is Leon might be the first thing the user notices. The static background and scrolling content, combined with the slightly blurred photography, work together to create a sense of motion and excitement. Users might feel invited to click around, and many elements on the page are, in fact, interactive.

Hover, click and move!

The grayed out portfolio screenshots turn to color on hover. Against plain flat background this really makes the screenshots pop, and along with the prominent buttons, invites visitors to take action. The website also involves the use of several fonts, which add to the overall striking effect of the design.

David Paul Seymour

A Monster!

The portfolio of David Paul Seymour is a very fun, colorful, illustration-based website. The illustrations take up most of the page, making them the main focus as well as a design statement. The cloud illustrations for the navigation are fun and makes users want to click around. In contrast to the previous website, none of these illustrations are interactive. This feels a little bit like a missed opportunity, as some hover effects or small animations would really go a long way toward adding to the playful feel of this website.

Color and whimsy make this page stand out

One other thing that stood out was the lack of a favicon. The addition of a favicon (most especially on such a graphically rich website) is a really quick and easy way to enhance brand recognition, and to add a more polished, complete feel.

Creativepayne

Bold, Unique Graphics

Creativepayne is a bit tongue-in-cheek, graphically speaking. The old-world art mixes with a variety of other styles; there is a lot going on in this design. The color palette is a subdued mix of browns and tans.

Bold, unique graphics and mix of styles

The call to action, “ESTIMATES get yours TODAY,” does get a bit lost in the top right corner; overall, if some of the other design elements had slightly bolder fonts, they might balance out the main, large graphic a little more.

Chicago Interhoods

Interactive Map

Chicago Interhoods is an example of a great marriage of design and information. The orange, cream and blue color palette is striking and fun. With a prominent, central logo and clearly organized top-level navigation, this design is a clean and effective backdrop for the interactive map. The map itself is a nice visual way to browse for information.

Beautifully interactive design aids browsing for information

AdPacks.com Classy Sites & Classy Ads

Vintage Graphics and Type

AdPacks Classy Sites & Classy Ads features a fun, vintage feel in the graphics, fonts and textures. The visual interest created by this mix, invites and engages users to interact the website elements.

Fun, vintage graphics and type

The visual representation of the products makes it easy for potential buyers to see and understand what the products are, while the calls to action are clearly laid out in the buttons for each section, making this a complete, well-laid out product landing page.

Min Tran’s Journal

Beautiful Typography and Unusual Textures

Min Tran’s Journal features a ribbon navigation that is sophisticated and tidy. The soft colors work together nicely; the playful typography looks informal and engaging, and also works nicely with the graphics and overall feel. The two-column layout features columns of equal width, conveying a clean, well-organized and fresh impression that is unique at the same time.

Camera graphic, centered two-column layout

Solid Pink Studios

Big, Bold, Diagonal

Solid Pink Studios takes the pink theme its name suggests, but takes it in a completely unexpected direction; the grumpy rock monster looks like he means business.

The solid pink rock monster is a fun, memorable element

The diagonally-aligned text works best at a fixed width, and could present some display difficulties to users with a small screen; on smaller screen resolutions, the blog link is cut off to the point of nearly being hidden. Overall, the diagonal text alignment is is a fun and memorable way to present content and is very in keeping with the rest of the design. One final note: this is nit-picky, but it does feel a bit odd that the favicon for Solid Pink is green, not pink.

Summary

When creating a memorable website, make sure to pay special attention to the treatment of your design elements. Risk something unusual and creative. A clean, well-structured backdrop for fanciful graphics, creative animations and bold typography can all make the design stand out even more. The more personal and creative you appear, the better your chances of being remembered and selected for your next project.

Related Posts

• 50 Beautiful And Creative Portfolio Designs
• 40 Creative Design Layouts: Getting Out Of The Box
• Best Practices For Effective Design Of “About meâ€�-Pages
• The Current State of Web Design: Trends 2010

(wcp)

© Sarah & Adrienne Kahn for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: Inspiration, showcases

Everyone is always looking for interesting and effective ways to organize their website and allow users to move about and find things. But there’s a fine line between unexpected and unusable. Three points to consider in any navigation scheme are consistency, user expectations and contextual clues.

If page is long and provides different levels of navigation, will users be able to find their way through the site and use proper navigation quickly? Forcing visitors to use certain keystrokes to navigate, rather than what they’re used to, might be novel, but is that effective if you have to explain instructions prominently on your home page? Here are some examples for your reading pleasure.

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

Made by Water

A JavaScript-Powered Vertical Fun

The large bold headings and modern color palette on Made by Water feel fresh and fun. The grid layout is nice and clear, while the background texture is subtle but interesting. The icons at the top are visually appealing, and the animation makes them fun to click. It’s not immediately apparent what they are for, though. Some text would help to clarify that they are for navigation.

Vertical navigation buttons with icons.

The other problem with the navigation is the yellow “up” arrow that is displayed in the footer of the page. One would expect it to bring you back to the top of the page, but it leaves you more in the middle. The circle of stripes that follows you down as you scroll doesn’t match the background pattern, but we can’t tell if it’s part of the navigation. At any rate, we clicked it to no effect.

Finally, while the text at the top is fun and exciting, finding the “Who am I” section is a bit hard. It’s not immediately clear what the website is about.

Made in Haus

Horizontal Slideshow as Navigation

The large page keeps Made in Haus from feeling unoriginal, and the smooth motion is a bit different from many of the sliders we’ve seen. Bumping the accompanying text up into the body of each slide is a good way to keep it above the fold and visible as the user flips through the slides. The sliders on the sub-pages are also effective, being an easy way to skim through a fair amount of content. Also, nice hover-effects under the slideshow look attractive and give an insight into the work of the agency.

Bold horizontal navigation.

One drawback is that the triangle on the far right of the upper navigation menu is a bit confusing. It appears to link to the home page, as a logo would, but we’re not quite sure why. Also, the arrow on the right side of the slideshow may be a bit too tiny, making it a bit difficult for users to navigate the slideshow. We’ve seen a similar navigation earlier, on Weightshift which is a nice example of an alternative implementation of this technique.

Foundation Six

Animated Text Scrolls Down With the User

Foundation Six features a few big bold screenshots at the center of the page, giving us the impression that they were interactive in some way. The first thing that we did was try to click on the screenshots, but nothing happened (except for the central one which links to the description of the project featured in the center of the page), which was a little frustrating.

Text moves instead of images.

The headings are large and very clear, and the type is handled nicely throughout. The color palette is very soft and clean, and it nicely matches the atmosphere of the site. The call-to-actions buttons are large and easy to find, read and click. The subtle hover effects in the upper navigation enhance the user experience, making it smooth. Additionally, the contact form tracks well and is nicely laid out, while the map is a nice touch. The company scores bonus points for linking to Bring Down IE6.

On the projects page, the way the explanatory text slides down instead of the images is original. But being so unexpected, it could be a little disorienting, which may or may not be a good thing: is explanatory text really the best place to make a statement with moving parts?

Word Refuge

Textual Content in a Horizontal Slider

Word Refuge features an old-fashioned bookish vibe. Because it is a copywriting service, this seems appropriate. The contact form is prominent, easy to find and easy to use. The logo is also nicely done, and the color palette is rich and regal.

Various arguments for the company are organized into slides.

One small point is that the tag lines in the main navigation are effective under some of the menu items but not under others. Some of them feel redundant, as if they’re there only to balance things out. As a rule, if text doesn’t add any explanation, it shouldn’t be there. That said, the text throughout the website is nicely kerned, and while the page is wordy, the text is easy to skim through and read.

Relogik

Animated Horizontal Slideshow Navigation

Relogik is another example of minimalism done well. The logo is understated and sophisticated. Most design elements are semi-transparent and appear on hover. The close-up images are bold and make the content the focal point of the page. The code is clean and well-structured and uses a solid grid layout with pulls to keep everything squared up.

Sliding horizontal navigation.

The classic numeric navigation makes it easy to navigate the slideshow. One weakness is that the contact information has a very low contrast against the background. A darker color would help to highlight it. The project detail pages do a good job of showing rather than telling and of displaying each piece in a real-world context.

Drexler

Horizontal Navigation… If the User Follows Instructions

The horizontal navigation on Drexler works both with the arrow keys and mouse clicks. On the first glance, it’s not clear how to navigate the site: you need to either read the hint in the upper area of the site (“User your arrows”) or experiment with the design to figure it out. To browse blog posts, users need to click on the illustration of the post or use keyboard arrows. The design itself is visually appealing, but the navigation scheme isn’t straightforward.

“Use your arrows” to navigate.

The retro color palette and big bold fonts make the website colorful and energetic, but they also might be a little overpowering. The “t” for Twitter in the upper right is an interesting break from the usual little bird, but the downside of breaking with convention is that you might lose clarity. We didn’t know what the icon was for until we clicked it, and we probably wouldn’t have clicked it if we were merely visiting the website as a normal user. The contact button is amazing indeed, as it claims. The multi-column contact form is an interesting take on the email form. It seems effective, and it tracks very well. This is a design that needs to be explored to be understood — but maybe it was the intention of the designer in the first place?

The logo is simple and clean, but again, it adds a note of confusion. The yellow underline on mouse-over feels unbalanced, because the rest of the logo isn’t highlighted. One other thing to note is that the page changes color to match the project being displayed. This is an unusual take on the portfolio. Usually, projects are displayed uniformly, sometimes to the point of being indistinguishable. This approach makes the projects stand out, in a good way.

Komrade

Vertical Navigation With a Twist

This page allows users to forge their own path through the website. Komrade features original illustrations, a fresh color palette and an original “Choose Your Own Adventure”-style navigation scheme. The navigation has the following cracks in it, though:

1. The light blue text looks like it’s hyperlinked. One of the first things a user sees upon loading the page is the blue “Who’s Komrade” heading. The first thing we did was click it, but nothing happened. This started the user experience off on the wrong foot. With this unusual scrolling navigation, distinguishing the clickable from the unclickable is extremely important.
2. The numbered navigation for Komrade’s past work does not stand out enough. The red circles look like yet more flowers, which caused us to pass over them several times before figuring out that they were the navigation. This goes back to the clickable/unclickable issue. Well-placed labels would go a long way here.

“Choose Your Own Adventure”-style navigation.

All For Design

Scrolling Navigation and “Shelf”-Navigation

All For Design feels light and airy, with its crisp woodcut headings and subtle effects such as the Twitter icon that flies on hover. The design os single projects pages is especially nice, making clear exactly what was involved in each project. The section “some inspiration” nicely puts books, useful websites and articles on a “shelf” and has subtle shadow- and hover-effects. The only problem is that the title-attribute is displayed on hover together with the screenshot which makes it a bit difficult to focus on one of them.

“Shelf”-navigation.

Calendar next to the contact form.

The calendar next to the contact form is also a great idea: it sets expectations and makes it easy for potential clients to plot a timeline. While the font is scannable, it still feels a bit too wordy overall, although the shadow effects, subtle borders and custom icons keep the eye flowing down the page.

Digital Labs

Horizontal or Vertical Navigation?

With the prominent screenshots on this website, one would think the page would have horizontal navigation; in fact, the page is static. Digital Labs uses a wide layout, with a nice textured background. The dark colors make it feel spacious without being too spacey. One issue, though, is that the orange ribbon on the right looks like it should be clickable, but it isn’t. The text-based social media widget, which responds to mouse-over, is an interesting touch. The web design scene is full of social media icons, so a text-based widget stands out.

The static screenshots above look like a slideshow.

The other issue is that the “Are you ready to get started?” link at the bottom is a mailto: link, rather than a link to a contact form. This is acceptable, but a drop-down form in that space would really kick things up a notch.

Calobee Doodles

Classic Thumbnail and Lightbox Combination

Calobee Doodles, an illustration-based portfolio website, has fun details, such as the objects and people falling from the sky. The cloud menu items could be clearer, though. At first, we were not sure what “Custom” stands for (it stands for custom design and illustration work). However, the menu benefits from descriptive tooltips and appear on hover. Still, a different wording, for instance “Work”, would have been clearer.

The website uses the classic thumbnail and lightbox navigation.

A thumbnail gallery is a common way to display work, but in this case illustration thumbnails are a bit too small, and they are linked to images. A lightbox may work better in this context. The bottom-up-navigation may be useful for some readers, and the footer is truly remarkable. Also, it would be nice to remove dotted lines appearing on click in the navigation menu. A simple outline: none; for links with proper styles for :focus and :active states would suffice.

Build

Classic Top-Level Navigation

While the overall layout of Build is clean and modern, the content could stand to be more easily scannable, for two reasons for this. A look at that code suggests that the margins and padding are a bit arbitrary. The padding for the main body conforms to a design pattern, but the major content elements do not. Maybe it would be a good idea to use multiples of a set base number for the margins, padding and borders, so that there is a consistent ratio throughout.

Classic top-level navigation.

Secondly, the contrast of the text in the content sections has some problems. The contrast between strong white and strong grey background is very striking, and maybe a bit too strong. The second part of the page looks a bit busy and a bit difficult to scan, probably because the colors of the headings and descriptions are very similar. Maybe if the headings were kept as a serif, the content blocks could be distinguished a bit by making the text lighter and using a sans-serif font. Some textual variation or typographic work might add visual interest as well. Subtle hover effects for links are attractive and fun to click on: nice touch!

We liked the listserv sign-up widget in the footer of the page. A sample email in the relevant field, along with more space on the line, could be a helpful, though. Also, an explanation of what exactly users are meant to type here would be great — for instance, a sample e-mail in the input field. Also, the mouse pointer should change after you click on the submit-button, but in this case it doesn’t. We fumbled a bit at first until we looked at the code.

Mail Chimp

Graphics-Heavy Vertical Page With No Navigation Other Than Browser Scroll Bar

Mailchimp’s promo page is a visually appealing website with a lot of interesting vintage graphics. Some real strengths of this website are the many interesting textures and patterns. The color scheme is modern and appealing. There are, however, a few usability problems. First, there is actually no navigation. We’re as big a fan of shedding unnecessary conventions as the next guy, but if we were an existing customer visiting this website, we would have no idea what to do. The “Sign in” link is obscured at the bottom of the page, with few visual cues to reward the user’s patience as they scroll down. Even a few small links at the top would add some structure and provide some cues for navigation, which would make the whole website make more sense.

Graphics-heavy vertical website.

Secondly, the edgy graphics, while fun and visually interesting, don’t give much sense of what the main point of the page actually is (if you are visiting the site for the first time). The primary message is only delivered in the paragraph towards the middle, and even it is a bit hard to read, with the small white text over the shades of gray. The paragraph would be more effective if it were bigger and had more contrast. The promotional videos are really great and remarkable, though.

Pline Studios

Minimalism in Vertical JavaScript-Based Navigation

Pline studios is an architecture firm, so it makes sense for it to have a spacious vertical layout with graphic touches that are reminiscent of CADD drawings. The big headings are clean and visually appealing and do a great job of leading the eye around. In an unconventional navigation scheme, making it clear where to click is critical, and this website makes it extremely clear. The navigation is repeated in each section, so the user is never stranded and left to scroll.

One problem, though, is the project descriptions; so much focus is on the images and animations that there’s actually very little explanation about the projects themselves.

Minimal vertical navigation.

Transformology

Persistent Toolbar-Navigation

Transformology shows another way to handle navigation on a vertical page. When the user scrolls the page, the navigation menu at the top of the site changes accordingly. The elaborate headings in the text blocks are visually appealing, but almost to the disadvantage of the content that should be showcased. The headings make the content easy to see but more difficult to read. The website has a clean, solid grid layout, but it may not always do an effective job of displaying the content, which sometimes feels overpowering.

Static navigation follows wherever you go.

Burton

Sliding Captions and Tabbed Boxes in a Vertical Layout

The first thing we noticed about Burton is the nice visual details, such as the animated eyes on the “Search and Destroy” search box, and the animated GIF on the mouse-over logo. The jigsaw layout is clean, bold and easy to scan. The mouse-over labels are a good way to display details without overwhelming users with text, and the mini-tabbed layouts inside the content blocks keep things clean and minimal. All of the content is available without being visible all at once.

The scrolling vertical navigation is aided by the jigsaw sections with sliding captions.

A problem with the navigation, though, is the up and down arrows on the side of site’s pages. We expected that they would allow us to move up and down the page; instead, they pop out a text-based navigation menu. Not knowing what sections of the page correspond to the labels (for instance, when you visit the page for the first time), this isn’t very useful. Still, overall very nice, original and memorable design.

New Adventures in Web Design

Fun Shapes That Feel Like Navigation

At the first sight, the interactive shapes in the middle of the New Adventures page feel a bit like navigation, in that they change as you move through the website, providing cues that the page has changed. New Adventures is an example of a clean and solidly structured design. The rainbow of dynamically transforming shapes is fun and original. Adding more color could make the design a bit stronger; the brown palette is calm and professional, but it probably could have been be more interesting with some accent colors.

The shapes move all over the place!

The typography overall is effective, and the line heights and margins make the information very clear and concise. An interesting touch of the design would be to highlight the speaker’s photo when a user hovers over his or her name in the list of speakers. Also, when trying to return to the front page, we clicked on the text logo in the left upper corner (“New Adventures in Web Design”), but it isn’t clickable which is a bit confusing. We had to use the small “Home”-link in the upper left corner instead.

Christopher Kaufman

Wide Horizontal Slider With a Difference

On Christopher Kaufman’s page, the sub-content panels slide up as the slider moves left to right. The layout is clean and organized, the background is colorful and unique, and the slideshow adds plenty of eye candy. The logo is minimal but detailed, and the top-level navigation is clear and effective. One drawback is that the background image is a pretty big file; as it loads, it creates a flashing effect that can be disorienting. One could argue that the height of the slideshow is optimized for larger screens; but scrolling through the slideshow content, some users can see that the content below has changed, yet have to scroll down to read all of it. This isn’t necessarily a big issue, but the slideshow panels could be a bit shorter.

The wide horizontal navigation forces users with small screens to scroll.

Chapolito

Another Example of Tabbed Navigation

Chapolito is really a unique website. The footer animation catches the eye right away, and the abstract shapes in the top-level navigation are original, as is the way the logo is integrated in the navigation, which keeps the brand as a focal point. We do have a suggestion for the sub-navigation in the portfolio section, though. The circles-as-progress indicator probably works best for slideshows of about five pieces of content or fewer. With such an extensive showcase, the user might get lost and not be able to find a particular project again. If numbers were in the circles, that would help.

Interesting top navigation.

Flywheel Design

Sliders and Graphic Tiles That Flip on Mouse-Over

Flywheel Design gives a good overview of its work right on the home page. The hover-over navigation is fun and gives users an incentive to mouse around and explore. The background is simple without being boring, making this a good example of minimal design. One problem for us was the slider navigation on project sub-pages: almost too minimal, because it took us a while to figure out it was there. Making it a little bigger or adding a splash of color might help.

Flip-tile style navigation.

Wishbone Design

Flash-Based Animated Navigation

Wishbone Design is created for kids and parents, so it makes sense for it to be fun and full of Flash animations. The navigation is entertaining but a little hard to use. Having the sub-elements open on hover seems to be the root of the problem; changing it to a click might give users a greater sense of control. Hover navigation should be as speedy as possible. The main slideshow is eye-catching, but you really have to dig to figure out that this is actually a company manufacturing bicycles (among other things). An explanatory blurb or even some slides would help new visitors. Another problem: if you’re going to have audio, please give users a way to turn it off! Overall, the site is truly remarkable, with attention to details. Nice work, this is what Flash is supposed to be used for!

Flash-based navigation.

Basmatitree

Flash-Based Animation That Could Be Navigation

We can’t lie: on first arriving on 60 mq missione casa, we were really hoping that the spoons were the navigation. We were sad to find out they aren’t. That said, this is a pretty fun layout for a food blog. The typography could benefit from some more variation, though. Also, the posts would be easier to scan if some texture or color variation were added to the columns.

Flash-animated spoons are fun!

Minus Five

An Entirely Horizontal Sliding Website

Horizontal navigation can be problematic. In this case, though, Minus Five is larger than life and colorful. The hover-over “Forth” and “Back” controls are large and easy to see, making it abundantly clear where you can click and what you are supposed to do, and avoiding one of the common drawbacks of unconventional navigation.

Entirely horizontal navigation.

For a portfolio, one thing that could confuse users is that the featured websites are not linked to anything. Using images embedded in a Mac frame to convey that they are websites is a good idea, but they make it a little hard to see the details in the designs. Another questionable design choice is positioning the portfolio pieces to the right of the background image. This makes it feel as though the background is the focus, instead of the portfolio pieces themselves. Also, the page is difficult to browse if you don’t have a proper wide screen display, because you see only small chunks of the site at once.

Retinart

Completely Text-Based Navigation

Retinart is a lovely example of a typography-focused website. The nice, even gutters and margins are relaxing on the eyes. One thing that’s a little unexpected is that the “Feedback” tab on the left side doesn’t pop out from the side (as most users would expect), but rather opens a modal window.

The beautiful typography goes well with imaginative language.

Notice the careful attention to language. In conjunction with beautiful type, a designer can really take it to the next level by using beautiful language to emphasize the quailty of the site.

Collision Labs

Classic Tabbed Navigation

Collision Labs is energetic. We immediately wanted to take this design firm’s advice and fasten our seat belts! The large header block is exciting without being overpowering. The portfolio sub-pages are clear and do a good job of both telling and showing what the projects were about. The typography, though, is a little uniform. One thing that confused us was the Twitter icon in the footer navigation: the bird flips upside down on hover. We couldn’t really see the reason for this, so it felt vaguely unsettling. Overall, though, an effective website, and a good example of judicious and not excessive icon usage.

Bold color and traditional navigation.

Summary

In sum, navigation is as much about communicating instructions for finding content as it is about being fun and interesting. There are some points to take away. For instance, if something is clickable, make sure it looks clickable. If it’s not clickable, make sure to communicate that, too. Also, be fun without being confusing. And show, don’t tell. If you have to tell users what to do, then the navigation has failed. After all, the crucial attribute of any truly exceptional website is both aesthetics and the usability of its navigation.

Related Posts

• Showcase of Modern Navigation Design Trends
• Showcase of Beautiful Vertical Navigation Designs
• The Case Against Vertical Navigation
• Navigation: Menus, Trends and Examples
• Showcase of Well-Designed Tabbed Navigation

Would you like to see more similar showcases on SM?

Let us know what you think in the comments to this post! And please like this article below if you find it useful and would love to see more similar posts on Smashing Magazine in the future. Thanks.

© Sarah & Adrienne Kahn for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: navigation, showcases