Born On The Web

During a workshop last year I completely fell in love with paper prototyping. Making a rough paper interface is such a fast and easy way to build software or a website, test it with users, get feedback from stakeholders and improve it extremely fast early on. All you need is pen and paper so you can easily build the interfaces sitting in the sun enjoying a Duvelke, without getting sidetracked with a zillion PhotoShop possibilities and only focusing on the basics: the structure, content and interaction.
Here’s a nice (Dutch) video giving an overview of the process.

I’ve been around in a few web design and interactive agencies and I was surprised to see that this technique isn’t used more often. It can help get an interactive project on track from the beginning and function as a clear guideline for the design and development teams. Why isn’t it used more often? Maybe clients like to see pretty screens of the interface instead of rough amateurish looking sketches?

Macromedia (or Adobe) Flash has turned 10.
To celebrate this The Favourite Website Awards teamed up with Adobe to have a poll to see what the most influential Flash sites of each year have been.
Starting with sites from 1998 there are polls that last 2 days. ‘96 and ‘97 are presented by one site on a wild card. In the end you can vote for the most influential site of the decade.

Right now we can vote for the most inspiring site of 2004.
The nominees are:
- Vodaphone future vision
- Powszechny dom kredytowy
- Billy Harvey Music (!!!)
- .. and Carl De Keyzer Photography, from Belgium’s Group94 .. go Belgium!
They’re all pretty amazing sites, each within its own style. When Billy Harvey music launched I was stunned by what Sofake pulled again. The site has a great concept, it navigates soo smooth and I really love the typical gritty Sofake style.

The winner of 1998 is NRG.be, also a Belgian site. It was one of the first Flash sites that made a very big impression on me. The animations they pull were unseen at that time. I checked the NRG sites again a lot during the past years but noting seemed to change. I guess they’ve been too busy doing stuff for clients. A few months ago when they launched their new site? It’s very basic, bus still smooth as can be.

The FWA best of Flash poll

Click the images for original size.

My great guest blogger Frits is finishing his master thesis, normally Frits would have finished his year together with me, but he decided getting drunk and scoring girls was more important at the moment. :-) So here he is working for school in summer time. He asked me to give some feedback on the project he’s working on. I’ll do it on the blog, so you guys can give your opinion too. Don’t hesitate to criticize him in the comments. For once it’s ok.

His project involved a research he did in the use of a metaphor in the design of a website. Now he is making a personal portfolio using a metaphor.

After the preloader this pretty huuge corkboard shows. People can move their mouse around to discover what the different sections are. If they mouse over a section you’ll see more info about it. (black boxes popping up)
People expect to be able to move the elements on a corkboard, therefore the project thumbnails are dragable.

I like the idea of using a cork board, it’s dead simple, everybody knows it and recognizes it. The link to an offline cork board is very tangent and for a portfolio a good match. So I think the metaphor is pretty well taught out. I’m only a bit worried about the usability. I’m not sure were to find the navigation, I guess it is the post it note in the right top corner. Maybe a clever animation can make this clear. People visiting the site should feel some structure, now it seems very chaotic.

Pictures straight from Flickr. You can browse through them on the site by clicking the left or right picture.

I love how he integrates his social profiles into his portfolio (del.icio.us, flickr). This can makes the relatively static portfolio more lively. I would however make the text on the board more “in your face”. Not only the design has to be compliant with the metaphor also the text on the board. I would try to give some attention to that part of the project. For example change the pretty boring “view on flickr” link to something like “Lickr my Flickr”. This makes exploring the cork board a bit more challenging, I know that’s in contrary with my usability remark. But I guess you should try to find a good balance between reasonable usability and fun in exploring the board.

Leave some dymo messages on the wall.

I’m not sure people got the idea of the dymo. A simple animation is enough to make this clear, again I would do this in a very direct way. For example an animation of the dymo typing a message: “This animation is specially made for all the stupid morons who can’t understand this is the button leave a message.” Maybe I’m going to far in this, but you get the idea.

When a project thumbnail is clicked the project details slide on the screen and the background becomes blurry. The project view contains a slideshow of screenshots of the site and production documents.

Frits has to realize the projects are the most important part of his site. Potential employers or customers are interested in seeing what you’re experience is, what your good at. If they like your projects, the next thing they will like to see is what kind of person you are. Are you on top of new technologies? proof: updated blog/del.icio.us feed. Are you a social person? proof: Flickr feed. What was your latest project? proof: a very good updated project section. If they all like that, the only thing they want is to find your contact information. Make it easy for your visitors to find your email address. Don’t use a web form, maybe the person visiting the site isn’t responsible for contacting you, but he can recommend you to someone else. Make your email copy/pastable. You’re going to have spam anyway so…

I like the overall idea and it looks pretty cool. Try to make the animations as smooth as possible so people can really experience your portfolio playground. Don’t forget the purpose of a good portfolio.

Carry on …