Navigation, Control Panels and Interfaces

Published in Web Development on Wednesday, November 10th, 2004

Some examples of unique or effective navigation schemes and interfaces are presented. Add your favorites to the list.

Nodes...

Recent projects have proven challenging in the area of interface design. While poking around the web there are a few sites that have stuck in my head for one reason or another, and these are offered below.

For me these sites are some nodes of inspiration, and some of these concepts will likely find their way into future work...

I'm sure there are many more examples out there. Share your examples of unique or effective interfaces in the comments.

Digital Web

Here's a site that has done a great job at presenting their information to the user.

While not really groundbreaking in the method used, i.e. tabs and supplementary sidebar navigation, for me it's the design that really pulls it together. And here come the words that have been repeating in my head lately - "Control Panel".

Look at the upper left corner, and even at 800x600 resolution everything you need is right there, clean, uncluttered and simple.

Dunstan

Dunstan's blog keeps everything nice and tidy too, however he has added some extras in there. By his own admission this area is a bit more 'cryptic' than prior to his redesign, but it likely works just fine for his audience.

www.pixelplain.com

By way of Css Beauty comes Pixel Plain, who have done something similar to what Dunstan used to have. It's an interesting twist on the horizontal equivalent which can be seen at Macromedia.

It works well with or without javascript, and is quite easy to understand. There's also plenty of room for a dedicated search box in the control panel as well.

Mozilla

The lizard is still there at Mozilla (some consistency in branding), and the new site does the 'control panel' very well. Search, tabs and home are always there, and they use a sidebar where needed. The only thing lacking is a breadcrumb trail.

Lastly

The Blogger navbar and it's mirror Wordpress bar (which seems to have disappeared). Wrapping up some cool functionality into a nice little panel.

Comments and Feedback

Perfectly timed entry, Mike - I've been struggling with a new interface design this week for a work project; well, I say struggling, what I've actually been doing is toggling different layers on and off: "Tabs? No tabs! Tabs? No tabs!"

From your examples (more detailed title text would be great, btw - I've seen that Airbag article far too many times now) it looks like we're still not at the stage where tab-interfaces can be written off as hackneyed.

more detailed title text would be great, btw

Yeah, sorry, you caught me being lazy ;-) Our new admin proggy for the CMS is almost finished being re-written, with the blog script weaved into it. Soon I won't have an excuse for lazy posting...

Speaking of tabs, Slick UI over at A Whole Lotta Nothing has a nice screenshot of the Typepad UI.

Mike, great article. Another one in my mind is Studiowhiz's recent redesign. All CSS, very nicely done.

Ha, that is a cool design! Thanks for stopping by, Josh!

Mike, you are definitely the king of response time. I have never emailed you without getting a response within 2 minutes. Nice :)

Yeah, the design at studiowhiz just makes me want to stay longer. It's VERY pleasing to the eye.

Home » Blog » Web Development

Check out the blog categories for older content

The latest from my personal website,
Mike Papageorge.com

SiteUptime Web Site Monitoring Service

Sitepoint's web devlopment books have helped me out on many occasions both for finding a quick solution to a problem but also to level out my knowlegde in weaker areas (JavaScript, I'm looking at you!). I am recommending the following titles from my bookshelf:

The Principles Of Successful Freelancing

I started freelancing by diving in head first and getting on with it. Many years and a lot of experience later I was still able to take away some gems from this book, and there are plenty I wish I had thought of beforehand. If you are new to freelancing and have a lot of questions (or maybe don't know what questions to ask!) do yourself a favor and at least check out the sample chapters.

The Art & Science Of JavaScript

The author line-up for this book says it all. 7 excellent developers show you how to get your JavaScript coding up to speed with 7 chapters of great theory, code and examples. Metaprogramming with JavaScript (chapter 5 from Dan Webb) really helped me iron out some things I was missing about JavaScript. That said each chapter really helped me to develop my JavaScript skills beyond simple Ajax calls and html insertion with libs like JQuery.

The PHP Anthology: 101 Essential Tips, Tricks & Hacks

Like the other books listed here, this provides a great reference for the PHP developer looking to have the right answers from the right people at their fingertips. I tend to pull this off the shelf when I need to delve into new territory and usually find a workable solution to keep development moving. This only needs to happen once and you recoup the price of the book in time saved from having to develop the solution or find the right pattern for getting the job done..