21

Ask DN: How do you build your portfolio?

over 4 years ago from , Product Designer @ Hobsons

I like to periodically visit the personal sites of design heroes, colleagues, industry friends, and look at the way they talk about their work in their portfolios. More recently I've been interviewing designers to join our design team, and in the process I've seen a lot of portfolios, as you can imagine.

In this whole portfolio-viewing exercise I always scratch my head when I see the amount of product designers that build their portfolios using an non-customized or mildly tweaked theme for something like Squarespace or WordPress.

I'm not sure how I feel about that. So I would love to understand people's reasons.

If you have chosen this route before, would you share why you've preferred it versus crafting it all yourself? I presume one is significantly less time consuming than the other. But is that the only reason?

Would love to pick your brain! Can you share how you build your portfolio and why?

41 comments

  • Joel CalifaJoel Califa, 4 years ago

    Static site + Jekyll so I don't have to update everything manually ¯\(ツ)

    10 points
    • Katelyn Caillouet, 4 years ago

      Do you know of any resources that walks you through this? I've tried this a few times and always get stuck and give up.

      0 points
  • Jonathan KelleyJonathan Kelley, 4 years ago

    It's probably just sheer ease of use/time constraints. I was tossing and turning over whether to use one myself to build out my new portfolio (www.jonathankelley.design) but I decided against it - I wanted employers to see that I cared about the way my work was presented (Not wrapped up in someone else's work).

    4 points
    • Samanta Aquino, 4 years ago

      Gotta say... I'm really digging this custom cursor

      0 points
    • Avadh DwivediAvadh Dwivedi, 4 years ago (edited 4 years ago )

      Well, using and building upon someone else's work is what allows we humans to do progress, not linearly but exponentially.

      Thinking about how deeply we are indebted to each other's work is one way to wrap ones head around it, for example I am writing this comment, on someone else's website, using someone else's designed hardware and software with someone else's invented electricity and internet. I am merely punching the keys, which some one else taught me. The list is infinite.

      You can take other people's work and hate it, or you can do your bit make it even better, for your own good.

      As Picasso said, "Good artists copy, great artists steal"

      Not being preachy, Just thought sharing thoughts with you after reading your comment which said, (Not wrapped up in someone else's work)

      :)

      1 point
  • Account deleted 4 years ago

    In the past I always did 100% custom code. Then I used Wordpress (hated it). Current (quite OLD) site is Cargo Collective. New one almost done is Squarespace with some small customization.

    As my career has grown, the amount of time I have to whip up something from scratch has done just the opposite. I'm either cranking for the day job, doing freelance or spending time with my family. I need a solution that simply summarizes the kind of stuff I've done - cleanly and with minimal effort.

    A lot of this varies with each individual based on their work experience, what they want to do - and the job they hope to be doing.

    1 point
  • Jan ZhengJan Zheng, 4 years ago (edited 4 years ago )

    I use Jekyll, because it gives me 100% flexibility on the design and the content. And I think it's easier to use than WordPress. It's hosted for free on Github, and I can say I built it myself. http://janzheng.com

    1 point
  • Nate Parrott, 4 years ago

    I'm actually in the process of building a new portfolio at portfolio.nateparrott.com. It's card-based, and I went the lazy route and actually made each card's content a single image, which I export from a Sketch document. Building cards out of HTML and CSS would definitely be better – but the main problem with my portfolio in the past has been a lack of time to update it, so I feel justified in choosing the low-effort approach.

    1 point
    • E BensleyE Bensley, 4 years ago

      I actually really like the idea for this, but for the sake of screen readers, Google, and potential indexing, please, please make the cards text and html. Looks nice though

      2 points
      • Nate Parrott, 4 years ago

        Thanks! I've taken all the text on each card and stuck it in the alt-text for each image, but that's definitely not ideal.

        0 points
    • Spencer HaizelSpencer Haizel, 4 years ago

      You need some sort of indication to use the arrow keys to scroll sideways. Or allow mouse scrolling to do it.

      0 points
  • chris limbrick, 4 years ago

    Funny you mentioned Squarespace. While their templates are stellar, I decided to build my own custom Squarespace template on their Developer Platform. Feel free to check it out: www.climbrick.com

    1 point
    • Brian A.Brian A., 4 years ago

      That looks really nice! I'm currently using Squarespace and while I love the platform, I feel a little limited by the stock set of templates. I'll have to check out developing my own theme.

      0 points
  • Aaron SagrayAaron Sagray, over 4 years ago (edited over 4 years ago )

    Custom design templates on top of http://statamic.com which is a great YAML-based flat file CMS.

    I wanted it to be custom, yet easy to quickly enter in content, since I end up writing long case studies for any products I feature. Everything is modularized and responsive (no grids, just flexbox). http://sagray.com

    1 point
  • Vici ShaweddyVici Shaweddy, 4 years ago (edited 4 years ago )

    I used Squarespace before until I went to a 3-month development class at Codecademy. After finishing the program, I decided to build and design my portfolio site. I wanted to make sure the site has my personality so it took me a while to code it. I used Ruby on Rails at the beginning but it didn't make sense to keep using it since my site is static so I ended up using Jekyll. Here is my portfolio site: www.vicishaweddy.com

    0 points
  • Wouter HillenWouter Hillen, 4 years ago

    I used a combination of Jekyll and Gulp which, in hindsight, probably wasn't the best idea..

    0 points
  • TomTom TomTomTom Tom, 4 years ago

    Currently working on mine in Webflow.

    0 points
  • Account deleted 4 years ago

    I'm using a medium publication and just medium posts.

    0 points
  • Alexei BoronnikovAlexei Boronnikov, 4 years ago (edited 4 years ago )

    Semplice's still good — http://artworkintuition.com

    0 points
    • Blake M, 4 years ago (edited 4 years ago )

      Looks good!

      The last sentence in your intro paragraph reads a bit odd. Should it say "I'm the last one." or "I'm that last one." instead of "I'm the one." ?

      1 point
  • Alex CampAlex Camp, 4 years ago

    HTML and CSS! www.alexrcamp.com

    0 points
  • Adam Hopwood, 4 years ago

    I seem to be in the minority, but I went down the Squarespace route after having a custom built site for years. I've now taken it down as it was so out of date!

    I think wether it's worth investing the time in custom built site (which of course we'd all like to do) all depends on how much you're relying on your web presence to drive your career opportunities. For me, I use it once every few years when I'm ready to look for new opportunities (I'm full time employed). The region I work in isn't terribly competitive so I've never had to spend the time crafting a custom portfolio. Off the shelf made sense to me as I just needed a delivery method for what people are looking for, my work, which was only going to be used for a short period of time.

    For a freelancer or someone reliant on personal brand, making the investment makes much more sense as it should be actively working for you in generating leads and hopefully achieving an ROI on the time put into it.

    Of course, there's also many people who just love putting the time into it as a labour of love - and fair play to them.

    All comes down to return on investment for me though.

    0 points
  • Kemie GuaidaKemie Guaida, over 4 years ago (edited over 4 years ago )

    Wordpress + a custom template based off the JointsWP starter template. Because it's easier to update- though in the end I probably spent more time doing wordpress stuff than the amount of time it'll save me when updating ¯_(ツ)_/¯.

    I'd hate for an employer to recognize my portfolio as something he's seen before- and worst case scenario, think I've stolen the design. So it's custom all the way. But I do understand designers making use of what is already out there, especially if you're pressed for time.

    http://www.monolinea.com/

    0 points
  • John KarlssonJohn Karlsson, over 4 years ago

    I built my own just because I enjoy fiddling with code every now and then, but if I didn't I would have gone with squarespace, semplice or similar.

    PS: If anyone's interested in the tech behind peoples portfolio there are some good answers in this post: https://www.designernews.co/stories/16544-ask-dn-the-tech-behind-your-portfolio

    0 points
  • E BensleyE Bensley, 4 years ago (edited 4 years ago )

    At the moment, mine's less of a portfolio and more of a business card slash cover letter in website form. It's just plain HTML and CSS, but the next version uses Jeckyll and some componentry to add some previous works to a grid of screenshots. Hoping it turns out as clean as the rest of the site ended up... Link

    Having seen some of these, it's not as fancy or content heavy, which I think I need to work on, some nice inspiration to go on here though :)

    As for the reasoning, that's a complex one. Lots of sites I've seen used a CMS when they only had one page of rarely updated content, which seems like overkill and tends to make the page more bloated than it would otherwise be. I wrote the content in Pages and kept the whole site managed in GitHub, when I make a change, I just clone it into my webroot and it's good to go. I like that aside from the header image which needs to be optimised, mine's quite light and free from unnecessary bloat and heavy scripts.

    0 points
  • Adham DannawayAdham Dannaway, 4 years ago

    I normally use my portfolio site as practice for designing and coding. It's great to try out new techniques that I've been reading about.

    It's also a great way to document some of the projects you've been working on - which come in handy when you're explaining your process to others.

    Here's how I created my current site, it's due for an update but documents best practices at the time. https://www.smashingmagazine.com/2013/06/workflow-design-develop-modern-portfolio-website/

    0 points
  • Eliot SlevinEliot Slevin, 4 years ago

    Static html and css. But I host most of the actual content on other sites - imagery on behance, websites are just links to that actual site, flickr, etc. Why? I realised I could spend forever on my portfolio, and be too lazy to update it in the future, or I could keep it lean and up to date.

    0 points
  • jj moijj moi, 4 years ago

    because 4 years ago, i knew nothing html/css and i could only mildly tweak the colors and probably a few properties of border. a lot of my ux/ui designer friends couldn't even write a single line of css and so they use cargo or squarespace - and that's totally fine by me. also, even when i learned how to do html/css, it still took me a while til i know ftp and hosting stuff.

    0 points
  • Account deleted 4 years ago (edited 4 years ago )

    No designer or recruiters I have ever interviewed with checked the code of my site, or cared what it's built on. I just need it to load when people visit. That said, I don't position myself as a product designer as I'm more on the graphic and art direction side of things. I like print and digital equally and my site is focused on the work rather than the tech behind it. Honestly, if I tried writing my own site from scratch, I definitely could do it but, it would be janky as hell.

    So I went with Wordpress because I had an idea for a one-pager and the theme I'm using just let me do it the way I wanted to very easily: http://www.daviddiliberto.com

    0 points
  • Alec LomasAlec Lomas, 4 years ago (edited 4 years ago )

    Currently rebuilding mine with Metalsmith + PostCSS + Babel and hosting it with Netlify. The site that's live now is also hand-coded, but in a much less maintainable way (using Jade as a preprocessor + PrePros to compile everything). I'm a frontend dev though, so being able to build myself a site is kind of an important skill to show off.

    0 points
  • James LaneJames Lane, over 4 years ago (edited over 4 years ago )

    I recently applied for and got a new job as a UI Designer. I didn't have time to do a brilliant job on my portfolio, so really upped my CV and created a basic Wordpress portfolio using a standard theme.

    Saying that, it could slightly differ between print design and web design. Obviously with web design, a lot of the portfolio can be viewed 'live'.

    I guess what I'm trying to say is, don't rely solely on someone's portfolio, I'm glad my new employer didn't (although I did do a test to prove my knowledge).

    Trying to manage a full-time job and a bit of freelance evenings and weekends may not give enough time to concentrate on a portfolio. It's just one of those things, I put my job and clients before myself (could be seen as a good and bad thing I guess).

    Again, opinions will differ on this, but that's my 2 cents-worth.


    UPDATE

    Whilst I'm here, some people may find my first ever DN post useful (from 2 years ago): The best portfolio CMS?

    0 points
  • Miraj PatelMiraj Patel, 4 years ago (edited 4 years ago )

    I designed and constructed the homepage and a case study page using HTML/CSS/JavaScript. Then, Jekyll to generate rest of the pages using those as a template. It's makes it a whole lot simpler, easier to maintain, and, most importantly, gives you as much flexibility as you may need to design it the way you want.

    Link to my portfolio

    If you haven't used Jekyll before, don't stress it. It was my first time using a static-site generator, and it was very easy to pick up. The documentation for it is great.


    There is also another option I explored for a while called Semplice Labs. It's a WordPress template system, specially made for creating a portfolio. I've seen a lot of designers utilize it.

    0 points
    • Vici ShaweddyVici Shaweddy, 4 years ago

      Semplice was built by Tobias van Schneider -- former Spotify designer. I bet it should be easier for designers to use it.

      0 points
  • Connor NorvellConnor Norvell, 4 years ago (edited 4 years ago )

    I looked at a lot of options, but I hand coded my site, just static html/css/js. So when I was adding my portfolio, I used adobe portfolio and connected it to behance. I will probably end up re-re-designing my portfolio in the near future, but it was customizable enough to look like the rest of my site.

    work.connornorvell.com

    0 points