LearnHow to Design a Portfolio Site, Part 2

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.

42 Responses to “How to Design a Portfolio Site, Part 2”

  1. 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

  2. RossMcNeil on June 16, 2010 at 4:35 pm said:

    Some great tips there Elliot, thank you.

  3. Vibhor Chandel on February 17, 2010 at 3:38 pm said:

    Good tips Elliot

  4. Firma Rehberi on January 6, 2010 at 11:36 am said:

    excellent work, thank you very much

  5. Anna McMahon on December 11, 2009 at 4:27 pm said:

    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.

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

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

  8. 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!

  9. Chris Burbridge on August 24, 2009 at 2:59 pm said:

    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!

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

  11. Denny Sugar on August 7, 2009 at 3:36 pm said:

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

  12. SΓ©rgio Soares on July 30, 2009 at 1:28 am said:

    awesome work Elliot!
    Nice tips πŸ™‚
    cheers from Portugal

  13. Oliver Nielsen on July 28, 2009 at 10:04 pm said:

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

  14. James Ngare on July 25, 2009 at 8:59 pm said:

    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.

  15. inteltone on July 25, 2009 at 6:22 pm said:

    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!

  16. Andy Gongea on July 25, 2009 at 1:52 pm said:

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

  17. Trever Yarrish on July 23, 2009 at 2:51 pm said:

    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!

  18. Bruno Passos on July 23, 2009 at 2:19 pm said:

    Useful stuff!

    thanks a lot,

    Bruno

  19. Becky Bryant on July 23, 2009 at 6:44 am said:

    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 πŸ™‚

  20. 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.

  21. Andrea Duquette on July 23, 2009 at 12:34 am said:

    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

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

  23. Scott Sumetz on July 21, 2009 at 4:04 am said:

    Great stuff Elliot. Thank for sharing

  24. This was awesome! Thanks Elliot!

  25. Kristen Ashton on July 21, 2009 at 1:44 am said:

    Really enjoyed that – cheers!

  26. 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

  27. Benjamin on July 20, 2009 at 7:59 pm said:

    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… πŸ˜‰

  28. Atom Groom on July 20, 2009 at 5:52 pm said:

    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.

  29. Ryan Carson on July 20, 2009 at 1:30 pm said:

    @ Sean

    You can download the video source file here πŸ™‚ http://vimeo.com/5666504

    Best,
    Ryan

  30. Sean Delaney on July 20, 2009 at 12:16 pm said:

    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

  31. Stancje Warszawa on July 20, 2009 at 11:44 am said:

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

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

  33. 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.

Leave a Reply

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