Creative User Interfaces in Modern Web Design

• By Torley Wong
• October 21st, 2008
• Inspiration, Showcases, User Interaction
• 48 Comments

The whole may be more than the sum of its parts, but without the parts, there is no whole. Lest that sound like some weird philosophical meandering to you, take comfort in observing the finer aspects of creative and appealing user interface design.

The following list bucks tradition by not being tied to one particular theme; although, as you’ll see, there are subtle threads running through them. While excellent, none of these designs are perfect, and I’ve pointed out room for improvement we can learn from.

Give it a go. Grab a coffee and take time to explore further. As you would a quality timepiece made of thousands of parts, analyze and enjoy how intricate parts come together to create a cohesive experience. Look closely and see what makes each website design tick.

You may also want to take a look at the following related articles:

• 40 Creative Design Layouts: Getting Out Of The Box

OkayDave

OkayDave.com
I’ve noticed Dave Werner’s portfolio mentioned in passing on Smashing Magazine before and thought it was well worth a closer look, even if it dates to 2006. One basic way to provide focus and emphasis is to desaturate everything except the target element. On OkayDave, all is in black and white until you mouse over an element.

Things get startlingly more vibrant when you actually click something; a burst of colored particles brighten the screen before transitioning to the selected media. It’s a tad on the over-compressed side but only lasts a second. What a great way to combine very artificial and earthly organics (see Dave’s handwriting and scratchy notes, in particular). And, rewarding visitors for clicking will encourage them to spend more time discovering your content.

Vimeoland

Vimeoland
Video-sharing website Vimeo is known for a number of things, foremost among them being an astoundingly consistent user interface, an example being its very user-friendly roadmap. Vimeoland is a playful form of data visualization: little figurines teleport in, representing unique website users and their status. For example, hearts appear above their heads when they like a video. From time to time, an airplane will fly by.

YouTube may be the biggest video website, but its user interface falls short of Vimeo’s elegance. Vimeo’s video quality, which can go up to true high definition, is superior, too. Something worth thinking about the next time you want to make a film easily accessible.

Grooveshark

Grooveshark.com
Looking for music? Grooveshark may have what you want. In a turbulent time when popular mainstays like Pandora and Muxtape have run into legal tangles because of archaic copyright laws, Grooveshark claims to be in the clear, compensating artists for their work.

Alas, this also means that unlike other services, such as imeem, you can’t (at least yet) embed music on your blog. But I was surprised by how many rare tracks that I searched were already available (they apparently reward people for uploading). Two problems I noticed: (1) some broken help files, and (2) the circular progress indicator will keep going infinitely if it can’t play a song. Hopefully they’ll be smarter about that in the future.

But overall the player is very slick: queued songs visually lock together like Legos, elements slide horizontally to show and hide controls and hierarchies as needed, and the overall blue and gray theme — like a shark! — is sleek.

If you want to download songs, your registration needs to be approved. It’s not an automated process yet, and I’m still waiting for my approval.

SpaceCollective

SpaceCollective.org
Into trans-humanism, fringe science, and the far reaches of space? Space Collective bills itself as “a cross-media information and entertainment channel for post-ideological, non-partisan, forward-thinking terrestrials”. And its website is a joy to visit: in the new posts section, fresh content is arranged in a curved-corner matrix, with green tabs to indicate specific projects.

It seems pretty far out at first, and you may not buy some of the beliefs, but even a glimpse of this imagery will uplift your perspective on humanity’s creativity in the cosmos.

Funnel Design Group

FunnelDesignGroup.com
Do you remember the bizarre devices in the first Myst game that combined familiar elements, and by doing so, came off as alien? The “dentist-chair planetarium” hybrid was a striking example of that. When you visit Funnel’s website, you’ll sense a similar atmosphere: gears are churning away, and a little automaton with a lightbulb for a head is there to help you view its work. It’s almost Steampunk-ish.

I appreciate the detail they’ve gone into: selecting a different section makes the art in the O-shaped viewfinder spring a little, and the title up top closes and opens, as if it were a piece of paper in a rotating carousel. (The old-time Glenn Miller music and whirring sounds are fitting, too.)

Viewzi

Viewzi.com
Finally, in the visual search arena, Viewzi’s results aggregate other websites (like Google and Amazon) and present them in the most sensible context it can detect. For example, searching for “Royksopp” (whose “Remind Me” video has been popular on Smashing Magazine) brings up the album view first. Clicking on it brings up a list of the group’s CD covers.

If that doesn’t suit you, multiple other views — like the traditional “Simple Text” and the pseudo-3D “Photo Tag Cloud” — allow you to explore the same data in different ways. They have other views for specialized searches, so try them all out for appropriate media.

GoDesignate

GoDesignate.com
Here’s another fine example of a goodie-hook. The Web developers at Buffalo were inspired to create this after a “‘discussion about whose turn it was to make the tea.” It provides a clean twist on the old “cards in the hat” process and takes seconds to use. The reference to Buffalo at the bottom is a compact pixelfont, a subtle reassurance that they’re not intrusive marketers.

I couldn’t help but ask if this was actually used by the company, and Dan Griffiths, Managing Director, graciously replied:

“Glad you like it! We do use it for all sorts of things still. You should see some of the things people use it for. :)”

“Should I leave my husband?” was one of the strangest ones I have noticed!

Some more from a list of highlights Dan shared with me:

“Why does my boss call me lady?”

“Will Chris ever regain his masculinity?”

“Should I make a new site design based on Buffalo’s design?”

When hooks like this are in tune with your company’s overall image and sense of humor they build brand familiarity through repeated usage, not to mention subsequent smiles.

Hypnoteis

Hypnoteis.nl
Teis Albers is fond of splashy color. His style is more about grungy splashes of paint and pseudo-decoupage, as demonstrated in his gritty depictions of font flourishes set against a backdrop of various animal and human body parts. But similar to Pagano’s website, clicking on any thumbnail will dynamically zoom and enlarge that picture without refreshing the page. While Pagano’s zooms are Flash-based, Albers uses the magic of Highslide JavaScript.

Serge Seidlitz

Serge Seidlitz
But sometimes you want to make everything stand out, and that’s what this guy is here for. Using a mess-on-the-bedroom-floor approach similar to Werner’s, Seidlitz has nothing fancy in the way of mouse-overs. But his motley assemblage of mayhem does invite clicking: he even urges you to “click on things.”

Needless to say, if you keep updating your portfolio with new stuff, maintaining a website like this could become a time-consuming jumble. But if you already have a wealth of work to show off, the discover-my-creative-chaos approach might work for you.

Six Pixels of Separation

Six Pixels of Separation is Mitch Joel’s showcase of social media insights. It looks pretty usual and boring at the first glance, but a closer look reveals a close attention to detail. Consider how sparse graphical elements are used for maximum effect. Embedded podcasts fit perfectly into the theme; it’s relatively easy to navigate, despite the large amount of links; and leaving a comment rewards you with a surprising (but non-annoying) pop-up; try it!

There are too many social media blogs out there that buy into the same generic “Web 2.0″ conventions. Six Pixels bucks that banality with a layout that doesn’t get in the way of “the meat” and is all the better for it.

Fontpark 2.0

Fontpark 2.0
When I see Web typography guides, they’re often in the Roman characters that I’m well familiar with, so it’s refreshing to look beyond this style and bask in what else is happening around the world.

Japan’s Morisawa is a venerable typesetting company, and in addition to a brief but helpful primer on Japanese Kanji Culture, they have created Fontpark, a unique way of looking at characters with hundreds of years of history. Sit back and watch pieces be animated into animals and faces, or be an active participant and submit your work to the gallery.

Like FontStruct, this is a novel way of promoting your paid products with a quality freebie, another kind of goodie-hook. It may not be as funny as CSS Homer, but finding faces in the swashes and strokes is enlightening nonetheless.

Picnik

Picnik.com
Staying on the food theme, here is a Picnik of a very special sort. Sure, you rely on Photoshop for your more heavy-handed tasks, and rising Web-based image editors such as a.viary boast complex features. But when you want to retouch photos in a jiffy, Picnik is nothing short of a usability dream!

From the smooth registration form (observe how password and email confirmation fields are hidden until you need them, reducing the perception of complexity) to the actual “in-the-basket” look and feel of this Flash application, Picnik is a joy to use inside and out. It simply puts other Web-based image editors to shame — or at least inspires them to do better.

Bestiario

Bestiario.org
Fancy more data visualization? This isn’t as playful as Vimeoland but is substantial in its own right. At first, the lack of anti-aliasing may hurt your eyes, but scroll over (or down) the projects and watch the collection unfold. It’s almost like a very graphical elevator.

It’s fun to move your cursor to the right, whereupon the whole gallery will tilt, as if to look at you askance and ask “Now what?” Well, there’s a pop-out collection of tags on the far right, containing another way to navigate the set. And if you love mathematical visuals…

Phatterism

Phatterism.com
This website is one of the neatest ways I’ve seen (even if somewhat impractical) to share a blog (and other media). Upon visiting, Luis Santi Jr. will greet you with ample white space, fidgeting and occasionally gazing to his left, imploring you to check out his stuff. Like Funnel Design, he’s got his own head-bopping music, which reminds me of the Austin Powers movies.

Click “TXT” and Luis goes to work for you, pulling out an index card of his journal entries. His hand even moves a bit unsteadily, adding to the realistic feel. If you click on a title, you’ll see him scribbling a note, then hold it up for you. The shakes are gone now and the handwriting is obviously a font, but what impressed me is how he presents his comments; they, too, are shown as separate note cards.

What a fun way to show yourself off! For more of Santi’s work, see his main portfolio.

Energi Design

Clickenergi.com
From the get-go, Steve Holmes’ compact Flash website doesn’t have very much, but what’s on it is amazing. He has done video tutorials for well-known stock content provider ArtBeats, and you owe it to yourself to watch his demo reel. The earlier, more up-tempo music he used when I first saw this a while ago was better, but the visuals are captivating nonetheless. If you enjoy type-in-motion videos like Justice’s “DVNO,” this will definitely appeal to you.

Mirror’s Edge

MirrorsEdge.com
It seems like every big game title coming out nowadays needs a Flash website. They’re usually very glossy and don’t have a lot of content, but the techniques involved are well worth experiencing. Mirror’s Edge, which is due for release in November 2008, has already been acclaimed for its aesthetics. Promoting a game with authoritarian cyberpunk gloom but set in a very clean white-blue city, the website complements it almost perfectly.

The waving of the main character’s hair and the slow rotation of the city are nice little touches. Games with such a striking and individual look are rare (some of my favorites include the Wipeout series and Ico) and beg to be copied. Of course, the irony is that copycatting leads to angry cries that the spawns are too derivative.

Observe also that the buttons and headers are slightly askew but not horrendously so, lending a certain sense of dynamic imbalance that reflects the fleet-footed parkour seen in the game.

Like.com

Like.com
Visual search continues to rise. A couple of decades ago, the mere idea of searching through thousands of catalogued images seemed improbable. Today, we can enjoy it everyday on websites like Flickr. Websites such as Riya’s Like.com go a few steps further, and they claim to be “slowly innovating” by improving facial and object recognition. Like a handbag but think the material’s a bit too shiny? Narrow not just by color but by style, and feel like you have more investment in (and control over) the overall search process.

Someday, this will be commonplace too, but until then, it’s flirty fun to drill through look-alike Halloween costumes to pick out one that’s just right for you.

Navigaya

Navigaya.com
Think visual search is too quiet? Navigaya is another value-added search aggregator with a twist: by default, as you search, a halftone-mottled music video (from YouTube) plays in the background. Most of the selections are electronic dance, and, while not immediately obvious, you can reveal the transport controls by moving your cursor to the top of the screen.

Highlights to look out for: the blurred in-and-out (not just faded) effect for hover tips and certain menus, and dotted icons for arrows and other buttons. It’s a tight, dark design that gives the appearance of staying in the background even when it’s in the foreground.

Overall, Navigaya is too claustrophobic at times for my taste compared to Viewzi, because it mainly shows its search engine results in windows within windows. But if you like your search activities to be an information onslaught, give this a spin.

What common threads can you identify running through different design styles? The surfaces may look different, but the underlying spirits and code may have more in common than you think. Take a moment to gaze, absorb, and mentally deconstruct; it will increase your overall understanding of why great Web design works.

Related articles

You may also want to take a look at the following related articles:

• 40 Creative Design Layouts: Getting Out Of The Box