Design Focus

Design Focus: You Are Here

Navigation is an essential element of websites, and this week’s featured designs have the responsive, clever kind that indicate which part of the page you’re currently at. Check out how these responsive navigation markers were integrated below.

Designs of the Week

Want your site to be as good-looking and inspirational as these? Start by choosing a well-designed theme from ThemeForest.

Jorge Rigabert's website

Jorge Rigabert

The bright hues repeat in different sets of categories across the page, including the color scheme of each section, which in turn changes the fixed navigation to the left as you scroll along. Everything looks bright, crisp, and snappy with the mix of ribbons, colors, and illustrations.

Boulder Digital Works Class 3 website

Boulder Digital Works Class 3

The row of people in the footer is actually the navigation itself, which is clever. Then each person in that row actually designed the slide he/she is on. It’s a little chaotic at times and sometimes the transition from black and white to color on the navigation is drowned out but it’s you end up on a screen that’s just as clear as where you first started.

Authentic Jobs charity: water Campaign 2011 website

Authentic Jobs charity: water Campaign 2011

Instead of literal navigation this page uses a symbolic indicator of the projected amount of funds raised for the charity. The parallax design combines illustrations, photos, and abstract backgrounds to distinguish one slide from the next, all while a pipe runs through the “underground” background.

Collaborative Fund website

Collaborative Fund

There’s a running hexagon shape theme in this design, from the logo to the header background to the hover indicators. The marker on the right side is wonderfully done, especially the cut-out space for the label, much like a an automotive dial. I wish the menu items used anchor links instead of pure JavaScript though.

Social Media Weekly

Ready to go out and design your next website? Try building with the Catalyst Framework.

CSSThe open/closed principle applied to CSS
“With so much abstracted and shared CSS, simple changes to a base object can have massive ramifications across whole projects; how do you deal with that?”

HTML5, AccessibilityHTML5 Accessibility Chops: When to use an ARIA role
“There has been discussion of late on whether authors should be allowed to include an ARIA role value on an HTML element that matches the default implicit ARIA role as defined in HTML5.”

User ExperienceEffective Presentation of a Website’s Navigation
“Browsing – moving through a multi-faceted content structure – is made easier when information architects present users with an intuitive navigation hierarchy. This article discusses two techniques to that end.”

ProductivityDesk exercises: 3 easy routines for designers
“Sit up straight, and pay attention! Designer boot camp starts now, and we’re here to put paid to poor posture, and ensure your remain in tip top condition at your desk.”

  1. By uxzeal posted on June 29, 2012 at 7:01 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Good listings

  2. TrackbackDesign Focus: Playing with Perspective | DevloungeDesign Focus: Black & White | Devlounge