LearnHow to Design a Portfolio Site

Treehouse
writes on July 13, 2009

If you’re a freelance designer, you know how important your portfolio site is to your business. Therefore, we decided to commission Elliot Jay Stocks, a well-known web designer, to film two 30-minute screen-casts on “How to Design a Portfolio Site.”

In part one Elliot gets you started by covering these points …

  1. The Three Key Concepts that make a portfolio site
  2. Nine amazing portfolio sites to learn from
  3. How to build great case studies to reinforce your expertise
  4. The Ultimate Portfolio Checklist
  5. How to add visual flair in Photoshop during the design phase
  6. How to use Narrative Theory to strengthen your portfolio

In Part II, he’ll be jumping into some HTML and CSS to show you how to build your portfolio, and integrate it into a content management system.

71 Responses to “How to Design a Portfolio Site”

  1. download clip x 100m movie clips sexy free
    X porn movie clips porn clips trailers star students download free porn clips …
    XxX Seed Picz Free Clip xxx Download Now XxX

    download clip

    link

    =======>> http://cmthai.homeip.net

  2. Thanks Elliot:)

  3. Excellent post 🙂

    Thanks elliot 😉

  4. Great ideas and many inspirations, like it Jen

  5. hi

    this is not the first time i refer to these 2 videos (part 1 + 2), and ye they are realy nice (more as an inspire thing)

    i hope someone could help me with this:

    as an unexperienced web designer (with no real clients) i think case studies of my work, would be the right way to prove that i know what i am doing, by giving my reasons for that i have designed)

    is there any article anywhere, showing how to write a case studies, even though i have been reading different case studies, i tried to find an how-to (by searching in google), but i can’t find anything.

    plus – this narative theory thing, is a fantastic idea (eventhough is challenging to apply (to me anyway)

    thanks for the video

  6. Very cool tutorial, I learnt a lot! Will come in handy for my future projects. Thanks for sharing..

  7. jose a creative on December 16, 2009 at 11:30 am said:

    I’m working on my portfolio, I would like to criticize to improve.

    http://www.joseacreative.com/

  8. Hi Man. I’m from Poland. Nice Job here. I enjoyed watching it and learn some stuff! Thanks:)

  9. Excellent video Elliot!

    I’ve found that a simple, clean portfolio converts a visitor better than a flashy, busy portfolio.. i just wanted to add. 🙂

  10. I find it strange, that this article is by a designer, who in my opinion (and that of many others) has an extremely ugly and poorly designed portfolio!

  11. Your video is great, I just want to add:
    IF you want to have a good portfolio you should use plain and good-looking graphics on your site

  12. This video won’t work properly for me for some reason so I can’t watch it 🙁
    It’s really jerky, even when it’s loaded most of the video. The other videos dont do this though which is wierd!?

  13. Take a look also @ this portfolio site :
    http://www.krembo99.com
    Interesting example for large scale portfolio, creates nice effect.
    Your comment is awaiting moderation.

  14. I really like the way you organize the various pages/elements in photoshop with folders.

    I also really like the idea about designing in the browser. I usually tend to create an entire design in Photoshop then try my hardest to make it looks as much like the static design as possible. but I think it is a great idea to not stress as much over things like typography which can vary a lot depending on the browser/os/ect.

    This is extremely helpful to me, so thanks for doing this!

  15. Its downloading something but the video doesn’t play – just starts/stops for a few frames in the beginning.
    Why not youtube it?

  16. Hey Ryan,

    Same problem here, video is not working.

  17. Martin on July 28, 2009 at 8:57 pm said:

    I’m having issues watching this from vimeo for some reason. Is there a downloadable version or even a transcript available?

  18. I don’t want to poo-poo anyone, because there was some considerable work done here to present the techniques.

    However, I have to say, if you’re a designer or work on websites in anyway, then you should not need a lot of the information presented here.

    There’s something called IA. Information Architecture, and if you design websites for a living (we assume you are, since you’re building a portfolio) you should have a very good grasp of IA, branding, UX, and all the other things that go into web design.

    The thing that makes me have to write anything at all here is the idea of the “outer” page, and “inner pages” discussion. This is a normal, very typical way of organizing information. If you use a CMS, you understand the concept and should be able to apply it without needing any of this.

    That said, I don’t want to throw tomatoes, but still I don’t get any real information out of this.

  19. This was absolutely great and very helpful! I am an experienced web designer, but it’s always nice to see how another web designer especially as great as Elliot does his research and designs his own site. Thanks for the inspiration I took a lot from this especially since I’m in the midst of redesigning my own portfolio. Great job Elliot!

  20. That’s great post… wonderful… I like your posting….

  21. Very nice video tut, Elliot. I also purchased your book Sexy Web Design, and I must say am quite impressed. Coming from the development side of things, it’s really helped me feel more to designing. Now all I have to do is get to doing my own portfolio (and not let my girlfriend run rampart on it >_> ).

    Cheers!

  22. Randy Devost on July 22, 2009 at 2:54 pm said:

    Thank you for sharing your process with us online Elliot. It’s always comforting to see how someone else takes it from start to finish.

  23. Brilliant advice for someone in the middle of her first web portfolio design – terribly overwhelming but this was fantastic!

  24. BebopDesigner on July 20, 2009 at 5:42 pm said:

    This was really really helpful. Love the “behind the scenes” approach. The way you care for detail is beyond brilliant! Thanks for sharing so much.

  25. It stops after two minutes. can something be done?

  26. @ Rajesh: This is actually answered in part 2, which has now been published. I hope that helps! 🙂

  27. I’ve a question about grid using for portfolio page. If i am not mistaking its a 16 column grid with 20px margin (gutter). But some of the text like “my work… consultancy.” going of the grid and overlapping 20px margin.

    My question is “Did you plan to use append/prepend classes to code the grid?”

  28. Really enjoyed watching this.
    Especially the way you took us through some of your decision making.
    Glad not to be the only one not finishing every little detail in Photoshop 😉
    Thank you for taking the time to prepare this video and looking forward to part 2

  29. Thank you for the fantastic video!

    Squared Eye is a fantastic site and brand.

  30. THESE COMMENT BOXES ARE MAKING ME DIZZY.

    But your screen-cast incidentally, helped me IMMENSELY with thinking outside this neat little box I’ve been contained in. You are truly a fantastic inspiration and your work is fantastic, however your website does not reflect your work or your research, I found.

    Not hating, just being truthful. If you want more feedback as to why I think that, feel free to e-mail me, I’m always free for an unbiased critique.

    Ps: My portfolio sucks, I know, I haven’t touched it for a long time because I have no need for it right now, and I’m definitely not saying I’m a better designer, because I know I am not.

  31. Thanks for leaving your feedback on the screencast, guys. I’m really happy that the majority of you enjoyed it!

    @ Stephen: There’s no difference, really; just that case studies are the perfect place to show off the behind-the-scenes stuff. 🙂

    And to those who didn’t enjoy it…

    @ Simon the saucererer: It’s aimed at designers at various stages. If you’re an absolute beginner, hopefully you should find some solid basics in there to get you started in the right direction; if you’re an industry pro, hopefully you should see that there are still new ways of looking at old problems and you’ll be able to take something away from the way that other designers are approaching portfolio design. It’s quite obvious that even seasoned pros are capable of putting out ineffective portfolio sites (just look around the web), and so I tried to aim this at everybody.

    @ James: Who would you call “a web designer’s web designer?” Seriously; I’d love to hear your suggestions.

  32. Cant wait for ep2

  33. Elliot J Rocks

    (er – I didn’t actually stay that.)

    @Mr Paul Timney – that’s what I feel too: privileged, basically. I can’t get out to see the big events but this low-key but HIGH-quality screen cast is a terrific. (Lots of the video from the big conferences I’ve seen in the last couple of days (me-time) suffers from terrible sound production/acoustics/… )

    Back to the screen cast in hand – you blow the grid beautifully. I don’t remember your phrase exactly, dynamic something-or-other – made me think of bleeding print. As in bleeding images in print work. A good point philosophically laid.

    You lost me with reference to ‘strucuture’ though (your old keynote slide). Back in my print production days I ran a “Business Opportunties” section for a couple of years before anyone noticed. I blushed.

    Where’s part two already? I’m looking forward to seeing the guts/WordPress part. Particularly as I’m between Portfolios right now…

    You’re a clever lad Elliot – you’ll go far.

  34. Hi there, i must say i find all this fanboy stuff a bit boring, this piece is at best boring and in no way helpful, i would advise people to look elsewhere and ideally at someone who i is more than just a fanboys wet dream, a web designers web designer. Please delete this video.

    Best;

    James

  35. Hi Ryan,

    All working now, thanks for checking. Looking forward to part 2.

    Thanks!

  36. Can’t wait for the second episode! It always helps to hear how others work through designs, really gets me inspired. Thanks to Elliot and Carsonified for putting this together.

  37. Really really interesting video. Was great to hear how a great designer like Elliot works.

    Can’t wait for part 2!

  38. Enjoyed the presentation.

    I’ve been in the process of prepping for the process of redesigning my folio, this was a nice piece of inspiration.

    Cheers,
    -g

  39. Stephen on July 14, 2009 at 3:58 am said:

    Hello,
    thank you for this helpful Blog post.
    Whats the difference between the case study and a behind the scenes (bts) feature?
    Kind regards,
    steve.

  40. First bit looked good, but couldn’t get past 2 minutes for some reason.

    Do you have a downloaded version available??

    Thanks!!

  41. Simon the saucererer on July 13, 2009 at 10:56 am said:

    Who is this video aimed at?

    A freelance web designer should already know this stuff, if not then they should not be working freelance (unless they do it for free). A freelance designer with no web skills may want to start elsewhere but I suppose this may help.

  42. An excellent post, especially for people who find it difficult to attend events and therefore miss out on hearing highly skilled designers like Elliot talk about how they approach things.

    I’m feeling all inspired now….can’t wait for part 2.

    Thanks to Elliot and all at Carsonified for putting this together

  43. I liked your screen-cast!

    You showed some very good examples of well structured and beautiful portfolio sites, some i already knew, some that where new to me. But overall, i don’t feel like this is the right way creating a portfolio site. I mean, i think it’s the right way, but each time i consider some ideas on my new portfolio site, ponder about elements and structure, create something on a paper or in Photoshop, i realize – this has been done before.

    Any time i look into such a problem makes me distinguish between creative work for the web (where all the elements underly a structure that couldn’t be changed overall) and for print media (a lot more freedom in terms of design – you can’t just throw that paper away as you close a website in a second).

    Your technique is the right one to get good, maybe amazing and customer raising results, but i stop and hesitate if it isn’t just a copy of one brilliant move another designer made. Any hint for me?

Leave a Reply

You must be logged in to post a comment.

Want to learn more about Design?

Design refers to visuals, interaction flows, wireframes, branding, and more. Learn how to use good design to enhance your website, mobile app, or business.

Learn more