DesignM.agUI Design http://designm.ag Articles and Resources for Web Designers Mon, 01 Sep 2014 12:09:25 +0000 en-US hourly 1 http://wordpress.org/?v=3.9.2 Tips for Crafting Simple and Usable Website Navigation Menus http://designm.ag/ui-design/crafting-usable-website-navigation-menus/ http://designm.ag/ui-design/crafting-usable-website-navigation-menus/#comments Mon, 24 Feb 2014 04:22:23 +0000 http://designm.ag/?p=83124

Advertise here with BSA


Most designers would agree that it's crucial to understand the purpose of navigation. Understanding what a typical visitor is looking for can influence the design itself. But you also need to construct layouts in an easy-to-use fashion that serves a greater purpose.

website wireframe sketch user interface vimeo video page


Advertise here with BSA

]]>

Advertise here with BSA


Most designers would agree that it’s crucial to understand the purpose of navigation. Understanding what a typical visitor is looking for can influence the design itself. But you also need to construct layouts in an easy-to-use fashion that serves a greater purpose.

website wireframe sketch user interface vimeo video page

In this article I’d like to share a few design tips for building usable website navigation. There are many differing styles like vertical/horizontal lists, dropdowns, sliding menus, and other related features. This guide covers more general ideas which you should be able to implement regardless of design style. Try to keep these ideas in mind whenever you’re creating a new website.

Organizing Links

Before sketching or designing anything you should try making a complete list of the website’s pages. Think about tiered links and which menu items should be seen first. There are lots of sub-navigation designs like collapsible menus, breadcrumbs, accordions, etc. Make your design style fit the proper context.

Some websites may only need 4-8 top-tier links because they only have 4-8 pages. Other sites might use 200+ different pages linked under parents and grandparents. It isn’t uncommon to find websites using sub-sub-links with expanded nav menus.

corporate risk watch website navigation layout

Make this step the planning ground for your initial design concept. How would your idea come off to any typical visitor? Is it easy to understand from a distance? Once you have a detailed list of links in the proper order you can try out different styles and see what fits best.

Distinguishing Importance

Ensure that your primary menu is within close proximity to the top of the page. Any other menus should be scattered throughout as needed. But navigation is almost the central piece to any website – without links people can’t browse!

carbonica sidebar menu links navigation

When finding a menu location you want to stay as consistent as possible. Make sure the primary navigation appears roughly in the same spot on every page. If a visitor already knows where to look then you’ve made their job a lot easier. It’s worth designing a unique color scheme or texture for the primary navigation so that it stands out from other links on the page.

Show Navigation Paths

When using sub-navigation it’s often a good idea to keep the parent link in a permanently selected CSS style. This way users know which navigation item is currently being viewed. This might not be necessary if the menu is very small. But this feature is beneficial to users in most circumstances.

If the project needs a lot of different pages then you might find value highlighting the current navigation link going down multiple sub-menus. You might also try breadcrumbs which may be coupled with the nav, or separately placed elsewhere on the page.

wufoo tour website breadcrumbs navigation ui

These are perfect to display a connection between parent and sibling pages. With some websites and eCommerce shops like Newegg visitors are allowed to search in different categories of merchandise. This can lead to a long breadcrumb trail of related links.

newegg breadcrumb list navigation menu design ui

But you may not need to use breadcrumbs or selected navigation items. The most important thing to remember is to somehow show the path and let visitors know how they got onto to the current page. Not always pertinent but good to keep in mind nonetheless.

Snazzy Designs

Don’t be afraid of trying new ideas. Creative page elements, including navigation, keep people interested and show off your true skill level. This is why it’s best to list your pages first and then design the menu to fit your exact page structure.

mouse to minx blue website layout inspiration

The Mouse to Minx website uses a highlighted hover effect which makes the text almost look handwritten. It’s cute and very simple to pull off, yet to anyone who doesn’t build websites it may come across as flashy or complicated(in a good way). You don’t see this highlighter effect on many websites and this gives more unique definition to the overall layout.

Those tiny little effects go a long way towards building respect from visitors. It doesn’t seem like much, but the challenge of rising from good to great is in the details. Study traditional navigation first and try throwing your ideas into the mix. Somewhere in the middle of practicality and creativity is a harmonious solution.

anet design homepage website navigation layout

Handling Mobile Users

One of the best pre-planning decisions you can make is building a fully-responsive website. This means constructing a layout which is fluid to expand or contract based on the browser’s width. Responsive navigation UI trends are always changing and you can learn a lot from examples.

If your responsive website uses a top heading bar you might toggle the navigation with a hamburger icon. But this link could also just read “Menu” and visitors will have the same reaction. Mobile phones are smaller than a monitor so you need to convey ideas quickly without much extra detail. Your extra design features should appear in the wider screen displays.

you know who design navigation menu ui

I like the example from You Know Who although it’s not perfect for every website. In fact it’s a very distinct example creating the iOS-styled tabbar within HTML/CSS. Thinking of your responsive website as if it were a mobile application might help you solve complicated interface problems.

Live Examples

To wrap up the article I’ve put together a gallery of website nav menus. If you need some cool ideas for new website layouts this article should get you started on the right track. Also if you know any other brilliant menu designs feel free to share links in the post discussion area.

College Park Church

college park church your design navigation dropdown

4 Pines Beer

four pines beer website navigation textured

CSS Tricks

css tricks navigation menu horizontal tabs

Bonarium

bonarium dropdown shop navigation menu design

Power to the Poster

power to the poster website navigation menu

Waterworks

water works website dark navigation ui

Formfett

formfett dark navigation menu design

Martique

martique breadcrumbs navigation ui design inspiration

Rockatee

rockatee design homepage navigation ui inspiration

Oliver Russell

oliver russell personal website portfolio navigation

MacAllan Ridge

macallan ridge website navigation ui design

Claire Baxter

claire baxter website navigation menu inspiring

Designsensory

design sensory website layout inspiration navigation

Starbucks

green starbucks navigation menu dropdown layout

le coq sportif

le coq sportif navigation menu dropdown

Philadelphia Orchestra

main website navigation philadelphia orchestra

One Mighty Roar

one mighty roar navigation menu fixed placement

Vertrauen erleben

german red white navigation menu design

Unyk TV

unyk tv television digital channel station website navigation

Luhse Tea

luhse tea website dark blue icons navigation setup


Advertise here with BSA

]]>
http://designm.ag/ui-design/crafting-usable-website-navigation-menus/feed/ 0
Introducing the FlatPix UI Kit http://designm.ag/resources/introducing-the-flatpix-ui-kit/ http://designm.ag/resources/introducing-the-flatpix-ui-kit/#comments Sun, 24 Nov 2013 04:16:06 +0000 http://designm.ag/?p=80825

Advertise here with BSA


The 'flat' design style is one we hear about everywhere now, and I believe it's here to stay. I don't see flat design as something trendy or flavor-of-the-month - rather it's what design should be; focussing on how things work rather than how things look, keeping things clean and minimalist. So, we decided to create our very own UI kit, it's called FlatPix and it is available to purchase exclusively through the DesignM.ag network. FlatPix UI Kit

Advertise here with BSA

]]>

Advertise here with BSA


The ‘flat‘ design style is one we hear about everywhere now, and I believe it’s here to stay. I don’t see flat design as something trendy or flavor-of-the-month – rather it’s what design should be; focussing on how things work rather than how things look, keeping things clean and minimalist.

So, we decided to create our very own UI kit, it’s called FlatPix and it is available to purchase exclusively through the DesignM.ag network.

FlatPix UI Kit

The FlatPix UI Kit contains a lot of commonly used user interface elements. Things that we, as designers, need for every single web project we work on. The download includes a normal-res version as well as a full retina version, all in PSD format of course. Most of the elements in this kit come in 4 color schemes (red, green, blue and grey) with various states (normal, hover, active, focus):

  • Large and small buttons
  • Various icons
  • Progress bars
  • Checkboxes and radio buttons
  • Star and heart ratings
  • Video player
  • Pagination
  • Breadcrumbs
  • Input fields
  • Search field & autocomplete
  • Upload file form
  • Toggle switches
  • Login / registration boxes
  • Navigation bar with dropdown
  • Pie chart with legend
  • Various tooltips

FlatPix UI Kit

You can purchase the FlatPix UI Kit right here for $7. This is a special introductory price and it’s valid only for 2 weeks. After the introductory period the price will go up to $9 – so act now before the price goes up! We hope you like this UI kit, of course feel free to let us know what you think in the comments below.


Advertise here with BSA

]]>
http://designm.ag/resources/introducing-the-flatpix-ui-kit/feed/ 0
Web Design Concepts to Entice User Interaction http://designm.ag/ui-design/web-design-concepts-enticing-ui/ http://designm.ag/ui-design/web-design-concepts-enticing-ui/#comments Fri, 27 Sep 2013 14:01:37 +0000 http://designm.ag/?p=78686

Advertise here with BSA


Landing pages and social websites thrive on user interaction. It is the grinding mechanism which keeps people visiting your webpage over and over again. How you design an interface can say a lot about how people should maneuver through menus, links, buttons, and other similar page elements. Each solution is different and there certainly isn't any prominent correct answer.

In this article I want to go over some more popular web design concepts for creating alluring interfaces. You want visitors to be swept away by the design and practically fall in love with your website. A beautiful design coupled with a beneficial experience is what can help your web application or website layout stand apart from the rest.

Relating to the Interface

The key to any enticing interface is to make the user wants to interact with your website. Obviously the primary reason should be their interest in your product or service... you want people registering an account because they actually want to. But it helps to give them a little incentive by designing catchy interfaces which practically sell themselves.

pinterest create a new board form ui design screenshot


Advertise here with BSA

]]>

Advertise here with BSA


Landing pages and social websites thrive on user interaction. It is the grinding mechanism which keeps people visiting your webpage over and over again. How you design an interface can say a lot about how people should maneuver through menus, links, buttons, and other similar page elements. Each solution is different and there certainly isn’t any prominent correct answer.

In this article I want to go over some more popular web design concepts for creating alluring interfaces. You want visitors to be swept away by the design and practically fall in love with your website. A beautiful design coupled with a beneficial experience is what can help your web application or website layout stand apart from the rest.

Relating to the Interface

The key to any enticing interface is to make the user wants to interact with your website. Obviously the primary reason should be their interest in your product or service… you want people registering an account because they actually want to. But it helps to give them a little incentive by designing catchy interfaces which practically sell themselves.

pinterest create a new board form ui design screenshot

Consider the newer photo sharing startup Pinterest as one example. All of their forms use big readable typography with CSS3 gradients on the buttons and input fields. Also the glowing borders are a nice touch to inform the user which field is currently highlighted. Even more importantly is that all the page elements blend so nicely into the website color scheme. Interacting with forms on Pinterest feels completely natural – as it should be on any website.

tumblr website buttons input fields new post screenshot

Tumblr is another case example where the buttons and input fields have been carefully crafted to blend nicely with the layout. The uniform posting box looks very similar for any type of content including photos, videos, or even plain text. The more you can blend forms into your website, the more relatable they will appear to your visitors.

By creating this natural connection it evokes a sense of safety and commitment. People want to fill out your forms and interact with the page because the elements don’t appear like they’ve all been thrown together at the last minute. Put in some TLC to your website’s form design and I promise it will pay off in the long run.

Design Elements that Pop

Similar to relatable interfaces we also want a design which can practically jump off the page. To phrase this another way, visitors should be able to determine which page elements are interactive and which ones aren’t. You can accomplish this task through all sorts of different methods like border styles and box shadows.

rightsignature homepage layout css3 design screenshot

The homepage design for RightSignature is one good example because of their advancing design trends using CSS3. The top navigation and right sidebar areas remain fixed on the page, as they also include the most interactive features. The visitor can scroll through all of this information while simultaneously registering for a new account. Also take note the registration form only requires two simple fields for the username and e-mail address. A lower barrier-to-entry will get a lot more signups because it takes less time and less hassle from the user’s perspective.

dribbble textured popular shots layout design

I am also a big fan of Dribbble’s layout because of the many design changes which have taken place over the years. Dribbble has always been using a very similar layout style, except the colors and textures have been tweaked ever-so-slightly. You could even incorporate the idea of A/B testing into your website to determine which colors or UI designs would be most appealing to your audience.

Readable Content

It might go without saying, but readability is a huge factor to user interaction. People keep using content-based websites and social networks because of the ability to skim content and quickly recognize its purpose. Consider a homepage dashboard with all the latest news from a user’s feed. How can they quickly determine between a website blog post, a user status update, or a new photo album?

medium blogging posts users homepage layout screenshot

The new micro-blogging platform Medium has grown very popular in a short period of time, especially among tech-lovers and startup enthusiasts. Each blog is made to conform into Medium’s typical layout design which utilizes big typography – nice and easy to read even at a distance from the monitor. This not only makes people want to write more articles, but it also gets readers more willing to stick around and read through a post if the content is easily legible.

etsy products list web design interface layout

A somewhat related yet different circumstance may be found on Etsy. People come on here looking for custom hand-made trinkets or neat little gifts for friends. The product gallery is designed in a way that you can quickly check out what is for sale, how much it costs, who the seller is, and other types of related items for sale. It is one of my favorite growing marketplaces because the design is so eccentric that it immediately catches your attention. Also the products are generally unique and often not sold anywhere else, so it’s a marketplace of rare items with an extremely intuitive process for buyers and sellers.

Points and Profile Badges

Not all websites have the option of creating profile pages for each user. This is typically common amongst social networks and communities which thrive on user-driven content. Applying unique rewards such as badges or points will get people much more interested in using your product. Stack Overflow is one such example where you can earn points by linking to threads, answering questions, or even asking questions of your own.

github user profile kyle bragger screenshot stats repositories

Another great example can be found on the Github profile pages. Here you can see every repository created by a certain user, along with their work done in other people’s repositories. You can also find stats like their follower count and the total number of starred repos. Point systems work best if you build them on top of the existing website functionality. It is a motivator which gets people pushing to contribute more content and grow their profile on your website.

Uniform Layouts

One final piece of advice for improving user interaction is to get all your pages designed in the same fashion. Uniformity is very important as I outlined in the first section of this article. As people use your website more frequently they become accustomed to the interface. A uniform design helps people grow to expect certain interfaces to behave in a certain way, and people will gradually learn all the little tricks of how your website works.

reddit social news community simple design homepage layout

Possibly one of the largest case study examples would be on Reddit. This social news community allows people to register an account and submit, vote, or comment on news stories. It has scaled tremendously over just a few years as subreddits have grown proportional to the userbase. As more people get comfortable with how the system works, it becomes easier for them to engage deeper into the website and contribute even more content. Think about this concept for your own website and how you might implement uniform design techniques to improve the overall user experience.

Closing

These are just some examples of design trends you may try in your layouts. I have played with a number of fantastic web applications, and the best ones have always been designed with the user in mind. Focus on the end user and consider if your webpage is optimized for the easiest frontend performance. Additionally if you have similar ideas or suggestions on usable interfaces feel free to share with us in the post discussion thread.


Advertise here with BSA

]]>
http://designm.ag/ui-design/web-design-concepts-enticing-ui/feed/ 0