6 ANGRY MEN - Header TECHNICAL DESIGN COMMUNICATION INTERACTION 6ANGRYMEN WHO ARE WE BLOG
Portfolio

My current portfolio (http://www.zwartekoffie.com) has several shortcomings. You can’t see which projects are new and my contact info is hard to find. A portfolio needs to be clear. Most of the viewers will probably take a look at just a few projects. Make sure they are your best and most prominent on your website.

Since this wasn’t the case I started making a new portfolio website. First of all you need good exports of your work. Some projects look good on a dark background, others on plain white. I thought it would be a good thing if the backgrounds can be changed for each project. I want the work to be shown very big, because that’s what your portfolio is all about. The rest of the portfolio, like the navigation don’t really need much style. It will distract from the shown project. My current portfolio is pretty unusual and this attracted a lot of visitors. But in the end I think a more basic portfolio is better.

Here are some of my sketches. I would like some feedback. Let me know what you think, or how to improve it.

zwartekoffie_portfolio1zwartekoffie_portfolio2zwartekoffie_portfolio3zwartekoffie_portfolio4

Before making a new portfolio, I have taken a look at some portfolio’s. Here is a selection of some great portfolios:

Cartelle

cartelle1

cartelle2

What I like about this portfolio, are the different backgrounds for eacht project and a very clean navigation with a thumbnail view. It pops out when you get to the cartelle logo.

Zero Style

0style

Same story. Big pictures, different backgrounds for each project.

Anders Bergh

bergh

Portfolio by Photographer Anders Bergh. Great interface, very natural. Too bad you have to wait untill all the thumbs have been loaded in the grid. Great zooming effect, when fully zoomed the quality improves.

Hello Monday

hellomonday

Every project is a row and expands when you click it. You can scroll to the right to see all images for each project. Not a standard navigation, but very easy to get used to.

Jonas Valtysson

jonasval

A very basic way to show your work, but it’s clear and fast.

And offcourse there’s behance.net, a network for creatives where you can upload your portfolio in a very easy to use environment. “In Behance we believe that you don’t have to be a computer maverick to have your creative work on the net.”

11.07.09
Timo Kuilder
Comments

Jankees van Woezik 9 months ago

I like the style, clean..

It could be cool if the background color adapts to the item you are viewing.. (like Cartelle)

Reinier 9 months ago

Looks crispy and clean, I like it. Some thoughts about the sketches.

I’m not really fond about how the navigation bar is ‘blended’ with the logo; personally I think you don’t need the white navigation bar at all. The menu items and your email address can be aligned on the right so the logo stands on its own (because it rocks, and it deserves some free space).

I think the navigation for the case images should be a bit more accentuated too, maybe by bringing it a bit more into the portfolio case area instead of the upper left and right corners.

Overall I like the font you’re using for the UI. add sound effects and slick flash animations and it will be a legendary new portfolio.

To end: some outstanding portfolios I think worth mentioning too are http://www.balhar.com, http://www.erikotten.nl, 32round.com and jkaczmarek.com amongst others (http://delicious.com/reinierkuipers/portfolio)

Timo Kuilder 9 months ago

@ Reinier, Thanks! I really like erikotten.nl (the ropes respond cool).

I will try your suggestion to get rid of the white bar. I want to eliminate all the stuff I don’t need.

I think the arrows (the navigation) works well in the upper left and right corners. Because they don’t interrupt with the project image. And they amplify the diagonal lines.

Reinier Kuipers 9 months ago

About the arrows: I think you’re right. If you at least animate them with Flash when they show up.

On another note: Add this line to the pack.css so the paragraphs in the comments are displayed correctly. .commentContainer .blogsComment .post p {margin: 0 0 10px 0}.

Cheers

Post a comment

Name
E-mail
Website
Comment