13 July 2009
How to Design a Portfolio Site
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 …
- The Three Key Concepts that make a portfolio site
- Nine amazing portfolio sites to learn from
- How to build great case studies to reinforce your expertise
- The Ultimate Portfolio Checklist
- How to add visual flair in Photoshop during the design phase
- 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.
Enjoy this article?
If you liked this article, feel free to re-tweet it to let others know. Thanks, we appreciate it :)
We love .net Magazine
We're big fans of .net so they've hooked us up with a rad deal: Save 50 percent on your subscription.
Elliot Jay Stocks » ‘How to design a portfolio site’ screencast series
# July 13, 2009 - 9:19 am
[...] Part 1 [...]
Carl - Web Courses Bangkok Instructor
# July 13, 2009 - 9:39 am
nice, looking forward to part two :)
Stefan
# July 13, 2009 - 9:41 am
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?
Paul Timney
# July 13, 2009 - 10:49 am
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
# July 13, 2009 - 10:56 am
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.
Carsonified » How to Design a Portfolio Site « Netcrema - creme de la social news via digg + delicious + stumpleupon + reddit
# July 13, 2009 - 11:17 am
[...] Carsonified » How to Design a Portfolio Sitecarsonified.com [...]
popurls.com // popular today
# July 13, 2009 - 11:20 am
popurls.com // popular today…
story has entered the popular today section on popurls.com…
Carsonified » How to Design a Portfolio Site
# July 13, 2009 - 1:35 pm
[...] the original here: Carsonified » How to Design a Portfolio Site Tags: inspiration – portfolio – webdev Comments0 Leave a Reply Click here to cancel [...]
All Teched up « Caintech.co.uk
# July 13, 2009 - 6:49 pm
[...] 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 [...]
Ian Harris
# July 13, 2009 - 8:33 pm
First bit looked good, but couldn’t get past 2 minutes for some reason.
Do you have a downloaded version available??
Thanks!!
Ryan Carson
# July 14, 2009 - 4:26 am
Hey Ian,
Are you still having trouble? If so, please let me know and I’ll look into it.
Best,
Ryan
Converting a Photoshop PSD File to an XHTML & CSS Web Site - Creating Mockups | Resources for Web Development Students @ Robin's Blog
# July 13, 2009 - 9:29 pm
[...] Edit 7/13/09 – How to Design a Portfolio Site [...]
Stephen
# July 14, 2009 - 3:58 am
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.
Daily Links for Tuesday, July 14th, 2009
# July 14, 2009 - 11:33 am
[...] Carsonified » How to Design a Portfolio Site [...]
Greg
# July 14, 2009 - 1:49 pm
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
Mark
# July 14, 2009 - 2:06 pm
Really really interesting video. Was great to hear how a great designer like Elliot works.
Can’t wait for part 2!
Chad
# July 14, 2009 - 6:37 pm
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.
Ian Harris
# July 14, 2009 - 8:03 pm
Hi Ryan,
All working now, thanks for checking. Looking forward to part 2.
Thanks!
James
# July 16, 2009 - 8:56 pm
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
Gabriel de Kadt
# July 16, 2009 - 9:38 pm
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
# July 16, 2009 - 11:43 pm
Cant wait for ep2
Elliot Jay Stocks
# July 17, 2009 - 11:34 am
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.
Michael
# July 17, 2009 - 6:32 pm
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.
Aran Down
# July 17, 2009 - 6:41 pm
Thank you for the fantastic video!
Squared Eye is a fantastic site and brand.
Segunda Semana dos Melhores Artigos para Designers | Sérgio Design Trends
# July 18, 2009 - 1:42 am
[...] Como fazer um Portfolio [...]
Sarah Neuber
# July 18, 2009 - 8:09 am
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
Carsonified » How to Design a Portfolio Site | Squico
# July 19, 2009 - 8:20 am
[...] In: Design inspiration 19 Jul 2009 Go to Source [...]
Rajesh Satyarthi
# July 20, 2009 - 4:57 am
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?”
Carsonified » How to Design a Portfolio Site, Part 2
# July 20, 2009 - 7:02 am
[...] 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). [...]
Elliot Jay Stocks
# July 20, 2009 - 8:24 am
@ Rajesh: This is actually answered in part 2, which has now been published. I hope that helps! :)
The River Current - How to Redesign Your Portfolio
# July 20, 2009 - 10:11 am
[...] How to Design a Portfolio Site [...]
Webdesign: créer son portfolio selon Elliot Jay Stocks
# July 20, 2009 - 12:45 pm
[...] 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
# July 20, 2009 - 3:07 pm
It stops after two minutes. can something be done?
Ryan Carson
# July 20, 2009 - 9:14 pm
Hey James,
Are you still having trouble? Please let me know on twitter, if you are. I’m @ryancarson.
Best,
Ryan
BebopDesigner
# July 20, 2009 - 5:42 pm
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.
How to Design a Portfolio Site, Part 2 - Programming Blog
# July 21, 2009 - 12:04 am
[...] 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). [...]
kopfkribbeln webdesign-blog » Wie erstellt man ein Portfolio-Website
# July 21, 2009 - 10:02 am
[...] Jay Stocks zeigt in einem Video-Tutorial wie man vorgehen muss, wenn man eine Portfolio-Website entwirft. Von der Planung bis zum [...]
christina erl daniels
# July 21, 2009 - 9:41 pm
Brilliant advice for someone in the middle of her first web portfolio design – terribly overwhelming but this was fantastic!
Randy Devost
# July 22, 2009 - 2:54 pm
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.
Jarryd
# July 23, 2009 - 9:04 am
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!
carolnunggu
# July 23, 2009 - 9:39 am
That’s great post… wonderful… I like your posting….
Leslie
# July 23, 2009 - 7:47 pm
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!
krishmandal
# July 24, 2009 - 3:49 am
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.
Friday Fix July 27 - 31 | Inspiredology
# July 24, 2009 - 1:32 pm
[...] to Design a Portfolio Site Part 1 & 2- Elliot Jay Stocks Elliot takes you on his process for redesigning his portfolio [...]
Friday Fix July 20 – 24 - Programming Blog
# July 24, 2009 - 11:39 pm
[...] to Design a Portfolio Site Part 1 & 2- Elliot Jay Stocks Elliot takes you on his process for redesigning his portfolio [...]
LimeSpace – IT » Die beliebten Links der Woche
# July 25, 2009 - 8:51 am
[...] Think Vitamin Blog wird Step by Step das Erstellen einer schönen Portfolio -Page [...]
Martin
# July 28, 2009 - 8:57 pm
I’m having issues watching this from vimeo for some reason. Is there a downloadable version or even a transcript available?
Ryan Carson
# July 28, 2009 - 9:36 pm
Hey Martin – sorry about that. What’s the trouble?
Shikeb Ali
# July 30, 2009 - 6:06 pm
Hey Ryan,
Same problem here, video is not working.
kang
# August 1, 2009 - 10:43 am
Its downloading something but the video doesn’t play – just starts/stops for a few frames in the beginning.
Why not youtube it?
Morning Inspiration
# August 2, 2009 - 4:51 am
[...] great article from Carsonified. Also check out their “How to design a portfolio site” by the ever loving Elliot Jay [...]
Michael Doyle’s Blog » Web Design – Creating A Portfolio Site
# August 4, 2009 - 4:13 pm
[...] http://carsonified.com/blog/design/how-to-design-a-portfolio-site/ [...]
by Skought » Blog Archive » I Think I See Light
# August 6, 2009 - 1:34 am
[...] Carsonified who had a guest screen cast from Elliot Jay Stocks How to Design a Portfolio Site, Part 1 & Part 2. [...]
Portfolio Themes in WordPress, Examples and Tutorials « WPCrowd
# August 7, 2009 - 12:14 am
[...] 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. [...]
Tom
# August 8, 2009 - 3:59 pm
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!
Crea tu Portafolio en Wordpress - Themes y Tutoriales | DevBlab
# August 13, 2009 - 4:45 pm
[...] 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. [...]
resources-by-skought » Blog Archive » How to Design a Portfolio Site
# August 15, 2009 - 4:25 pm
[...] 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. [...]
Link Love // Industrial Design Magazine for Australasia // Design Droplets
# August 18, 2009 - 4:11 am
[...] How to Design a portfolio site – A great video by Elliot Jay Stocks, on Carsonified about how to put together an online folio website. [...]
Designloft
# August 20, 2009 - 5:43 pm
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.
Matt
# August 30, 2009 - 9:24 am
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!?
Review of Sexy Web Design | Gaston Figueroa
# September 7, 2009 - 9:22 pm
[...] 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 [...]
Daily Digest for September 29th
# September 29, 2009 - 2:05 pm
[...] Carsonified » How to Design a Portfolio Site [...]
Mr.Stopi
# October 10, 2009 - 10:21 am
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
# October 12, 2009 - 7:52 am
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!
Janan
# October 14, 2009 - 4:56 am
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
# October 28, 2009 - 12:05 pm
Hi Man. I’m from Poland. Nice Job here. I enjoyed watching it and learn some stuff! Thanks:)
ReadyPhotoSite Blog » Creating An Online Portfolio: A Good Read Round-Up
# October 29, 2009 - 3:16 pm
[...] How to Design a Portfolio Site [...]
Interaction Design » Blog Archive » Day 16 | 4 November 2009
# November 3, 2009 - 7:36 pm
[...] a Home page. About page, Blog, and Portfolio (contents, outer page and inner page watch this video for more [...]
jose a creative
# December 16, 2009 - 11:30 am
I’m working on my portfolio, I would like to criticize to improve.
http://www.joseacreative.com/
Minisite Designer
# March 18, 2010 - 10:21 am
Very cool tutorial, I learnt a lot! Will come in handy for my future projects. Thanks for sharing..