How to Design a Portfolio Site, Part 2

Treehouse●Design No Comments

Elliot talking about portfolio design

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 …

  1. How to ‘design in the browser’
  2. How to take your design from Photoshop to HTML and CSS
  3. How to integrate your design into a CMS like WordPress
  4. How to structure your CSS files
  5. How to enrich your design with CSS3
  6. How to use ‘custom fields’ in WordPress to make powerful templates
  7. 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.

Start Learning Web Design, Coding, How To Start A Business & More for Free!

Learn More

Treehouse

Our mission is to bring affordable Technology education to people everywhere, in order to help them achieve their dreams and change the world.

Comments

  • Pingback: Elliot Jay Stocks » ‘How to design a portfolio site’ screencast

  • http://www.3oclockdesign.com Luis

    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.

  • http://www.seohu.com Joe

    Some great tips. I am using wordpress to make my portfolio site, so this should prove very useful.

    • http://www.prlinkservices.com alanscott

      Overall its been great to hear how you step and demonstration is goood

  • http://www.wolnestancje.pl Stancje Warszawa

    You definitely need to avoid flash. All those flash portfolios/galleries are just so terribly slow it’s not worth visiting.

  • http://www.seandelaney.co.uk Sean Delaney

    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

    @ Sean

    You can download the video source file here :) http://vimeo.com/5666504

    Best,
    Ryan

  • http://www.atomgroom.com Atom Groom

    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.

  • http://www.rainbowsunicorns.com Benjamin

    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

      I Know – made me laugh seeing Xtorrent running as well :)

      • http://elliotjaystocks.com Elliot Jay Stocks

        It’s ok — I was only stealing Sourhaze music. ;)

  • http://ainscoe.com @_nige

    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

  • http://www.stillpixels.com Kristen Ashton

    Really enjoyed that – cheers!

  • http://www.brizk.com Kai

    This was awesome! Thanks Elliot!

  • http://myportlandhomemortgage.com Scott Sumetz

    Great stuff Elliot. Thank for sharing

  • http://brain2brand.com Nicho

    Great Vid, Elliot. Just in time, currently working on my portfolio redesign.

  • Pingback: Daily Links for Tuesday, July 21th, 2009

  • http://www.sylvesterduquettedesign.com Andrea Duquette

    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

  • http://www.anom.ca Ally

    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.

  • http://www.rbryant.co.uk Becky Bryant

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

  • http://www.brunopassos.co.uk Bruno Passos

    Useful stuff!

    thanks a lot,

    Bruno

  • http://www.cuppyyarrish.com Trever Yarrish

    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!

  • Pingback: Carsonified » How to Design a Portfolio Site, Part 2 | Squico

  • Pingback: Friday Fix July 27 - 31 | Inspiredology

  • http://www.graphicrating.com/ Andy Gongea

    Your site is absolutely stunning.
    Very nice screencast. Cheers!

  • inteltone

    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!

  • http://twitter.com/wunderkid James Ngare

    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.

  • http://www.olivernielsen.com Oliver Nielsen

    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;-)

  • http://www.sergiodesigntrends.com Sérgio Soares

    awesome work Elliot!
    Nice tips :)
    cheers from Portugal

  • Pingback: by Skought » Blog Archive » I Think I See Light

  • http://dennysugar.com Denny Sugar

    Great video! I really liked the steady pace and your teaching style.

  • http://tomleo.com Tom

    This is extremely useful to me, as I am also working on a portfolio as I write this.

  • http://www.realsimplesuccess.com/blog Chris Burbridge

    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

    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!

  • http://www.armgardtdesign.com LA

    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.

  • Pingback: This Making of a Portfolio Site « TWhite Design

  • http://log-burningstove.co.uk Kentaru

    Wow, great tips article, very helpful because I am starting on psd to css/html..great points..

  • http://weigtlossdiet.net/ Anna McMahon

    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.

  • http://ww.sektorelturkiye.com Firma Rehberi

    excellent work, thank you very much

  • http://creativetwigs.com Vibhor Chandel

    Good tips Elliot

  • http://RossMcNeil.com RossMcNeil

    Some great tips there Elliot, thank you.

  • http://jacobdubail.com Jacob

    Thanks, Elliot! It’s great to see how you take the research and apply it to an actual design. Also great to see how you use some of those custom fields in WP. Much appreciated!

    -J