Elliot Jay Stocks is a designer, speaker, and author. He is the Creative Director of Adobe Typekit, the founder of typography magazine 8 Faces, one half of Viewport Industries, and an electronic musician.

‘How to design a portfolio site’ screencast

Posted on 13 July 2009 19 comments

Article illustration for ‘How to design a portfolio site’ screencast

A few weeks ago Ryan asked me if I’d like to do a two-part screencast on designing online portfolios, and I thought it’d be a great idea, especially as — at the time — I was just putting the finishing touches to this new site. I also thought it’d be a good way of showing you some of the techniques I used rather than just writing about it on the blog.

So, if you’d like to see me rambling on and looking rather red-faced indeed (I blame a combination of a crappy iSight camera, an unbearably hot week, and my wild-man beard), head over to Think Vitamin to check it out:

By the way, if there’s anything particular you’d like to ask about the new site (why i did certain things, how I did certain things, etc.) that isn’t covered in the screencasts, please feel free to leave a comment below and I’ll answer as much as I can, either in a reply or a separate blog post.

Oh, and in case you didn’t know, the new Think Vitamin is now incorporated into the main Carsonified site, which was beautifully redesigned by Mike Kus. Mike, as well as being a lovely chap, is one of my favourite web designers and — in my opinion — one of only a few people brave enough to challenge the current web design norms. Although it brought a little tear to my eye to see the old Carsonified site go (designed by me when I worked at the company), I think it’s definitely a change for the better. Nice one, Mike!

19 comments

  1. Ian James Cox

    Ian James Cox

    13 July 2009 @ 02:31PM #

    I don’t know why but I always like seeing other peoples drawn wireframes.

  2. Daus

    Daus

    13 July 2009 @ 02:35PM #

    Thank you for sharing!

  3. Chris

    Chris

    13 July 2009 @ 03:04PM #

    Fantastic wee video Elliot, its nice to actually hear you talk through the process and show some examples.

    In regards in image sizes and thumbnails for showing off portfolio work, do you have sizes that you prefer to use or do you just play it by ear depending on the Grid system ?

  4. Ali Lane

    Ali Lane

    13 July 2009 @ 03:21PM #

    Looking forward to watching this at lunch time :]

  5. Jamesy

    Jamesy

    13 July 2009 @ 03:45PM #

    Regarding the Carsonified site; It feels like a US style presidential campaign pamphlet !?

  6. Chad

    Chad

    13 July 2009 @ 08:37PM #

    Very interesting theory in web design. I like it! This is also interesting because I am also in the process of redesigning my portfolio and has led me to re-think some things.

  7. Brendan Falkowski

    Brendan Falkowski

    13 July 2009 @ 10:10PM #

    Enjoyed during a sandwich break – especially the thoughts on researching portfolios in the wild.

  8. Jose Burgos Jr

    Jose Burgos Jr

    14 July 2009 @ 08:53AM #

    Definitely an amazing screen cast… As a starting freelancer this gave me some amazing insight on how to approach certain subjects about website building and even settled some of my own quarrels with my own personal site (Currently under construction).

  9. Xime

    Xime

    15 July 2009 @ 05:20AM #

    very coool. thank you!
    looking forward to the second part…

  10. Shane

    Shane

    15 July 2009 @ 10:49PM #

    You won’t find me complaining about free videos of that quality and length!

    Great stuff – thanks for making it! :)

  11. Reid

    Reid

    17 July 2009 @ 08:18AM #

    Love the video. Do More. It’d be great to see more, shorter videos for those of us with minuscule attention spans. This one was great, but kinda epic. It’s always interesting to get a peep into a great designers head.

  12. Jack Osborne

    Jack Osborne

    22 July 2009 @ 04:14AM #

    Elliot,

    I’ve just finished watching the second installment of the series, I’ve throughly enjoyed watching them, and I noticed something that I’m not too sure about, I was going to post it on the Think Vitamin blog post but I have decided against it because either

    1, I might be correct
    2, I’ll be wrong and more people will point and laugh ;)

    Anyway, I digress. At 14:53 into the video you mention how you have went about creating the span elements for your div.selected_posts. When you brought up the code I noticed that on ul li a span the display is set to none and then for the a:hover the display is set to block.

    Could this be classed as an accessibility issue for people using screen readers and so on? Couldn’t you achieve the same technique by either setting a negative margin on the span or setting visibility to hidden on the regular state? I’ll admit to not being as clued up as other people on accessibility, one look at my own site will tell you that, I’m just interested to hear about the approach you have settled on and why.

    Perhaps I should just stop over analyzing things. Yes, that sounds like a good idea.

  13. Elliot Jay Stocks

    Elliot Jay Stocks

    26 July 2009 @ 11:50PM #

    Cheers for leaving your comments, guys!

    @ Chris: No particular size, no. Instead I’ll give you the fantastically vague answer of “not too big, not too small.” ;) Seriously, though, I think it depends on the context of the image. I used quite a few for this site, partly to give variety and partly because I never found that perfect size!

    @ Jack: No, you’re not wrong. In fact, this is a very good observation. As you suggested, a far more accessible option would be to use negative margins. I could also perhaps have used opacity, which would have the added benefit of having a fade-in on Webkit browsers (and would still appear for browsers that don’t support it). So basically, thank you for the suggestions — I’ll be implementing them when I (eventually) get round to my ‘tweaking’ session.

  14. Nokadota

    Nokadota

    27 July 2009 @ 11:18AM #

    Hey Elliot!

    I just now finished watching both of your screencasts and I’m glad I did. I’m currently redesigning my portfolio but I can’t seem to find a starting point, and I’m getting too many ideas …

    Using the 960 grid system never occurred to me, although I have looked at it, in the past. In addition, you shared the swell idea to do lots of research and take the best parts you see from your favorite sites.

    I think I’m going to have a much easier time redesigning and getting my ideas structured. Thank you for your screencasts and the time you put into making them.

  15. Ehab

    Ehab

    02 August 2009 @ 11:38AM #

    Superb design I must say ! Enjoyed watching your 2 screencasts as well. Still watching them as I type this ..

  16. Konrad Kierys

    Konrad Kierys

    23 August 2009 @ 05:23PM #

    Great tutorial. I’m creating my portfolio now and this is very helpful. Thanks!

  17. Jason Nelson

    Jason Nelson

    24 August 2009 @ 04:01AM #

    This has helped me a hell of a lot! I am in the process of doing my portfolio site for a company launch at the end of the month so this will help me finally get the website right.

    I’m also glad to know after watching your video that your book is going to be as good (which I bought yesterday).

    Thanks!

  18. Boril Boshnakov

    Boril Boshnakov

    10 September 2009 @ 03:39PM #

    Hi Elliot,

    thank you for this very professional tutorial!

    I’ve just re-designed my site and now I see there is a lot work to do again ;)

    But that is the way the live goes on!

    Thanks!

  19. Vee Lee

    Vee Lee

    11 September 2009 @ 05:36AM #

    Hey Elliot,

    Great tutorials, I enjoyed it!

    I’ve recently completed my new Portfolio site like two days ago and I came upon this about 2 hours ago and was like ’DOH!"…

    Anyways if you have the time, check out my Portfolio and leave me some feed backs.

    Btw, I like your Portfolio.

© 2005 – 2014 Elliot Jay Stocks. All rights reserved. Powered by Harmony and tracked by Gaug.es. To keep updated with new content, you might like to subscribe to my RSS feed.