Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

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

OkayDave.com2
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.3

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

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

Grooveshark.com5
Looking for music? Grooveshark may have what you want. In a turbulent time when popular mainstays like Pandora6 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 imeem7, 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.8

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

SpaceCollective.org9
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.10

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

FunnelDesignGroup.com11
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.12

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

Viewzi.com13
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 Me14” 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.15

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

GoDesignate.com16
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.17

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

Hypnoteis.nl18
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 JavaScript19.

Hypnoteis by you.20

Serge Seidlitz Link

Serge Seidlitz21
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.22

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

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

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 FontStruct27, 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 Homer28, but finding faces in the swashes and strokes is enlightening nonetheless.

Picnik Link

Picnik.com29
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.30

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

Bestiario.org31
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.32

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

Phatterism.com33
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.34

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

Energi Design Link

Clickenergi.com36
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 ArtBeats37, 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.38

Mirror’s Edge Link

MirrorsEdge.com39
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.40

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 Link

Like.com41
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 Flickr42. 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.

Like.com by you.43

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

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:

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2008/09/03/40-creative-design-layouts-getting-out-of-the-box/
  2. 2 http://okaydave.com/
  3. 3 http://okaydave.com/
  4. 4 http://www.vimeo.com/roadmap
  5. 5 http://www.grooveshark.com/
  6. 6 http://www.pandora.com/
  7. 7 http://www.imeem.com/
  8. 8 http://www.grooveshark.com/
  9. 9 http://spacecollective.org/recent
  10. 10 http://spacecollective.org/recent
  11. 11 http://www.funneldesigngroup.com/
  12. 12 http://www.funneldesigngroup.com/
  13. 13 http://www.viewzi.com/
  14. 14 http://www.youtube.com/watch?v=lBvaHZIrt0o
  15. 15 http://www.viewzi.com/
  16. 16 http://www.godesignate.com/
  17. 17 http://www.godesignate.com/
  18. 18 http://www.hypnoteis.nl/
  19. 19 http://highslide.com/
  20. 20 http://www.hypnoteis.nl/
  21. 21 http://www.sergeseidlitz.com/
  22. 22 http://www.sergeseidlitz.com/
  23. 23 http://www.twistimage.com/blog/
  24. 24 http://www.twistimage.com/blog/
  25. 25 http://fontpark.morisawa.co.jp/
  26. 26 http://fontpark.morisawa.co.jp/
  27. 27 http://fontstruct.fontshop.com/
  28. 28 http://nedbatchelder.com/blog/200805/css_homer_animated.html
  29. 29 http://www.picnik.com/
  30. 30 http://www.picnik.com/
  31. 31 http://www.bestiario.org/
  32. 32 http://www.bestiario.org/
  33. 33 http://www.phatterism.com/
  34. 34 http://www.phatterism.com/
  35. 35 http://www.luissantijr.com/
  36. 36 http://clickenergi.com/
  37. 37 http://www.artbeats.com/
  38. 38 http://clickenergi.com/
  39. 39 http://www.mirrorsedge.com/
  40. 40 http://www.mirrorsedge.com/
  41. 41 http://www.like.com/
  42. 42 http://www.flickr.com/
  43. 43 http://www.like.com/
  44. 44 https://www.smashingmagazine.com/2008/09/03/40-creative-design-layouts-getting-out-of-the-box/
SmashingConf Barcelona 2016

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? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Advertisement

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.

    0
  2. 2

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

    0
  3. 3

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

    0
  4. 4

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

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

    0
  6. 6

    Amazing showcase!

    0
  7. 7

    Jamin Garoutte

    October 21, 2008 2:30 pm

    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!

    0
  8. 8

    Cool post and great resource for thinking out the box.

    Scott Pollard

    http://www.designjump.co.uk

    0
  9. 9

    really good!!!

    0
  10. 10

    Jetrois Mathurin

    October 21, 2008 4:16 pm

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

    0
  11. 11

    Greetings Torley,

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

    a few words about navigaya.com 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!

    0
  12. 12

    Carsten Nielsen

    October 21, 2008 5:53 pm

    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.

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

    0
  14. 14

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

    0
  15. 15

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

    0
  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 [www.shanemielke.com]
    Link [www.arteye.com]

    Suprised Red Interactive was not listed as well, they have a really interesting interface:
    Link [http://www.ff0000.com]

    0
  17. 17

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

    0
  18. 18
  19. 19

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

    0
  20. 20

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

    0

↑ Back to top