20 July 2009
How to Design a Portfolio Site, Part 2
Editor’s Note: Elliot will be doing a talk called “The Perfect Portfolio Site” on the FOWD Tour.
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).
In Part Two you’ll learn …
- How to ‘design in the browser’
- How to take your design from Photoshop to HTML and CSS
- How to integrate your design into a CMS like WordPress
- How to structure your CSS files
- How to enrich your design with CSS3
- How to use ‘custom fields’ in WordPress to make powerful templates
- How to use Webkit Transistions to add extra beauty to your site
30-Minute Screencast
You can also download the hi-res video if you have a Vimeo account.
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
# July 20, 2009 - 8:22 am
[...] Part 2 [...]
Luis
# July 20, 2009 - 11:04 am
Great tips, actually working on my own site and was considering using the PODS plugin but this has inspired me to keep it simple and just use the custom fields.
Joe
# July 20, 2009 - 11:16 am
Some great tips. I am using wordpress to make my portfolio site, so this should prove very useful.
alanscott
# July 23, 2009 - 10:10 am
Overall its been great to hear how you step and demonstration is goood
Stancje Warszawa
# July 20, 2009 - 11:44 am
You definitely need to avoid flash. All those flash portfolios/galleries are just so terribly slow it’s not worth visiting.
Sean Delaney
# July 20, 2009 - 12:16 pm
Will these video’s be available to download at full size? I really enjoyed listening to Elliot explain how to build a great portfolio site, it was just a pity the videos are blurred, especially the WordPress section in video two where Elliot explains about custom fields…. I’d like to have seen a full size version for this section. I think it would designer and developers and especially me, to see how Elliot has tweaked WordPress to address his portfolio design.
If the videos are available full size please let me know as I would be very interested.
Great talk in both videos though. It has inspired me to change my current portfolio from a “hard coded” solution to WordPress solution…
Sean
Ryan Carson
# July 20, 2009 - 1:30 pm
@ Sean
You can download the video source file here :) http://vimeo.com/5666504
Best,
Ryan
Atom Groom
# July 20, 2009 - 5:52 pm
I’d be really interested in seeing how Elliot sets up his pages, categories for posting, permalinks, etc. for his Wordpress portfolio. I think that will also help people understand what he’s demonstrating.
Benjamin
# July 20, 2009 - 7:59 pm
Great insight, thanks for sharing, it was a great experience watching it.
On a sidenote, priceless seeing Xtorrent running in the background. The latest Linux distribution, I guess… ;)
Ryan Carson
# July 20, 2009 - 9:12 pm
I Know – made me laugh seeing Xtorrent running as well :)
Elliot Jay Stocks
# July 21, 2009 - 8:49 am
It’s ok — I was only stealing Sourhaze music. ;)
@_nige
# July 20, 2009 - 10:00 pm
Thanks for that. It was valuable to me as a developer to get a run through from start to finish of how a designer goes about this process. And the CMS integration has given me some ideas. I’ll have to see if I can apply some of then to my business web site
Kristen Ashton
# July 21, 2009 - 1:44 am
Really enjoyed that – cheers!
Kai
# July 21, 2009 - 2:18 am
This was awesome! Thanks Elliot!
Scott Sumetz
# July 21, 2009 - 4:04 am
Great stuff Elliot. Thank for sharing
Nicho
# July 21, 2009 - 5:49 am
Great Vid, Elliot. Just in time, currently working on my portfolio redesign.
Daily Links for Tuesday, July 21th, 2009
# July 21, 2009 - 11:46 am
[...] Carsonified » How to Design a Portfolio Site, Part 2 [...]
Andrea Duquette
# July 23, 2009 - 12:34 am
One of the things that makes this tutorial stand out (from a beginner point of view) is the fact that a specific skillset is introduced. Focusing on developing these skills and not on the gazillion other possibilities (with the exception of jquery & fam) narrows the road for new designers/developers.
cheers
Ally
# July 23, 2009 - 4:05 am
I’ve recently dived into WordPress and these videos have provided much insight… Overall its been great to hear how you step through from concept to completion and the approach you described in your book.
Becky Bryant
# July 23, 2009 - 6:44 am
Brilliant mini-series of videos, thank you. I’m going to be setting up a new portfolio and promoting myself after finishing my design HNC and this have been a world of help and insight, especially Elliot showing us how he sets up his Wordpress and the custom fields on the portfolio posts, which are so much better explained than in some of the WP books.
Now I can’t wait to get started on promoting myself once I’ve set up my site as I have so many ideas, thank you again :)
Bruno Passos
# July 23, 2009 - 2:19 pm
Useful stuff!
thanks a lot,
Bruno
Trever Yarrish
# July 23, 2009 - 2:51 pm
Wow, Elliot does a nice job of taking you from point A to point B. Thanks for producing this content, it is always good to see another web designer’s process. Elliot, thank you for the detailed design walk through, the grid portion was insightful.
Great vid!
Carsonified » How to Design a Portfolio Site, Part 2 | Squico
# July 23, 2009 - 8:00 pm
[...] In: Design inspiration 23 Jul 2009 Go to Source [...]
Friday Fix July 27 - 31 | Inspiredology
# July 24, 2009 - 1:34 pm
[...] to Design a Portfolio Site Part 1 & 2- Elliot Jay Stocks Elliot takes you on his process for redesigning his portfolio [...]
Andy Gongea
# July 25, 2009 - 1:52 pm
Your site is absolutely stunning.
Very nice screencast. Cheers!
inteltone
# July 25, 2009 - 6:22 pm
Elliot, thanks a lot for this informative and helpful video and your book, Sexy Web Design. I’ve read the latter also and I have to say that it’s a good helper for beginners and useful reminder for pros :) Cool stuff!
James Ngare
# July 25, 2009 - 8:59 pm
Hi. Id appreciate some help. I try to download the video but it freezes up at some point (68%). Can you please re upload it in flv format for download Eliot or Jason? My internet connection is slow, so i cant watch it online and have to download it. Looking forward to learning from the tutorial.
> James.
Friday Fix July 20 – 24 - Programming Blog
# July 25, 2009 - 11:33 pm
[...] to Design a Portfolio Site Part 1 & 2- Elliot Jay Stocks Elliot takes you on his process for redesigning his portfolio [...]
Oliver Nielsen
# July 28, 2009 - 10:04 pm
Thank you Elliot, some really great tips in this one, I’ll copy your design right away;-)
Thanks to Carsonified for bringing this on as well;-)
Sérgio Soares
# July 30, 2009 - 1:28 am
awesome work Elliot!
Nice tips :)
cheers from Portugal
by Skought » Blog Archive » I Think I See Light
# August 6, 2009 - 5:34 am
[...] Carsonified who had a guest screen cast from Elliot Jay Stocks How to Design a Portfolio Site, Part 1 & Part 2. [...]
Denny Sugar
# August 7, 2009 - 3:36 pm
Great video! I really liked the steady pace and your teaching style.
Tom
# August 9, 2009 - 8:22 pm
This is extremely useful to me, as I am also working on a portfolio as I write this.
Chris Burbridge
# August 24, 2009 - 2:59 pm
Wow, this is so well done! Really thank you for sharing information at this level, and with this quality.
Looking at a lot of really great designs this weekend, I really started to wonder, “when you are doing something so beautiful with typography, how do you do that in Photoshop?” So, this helps a lot.
And seeing the way you’re using WordPress. I am used to preparing it for clients, but you’re using it as an expert system, so you can do expedient things, like just use the custom fields, and conform to your own standards.
Really, there is so much smart stuff going on here — thanks!
Oscar
# August 28, 2009 - 3:50 am
This is by far one of the best tutorials I’ve seen, yet! Nice work Elliot! I really enjoyed the first part more, because I enjoy the research stage and consider it a very important part of the entire process. The second part lost me a bit, seeing that it was a bit more technical, but I’m excited to dive in and see what I can create. Thanks again!
LA
# September 17, 2009 - 11:44 pm
What perfect timing coming across this just as I’m redesigning my web site! Thanks for the very useful information. I’m thoroughly inspired to use these helpful tips in creating my own WordPress portfolio site.
This Making of a Portfolio Site « TWhite Design
# September 23, 2009 - 4:34 pm
[...] single, most helpful resource I found was a developer by the name of Elliot Jay Stocks. His video how-to screen-cast on Carsonfied layed out how to build a portfolio website using Wordpress. I had the design [...]
Kentaru
# October 22, 2009 - 11:24 am
Wow, great tips article, very helpful because I am starting on psd to css/html..great points..
Anna McMahon
# December 11, 2009 - 4:27 pm
Awesome video. I have been working on my portfolio site for a while but I’m never really sure the best way to set it up. I see a lot of web sites that are putting a lot of very work on the front page of there site. That’s probably because they want people to see their work since they know people leave web sites quickly.
Firma Rehberi
# January 6, 2010 - 11:36 am
excellent work, thank you very much