Occassionally, when prancing around the Internet I’d find some sites that would make me say to myself “cool site”.
Sometimes, in rare times, I’d then come across website design that can make me cry. Not because that they are nice, But because they are f******g nice.
Recently, a post Smashing Magazine made me do just that. It posted an article by Torley Wong’s on great user interface ideas. (Link to original – “Creative User Interfaces in Modern Web Design” here).
I decided to check all of the websites out. And most of them really truly inspired me that I had to share with the team here. I’ve replaced the author; Torley Wong’s article with mine below. Feel free to visit the original article and read up on his thoughts. Some sites have also been omitted from my updated version as I believe, after checking the works, they did not really fit into the context of user interface design from the perspective that I am writing on.
Hope you enjoy it. And to the design team working with me, hope you are all truly inspired to go create stuff as good as these.
OkayDave
Dave Werner’s website is not new. It’s been around since 2006. And I first saw it was back then. Yet even till now (now being 2008) it is still innovative and ahead of the curve. What is more surprising was that he had created this site as part of his portfolio piece for his graduation. Yes. His student work kicks more ass than most industry veteran designers combined.
Dave Werver
Vimeoland
Vimeo is cool. Vimeo with HD is cooler. Vimeo with VimeoLand is coolest. Vimeoland is like watching a cartoon show with characters going around speaking in videos. This is probably experimental and a fun side project by the staff. But heck, it’s a way to show videos to the short-attention-span, visually oriented group.
vimeoland
Grooveshark
I used to like Pandora. Then I used to like Last.FM. Then after that I like Imeem. Now I like Grooveshark. Apart from the large artist repository and rare music (I tried Sinnerman* by Nina Simone).
*Side note: Nina Simone’s Sinnerman = Nokia = Tipping Point. Ask me what I mean by this.
And the user interface design. Oh My GAWD! It’s a UI designer wet dream. Beautiful, large buttons. Reminds me of the iPhone user interface. Really simple, no nonsense.
It takes a strong, very confident designer to design a user interface devoid of the usual ‘creative’ stuff like imageries and such; and only focus on the functionality of content driving the design.
Perhaps we should look at this as an example for one of our music initiatives for the company.
Grooveshark.com
SpaceCollective.org
Into spacey, trans-human stuff? Then go to SpaceCollective.Org. But seriously, subject matter aside, this site takes grid or tab-like interface to a new level. It’s nice to know that even people who thinks really out of this world thinks of other humans first when it comes to designing really usable, functional interfaces.
(Or were they thinking of animals and other non-humans when designing this site? Perhaps simple enough that even a monkey can use.)
spacecollective.org
Viewzi
Two months back, I commented that there would be a new war of the search engines. And that I just do not know in what form that they’ll be in.
Now the answer has come – Visual search.
And with visual searches comes visual interface designs designed to present these search results in a deeply considered, user-centered creative approach.
Again, this will take a very confident designer to create interfaces that’s simple and puts content as the hero over the usual visual fluff.
viewzi
Like.com
Another dice thrown into the visual search table game. This time by Like.com. And this time I’m not too sure how this type of visual search will pan out though.
Unlike Viewzi, where you type in your search keywords and it returns you the results in a visual display, Like.com searches by the images you send it and it searches for like-wise items. Preferably, one or more of them being what you’re looking for.
I’m just not too sure how simple or smart it will be for the really novice users though. It is a smart engine. But perhaps a little too smart for now. Too ahead of its time. Like Boo.com was a decade ago. Not usable now. Maybe later.
What I do like about Like.com though is in its visual array presentation format. This one I like a lot. If you’re looking at a smart, clean visual presentation format of many (tens to hundreds) of items in a e-store site, Like.com is the perfect fit.
like.com
Navigaya
Oh another Visual Search have we? Yes we have. This time by Navigaya. This time better than (although in similar presentation format) Viewzi. And definitely way better than Like.com. In my humble opinion.
Like Viewzi, it starts with a simple search bar. And the results are presented bang on, large on center screen. What makes Navigaya better is how subtle things are or becomes. After a certain time of inaction, everything fades off. And comes back on again when the mouse is moved. This keeps focus only on the item at play and keep non-essential item in the background, appearing again when called for. Again for the strong designer who knows that the strength of a site is in its content.
It does have its drawback. In that it’s not as clean and sleek as Viewzi. But I think it’s catering to a visually oriented target market. The kind who likes to see eye candies and bursting bubbles move about.
navigaya
GoDesignate
I would not label GoDesignate as design. But if user interface design is all about user interfaces that is functional, then GoDesignate is it.
Basically I’d say that there are two forms of user interface design. First is visual-related. Most creative designers (including most of you in my team) are visual designers. Second is functional-related. Not many designers are functional designers.
I would relate functional designers as being those designers that have elevated themselves to a state where, integral to their designs are the visual cues that emerge in the user’s minds. Functional designers design for a symbiosis of the user and the product to become one. Usually the design would be simple, with a focus on getting the user to using the product better.
Ok. Enough of the mumbo-jumbos. Here you go… GoDesignate’s functional simplicity.
godesignate
Hypnoteis
While on the topic of Visual vs Functional designers. This next one marries both. Teis Albers designs are visual intensive montages that represent the trend now. Something I personally love.
Yet his showcase website goes beyond visual fluff and focuses on simplicity of use. Again the focus is on content being the hero of the design. Going with the principle that while the content itself is loud, the container is simple. And vice versa.
hypnoteis
Serge Seidlitz
But then, sometimes as a designer, you might want to make visual fluff. You REALLY want visual fluff as the hero. To you, your work should be the focus. That’s what Serge is doing.
Unlike Hynoteis where the work is separated from the interface, Serge’s site is a montage of his work. And it does so intentionally. Yet even so, amidst the visual complexity, comes the simplicity of use. You get what you click. No mouseovers. No fancy overlays. Proof that design complexity can also be simple to use. While the design is complex, the function is simple. Vice versa to the above site.
It’s like order in chaos. I LIKE!
serge seidlitz
Six Pixels of Separation
If I were to design a blog; this would be it. If I were to write insights and article; this would be it. If I were to architect information; this would be it.
Basically, Mitch Joel is doing what I would have exactly done. Except that he’s been doing it way more than me and is probably doing it more often than I get to do. What would otherwise have been a content heavy website, with too many links to too many places is very well organized.
Graphics are used sparsely to maximum effect. Using them to provide information and drive users to deeper content. Even if one were to not read much and scan only for headlines and keywords, one would be relatively successful at it.
six pixels of separation
Fontpark 2.0
It’s like typography. Only, with Japanese Kanji characters. Only with Kanji turning into actual characters. Like an actual character. Like a face. A Font Face. Yes really. A Font, that’s like a Face.
I would not have classified this site as good user interface design. It’s more creative than good. But the fact that it got me mesmerized for a good 10 minutes after the site load really speaks much for itself. Just sitting here watching the artwork and stories unfold was just amazing.
One can’t help but feel a sense of zen-ness by visiting the site here.
fontpark
Bestiario
If in case you don’t know, there is one field that many open-sourced sites are really getting into and experimenting much lately – Data Visualisation. Basically is a fairly new field in the online space where more and more efforts are being put into in the area of developing online applications to crunch and present massive complex data visually.
It’s like answering the pertinent questions of “Great, but how do these numbers connect? And what do they represent?” that most of us ask when given stacks over stacks of excel spreadsheets.
bestiario
The above are examples of great, creative interpretations in user interfaces design. While the designs and executions may vary from one designer to another, the concepts and principles remain the same – that great web design must be usable and a joy to use.
