Interface harmony

25 October 2009

Interface consistency is one of those things that, if done correctly, should go unnoticed. I’ve slowly been working on a new interface for a side project and thought it’d be a treat to share my approach.

Flickr photo

Interfaces evolve based on the needs of people using them. Each task may require a different element. Common elements include buttons, dialogs, drop-downs, select boxes, checkboxes, input fields, etc. These elements are like notes in a composition seeking harmony.

To ensure harmony I’ll arrange my elements on a single canvas and show the different levels of interaction. By doing this I can easily spot inconstancies. This also helps build a style guide for future elements and interaction.

This is not groundbreaking by any means. Just thought I’d share and help promote the practice :)

Related tags: design, interaction, interface

Remarks

Tom Watson http://tincorporated.com/

Nice. I love seeing this stuff, especially now as I find myself documenting and writing style guides these days at Facebook.

I’m assuming, because you’re the only person working on the site, you haven’t added any descriptive text to the various elements though right? I keep trying to find the right balance between descriptive and prescriptive when writing for various audiences.

I envy your one-man-band sometimes Mr. Borror.

Curt Micol http://asenchi.com/

Great idea, I hadn’t thought of this approach. I find myself fighting with CSS to keep it simple, in the end this produces a much simpler application, but your idea simplifies the “on the job headaches”.

Thanks for sharing.

Mike Stickel

This would simplify so many things on every site I work on. Now I’m going to have to see how we can apply this (or at least something similar to this) at work. It would be the cat’s pajamas for everyone.

dave rupert http://daverupert.com/

that is gorgeous. well done.

Polprav http://www.polprav.blogspot.com/

Hello from Russia! Can I quote a post “No teme” in your blog with the link to you?

eranb http://www.eransworld.com/

This is a great insight into the mind of a graphic designer for those of us like me who are forced to be hacks at graphic design because the business could only afford a System/Network Admin/webmaster and not a graphic designer.

This will help me in my quest to redo the design of our intranet. Brilliant…

Thanks

Dana Woodman http://www.danawoodman.com/

Excellent idea. Simple yet effective. It makes me kick myself that I haven’t done this before…

Thanks for sharing! Love your work, great inspiration.

Cheers, Dana W

Ian Tearle http://iantearle.com/

This is amazing inspiration. I kind of do this in my PSD designs, on layers, but to put them all together that way, its genius!

Thanks for your insights.

Kimberley29 http://www.bestwritingservice.com/

Thanks a lot that you finished the really good writing about this post. Though, to find out the perfect essay writing services, people suppose read a lot about writing service.

Post your remark