5 Amazing and Unique Portfolio Interfaces

There’s a sea of portfolio sites out there. Of the best ones there are many that look great but don’t stray far from the typical interface design frameworks and information architecture.

Here’s a collection of five seriously impressive efforts to innovate, take chances, do something unique, delight and surprise… Great stuff.

1. Wonderwall Inc. – www.wonder-wall.com

This Japanese interior design firm presents their work via a sproingy, elastic, 3D, slightly off the grid mosaic interface. It’s just fun to play with and tightly executed. It’s not a facade, either – the transitions and detail views are well thought through.

2. Resn - www.resn.co.nz

Not a new site, but if this New Zealand based creative agency ever changes their portfolio I look forward to seeing how they plan to improve on it. The imagination behind the navigation rollover effects and the presentation of the work in the portfolio section are inspiring. Use of full bleed background imagery and subtle audio really surround the visitor. Great balance of creativity and usability.

3. thetoke - www.thetoke.com

Slick, clean, technical. Slightly ambiguous concept around the identity and the intro, but it all makes for good eye candy. Play with the viewing modes in the top right hand corner to see cool applications of 3D in Flash.

4. bio-bak - www.bio-bak.nl

Wow. Also been around a while but something truly bizarre. It’s a game. The object is to find the site’s navigation. This site has balls. And they’re hairy and badly drawn.

5. Futuretainment – www.futuretainment.com

Ok, so it’s a book launch, not a portfolio, but it’s classic Frost and fits beautifully with the others for a range of inspiration on how to simultaneously provide a stage and set a tone.

Enjoy!

@iclazie

Web design is 95% typography

Interesting article for designers from Information Architects Japan on the topic of information design and typography. Helpful for designers who struggle with getting past the visual aspect and into the information being communicated.

http://informationarchitects.jp/the-web-is-all-about-typography-period/ 

Incidentally, IA’s 4th web trends map is in beta. Amazing visualisation effort which makes a fascinating poster.

50 lessons in graphic design theory

Typography, grids, colour, hierarchy, usability, lightweight information architecture… this Psdtuts+ collection of lessons is the most comprehensive I’ve seen. Very good starting point for anyone starting out in digital design. Or those of us who’ve been at it for a while and may need to round out our knowledge.

http://psd.tutsplus.com/articles/web/50-totally-free-lessons-in-graphic-design-theory/

Amnesia Razorfish explores gestural interfaces with Surface

In what’s just the very tip of a potentially massive iceberg, AR has prototyped an interactive staff directory for the Microsoft Surface table platform.

Watch the video on Vimeo: http://vimeo.com/3384040

See video of other Surface applications that have been developed by the various Razorfish offices.

Microsoft Office Labs vision 2019 (montage + video)

Packed with experience concepts and interface eye candy, the 2019 video from MS Office Labs is pretty entertaining for those interested in that sort of thing (or anyone who enjoyed Minority Report).

Watch the video and learn more here: http://www.istartedsomething.com/20090228/microsoft-office-labs-vision-2019-video/

Interesting IA Japan perspective: "The Interface of a Cheeseburger"

Enjoyed this article on the importance of intuitive interfaces to branding.

Has a few “aha!” kind of insights in it.

http://informationarchitects.jp/the-interface-of-a-cheeseburger/

Useful library of common interface design elements

Here’s a collection of UI design elements (or “patterns”) for anyone dealing with designing web interfaces. Certain wheels do not need to be reinvented and this resource can help you cut to the chase and avoid wasting valuable user experience design time to trial and error.

UI Patterns, the user interface design pattern library, is a collection of common UI elements that has explanations of the key components and functions of each along with multiple examples.

Here’s a list of a few of the UI elements covered:

• Input Feedback
  The user has entered input into the system and expects to receive feedback on the result of the submission
• Tag Cloud
  The user wants to browse content by popularity or most elaborate topic
• Pagination
  The user needs to view a subset of sorted data that is not easily displayed on one page.
• Continuous Scrolling
  The user needs to view a subset of data that is not easily displayed on a single page (alternative to pagination)
• Tag
  The user wants to find more data in the same category and/or contribute data in the same category

Check it out: http://ui-patterns.com/

Huge collection of fundamental design lessons online

The 50 Most Popular Web Design Blog Posts,
Resources & Cheat Sheets of 2007:

Have a look…

Organised by:

• Basics & Principles
• Color
• Graphics & Icons
• Photos
• CSS
• Fonts & Text
• Layouts
• Other

http://www.crestock.com/blog/design/the-50-most-popular-web-design-blog-posts-resources-cheat-sheets-of-2007-114.aspx

Books for usability-centric interactive designers

Two old posts of mine from the Amnesia Blog. Great books. Quick reads.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

The Elements of User Experience

http://www.jjg.net/elements/

Awesome book about building usable websites. Quick and easy read. Makes A LOT of sense.

What the reviewers are saying:

“brilliant“
“invaluable“
“a must-have“
“an instant classic“
“a quantum leap in explaining user experience”
“will change the way you think about Web development”
“the best book I have read so far about creating a great user experience”
“there is probably no better book on the market that so clearly and rationally covers the entire area of user experience”

It started with a diagram: http://www.jjg.net/elements/pdf/elements.pdf - the book explains how the diagram works.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Don’t Make Me Think – A Common Sense Approach to Web Usability

Being a firm believer of knowing the rules before you break them, I’m a huge fan of anyone who can explain common sense usability concisely. Among other joys it gives me ammo for explaining/defending interface designs to clients.

Reading Steve Krug’s Don’t Make Me Think – A Common Sense Approach to Web Usability at the moment and digging it. Here’s an excerpt explaining the importance of designing with web usability in mind:

“Making pages self-evident is like having good lighting in a store: it just makes everything seem better. Using a site that doesn’t make us think about unimportant things feels effortless, whereas puzzling over things that don’t matter to us tends to sap our energy and enthusiasm – and time.”

It’s the kind of truth that’s refreshing to read. People do actually write about this stuff. And well.

Buy it on Amazon…