Menu Search
Jump to the content X

Creative User Interfaces in Modern Web Design


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:

OkayDave Link
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.

OkayDave by you.

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 Link

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.

Vimeoland by you.

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 Link
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.

Grooveshark by you.

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 Link
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.

SpaceCollective by you.

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 Link
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.

Funnel Design Group by you.

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 Link
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.

Viewzi by you.

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 Link
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.

Designate by you.

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 Link
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.

Hypnoteis by you.

Serge Seidlitz Link

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.”

Serge Seidlitz by you.

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 Link

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!

Six Pixels of Separation by you.

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 Link

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.

Fontpark 2.0 by you.

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 Link
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!

Picnik by you.

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 Link
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.

Bestiario by you.

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 Link
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.

Phatterism by you.

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

Energi Design Link
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.

Energi Design by you.

Mirror’s Edge Link
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.

Mirror's Edge by you.

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. Link
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 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. by you.

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.
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.

Navigaya by you.

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.

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

Smashing Book #5

Hold on tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? For example, Smashing Book 5, packed with smart responsive design patterns and techniques.

↑ Back to top Tweet itShare on Facebook

Torley Wong amplifies your awesome with the useful and fun. He also has an irrepressible passion for discovering the connections between seemingly unrelated things, and unfolding how they were invented. Enjoy his personality at Torley Lives.

  1. 1

    Great job. Its really useful, especially b/c I’m doing several projects that need good and creative ideas.

  2. 2

    Cool, i work with UI interface, you increase my ispiration.

  3. 3

    User interface is what makes any site user friendly which is most important if you having shopping or browsing sites !!

  4. 4

    Cool, great work. I love looking at new UI’s there just so cool.

  5. 5

    I really like the navigaya – it shows really a modern way to navigate through content and hopefully this “way” will find place in many applications.

  6. 6

    Amazing showcase!

  7. 7

    I was trying to find the Dave Werner site just yesterday to show to someone–I’d found it a few months back, but couldn’t for the life of me remember where I found it, who it was, or how to get back to it!!! I’d thrown in the towel on any hope of finding it–THANKS!

  8. 8

    Cool post and great resource for thinking out the box.

    Scott Pollard

  9. 9

    really good!!!

  10. 10

    This is such a well thought out and informitave post. I love it. Thanks.

  11. 11

    Greetings Torley,

    You did an amazing job in bringing and reviewing all these great sites into one place!

    a few words about if i am allowed…
    navigaya is not a visual / meta search engine, but a community!
    you can fully customize navigaya and build your own playlists and links and than to send them to other friends and allow them to experience your style.
    navigaya is about her unique content… and a lot more features once you register.

    thank you!

  12. 12

    I saw Dave’s portfolio in ID magazine, it inspired me to quit my day job as a weldor / fitter at the time and follow my true passion for design and programming. Hard to believe it was only two years ago.

  13. 13

    OkayDave is simply the best portfolio I’ve ever seen! I just love the way he narrates through the process of his work and displays all the concepts as well. The transitions and movement throughout the site are simply stunning. I’d give this guy my vote for portfolio site of the year anyday.

  14. 14

    okaydave is absolutely ridiculous. He’s gonna be taking work away from all of us!!! Great stuff.

  15. 15

    Awesome roundup! I run a studio that specializes in user interface design and this is certainly great inspiration. Thanks!

  16. 16

    okaydave is a great portfolio site! It’s been around for years and have really enjoyed it. Some other really great portfolios I visit often:

    Link []
    Link []

    Suprised Red Interactive was not listed as well, they have a really interesting interface:
    Link []

  17. 17

    Sigh. Too many sites which are 100% Flash. You may as well just review a bunch of Powerpoint presentations. FAIL.

  18. 18
  19. 19

    Just great!
    Don’t have the time to explore everything but i’ll be back for sure! :)

  20. 20

    Great list, i especially like, nice effects and navigation.

  21. 21

    Cool post and great resource for thinking out the box.

  22. 22

    Too many sites which are 100% Flash?
    You may as well just review a bunch of Powerpoint presentations?

    Oh dear. I suppose we should all go back to chalk on slate, or just scratching marks in the dirt with a stick?

    I’m going to try to be nice about this, but I grow increasingly tired of this Luddite anti-Flash sentiment which drifts in and out of fashion and sweeps through the community whenever the latest en vogue guru pins their colours to the web standards mast.

    First of all, have you ever tried to do a decent piece of design work in Powerpoint and have it deploy consistently on anything other than… Well, the computer it was created on, really… And second, have you ever authored a decent piece of Flash content? If you can answer both of these questions with an honest affirmative, then you really ought to know better, and, if not, then please consider the fact that Flash is not some easy option, as evinced by the number of truly awful flash-based sites which have been (and continue to be) served up. So let’s consider that maybe someone capable of producing a slick and credible piece of Flash is to be applauded, not lambasted. It’s not the easy route for lazy people. It’s a viable technology which has its place alongside everything else. But it requires a lot of hard work in order to make it sing and dance. Just as much work as a site crafted from php, css, ajax or whatever.

    Really, I just find this attitude illogical. Let’s all dump our TV sets and go back to radio, no, wait, gramophone players, because we are purists and abhor the bright, gaudy trappings and blatant frippery of technology for its own sake… No. Sorry. You go back to your black and white TV if you prefer, but I’ll stick with colour, thanks.

  23. 23

    Great job.
    It is useful.

    Thank you

  24. 24

    Nice sites!! :D

    Visit this:
    Vimeo similar site… but…. BETTER!!!
    http://www.ff0000 .com


  25. 25

    fantastc collection. top stuff.

  26. 26

    @TheGreyMan: I agree. Too many of these sites are 100% flash.

    Not to say that flash is easy, or flash interfaces can not be inspiring, but I do think that it is more of an achievement when a site is done up with elegant JavaScript using a nice framework (like prototype.js or mootools).

    I don’t know about everyone else, but when I go to a site and it looks very intense I immediately click the right mouse button to see if it is flash. If it is, I say to myself, “That explains it…”

  27. 27

    Thanx for the comments!

    @Jamin: You’re welcome, I love when connections like this happen.

    @Gal: Thanks for the correction — I didn’t get into the social networking features so I’m glad you brought it up!

    @Jaj: More details please, and be sure to see…

    @TheGreyMan: Extremely well-explained! I’ve seen the same Luddite attitudes in music, e.g., “Vinyl is king, destroy MP3s!” Simply put: if a tool or technology works for what you want to achieve, go for it. And if it doesn’t, use something else.

    I’ll also emphasize I like seeing good use of Flash within an HTML page. Like widgets, and oh, this rockin’ music player:

    @Tim M.: More context too: this is a list which the Smashing Mag Team pared down to. The draft list had more, and the future is certainly open for continuation — no shortage of inspiration. That right-click mention is funny, because I do that exact same thing. Spot on!

  28. 28

    Actually, you *can* embed Grooveshark playlists. It’s one of the buttons on the bottom right, near the small ad space.

  29. 29

    @Tim M: You know, I almost succumbed to this line of thinking myself, at one point, and will hold my hands up to the fact that I, too, have found myself right clicking to find out the truth… and experiencing an odd little quiver of disappointment that it’s ‘only another flash site’, as if that somehow lessened its artistic merit… but then shook myself and realized that it’s not about what tools have been used, it’s about what is achieved with them. Yes, I will find myself doffing my cap in admiration of a site which achieves an immersive user experience without any Flash at all, but I can’t help feeling it’s a little bit like saying that real musicians shouldn’t use electric instruments… There are lots of different kinds of music, and personally I’d rather just enjoy them all on their own merits than turn my nose up at those that the cognoscenti deem less worthy…

    Maybe the reason those kinds of sites tend to be made in Flash is because it’s the right tool for the job?

  30. 30

    Nice post. Definitely some inspiring material here to be noted, but a lot of the “creativeness”, seems like a usability nightmare…Lots of mystery-meat navigation. Interesting, yes, user-friendly, not all.


↑ Back to top