All posts tagged “Inspirations”

21st Century Schizoid (Wo)man: Tatiana Kartomten: The illustrator and tattoo artist talks inspirations, drugs and being a woman against authority

21st Century Schizoid (Wo)man: Tatiana Kartomten

Californian illustrator Tatiana Kartomten’s drawings are enchanting, mystical things, with enough details to keep the viewer endlessly captivated. The London-based artist’s intricate illustrations also have a spiritual, psychedelic vibe reminiscent……

Continue Reading…


Cool Hunting

Qinghe Cao: Insights on the Chinese fashion designer’s eclectic inspirations like Japanese fantasy tales and a look at her latest collection

Qinghe Cao


Qinghe Cao is a talented young designer from Beijing’s prestigious China Central Academy of Fine Arts (CAFA), with a very unique and imaginative style. In 2011 she launched her first…

Continue Reading…


Cool Hunting

Jan Plecháč and Henry Wielgus: The prolific Czech design duo on influences, inspirations and combining function with form

Jan Plecháč and Henry Wielgus


Having met while studying at The Academy of Art, Architecture and Design in Prague several years ago, Jan Plecháč and Henry Wielgus now work together on various kinds of projects including furniture, lighting, product and interior design….

Continue Reading…


Cool Hunting

Designing A Winning Navigation Menu: Ideas and Inspirations

The navigation menu on a website is like a road sign on a street or a level directory in a shopping mall. You cannot reach your destination without first knowing where you are. Like in real life, navigation in web design is very important and plays a major role in a website’s usability as well as in user experience.

Nowadays you can see plenty of different types of navigation menus with interesting, creative and unusual designs. But how about effective navigation in a website, what would it look like; how should it look like?

Today I would like to share my observations and knowledge about the importance of navigation in web design. I will reveal a few simple tips that you can use to improve your website navigation and usability. There will also be some examples of effective navigation menus to give you some idea of how to plan your next design.

Information Architecture

Navigation planning should start with information architecture. It is vital to sit down and brainstorm about a website’s information architecture. You have to figure out what kind of features the website offers, what is most important and what could be placed in lower levels in the information hierarchy.

Information architecture includes features, user needs, sitemap, testing and wireframes. You can read more about information architecture in article by Cameron Chapman in Information Architecture 101: Techniques and Best Practices.

Information Architecture 101: Techniques and Best Practices

Using user-enabled technologies

Avoid using Flash, JavaScript, jQuery or anything else that risk inhibiting access to your website navigation in building your navigation bar, or at least make sure they are able to degrade gracefully.

For more references on graceful degradation of javascript, check out this post on 10 Useful Fallback Methods for CSS and Javascript.

Use simple, User-friendly terms

It is better to use simple, obvious and terms that are easy to figure out than to keep to industry-only terms for your navigation menu. Any link that takes users more than a second or two to figure out is probably unsuitable for use.

If a user needs to click on a link to figure out what the link leads to then this will contribute to a bad user experience for your visitors.

Examples

Terms in the navigation menu of Larissa Ness’ website are easy to understand and common enough. Users won’t find it confusing because they already have experience with menus like this.

http://larissaness.com/

Here’s another good example of a clean and clear website navigation menu with common terms used, at csupport.

cSupport

Creative agency Eighty8Four uses the term "showroom" which can be confusing for visitors. This term might mean portfolio or work but it is not clear and visitors have no choice but to click in to check it out.

Eighty8Four

Standardize the Navigation design

Use the same navigation model in all your pages. It is very important because without a consistent design, a user may actually think he is in another website. Make sure that you use the same navigation model so that users can easily go about your website without being lost.

Bluegg, shown below, uses a simple and clean navigation design which remains the same in all subpages. The only difference is the color indicator, which shows the page the visitor is currently at.

Bluegg

Indicate where you are

It is crucial to let the user know where he is at all times. You can do this by changing the link’s background, color of the page name or turn the text bold in the navigation menu to make it different from others.

Austin Eastciders uses a different color and background to indicate the page the user is on. This indicator can also work as a subtle design change, for example by using a different navigation background which creates the feeling that other menu items are in depth.

Austin Eastciders

Media Surgery uses a darker color as an indicator for an opened subpage. Simple but effective.

Media Surgery

Use web conventions

It is all about easy-to-use and intuitive website navigation. Web conventions make it a lot easier for designers to work around their designs. Most users would click on the website logo to get back to the homepage, so design your logo to do that.

If you don’t, you are making them spend time to learn something new or in some cases inconvenience them by not providing what they expect to be commonly accepted navigational norms.

You can learn more about web conventions here:

Inject Design places the logo at the top left corner which fits one of the most used web conventions today.

Inject Design

Adams Creation uses one of the most common web conventions – logo is placed on the left top corner of the website and links to the homepage.

Adams Creation

Test it: Involve a 3rd party

Always test your navigation design with any person who has used Internet before. You might want to bring in people who were not related to the design process to test it. Observe their preferences when they navigate through your site and analyze the time it took for them to find the pages that they were lookign for.

For better accuracy, involve more people, collect the data, analyze and summarize it for a better fit. Do an after-test survey if it is necessary. You may get some unexpected ideas and input that would otherwise go undetected without this test run.

Provide context

To be consistent with your content and navigation provide some context for website users to find things they need quickly. You can place small icons related to the content you link to or short descriptions to give an overview of what the page is about.

My Own Bike uses simple icons to give users more information about what they can find in certain subpage.

My Own Bike

Sarah Parmenter uses short and nice captions under main navigation to provide some information about the subpages the main navigation is linking to.

You Know Who

SEO purposes

Google likes consistent navigation. It is good to have consistent navigation not only for users to understand and get the idea of how to navigate through your website but also for search engines to index your website.

Search engine robots will crawl through your website in order to index your website and put the links in the search engine results page. If you want to be visible, pay attention to good navigation design and get more traffic.

Free navigation scripts (CSS, and jQuery)

Here is a short list of the latest navigation menus you might find useful for your projects. These scripts will make your product’s user expererience even better by adding some nice features and making it pleasure to use.

XML-driven Vertical News Scroller Script using HTML and jQuery: vScroller

XML-driven Vertical News Scroller Script using HTML and jQuery: vScroller

Flexible Nav jQuery library

Flexible Nav jQuery library

Filtrify

Filtrify

Page Scroller

Page Scroller

Timeline Portfolio

Timeline Portfolio

HorizontalNav

HorizontalNav

CSS3 Minimalistic Navigation Menu

CSS3 Minimalistic Navigation Menu

Circle Navigation Effect with CSS3

Circle Navigation Effect with CSS3

Grid Navigation Effects with jQuery

Grid Navigation Effects with jQuery

Ascensor

Ascensor

HTML5/CSS3 Gray Navigation Menu

HTML5/CSS3 Gray Navigation Menu

Create An Elegant CSS3 Navigation Menu

Create An Elegant CSS3 Navigation Menu

Showcase of beautiful horizontal navigation

And last but not least some inspiring horizontal navigation menus. Check these amazing websites and their navigation menu solutions to find new ideas for your projects.

Ch3mical

Ch3mical

Bloom Search Marketing Inc.

Bloom Search Marketing Inc.

Alex Perez

Alex Perez

Libor Zezulka

Libor Zezulka

Hauska!

Hauska!

Golden Isles

Golden Isles

Neil Carpenter

Neil Carpenter

Marc Thomas

Marc Thomas

3D Polystyren

3D Polystyren

Liechtenecker

Liechtenecker

Adventure World

Adventure World

Arbutus Photography

Arbutus Photography

OMDRL

OMDRL

4 Pines Beer

4 Pines Beer

Hunters Wines

Hunters Wines

Hopefully you will find this article useful and informative. If you have any thoughts or if you disagree, please share your opinion in the comments section.


hongkiat.com

Top 10 Inspirations from TED

What can be better that a dozen of highly inspiring videos on Monday. Check out the blog post and “get you muse on board” with TED Talks.
Template Monster Blog

Weekly Design Inspirations #17

Our #17 edition of weekly design inspirations. In weekly inspiration post, we showcase the very best design from the Internet.

  • Expand Your Horizon Expand Your Horizon
  • Red Deer Stag Red Deer Stag
  • Tortuga Tortuga
  • The Winter Tree The Winter Tree
  • Forest Guardian Forest Guardian
  • … and There was Fire in its Eyes … and There was Fire in its Eyes
  • Bloody Crow Bloody Crow
  • Fawn Fawn
  • Floating in the Rhythm Floating in the Rhythm
  • I Love Brompton Bikes I Love Brompton Bikes
  • Leave It All Behind Leave It All Behind
  • Deep in the Woods Deep in the Woods
  • Australia Australia
  • Meet the Beetles Meet the Beetles
  • If I Roar (The King Lion) If I Roar (The King Lion)

favbulous

Weekly Design Inspirations #16

Our #16 edition of weekly design inspirations. In weekly inspiration post, we showcase the very best design from the Internet.

  • Daenerys Daenerys
  • Infinite Tea Infinite Tea
  • I've seen strange things in the City Windows I’ve seen strange things in the City Windows
  • Go West Cycling Go West Cycling
  • My Right My Fight My Right My Fight
  • Headdress Headdress
  • Bad Memories Bad Memories
  • GoGo Surf Time GoGo Surf Time
  • Steam Up Steam Up
  • Rainy Days Rainy Days
  • I Think Better When I'm Alone I Think Better When I’m Alone
  • Angel of Colors Angel of Colors
  • Mad Man Mad Man
  • Tapisserie Tapisserie
  • Iron Man Iron Man

favbulous

Gorgeous iPhone App UI UX Inspirations

Here we have another round of beautiful iPhone UI and UX design handpicked from dribbble – a place where designers share their newest design and work in process. To be able to stand tall among other apps, apart from the functionality, the interface is playing an important role as well. iPhone App Designer has to go beyond what is already there and try something original and innovative to enhance the User interface and user experience of an App. So, get ready to be inspired by these beautiful app design.

  • Freakin Torn Paper Freakin Torn Paper
  • iPhone Flash Selector iPhone Flash Selector
  • Mobile Chat Select Mobile Chat Select
  • Map UI/UX Map UI/UX
  • PrivateCam PrivateCam
  • iPhone App Interface iPhone App Interface
  • Clyp iPhone Sidebar Clyp iPhone Sidebar
  • Profile Tasks View Profile Tasks View
  • Yearly Yearly
  • Assessment Step Assessment Step
  • Mobile App UI Mobile App UI
  • Mobile Coach Mobile Coach
  • Bunny Bunny
  • Viewing Screen Viewing Screen
  • Food Guide Update Food Guide Update
  • Spotify for iPhone Spotify for iPhone
  • iPhone App Preview iPhone App Preview
  • Weather App Weather App
  • Count down Count down
  • Music Player Music Player
  • iPhone idea with Video Process iPhone idea with Video Process
  • Dribbble Dribbble
  • UI Design Chat Forum UI Design Chat Forum
  • Opened Menu Opened Menu

favbulous

Beautiful Conceptual Music Player UI Inspirations

We have collected 35 beautifully designed conceptual media players from different designers. Everyone should have used a media player before and should be pretty familiar with the standard layout – play, pause, previous, next buttons and album art and some other details. In this post, with all these 35 media player design, it shows how designers designs it differently from the rest by shuffling the essential music player elements and make a beautiful layout.

  • Music Player Music Player
  • Music Player Music Player
  • Mini Player Mini Player
  • Compact Music Player Compact Music Player
  • Micro Music Player Micro Music Player
  • Player Player
  • DJ Template WP Music Player DJ Template WP Music Player
  • Glass Music Player Glass Music Player
  • Mini Music Player Mini Music Player
  • Dark UI Music Player Dark UI Music Player
  • Retro Music Player Retro Music Player
  • Player Overlay Player Overlay
  • Half Moon Music Player Half Moon Music Player
  • Mini Music Player Mini Music Player
  • Grey Player Grey Player
  • Music Player Music Player
  • Mini Music Player Mini Music Player
  • Music Player Music Player
  • Music Player Music Player
  • Little Music Player Little Music Player
  • Music Player UI Music Player UI
  • Music Player II Music Player II
  • Mini Player Mini Player
  • Music Widget Music Widget
  • Sexy Mini Music Player Sexy Mini Music Player
  • Music Player Concept Music Player Concept
  • Mini Music Player Mini Music Player
  • Compact Music Player Compact Music Player
  • Music Player UI Music Player UI
  • Music PLayer Music PLayer
  • MenuBar Genius Controller MenuBar Genius Controller
  • Music Music
  • Album Flip Album Flip
  • Music Player Music Player
  • Blog Mini Music Player Blog Mini Music Player

favbulous

Weekly Design Inspirations #15

Our #15 edition of weekly design inspirations. In weekly inspiration post, we showcase the very best design from the Internet.

  • In the memory of Buzz Harley In the memory of Buzz Harley
  • Alone in the forest Alone in the forest
  • Alone as a wolf Alone as a wolf
  • Sound of water Sound of water
  • Rain Rain
  • Onward Onward
  • Extinction Extinction
  • Bubble Gum Bubble Gum
  • Antaeus Antaeus
  • Peachy Peachy
  • The Plague The Plague
  • Going where the wind blows Going where the wind blows
  • Reindeer of the Silver Wood Reindeer of the Silver Wood
  • Paint Your Love Song Paint Your Love Song
  • Out of sight Out of sight

favbulous