Skip navigation
Help

Design Showcase

warning: Creating default object from empty value in /var/www/vhosts/sayforward.com/subdomains/recorder/httpdocs/modules/taxonomy/taxonomy.pages.inc on line 33.

By Matt Cronin

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:

1. CSS-Based Navigation Menus

Loodo
A colorful menu that adds to the feel of the website.

Screenshot

Acko.net
Steven Wittens takes a look at the navigation menu from a quite unusual perspective.

Screenshot

Web Design Ledger
Web Design Ledger has an excellent menu; its large size is convenient but doesn’t intrude on the content.

Screenshot

UX Booth
UX Booth uses a a stylish text box under the navigation as a sort of subtext for each menu item.

Screenshot

Nopokographics
Vertical navigation menus are used very rarely, for the simple reason: they are harder to use. However, some designers risk unusual approaches. Nopoko Graphics uses an arrow and a hover-effect for its vertical navigation menu.

Screenshot

Icon Designer
This website uses a large image-based menu on the home page. The user’s attention is drawn directly to this large menu, making it convenient for users.

Screenshot

Cosmicsoda
This large and colorful menu is very noticeable and uses a slight hover effect to further define the menu items.

Screenshot

Designsensory
An intuitive drop-down navigation that uses 2 colors effectively to communicate the active navigation item and the passive ones.

Screenshot

Smallstone
Smallstone, a U.S. record label, presents its navigation menu in the form of a the so-called Space Echo Roland SE-201.

Screenshot

TNVacation
It’s pretty hard to find a nice-looking drop-down menu. This one is a beautiful exception.

Screenshot

Clearleft
Clearleft uses a couple of paper pieces for its navigation.

Screenshot

45royale
A simple, clean and beautiful navigation with a nice hover effect.

Screenshot

Design Intellection
An excellent example of block navigation that shows how effectively “speaking” hover effects can be used with a clean and simple navigation menu.

Screenshot

Ronnypries.de
A navigation menu doesn’t have to look like a traditional navigation menu. Ronny Pries uses a floor plan to lead site visitors through the pages of the site.

Screenshot

Jiri Tvrdek
Jiri Tvrdek presents the navigation options of his site as leaves on a tree. Creative, unusual and memorable.

Screenshot

Water’s Edge Media
Patricia Abbott uses clothespins for the navigation options.

Screenshot

Matt Dempsey
Matt Dempsey highlights his navigation options with a brush stroke.

Screenshot

Cognigen
The current navigation option is pressed — clear and intuitive.

Screenshot

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

Screenshot

Jayme Blackmon
Jayme Blackmon seems to like setting “done”-marks…

Screenshot

Jeff Sarmiento
Why not try a sloping navigation options once in a while?

Screenshot

Studioracket
A really unusual navigation menu that uses some kind of a mindmap to illustrate the navigation. And, apart from that, the navigation menu is hand-drawn!

Screenshot

Cultured Code
A subtle yet distinct menu that is out of the way of content. Excellent colors and a nice hover effect also add to the menu.

Screenshot

Nando Designer
This Portuguese designers uses handwriting and a piece of paper for its main navigation.

Screenshot

Bonfiremedia
Sometimes typography is just enough…

Screenshot

Artgeex
Vivid typography in use.

Screenshot

Gloobs
Some designers integrate a stamp in the contact navigation option.

Screenshot

South Creative
This website uses large navigation buttons and has a good hover effect.

Screenshot

Mac Rabbit
One more example of a large and clean menu. This one uses icons to aid the reader in recognizing each item’s function.

Screenshot

RapidWeaver
This menu has a clean and smooth layout, and it has a great sub-menu that uses transparency to separate it from the main menu.

Screenshot

DFW UPA
Icons reinforce the menu items on this website and add emphasis to each option.

Screenshot

Revolution Driving Tuition
This website has a great grunge style, and the menu fits right into the layout.

Screenshot

Duarte Pires
This menu is located close to the content, where it is easy to use. It uses large icons, which adds a visual element to the navigation. Also, the menu on other pages uses the same icons in a vertical layout, bringing consistency to the website. The icons may not fit perfectly, but it’s a nice idea.

Screenshot

Valetin Agachi
This navigation has a rather unique style that emphasizes selected items. Also, the menu layout stays consistent throughout the whole website.

Screenshot

Tutorial9
Tutorial9 recently got a nice redesign, which came with a very usable and well-organized menu.

Screenshot

2. CSS Menus With JavaScript

Agami Creative
Designers sometimes use tooltips for their navigation. However, tooltips and aqua are quite an unusual combination.

Screenshot

Whitehouse.gov
A perfect example of how one should organize huge amounts of content into clear and easily distinguishable sections. Also, excellent design of the drop-down menu.

Screenshot

AppStorm
AppStorm is a new website by Envato. A jQuery effect is used to create an excellent and very usable drop-down menu.

Screenshot

Eric Johansson
Eric Johansson, a designer from Sweden, uses tall vertical blocks and images for his navigation.

Screenshot

Coda
This conveniently located menu has a beautiful hover effect. The sub-menus are consistent and include every item.

Screenshot

Dragon Interactive
Dragon Interactive has a colorful jQuery-based menu with a great effect.

Screenshot

Bern
I am a big fan of this navigation layout. I like how the menu fits in with the grunge theme. It also uses another jQuery drop-down effect.

Screenshot

Abduzeedo
For its recent redesign, Abduzeedo introduced a jQuery slider into the navigation.

Screenshot

3. Flash-Based Menus

Iipvapi
Colorful sloping Flash-based navgation from an Indian Web design agency.

Screenshot

Not Forgotten: The Movie
Most entertainment websites use Flash and unusual navigation menus to capture users’ attention. On this one, an instant classic, navigation items are put on cards.

Screenshot

Nick Tones
Nick Tones, with a dynamic, colorful and yet still somehow usable navigation menu.

Screenshot

woonky.ideas
This Argentinian design agency puts CDs and books on a table, each representing a navigation option, of course. When hovered over with a mouse, each object reveals what can be found inside.

Screenshot

Gotmilk
The designers of this Flash-based site came up with something truly original. The navigation menu is put on a ribbon; each navigation item has a nice and simple hover-effect: when an icon is hovered, it is replaced with the site area the icon stands for. Usually tooltips are used for this puprose, here designers use a different approach. Outstanding!

Screenshot

Spectra Visual Newsreader
A beautiful and very colorful Flash menu that is a good example of excellent usability.

Screenshot

NickAD
This unique website is all about easy-to-use navigation.

Screenshot

Sensi Soft
This amazing portfolio has very well-thought out and convenient navigation.

Screenshot

4. Highly Usable Navigation

tap tap tap
This website has a beautiful layout and a menu with great effects.

Screenshot

Apple
Apple has one of the more exceptional websites, particularly because of the navigation layout. The Mac menu is quite amazing. With images, it couldn’t be easier to find items and move through the menu.

Screenshot

Alex Buga
Visitors here use a large and well-laid out slider to move through news items.

Screenshot

CREASENSO
The content on the home page of this portfolio website has an extremely simple yet usable organization.

Screenshot

polargold
This visually stunning Flash-based portfolio uses an accordion-like layout for the content, so there is no loading of new pages. The large type stresses the importance of menu items.

Screenshot

Colourpixel
Colourpixel has a very interesting layout for its portfolio. It combines all of its sections onto a single page, and allows each item to be hidden or revealed, as demanded by the user.

Screenshot

DVEIN
Yet another excellent Flash-based portfolio. This website organizes all gallery items onto an interesting revolving list.

Screenshot

Alexandru Cohaniuc
This portfolio is rather well known for its beautiful layout. An accordion effect allows users to navigate through projects and portfolio items.

Screenshot

Porsche Canada
Porsche Canada’s website has very user-friendly navigation, with many sub-items for each menu item. The convenience and usability of this menu is great.

Screenshot

Jeremy Levine Design
This architecture portfolio has a unique layout that allows users to easily browse the website. The line of menu items has many effects and transitions that make it very convenient.

Screenshot

firstborn
Firstborn, a well-known design studio, uses scrollable, horizontal navigation for its portfolio. The navigation items can also be displayed in other modes, such as thumbnails, making it even better.

Screenshot

Benjamin David
This portfolio has a vertical slider that automatically moves through menu items. Many large items are placed together in a single glowing menu.

Screenshot

Thibaud’s Portfolio
Another stunning portfolio with creative navigation, this one with Flash-based “color samples” to choose from. Like items are grouped together.

Screenshot

Jason Reed Web Design
Accordions are useful when trying to squeeze many items into a small space. Jason Reed used a stylish accordion in his portfolio to allow users to navigate pages.

Screenshot

Marius Roosendaal
Another usable accordion menu that groups portfolio items.

Screenshot

5. Vertical Navigation Layouts

Danny Blackman
Danny Blackman’s website is often regarded as one of the better portfolios out there, in part because of the amazing vertical layout.

Screenshot

Tomas Pojeta
This website is yet another portfolio that uses a vertical layout to incorporate multiple pages onto one, while allowing users to move vertically between sections.

Screenshot

volll
Volll uses a vertical layout with a beautiful illustrated landscape background.

Screenshot

Mediocore
Mediocore is an awesome portfolio. It has a few more elements than usual on its pages, but still looks excellent.

Screenshot

6. User-Friendly Sidebar Menus

FreelanceSwitch
FreelanceSwitch organizes its articles using a great menu.

Screenshot

Fubiz
The redesign of Fubiz brings an excellent sidebar. Slide effects are used to fit a large amount of content into a small sidebar.

Screenshot

Checkout
Checkout has a stunning website. An extremely clean list-style menu in the features section also displays nice icons.

Screenshot

Ruby Tuesday
Ruby Tuesday has a very nice website. The sidebar menu has exceptional icons and smooth hover effects.

Screenshot

Concentric Studio
A simple and minimalist menu with sliding effects.

Screenshot

Barack Obama
President Obama’s website has a well-spaced and nicely contrasting list-style sidebar menu.

Screenshot

GABBO DESIGN
Another clean and well-spaced list menu.

Screenshot

Further Resources

You may be further interested in these articles and related resources:

About the author

Matt Cronin is a freelance web and graphic designer as well as developer. He is the author and owner of Spoonfed Design, a design blog with great tips, how-to, inspiration, tutorials, and more. Spoonfed Design is part of the VAEOU Creative Network, a new startup in progress with new services coming soon.

(al)

0
Your rating: None

The design of 404 error pages is often overlooked and underestimated. However, designed carefully, these pages can make a random visitor stay on your website, take a look around and eventually find the information he or she was looking for in the first place. Effective 404 error pages communicate why a particular page couldn’t be displayed and what users can do next. A search box and list of useful resources (possibly related to the missing page) could be helpful in this case.

We’ve already covered the design of 404 error pages in previous posts. In them, we also covered some interesting and useful ideas for designing 404 pages. Now, it’s time for a fresh dose of 404-error inspiration. This article presents 50 more examples of beautiful and original 404 error designs. Some of them are beautiful but not user-friendly, others are user-friendly but not really beautiful. Please use these examples as a source of inspiration; hopefully, this showcase has something for everybody.

Also note that some examples used in this post were suggested by our Twitter followers: please follow us on Twitter Follow us on Twitter to vote on which article gets published next, discuss new ideas, get fresh updates and suggest great ideas for our next posts. Thank you.

Beautiful 404 Error Pages

Cut & Taste
Cut & Taste claims that “Someone on the staff is to blame for this! Rest assured, the proper person will get the proper amount of blame and humiliation dealt to them.” Notice how well the search box is highlighted. Beautiful!

Creative 404 Error Page

Productplanner
Productplanner perfectly integrates its 404 error page in the overall branding of the website.

Creative 404 Error Page

Mundofox.com
A 404 error page with a not-so-eloquent Homer.

Screenshot

Duoh.com
Probably one of the most colorful and abstract 404 error pages out there.

Screenshot

Apartmenthomeliving.com
A quite unusual 404 error page from a website that helps people find apartments.

Screenshot

Chrisglass.com
Chris takes his comrades on a trip, hunting for the right page.

Screenshot

Huwshimi.com
On Huwshimi a ninja seems to have stolen a 404 error-page: “you must return when the moon has friends and the fox is borrowed”. Gorgeous!

Screenshot

ilovetypography.com
A typographically beautiful (of course) 404 error page from ILoveTypography.com.

Creative 404 error page

Newspond
Newspond uses a very strange illustration on its 404 error page. The circle defines the limits of the website, and the small image at the top is a miniaturized Newspond logo. A click on the image leads to the home page of the website.

Creative 404 Error Page

Brightkit
“404 Fowl Not Found.” Brightkit shows a missing owl on a milk carton. Unusual and, therefore, memorable.

Creative 404 Error Page

jhuskisson.com

Screenshot

Gog.com
“404: oh noes, there’s nothing in here.” (sent by @Chamb via Twitter)

Creative 404 Error Page

User-Friendly 404 Error Pages

RealMacSoftware.com
An excellent 404 error page, functionally speaking, that contains a site map of the website.

Creative 404 Error Page

InspirationBit
InspirationBit presents an overview of popular and recommended articles.

Creative 404 Error Page

45royale
This error page contains links to popular posts and a cool illustration of a pretty freaky monkey.

Creative 404 Error Page

Ma.gnolia.com

Screenshot

Have Fun With 404!

Yes, fun! Because 404 also is a place where you can show your sense of humor. You have the opportunity, so use it well!

www.techkultura.com
On Pawel Opydo’s blog: “Golden Rule of the Code of the Samurai: If this isn’t the page you were looking for, you have to do Seppuku.”

Screenshot

Abduzeedo
Abduzeedo suggests ideas for finding the right article and lists popular and recent blog posts as well as a tag cloud.

Screenshot

Habrahabr
An illustrative image (sent by sabugao on Twitter).

Creative 404 Error Page

CSS Remix
This fellow is quite scared (sent by @dezignMusings on Twitter).

Creative 404 Error Page

Pattern Tap
Don’t get angry, and don’t cry. Pattern Tap will take on the burden of the missing page.

Screenshot

New Yorker
The New Yorker magazine has been published since 1925, but it is definitely with it, with its own 404.

Screenshot

Frye/Wiles
Frye/Wiles Creative Agency.

Screenshot

Heinz
The 404 for the best-known ketchup.

Screenshot

Chelmsford Library
OMG, Smashing Magazine is missing in the Chelmsford Public Library!

Screenshot

Craigslist
An ASCII 404 error page from Craigslist.

Screenshot

The Truth
Is this really the truth?

Screenshot

Wulffmorgenthaler
Blame that weird beaver on Wulffmorgenthaler.

Screenshot

Henrik Hedegaard
Henrik Hedegaard seems to like the Simpsons.

Creative 404 Error Page

NotaNiche
Refresh and see the next funny picture. A blog by Alexander Frison.

Screenshot

Daze of Our Lives
“Whatever the Dickens a so-called “Error 404″ is I haven’t the foggiest idea, but one has occurred. You can’t trust this wretched technology, can you?”

Screenshot

Limpfish
Wanted: a Web page.

Screenshot

Orangecoat
“Despite that song in your step and sense of purpose, you’ve hit a little bump in the road. These things happen. We’re going to do our best to make sure you keep dancing in the right direction.” Orangecoat gives a 404 error mind map.

Screenshot

Kochatelier Berlin
404 bread on the website of a cooking agency.

Screenshot

Dawdle
Mario occasionally entered the wrong castle.

Screenshot

CSS-Tricks
Chris Coyier takes a closer look at the code.

Screenshot

Niki Brown
Niki Brown encourages her visitors to “Have no fear” and shows them a beautiful mouse illustration.

Screenshot

Twitter
Twitter uses a minimalistic yet attractive 404 error page.

Creative 404 Error Page

Livadaru
Homer on the blog of Cristian Livadaru.

Screenshot

ARTTHUG Studios
Homer again, this time at ARTTHUG Studios.

Screenshot

Cubeecraft
Error Cubee (which you can download and make yourself) at Cubeecraft.

Screenshot

d20 SRD
A brutal error at d20 SDR!

Screenshot

HomeStar Runner
Oops! You had it coming at HomeStar Runner.

Screenshot

Animation? Sure!

404 doesn’t only have to be about graphics. Below, you’ll find 404 examples with animation.

Mark Fennell
On his 404, Mark Fennell offers… a game!

Screenshot

Project Euh
Project Euh? Just click and go to a random website.

Screenshot

Total Insanity
Total Insanity shows us what insanity really means.

Screenshot

Herr Nilsson
This 404 error page fetches 404 Tweets and displays them in real time (sent by eelay on Twitter).

Creative 404 Error Page

Cricket Feet
The 404 error page on Cricket Feet talks to you!

Screenshot

Bluedaniel
Daniel Karcher’s film design studio.

Screenshot

Sources and Resources

About the author

Sylwia Besz is a project manager who loves blogging and photography. You can find her 404 error page here.

(al)

0
Your rating: None

Over the last months we have seen a strong trend towards more individual web designs. These designs use realistic motifs from everyday life, such as hand-drawn elements, script fonts, pins, paper clips, organic textures and scrapbooks. That’s not a big surprise as they serve the function that faceless, shiny, glassy 3D-buttons completely fail to deliver: individuality and personality. “Personal” designs appear more familiar and more friendly. Used properly, such elements can give a human touch to design and communicate the content in a truly distinctive manner.

However, apart from visual design elements, one can also get creative with the layout of the site – its structure and the way the information is presented and communicated. To give you some ideas of how exactly it can be done, we have been collecting examples of creative design layouts. Design was more important to us than a concrete implementation of some creative idea. We also weren’t interested in whether the code validates or not. Below are some examples we have found so far.

In the showcase below we present 40 creative out-of-the-box layouts that break the boring 2- and 3-columned, boxed layouts. We have collected pure CSS -designs, CSS+JavaScript -layouts as well as Flash -designs. Most designs presented below risk their site structure and content presentation with unusual approaches. That’s what makes them different. Hopefully you will find some creative ideas that you can develop further in your future projects.

We strongly encourage designers to break out of the usual boxed layout conventions, experiment with new approaches and risk crazy ideas. Show what you are capable of!

20 × Getting Creative With CSS

Pavel Buben
Pavel Buben uses a magazine cover-style layout for his one-page-site. Unfortunately, there are no internal pages — it would be interesting to seek how they would be designed. An interesting and unusual approach.

Showcase of Unusual Layouts - Pavel Buben

AIGA Los Angeles
AIGA Los Angeles uses boxes in a creative way. All design elements are placed according to the underlying grid, however they clearly break out of the boxes. This approach creates tension within the design and looks truly distinctive.

Showcase of Unusual Layouts - AIGA Los Angeles

SpaceCollective
For its gallery section SpaceCollective uses a five-column grid. Text and images are perfectly placed on the grid giving the layout a complete form and a sense of order. Notice various font sizes and text styling in the design — they introduce a profound visual hierarchy into the layout that works perfectly within the complex, unpredictable layout.

Showcase of Unusual Layouts - SpaceCollective

Jason Santa Maria
Jason Santa Maria has taken a truly different route with his site layout. Each article is laid out differently, with strong focus on typography and visual clarity. Below three of the layouts are presented. You may have a hard time finding similar layouts on the Web.

Showcase of Unusual Layouts - Oh, Snap @ Jason Santa Maria

Showcase of Unusual Layouts - Explain Yourself | Jason Santa Maria

Showcase of Unusual Layouts - Jason Santa Maria

Checkout: Point of Sale for Mac (POS)
At the first glance, Checkout looks like an ordinary Apple grid-layout. What makes the layout interesting is not only the position of its visual elements, but the fact that each section of the page has its individual (although consistent) design. Still, the layout is very scannable and intuitive.

 Point of Sale for Mac (POS)

NOFRKS.design
NOFRKS uses JavaScript to slide between various parts of the site. What we found more interesting was the way the content is presented. Most elements are placed within a context, giving the content a secondary meaning.

Showcase of Unusual Layouts - NOFRKS.design

SMS Parking
At the first glance SMSParking has no layout at all. The design appears to be one single illustration — all elements fit perfectly with each other, creating visual harmony and a sense of balance and closure.

 Welcome

Tri-Win
Sometimes a background image is enough to make the layout stand out. Although one can recognize a conventional layout structure here, the design looks distinctive and memorable. The background image of the site perfectly fits the company, which offers mailing services.

 Serving as the leader in Direct Mail and Mailing Services in the Dallas Texas metroplex area.

Matriz Communicacao
This Brazilian company delivers a perfect example of how design and content can seamlessly be integrated within a complete yet simple layout.

Showcase of Unusual Layouts - MATRIZ COMUNICAÇÃO

Mihmorandum
Mihmorandum uses a common 3-column-layout in an unusual way. Although the structure is quite usual, the design itself looks distinctive and resembles a pile of paper put inside a folder.

 The Small Business Web Design + Local SEO Blog

3rdM
3rdM uses icons to indicate various navigation options. This is not a type of layout you will find in many other web designs. And that’s what makes the layout creative.

Showcase of Unusual Layouts - 3rdM

Nile Inside
Many portfolios use vertical layout to showcase their works. Nile.ru displays its works in a chronological order as if it was a horizontal blog.

Showcase of Unusual Layouts - Nile Inside / years-2008

Rockatee
Rockatee uses asymmetry to position content blocks in an unusual yet appealing style. Notice that the left block perfectly aligns with the navigation option “Home” at the top of the page. The screenshot in the middle of the page spans exactly two navigation options and has the same width as the description block on the right side of the page.

The distortion in the layout is caused by the underlying organic texture. Although the design is perfectly aligned according to the grid, it seems to be chaotic at first glance. The tension between order and chaos creates tension in the layout and looks very appealing.

Showcase of Unusual Layouts - Rockatee Home

Get London Reading
An effective background image can help a layout stand out. The effect achieved here fits with the objective of the project — to encourage people to read more.

Showcase of Unusual Layouts - Get London Reading

BL:ND ( blind )
At the first glance, the layout looks underwhelming. What distinguishes it, though, are the choice of images sizes and a good use of white space. Notice how well negative space is used in the sidebar, where individual elements are clearly separated and properly aligned. The width of the images equals the width of the content blocks. Yes, the layout is boxy, but the wise use of whitespace makes it far from boring.

ND ( blind )

The portfolio of Hannibal
Usually, navigation menus are placed in the sidebar or at the top of the site. William F. Leffert does it differently. His non-linear layout literally breaks out of the boxy structure and offers something quite different. Sometimes it’s enough to simply experiment with the position of design elements to achieve striking design solutions.

 WFL

URLshrinker
Creative design solutions can be as simple as this one. An elegant and attractive layout by URLshrinker.

Showcase of Unusual Layouts - URLshrinker

15 × Getting Creative With CSS+JavaScript

ShopComposition
ShopComposition offers a sliding navigation at the top of the site. Users can choose the content they would like to read and select the width of the content blocks. This store has an integrated blog and some further projects (such as picture-a-day) to attract customer’s attention. JavaScript in use.

Showcase of Unusual Layouts - ShopComposition | Composition | Outfitting Designers Since 2003

forgetfoo
Forgetfoo uses an almost minimalistic, simple layout with a sidebar and a content area. Designers removed all necessary and unnecessary details focusing only on last blog entries. The design doesn’t contain any category navigation options. That’s unusual, but may be a little bit too much of the minimalism. Navigation through blog posts is realized with Javascript.

Showcase of Unusual Layouts - foo // it\\

Include
On Include one content block and the corresponding navigation block seem to “hang in the air”. Essentially the page has two columns; however. the layout seems to be quite original — maybe because of the cows placed on the background for some reason. The navigation on the right-hand side is realized with Javascript.

Showcase of Unusual Layouts - Include

Kobe
The navigation options at the top of the site are slightly animated yet creating an appropriate atmosphere. Once one of the sections is clicked, the main content area slides vertically — first the background image, then the content. If the content area also has some navigation options, they are slided vertically as well. In this situation it might be a slightly better design decision to use horizontal navigation instead to make it easier for visitors to distinguish between the primary and secondary navigation.

Kobe

tap tap tap
tap tap tap uses a bold and eye-catching layout to deliver the message to its visitors. The layout, although basically consisting of the sidebar and content area, is not boring at all and looks attractive. The left-hand side navigation and further effects are created using JavaScript.

Showcase of Unusual Layouts - tap tap tap ~ Groceries

youlove.us
The layout on youlove.us is definitely very vibrant. It uses a large vivid background-image and a the scroll-effect to enable users to quickly jump from one section of the site to another. Notice that the navigation area is repeated four times, in each of the categories. Sliding effects are also used for each of the categories. Instead of using 20 separate page, the layout combines them all on one single page. The result is compact and user-friendly.

Showcase of Unusual Layouts - youlove.us

Method: A Brand Experience Agency
This design agency uses a flexible JavaScript-based layout which updates its size depending on the browser window size. The content is “packed” in boxes is usual for such a grid-based design; however, the alignment of the boxes makes the design literally stand out.

 A Brand Experience Agency

Viget Labs
Viget Labs also uses a sliding navigation and a horizontal scroll-effect to make the user interaction more dynamic and hence more appealing. However, more importantly, the layout itself stands out: the layout is invisible and resembles interactive Flash-interfaces. CSS+JavaScript in use. Smashing says: five out of five stars.

Showcase of Unusual Layouts - Viget Labs

Lucuma
Lucuma also uses horizontal layout as well as a horizontal slider-navigation. The simple yet effective integration of background images, navigation, videos and content makes the layout unusual and distinctive.

Showcase of Unusual Layouts - Lucuma

Axel Peemoeller Design
On this page all design elements are draggable and some of them are clickable. Images seems to be thrown on you in the first moment, but in the end they all make sense. This is an unusual portfolio which is memorable and interesting to explore.

Showcase of Unusual Layouts - Axel Peemoeller Design

IDEO
IDEO presents everything on its main page. The navigation options are placed in the black boxes and somehow arranged among other content boxes. Once one of the black boxes is hovered, related content blocks are highlighted. That’s not something most users would expect from a layout.

Showcase of Unusual Layouts - IDEO

Bohdan Levishchenko
Bohdan Levishchenko uses the same approach as IDEO, but presents all navigation option at the top of the page. Single works are presented as images under the navigation and spread throughout the layout.

Showcase of Unusual Layouts - Bohdan Levishchenko

MelissaHie.com
Melissa Hie places all deign elements on a single large page. Visitors are basically driven from one site are to another using a scroll-effect.

Showcase of Unusual Layouts - www.MelissaHie.com

Hotel Oxford - Timisoara
A single-page-site with a very calm and comforting layout. All navigation options are available at the first glance. Once some of the options is clicked, the content block on the left is dynamically replaced. The logo of the Hotel Oxford always remains on its place.

Showcase of Unusual Layouts - Hotel Oxford - Timisoara

thruSITES / Portfolio
In this portfolio the illustrations of a designer’s works seem to somehow be loosely placed on an invisible rope. When one of the illustration is clicked, all other elements arrange themselves in such a way that the content which this illustration represents becomes dominant.

Showcase of Unusual Layouts - thruSITES / Portfolio

Erwin Bauer KEG
The portfolio site of Erwin Bauer takes a different approach to using a pannable user interface, but implementing in JavaScript rather than in Flash. The site allows users to click and drag to pan the canvas, or to use links positioned around the content to move around. The design is clean, and mimics a design document with regisration and crop marks, and visual cues about the directions the canvas will pan to when you navigate. [via]

Showcase of Unusual Layouts - Erwin Bauer KEG – Designbüro für Konzept & Gestaltung

5 × Getting Creative With Flash

The Secret Location
The Secret Location, a media agency based in Toronto, Canada exemplifies their work, by providing an immersive flash experience around a conjured up story leading a character to follow a mysterious path that leads to the secret location. Very interactive approach, a very unusual site layout. [via]

Showcase of Unusual Layouts - The Secret Location - 416 849 5298 - Interactive Media Production, Ideas, Experience Design, Tangible Media, Animation and Motion Graphics

Kamil Gottwald
In his layout Kamil Gottwald enables users to define the width of site columns manually. To navigate vertically users need to scroll horizontally. Hence no vertical scrollbar is necessary. Multiple site views are possible.

Showcase of Unusual Layouts - Kamil Gottwald - interactive developer

Grooveshark Lite
Grooveshark seems to imitate an iPod-interface and does it indeed very well. Although it may be not very creative, such layouts are hard to find on the Web.

Showcase of Unusual Layouts - Grooveshark Lite

Jeremy Levine Design
Flash offers many creative possibilities for an interactive navigation design. Jeremy Levine uses dynamic paper strips which seem to hang in the air.

Showcase of Unusual Layouts - Jeremy Levine Design

SeymourPowell
SeymourPowell has come up with an interesting idea to provide its visitors with some intuition of how good its work is. Click on the pile to find out.

Showcase of Unusual Layouts - Product Designers

Muku Studios
“Let Muku Do You”: this friendly buddy just wants to remain visible and hence he tries to find some place on the screen to keep an eye on site’s visitors. The layout of the site is simple yet memorable — well, Muku makes sure he’ll be remembered after the browser window is closed.

Showcase of Unusual Layouts - Muku Studios | Let Muku Do You

Related Resources

You may also be interested in the following articles we published earlier:

0
Your rating: None

In Web typography doesn’t have to support the overall design. It can dominate. It can be loud. It can be bold. And it can be everywhere on a web-site. In many situations it’s reasonable to give the typography the prominent position it deserves, leaving visual cues in the background or removing them at all. Doing that, you have to risk large font sizes surrounded by a generous amount of white space. What comes out of it? Elegant web sites with a unique form, style and sense of precision.

Few months ago we have already presented some sites with quite BIG typography. In this article we present further 55 examples of big, “loud” and yet elegant typography in web design; some listed designs are Flash-based, and in some cases designs are based not only upon typography, but also upon some visual elements.

Please take a look at the following posts as well:

The Showcase Of BIG Typography

Designfabrika
Görsel Işler’s porotfolio with a vibrant typography from Turkey. The design looks attractive and appealing.

Screenshot

Defining the Designer of 2015
AIGA uses only typography in its design and uses it effectively. An intiative to define the professional characteristics of the designers of 2015 so that together we can prepare designers for the skills and roles that will be expected for them.

Screenshot

Azzabee.com.au
Azzabee uses big typography in a rotating Flash-based promo. The navigation menu is perfectly integrated in the promo using PNG transparency. Very elegant and effective design solution.

Screenshot

Natl.tv
National Television is a project which uses bold, loud and sexy typography within a Flash-based design. Very playful, impressive and interesting to explore. Some content of the site may be hard to read, though.

Screenshot

Fl-2
Apparently, Fl-2, a design agency from Denver, Colorado, has a clear focus on typography. Both blog (first image) and the web-site (second image) offer literally HUGE typography. In the second example typography is integrated in the portfolio showcasing selected work produced by the agency.

Screenshot

Screenshot

Neubau Berlin
Letters, letters, letters. NeuBau is a German type-foundry which is why typography is used everywhere on the site. The typeface used is NB-Grotesk. The design isn’t intuitive at all, but that’s all about typography, right?

Screenshot

Screenshot

JLern Design
JLern Design presents the typography from a quite unusual perspective. Nice, compact and typography-heavy design solution. Flash in use.

Screenshot

Are you a virgin?
AIGA’s another concept based only on typography. The current section of the site is presented with a bold and colorful typography.

Screenshot

Hungry Man
Hungry man seems to be hungry for job as well. A really distinctive design with a little bit retro-look.

Screenshot

256tm.com
256TM is a font foundry by Thomas Huot-Marchand. Below the splash-page is presented. The navigation menu is, of course, based upon pure typography, too.

Screenshot

Elmwood
Elmwood isn’t really humble and uses typography to emphasize exactly this. Effective use of typography for promotional purposes. After all, it’s all about impressing people, right?

Screenshot

Erratic Wisdom
Not only is the typography quite bold, it is yellow too! Designed by Tom Fadial.

Screenshot

Moony.cz
Lukas Strnadel from Czech Republic places a brief description of the site in the middle of the page. Vibrant colors in use.

Screenshot

Switch Mediaworks
Switch Mediaworks is a pretty lively web-site with a pretty lively typography.

Screenshot

Shut.elmota.com

Screenshot

Mike Precious

Screenshot

Newsmap
Newsmap displays current stories and their popularity in a news map. More important messages are displayed with bold typography.

Screenshot

Fixie

Screenshot

Sean Klassen
Sean Klassen loves Helvetica and wears pants. Both his splash-page and his blog are heavy on typography.

Screenshot

Screenshot

Postmachina.com
Postmachina uses typography to deliver the message…

Screenshot

Chris Garrett Media
…so does Chris Garrett. Color transition in use…

Screenshot

Francesco Mugnai
…and so does Francesco Mugnai.

Screenshot

Freshe.st
Bill Morrison has a small web-site, but uses large and bold typography.

Screenshot

Urban Phes

Screenshot

Ourtype.be
Ourtype is a Belgian type foundry which showcases its typefaces at large scale. When you scroll the page, type seems to be a little bit shaky.

Screenshot

Kokokaka
Kokokaka sounds pretty strange, but this is how a Swedish design agency is called. Their web-site uses capital caps and very colorful links.

Screenshot

Organic Grid
Michael McDonald with dynamic Flash-based typographic design.

Screenshot

Colorcubic.com
Sometimes one can experiment with geometric shapes as well. Colorcubic uses illustrations which look like typography, but are indeed not letters.

Screenshot

Pier Madonia
Pier Madonia showcases his work using a large typography-based navigation menu. That’s an unusual approach which isn’t intuitive but still simple to understand and to use. The sub-menu is pretty large, too. And, of course, uses only typography.

Screenshot

Alex Cohaniuc
Alex Cohaniuc uses typography for his categories…

Screenshot

Ogilvy Durham
…Ogilvy Durham for his logo…

Screenshot

I Love Typography
…John Boardley for the title of his site.

Screenshot

Brunet Garcia

Screenshot

Studio Number One

Screenshot

Virtual Memories Inc.
Apparently, the creators of this site really love typography. Because they have almost nothing else.

Screenshot

300million.com
On 300million letters fly, jump and float. Created with Flash.

Screenshot

Twistori.com
Twistori is an ongoing social experiment which analyzes messages sent to Twitter and presents them in a scrolling window. With large and vibrant typography.

Screenshot

Daniel Hagglund

Screenshot

Vision 7
On Vision 7 the typography is literally squeezed insind a tiny and short layout. The letters are nevertheless huge.

Screenshot

Wind Jammer
Not really beautiful, but big and large. This company from London seems to have its own style when it comes to choice of letters.

Screenshot

Mattia Viviani

Screenshot

Paco Raphael

Screenshot

ixwa.com
Sometimes typography can be large yet remain subtle and support the content of the site…

Screenshot

Visie.com.br

Screenshot

Futonmedia

Screenshot

Babasonicos.com
Babasonicos uses bold and pretty colorful typography in the navigation. This may not be the perfect solution from the usability-perspective, but the site perfectly achieves its primary goal, namely to appear lively and colorful — just the way the band is in its pretty strange videos.

Screenshot

Topos Graphics
Topos Graphics: a start page with “mirrored” typography.

Screenshot

Popart Blog
Typography for headlines gone bold. The headline literally stands out.

Screenshot

Nu Visual Language

Screenshot

Urbanchip

Screenshot

Mike Poss

Screenshot

Marie Julien

Screenshot

Berlin.unlike.net
Bold typography supports the design. It doesn’t stand out but it is visible.

Screenshot

0
Your rating: None