Curated by Carsonified

Topics

Learn with Treehouse

Accessibility, CSS3, Design, Django, HTML & CSS, HTML5, JavaScript, jQuery, NoSQL, PHP, Responsive Web Design, Ruby, Ruby on Rails, Tools, UX, Version Control, WordPress, iOS and more

Article 71

How to Design a Portfolio Site

By

13 July 2009 | Category: Uncategorized

Elliot showing a sketch of a wireframe

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.

Follow @thinkvitamin on Twitter Please check out Treehouse

Other Posts You Might Find Interesting

  • Sorry - No Related Posts Found

Comments

  • http://elliotjaystocks.com/blog/how-to-design-a-portfolio-site-screencast-series/ Elliot Jay Stocks » ‘How to design a portfolio site’ screencast series

    [...] Part 1 [...]

  • http://www.webcoursesbangkok.com Carl – Web Courses Bangkok Instructor

    nice, looking forward to part two :)

  • http://www.thelongrun.de Stefan

    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?

  • http://www.paultimney.com Paul Timney

    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

  • Simon the saucererer

    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.

  • http://www.netcrema.com/?p=7342 Carsonified » How to Design a Portfolio Site « Netcrema – creme de la social news via digg + delicious + stumpleupon + reddit

    [...] Carsonified » How to Design a Portfolio Sitecarsonified.com [...]

  • http://popurls.com/pop popurls.com // popular today

    popurls.com // popular today…

    story has entered the popular today section on popurls.com…

  • http://wp-popular.com/popular-word-press-websites/carsonified-%c2%bb-how-to-design-a-portfolio-site/ Carsonified » How to Design a Portfolio Site

    [...] the original here: Carsonified » How to Design a Portfolio Site Tags: inspiration – portfolio – webdev Comments0 Leave a Reply Click here to cancel [...]

  • http://caintechnews.wordpress.com/2009/07/13/all-teched-up/ All Teched up « Caintech.co.uk

    [...] AIR Applications for Designers and Developers Webd Detexify LaTeX handwritten symbol recognition Carsonified How to Design a Portfolio Site Spicy, Citrusy Black Beans Recipe Simply Recipes Twitter is not for teens, Morgan Stanley told by [...]

  • http://www.carronmedia.com Ian Harris

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

    Do you have a downloaded version available??

    Thanks!!

  • http://www.robinsblog.com/04282009/converting-a-photoshop-psd-file-to-and-xhtml-css-web-site/ Converting a Photoshop PSD File to an XHTML & CSS Web Site – Creating Mockups | Resources for Web Development Students @ Robin’s Blog

    [...] Edit 7/13/09 – How to Design a Portfolio Site [...]

  • Stephen

    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.

  • Ryan Carson

    Hey Ian,

    Are you still having trouble? If so, please let me know and I’ll look into it.

    Best,
    Ryan

  • http://www.kygeek.com/daily-links/daily-links-for-tuesday-july-14th-2009 Daily Links for Tuesday, July 14th, 2009

    [...] Carsonified » How to Design a Portfolio Site [...]

  • Greg

    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

  • http://www.positivewebdesign.net Mark

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

    Can’t wait for part 2!

  • http://www.30THREEdesign.com Chad

    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.

  • http://www.carronmedia.com Ian Harris

    Hi Ryan,

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

    Thanks!

  • James

    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

  • http://lazydada.com Gabriel de Kadt

    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.

  • Craig

    Cant wait for ep2

  • http://elliotjaystocks.com Elliot Jay Stocks

    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.

  • http://thisiswilson.com Michael

    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.

  • http://www.studio7designs.com Aran Down

    Thank you for the fantastic video!

    Squared Eye is a fantastic site and brand.

  • http://www.sergiodesigntrends.com/?p=334 Segunda Semana dos Melhores Artigos para Designers | Sérgio Design Trends

    [...] Como fazer um Portfolio [...]

  • http://www.sarah-neuber.de Sarah Neuber

    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

  • http://www.squico.com/2009/07/19/carsonified-%c2%bb-how-to-design-a-portfolio-site/ Carsonified » How to Design a Portfolio Site | Squico

    [...] In: Design inspiration 19 Jul 2009 Go to Source [...]

  • http://behance.net/rsatyarthi Rajesh Satyarthi

    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?”

  • http://carsonified.com/blog/design/how-to-design-a-portfolio-site-part-2/ Carsonified » How to Design a Portfolio Site, Part 2

    [...] This is the second video in our two-part series focusing on how to design a killer portfolio site (feel free to check out Part One). [...]

  • http://elliotjaystocks.com Elliot Jay Stocks

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

  • http://blog.graphicriver.net/portfolio/how-to-redesign-your-portfolio/ The River Current – How to Redesign Your Portfolio

    [...] How to Design a Portfolio Site [...]

  • http://www.fran6art.com/videos/webdesign-creer-son-portfolio-selon-elliot-jay-stocks/ Webdesign: créer son portfolio selon Elliot Jay Stocks

    [...] son workshop pour apprendre à mieux créer son portfolio. Aujourd’hui, Elliot propose un screencast en deux parties sur le sujet et je peux vous dire que c’est extrêmement intéressant et [...]

  • James

    It stops after two minutes. can something be done?

  • BebopDesigner

    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.

  • Ryan Carson

    Hey James,

    Are you still having trouble? Please let me know on twitter, if you are. I’m @ryancarson.

    Best,
    Ryan

  • http://www.kopfkribbeln.eu/blog/?p=677 kopfkribbeln webdesign-blog » Wie erstellt man ein Portfolio-Website

    [...] Jay Stocks zeigt in einem Video-Tutorial wie man vorgehen muss, wenn man eine Portfolio-Website entwirft. Von der Planung bis zum [...]

  • http://www.infinetcreative.com christina erl daniels

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

  • Randy Devost

    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.

  • http://jarrydcrawford.com/ Jarryd

    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!

  • http://dominateprofit.com carolnunggu

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

  • http://lesliemontenegro.com Leslie

    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!

  • http://www.bykrishmandal.com krishmandal

    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.

  • http://inspiredology.com/friday-fix-july-27-31/ Friday Fix July 27 – 31 | Inspiredology

    [...] to Design a Portfolio Site Part 1 & 2- Elliot Jay Stocks Elliot takes you on his process for redesigning his portfolio [...]

  • http://www.limespace.de/2009/07/25/die-beliebten-links-der-woche/ LimeSpace – IT » Die beliebten Links der Woche

    [...] Think Vitamin Blog wird Step by Step das Erstellen einer schönen Portfolio -Page [...]

  • Martin

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

  • Ryan Carson

    Hey Martin – sorry about that. What’s the trouble?

  • http://www.shikebali.co.cc Shikeb Ali

    Hey Ryan,

    Same problem here, video is not working.

  • kang

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

  • http://ehab.cc/2009/08/02/morning-inspiration/ Morning Inspiration

    [...] great article from Carsonified. Also check out their “How to design a portfolio site” by the ever loving Elliot Jay [...]

  • http://michaeldoyle.eu/blog/?p=239 Michael Doyle’s Blog » Web Design – Creating A Portfolio Site
  • http://www.scottefranson.com/blogs/bySkought/?p=26 by Skought » Blog Archive » I Think I See Light

    [...] Carsonified who had a guest screen cast from Elliot Jay Stocks How to Design a Portfolio Site, Part 1 & Part 2. [...]

  • http://wpcrowd.com/portfolio-themes/portfolio-themes-in-wordpress-examples-and-tutorials/ Portfolio Themes in WordPress, Examples and Tutorials « WPCrowd

    [...] tutorial I am going to show you how to create a portfolio layout with a wooden background. 2. How to Design a Portfolio Site If you’re a freelance designer, you know how important your portfolio site is to your business. [...]

  • http://tomleo.com Tom

    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!

  • http://devblab.net/crea-tu-portafolio-en-wordpress-themes-y-tutoriales/ Crea tu Portafolio en Wordpress – Themes y Tutoriales | DevBlab

    [...] Como Diseñar un Portafolio:  Para lo que trabajamos como diseñadores, o los que somos diseñadores sabemos de la importancia que tiene el tener un buen portafolio y aqui nos muestran como crear uno. [...]

  • http://www.scottefranson.com/blogs/resources/?p=12 resources-by-skought » Blog Archive » How to Design a Portfolio Site

    [...] portfolio from Elliot Jay Stocks, a leading web designer from the UK. Thanks to our friends at Carsonified. If you’re a freelance designer, you know how important your portfolio site is to your business. [...]

  • http://designdroplets.com/link-love/august-17-2009/ Link Love // Industrial Design Magazine for Australasia // Design Droplets

    [...] How to Design a portfolio site – A great video by Elliot Jay Stocks, on Carsonified about how to put together an online folio website. [...]

  • http://www.designloft.org Designloft

    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.

  • http://www.mattpealingdesign.co.uk/ Matt

    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!?

  • http://gastonfigueroa.com/review-of-sexy-web-design Review of Sexy Web Design | Gaston Figueroa

    [...] by Ryan Taylor on his series Please start from the beginning… and also has a series on How to Design a Portfolio Site at the Carsonified website.  For those of you who are WordPress fans, Elliot is the mastermind [...]

  • http://foreignexchangebroker.net/forex-megadroid/ Mr.Stopi

    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

  • jacob

    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!

  • http://mini-site-guru.com Janan

    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. :)

  • Pawel

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

  • http://www.scottefranson.com/blogs/Art337-F09/day-16-4-november-2009 Interaction Design » Blog Archive » Day 16 | 4 November 2009

    [...] a Home page. About page, Blog, and Portfolio (contents, outer page and inner page watch this video for more [...]

  • jose a creative

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

    http://www.joseacreative.com/

  • http://www.coolsitegraphics.com Minisite Designer

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

  • aurel

    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

  • http://www.photobuzz.org Jen Pruett

    Great ideas and many inspirations, like it Jen

  • http://designsncodes.com Mukarram

    Excellent post :)

    Thanks elliot ;)

  • Mike

    Thanks Elliot:)

  • Pp Khan

    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

Badges for Treehouse

Treehouse

Learn iOS, Rails, CSS3, jQuery, Node.js, HTML5, UX and more in less than 8 minutes per day. New videos added regularly. Sign up today and get a free Web Design Toolkit.

Ads Via The Deck

Think Vitamin Radio
Episode #34: Amazon Fire and Responsive Roundtable

Check out our bi-weekly radio show. Covering the hot topics on the web.

Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.

Download Podcast as mp3

Advisory Board

The Think Vitamin Advisory Board in place make sure that you receive the best content possible.