I’m Chanpory, and this is my site on how to live and work better as a designer.

You should follow me on Twitter here.

For more, check out the archives.

I’m not a fan of online portfolios. Why? Because most sites bury the actual work under layers of splash pages, flash animations, clunky page navigation, and jargony copywriting.

These gimmicks show technical prowess and cleverness but reek of overcompensation. When designing your next online portfolio, don’t get too fancy. Just get to the point, and show your goods up front.

Here are 10 portfolios that do just that. Instead of a traditional slideshow or storybook format, they collect all the work on one page. Simple, straightforward, and much more impressive.

1. Kind Company

portfolio_01.jpg

2. Edwin Tofslie

portfolio_02.jpg

3. Seth Weisfeld

portfolio_03.jpg

4. Commonbrand

portfolio_04.jpg

5. OkapiStudio

portfolio_05.jpg

6. Allen Antonelli

portfolio_06.jpg

7. Jon Quirindongo

portfolio_07.jpg

8. Robert Scully

portfolio_08.jpg

9. Serial Cut

portfolio_09.jpg

10. Spike Press

portfolio_10.jpg

Many of these examples came from One Page Folios.

Inspired by this post? Please bookmark it in del.icio.us. Thanks!

22 Comments

  • JAbbott

    gravatarJul 25, 2007
    7:49 am

    Great roundup. Thanks. This make me want to rework the simple link list in my portfolio.

  • Lauren Muney

    gravatarJul 25, 2007
    8:15 am

    GREAT complilation – and wonderful designers. (Btw, I enjoy your blog)

  • Joshua Kaufman

    gravatarJul 25, 2007
    10:23 am

    Thanks for the roundup, Champory. It’s always nice to see how designers present their work. Makes me think about my own portfolio and how it can be improved. Does anyone know of any sites that are dedicated to peer reviews of portfolios?

  • robb agrayspace

    gravatarJul 25, 2007
    11:53 am

    Hello first time commenter! I love the blog Chanpory. It’s quickly become something I check every week.

    Great round up of sites too.

    I have a couple of thoughts to add.

    I think a lot about portfolio websites. I think its become an indispensable element in the designers promotional toolbox. Gone are the days of the book, being number 1. No designer should be without a website.

    And I’ll agree with you that most are over-designed and terrible experiences to go through. But I wouldn’t fault flash. I fault bad design

    One page folios are all the rage these days, cause they are so simple and easy to navigate. That’s because there usually isn’t any navigation. Which I somewhat consider cheating in interactive design.

    The point of having multiple pages on a web site is to break apart the page load across multiple loads and to let the user determine what they want to see. Interactive design is all about how the designer does this without making the experience feel cumbersome and broken. Sure we live in an age of broadband, but these one pagers can still bog down a browser with too many beautiful images.

    Now without too much shameless self promotion, I present my flash based portfolio that makes everything available in a super convenient one click.

    http://www.thisisnotgraphicdesign.com

    Love to hear thoughts.

  • nessahead

    gravatarJul 25, 2007
    3:04 pm

    Robb: The fact that turning off the sound doesn’t turn off all sounds makes your site unusable to me. Sorry.

  • gtnconcept

    gravatarJul 25, 2007
    7:32 pm

    @Robb: Just a head-up – you might want to fix up your HTML. The window title is currently “Untitled Document”.

  • Chanpory

    gravatarJul 25, 2007
    8:52 pm

    @Robb, totally agree with you on the issue of pageload and pacing. However, with good image optimization, one-page portfolios can load quite quickly. It’s more of a design challenge to layout lots of information on one page than it is to spread it out liberally.

    But more importantly, I’m not looking to get entertained by a portfolio site. Sounds, extraneous transitions, and clever navigation just frustrate me to no end.

    I hate to be a curmudgeon, but I just want to see the work without the fuss. I don’t have time to sit down and click or “explore” a portfolio. By the third or fourth click, I’ve already turned to something else.

    With your portfolio, I’d consider the amount of space your navigation takes up in relation to images of your work. Right now, your double navigation system occupies the majority of the screen real-estate. It upstages and overshadows your own work. Don’t be shy, let your work shine!

  • raymond_lee

    gravatarJul 25, 2007
    10:10 pm

    @robb – you may want to add a sort of tennis/arcade game while your flash site is loading, it’s kinda boring to wait for your whole flash to load. what do you think?

  • sameer

    gravatarJul 25, 2007
    10:33 pm

    kool designs, thankx for this article, loved it.

  • Kirk Roberts

    gravatarJul 26, 2007
    3:34 pm

    One issue I see a lot is bandwidth. There are still people on slow connections, and even fast connections slow down periodically. Right now I’m on a sluggish hotel wi-fi network and it’s torturous. It doesn’t matter how simple your interface is if it isn’t accessible without a 2.4MB download. And as Steve Krug might say, there isn’t an inverse relationship between number of clicks and quality of interaction design.

    One-page sites, even well-optimized, still take a large chunk of time to download everything, including content the user might not want to see. On top of that the loading is usually haphazard, so what is above the fold might be last to appear. Frustrating.

    I personally like being able to get in a portfolio and have a simple “next” button to click through all the work, presented one at a time. That being said, I appreciate the round up of one-pagers, thanks!

  • robb agrayspace

    gravatarJul 26, 2007
    4:14 pm

    Thanks for everyones comments! Some interesting points were made and because they touch on aspects of interaction design in general, I thought I might respond.

    @ nesshead. The only sound that I made mutable through the interface was the music because that was the only sound that I felt was optional to the interface. All other sounds are user activated and fairly integral to the interface design of the site. If a user truly NEEDS a soundless experience, they have the freedom to browse the site with their sound off. I think we too often don’t see sound as an integral part of interaction design. To call the site unusable because of that I think is an overstatement.

    @gtnconcept. Thanks for catching that error. Its amazing how much I have come to ignore page titles.

    @ Raymond_lee This is where I knew I’d get called out. I first lambasted one page folios for requiring too much page load, and then presented my site which is really no different. Ideally if I were a better programmer and had more time on my hands, I would surely break the site up so that every project has its own mini load. That would be the most efficient and ideal experience.

    @ Chanpory. You bring some interesting points that I’d like to respond to, not in defense but because they touch on aspects of interactive design that are worth discussing. I respect your opinion and thought we might discuss these things further.

    You said: “It’s more of a design challenge to layout lots of information on one page than it is to spread it out liberally.”

    While I agree that designing a one page site that holds a significant amount of content like a portfolio is a challenge, I would hardly say its more difficult.

    It has its merit and place, but I believe it’s a serious underuse of the medium of the web. The web is based on hyperlinking content. This allows the possibility of accessing content in more than one direction and from more than one point of entry. It’s what makes our experience on the web truly non-linear. The quality of the design that addresses this key nature of interactive design is what makes truly great interaction design.

    I feel the one page folios like this cheat the nature of the web. It strikes me as the way a print designer would design a web page. It is all about layout and zero about interactivity. Similar to how, designers still use tiny type on the web (yes I am guilty too but recovering) or how we used to overuse graphic text as a way to control typography according to old rules designed in a print world. We need to embrace the medium fully. Which is what web 2.0 is really all about.

    You said: “I don’t have time to sit down and click or –œexplore– a portfolio. By the third or fourth click, I’ve already turned to something else.”

    While I whole heartedly agree a site design based on “narrative” and “exploring” really tests my patience as well, I am a little shocked that we have become so impatient that the act of clicking has become this point of attrition on our attention. Its a mouse, and we use it to click. Let us all come to terms with that.

    Thank god technologies like AJAX are liberating the click from the demands the page load puts on our delicate attentions.

    Last point. You said: “I’d consider the amount of space your navigation takes up in relation to images of your work. Right now, your double navigation system occupies the majority of the screen real-estate. It upstages and overshadows your own work. Don’t be shy, let your work shine!”

    You are insinuating that the navigation on my site is redundant and unneccessary. The reason I don’t believe this to be true, is because navigation systems like the one on my site and other ones like it provide vital information in their own right that only add to whole picture I am presenting about my design experience and work.

    The top navigation gives the user an instant picture of how many disciplines I am experienced in and the general breadth of experience in each discipline. That is vital information.

    The navigation on the left acts also as a defacto client list. The user can instantly see and recognize the industries and names of companies I have worked for. That too is vital information.

    Sure this double navigation impedes on the screen real estate and it may not be optimized the best it could be but I see as a net-benefit cost as it provides vital information about my experience and encourages users to navigate to the work from multiple entry points.

    and lastly why should designers not see their portfolio as another example of ones work as a designer. The quality of the portfolios design should not be overlooked. :)


    All in all, I feel lame and narcissistic having gone on-and-on about my own site. By no means is it the end all be all, but far from it. I still feel one page folios have their place, even though I still feel cheated when I encounter another one.

    Thanks for the forum Chanpory. and thanks for the comments y’all.

  • George

    gravatarJul 26, 2007
    10:24 pm

    With all those AIGA portfolio reviews under your belt Chanpory, I’d be interested in knowing why these portfolios are merit-worthy. Yes, they’re single pages and all that, but why these specific sites? Without some justification, surely this is just another thumbnail beauty pageant, no?

  • Chanpory

    gravatarJul 26, 2007
    11:05 pm

    George, good question. I chose these examples because I wanted to show a variety of ways to layout a one-page portfolio. So the post was an endorsement of the layout options, not the work itself.

    The work is indeed pageanty (beautiful imagery without explicitly showing design process and thinking), but I think the layouts can be provide the basis for richer portfolios that show greater depth in thinking. For example, I’d love to have seen the portfolios include early explorations, sketches, and rejected design directions. Unfortunately, I could not find one good example.

    Most of the work above focus on visual design, illustration, and photography. Ironically, it was difficult to find good examples of interaction design portfolios. Can you think of any?

  • Chanpory

    gravatarJul 26, 2007
    11:08 pm

    P.S. If I had to pick a favorite from the portfolios above, I’d choose Serial Cut.

  • Mike

    gravatarJul 30, 2007
    1:57 am

    This one is great, too: http://www.wanderlust4040.com

  • Chase Saunders

    gravatarJul 31, 2007
    5:20 am

    Robb, with respect the flash site is nice but the point (successfully) made by this post is that it’s more effective to just “out with it”.

    I think that your assumption that interactivity is some kind of inherent good is just wrong… and I had to be convinced of that myself, so don’t think I’m getting all high and mighty. You say, “One page folios are all the rage these days, cause they are so simple and easy to navigate. … Which I somewhat consider cheating in interactive design… Interactive design is all about how the designer does this without making the experience feel cumbersome and broken.”

    Unfortunately, this bad assumption caused you to do a lot of work to underperform the sites featured here. Instead of arguing agsint the assumption myself, I want to point you (and everyone else) to the article that opened my eyes on this subject:

    Magic Ink – Information Software and the Graphical Interface (http://worrydream.com/MagicInk/)

    As a lifelong software developer and a computer scientist, it was a hard pill to swallow. But it changed my life and I am now producing much better interfaces with a different assumption: interactivity is a costly means to an end, something to be minimized within a given design.

    Cheers… hope this was not a flame. You have a great eye and obviously some flash skilz too!

  • Kirk Roberts

    gravatarJul 31, 2007
    10:16 pm

    Thanks, Chase, for recommending the Magic Ink article. Very interesting!

    What doesn’t seem to be accounted for (beside my beloved page weight/bandwidth concern) is that browser size is limited and one page sites inevitably require a lot of scrolling. This is a type of interaction, so the question has to be asked: is scrolling through a mile-high page really a better experience than clicking among pages?

  • Chase Saunders

    gravatarAug 1, 2007
    5:19 am

    Kirk, as far as scrolling it’s a concern but it doesn’t change the “interactivity as a cost” theory. If we look at interactivity as inherently good, we put everything on its own page, because “it’s fun to click on things” (or whatever). If we think of interactivity as a cost, we start to consider that it’s worth breaking up a long page, but we’re still trying to minimize the clicking (link-following), and to a lesser degree the scrolling.

    Yes, you correctly point out that scrolling is a form of interactivity. IMO it “costs less” than clicking to a different page because there is less mental overhead in doing so. But that’s a side issue, because even if we place scrolling and clicking on equal footing, the solution would be to use the “get right to the point” strategy featured on this page and then implement paging only when no more samples will fit on a single page. This is a far cry from putting everything sanmple on it’s own page. Or perhaps Flash could be used to implement edge-based scrolling so that no clicking is required to scroll — here the interactive programming would be more parsimonious, not a flagrant display of programming.

    Nothing is black and white in this model, of course. Even with a design like the one above, we may still want to have an extended details page available for users who click on any given sample. But the initial summary page would clearly do a better job of informating the user and taking advantage of her built–in visual hardware than a bunch of tiny boxes or text links where her only choice is to get overhwhelming detail based on guesswork, one item at a time.

    I previously designed a portfolio for my company that isn’t much better. The user is presented with a list of categories, and then a list of summaries with pictures, and then can . It’s slightly better than the the “tiny boxes and cryptic links” approach, but only by a hair.

    Chase

  • Kirk Roberts

    gravatarAug 1, 2007
    8:04 am

    I’m finding this discussion very intriguing.

    After reading the Magic Ink article I completely buy into the “interactivity as a cost” theory. The Amazon re-design was a perfect example, made much better by providing more (pertinent and designed) information on the overview page.

    I guess I’m still not sold on clicking being an inherently less desirable form of interactivity than scrolling by scrollbar, mouse position, or whatever. I would say “thinking” and “finding” are the activities to be avoided (“Don’t Make Me Think” by Steve Krug made quite an impression on me). Scrolling seems better for browsing, clicking better for deciding. In the portfolio setting it seems ideal to have a “next” button that does not move from page to page. The user can park their mouse and click, click, click without taking their eyes off the content. (As in, “show me the next project… now the next”, compared to scrolling, “what project do I want to look at?” and having to fine-tune its position in the window to get everything in view.) Even better would be adding keyboard support to arrow, arrow, arrow (forward and backward).

    Scrolling through a portfolio can be nice, but the execution is key. There has to be a middle ground between tiny thumbnails and images that barely fit in my laptop-sized browser. I’m sure some of the examples pull that off quite well, but I got tired of waiting for them to load on my slow connection. ;-)

    At the risk of sounding argumentative, if the goal is to “get right to the point” which method does that better: a practically bottomless page filled with an entire portfolio’s worth of large images and text, or a series of pages that allow the user to select their area of interest? I guess that depends on the user. As a user I would generally vote for the latter. No surprise there, perhaps.

    Chase, you’re right on about nothing being black and white in this discussion (is anything ever?). I like that the one-page approach is being tested; models need to be challenged. My opinion is that the one-page model is refreshing as a change of pace, but it is just as easily abused as any other method. I would love to see the principles of the one-page combined with a multi-page site, all in the spirit of improving the experience. Maybe if everyone reads the Magic Ink article we’ll be on our way.

    Thanks for your insights!

  • robb agrayspace

    gravatarAug 1, 2007
    8:38 am

    This discussion is definitely becoming what threads like these are meant to be. Critical, respectful and enlightening. No flames.

    Chase That is an extremely intriguing article. Thanks very much for sharing it. I am only half way through it but already there is much to think about.

    I very much heed the warning about presuming “interactivity” as inherently good. Nothing should be presumed. To quote Ayn Rand, we should “never stop thinking.”

    I find the comment “we put everything on its own page, because ‘it’s fun to click on things'” to be unfairly simplifying the opposing viewpoint so that it is easier to deflate.

    What all interactive designers should be trying to is to be dividing content along the lines that best aid the users desired learning curve. Establishing a hierarchy of information design and navigation that best supports a users need to browse, decide and learn.

    I am still not convinced that preloaded or dynamically loaded click interfaces like dynamic flash or AJAX have the same “high cost” as traditional page load clicks. And I still think its a highly subjective position to place arbitrary values on scrolling over clicking.

    In fact upon reexamination, I find most of the folios, whether one- or multi- page (mine included), to be doing as poor a job of giving users what they want to “learn” as the well played Amazon search results example in Magic Ink.

    In a way, I can now recognize the under-performance of a “click-and-dive-in-one-at-a-time” scenario such as my own, in that in somewhat fails to visually aid a visitors preference to learn the most primary of information very rapidly. I still believe it makes it easier than most and provides the benefits of control and pacing that the one-pagers do not. There is an affordance to the medium of interactive design that is underused by designs that would perform equally well in print or on the screen.

    As Kirk said, its good that new models are being tested and discussed critically. It’s not black and white or good and bad. It is very much a gradient of gray.

    My brain is already buzzing on ideas of a hybrid of all the principles at play.

    thanks for all your thoughts

  • joqui [lowres]

    gravatarAug 6, 2007
    12:34 pm

    I’m flattered you used my portfolio… thanks!

  • John Simpson

    gravatarSep 16, 2008
    10:33 pm

    Yep, great roundup. I’m still trying to determine what you need to provide in a portfolio/personal site to make it time-worthy. And not piss people off (designers are so easy to piss off — client’s fault, not ours of course).

    My latest effort: http://www.ai2.com.au