Delicious Design Details – Going the Extra Mile!

Great quote from Charles Eames.

When executed in a consistent manner, those eloquent details in a design can become a voice to your users. ”Hey, we’re glad you found us. Your user experience is important and we’ve gone the extra mile for you”. Those details can:

• Enrich the overall presentation of information
• Facilitate further understanding of hierarchy & functionality
• Entice a user to explore content
• Keep users (customers) coming back to your website with a deeper appreciation of your product or service

Here are a handful of some delicious design details I’ve stumbled upon lately.

Google Search Results Paging

The “o” above the current page changes from Yellow to Red. Could they have simply left “22″ black and bolded for page indication? Of course. But, they didn’t.

Tinder Navigation

Madebytinder.com‘s very top navigation (the color swatches below) swaps the background color of the page. This isn’t earth-shattering functionality by any means, but the detail comes on the mouse hover state. The color swatch has a nice rollover movement, and the increased opacity of the underlying shadow gives it life and depth.

CNN Pull Quote

Extremely simple, yet effective. Love the styling of the graphical quote aligned bottom right providing the text with the perfect padding.

Facebook Loading Sequence

I’ve seen some agonizing and bloated pre-loading sequences during my days as a designer and developer. So, when I come across stripped down versions that are effective, I take notice.

Facebook has a nice touch to theirs. It uses basic rectangles, and displays them directly to the right of the option a user chooses.

The details of the sequence are compact, clean & light.

San Diego Zoo, Polar Bear Plunge

A complete 180 when it comes to pre-loading sequences in comparison to Facebooks. San Diego Zoo’s Polar Bear Exhibit is a rich experience of educational material & games.

When navigating from section to section, this preloader comes and goes so quickly that some awesome detail is probably missed (consciously). Look closely at the yellow/golden bar and how it moves left to right BEHIND the frozen snow directly above. What a subtle touch, providing great 3d perspective. I also love the shadow the overall bubble makes on the snow covered ground below and the font choice.

Kontain’s Sign Up Screen

The colored bands in the bottom left and top right align in proximity with the colors of the forms (orange = username, green = password) on Kontain.

These background images provide a fluid flow of color (from left to right) as a user submits information (from left to right). Slick.

BNET Header & UI Elements

I admire BNET.com‘s overall look and feel. Maybe it’s because I love green, or maybe it’s because of the site-wide consistency of little abstract elements sprinkled around the interface.

Check out the very top of their website where they feature articles. The details popping out at me are the exceptional usage of gradients, and slight embossing that helps separate each article. The little plus sign indicates open/close functionality and the type has great contrast from the background.

That plus sign then changes appearance once the article preview is opened (below). And the article name (“The 7 Interview Questions You Must Ask”) is reiterated, larger and in a different font. There’s also a subtle border to the entire box differentiating itself from the elements underneath.

They also use this little arrow-cutout (for lack of a better term) throughout the body of the pages. It’s a prevelant feature to their overall look and feel – and they’re consistent about the treatment for the most part (the angle of the shadows changes occasionally).

Porsche Panamera

I wanted to save this website till last, as it’s the zenith of my examples of exceptional design detail. I could highlight over 100 features from this site because it’s truly remarkable. It was almost sensory overload from a designer’s perspective to see how eloquently everything came together.

So, if I had to choose just ONE detail from Porsche’s site, I would go with this rollover treatment for it’s “Next” button.

The OFF state…

…and the ON state (below) has a beautiful treatment and provides the user with “what’s next?” through some intro verbiage. The smoothness of the animation really makes the detail when navigating “Back” and “Next”. You must see it in action.

Could a basic rollover treatment worked in this area of the site? Of course. But would it be as engaging? Would it motivate users to keep clicking and inhaling the Porsche brand? A small detail that could have a serious impact.

At Caxiam Group, we’re consistently striving to go the extra mile for our customers. When we say “we’re all about the details“, we truly take that to heart. Enrich the user experience, provide quicker understanding of hierarchy & functionality, entice users to click and keep them coming back!

Well executed design details can make a good product great, and that effort up-front can have a major impact for your audience in the short and long term.

Learn more about our Branding & Design Services and thanks for reading! May the details be with you.