Creating a Great Portfolio Site

I presented on creating a great portfolio site at WordCamp Connecticut this past month. Here are my slides, with included summary:

I made my first portfolio site some time during or right after my senior year of college, after I had been working in the field for a year or so. It was pure html/css, with some jquery sliders hacked in to each page. My “About Me” section read a lot like an overbearing resume, with some unprofessional photo choices. It wasn’t that great.

When it came to my work, I had a couple pieces in two different sections — web, and graphic. The web stuff was better than the graphic pieces, but I felt like I needed to flesh out my portfolio, which was looking kind of barren. I had to scrounge for some graphic design examples.

Since then, I’ve done a handful of iterations to my portfolio, including two larger redesigns. In the time, I’ve picked up a couple tips and best practices for building portfolios which I want to share. These notes are meant to be read alongside my slides.

Keep it simple

My personal portfolio journey has seen a trend of going from more complex to simple. Each version gets a little more focused and streamlined. Recently, I set out to update the design of my portfolio again. I wanted to keep the same general look and feel, but refine it and remove cruft. I had this sidebar hanging out on my blog page with pretty useless content.

In my new version (not yet launched), I cut out the sidebar entirely and gave the content some more breathing room. I simplified the overall layout, while still make different stylistic accommodations for a couple different post formats I use pretty often. Additionally, my interior pages all had room for a sidebar which I just didn’t put anything into. It was just this black bar there to break up space so my line-length didn’t get too long.

If you’re redesigning your portfolio, be sure to remove unnecessary cruft. Always question your decisions. Does that sidebar really need to be there? Make sure you’re using your space effectively. You should be able to back up every design decision you make with a reason.

Let your personality shine through

Portfolios are personal. No matter how you’re making yours — designing your own, customizing a theme, whatever — it’s important for your portfolio to reflect you. There’s a couple ways you can bring in a bit of your personality into your portfolio, especially your homepage. Here’s a few ways you can do that:

  1. Clever microcopy or intro statements
    • You’ll just want to make sure your microcopy fits the tone you’re trying to present. Fun, frivolous copy is okay when that’s the attitude you’re projecting — young, hip, and trendy — but if your target clients or dream job are more conservative and business-y, you’re going to want a more serious tone.
  2. Type and iconography
    • I consider type and iconography to be pretty tied together, and ideally, your type and icon choices should complement each other. You can show a lot of personality just through your choices of type and iconography. Thinner, lighter fonts and icons present a very different image from heavier, bolder fonts and icons.
  3. Illustration and animation
    • Hand-crafted illustrations, or just a little bit of signature animation can go a long way.
    • Even just between the two illustration examples in my slides, there’s a lot of difference. They’re both flat, but the use of color is very different and gives them very different feels.
  4. Self portraits
    • There’s nothing like slapping your face on a page to say, “Hey, this thing is mine.”
    • This is especially true when you combine it with some clever copy.
    • I’d advise only doing this if you have some quality head shots.

Tailor your portfolio to a specific audience

You want to tailor your portfolio to a specific audience. The more specific your audience, the better you can tailor what projects you use and what tone you want to convey.

"Chuck & Beans" by shoeboxblog.com
“Chuck & Beans” by shoeboxblog.com

So this is a pretty popular quote, “dress for the job you want, not the one you have.” The same goes for your portfolio. What do you want your next job to be? Tailor the projects you show to that specific job, whether it’s a freelance client project or a full-time job. Your portfolio isn’t any different from a resume and cover letter in that regard.

That said, it’s also totally fine to have a portfolio that is purely a showcase of your work (like living museum of your achievements and skills) instead of a tool for job finding. That’s cool, and it also means you can be a little more relaxed about the type of work you show and how much you end up explaining it.

Now that I’m redesigning my portfolio again, I’m planning on emphasizing a lot of the more recent work I’ve been doing inside of the WordPress ecosystem. My portfolio is becoming more of a showcase and a home for my professional progress, rather than something I’m using to get hired.

Don’t showcase work you wouldn’t want to do again

That leads into this next topic — don’t showcase work you wouldn’t want to do again, because at some point, someone is going to ask you to do it again, and you’re not going to like it.

For example, I’ve discovered that logos aren’t really my forte. And I’m not really fond of making them. They’re a bit too abstract for me. But by including my logo work in my portfolio, people asked about them. And I’m like, “no, I’m not good at logos, why do you want me to make one?” I eventually just took them all out.

Don’t do something cool just because you can

The first time I redesigned my portfolio, I convinced myself that I really wanted to use Isotope, which is a fun js plugin for displaying and rearranging content in a grid. I really wanted to combine it with a gallery to make a filterable portfolio, so viewers could look at everything at once, or drill down by subject. After some intense googling, I found a way to combine Isotope and Nextgen gallery.

Building it was awful. I bashed my head against coding it for a while before finally getting help. It was by far the most challenging piece of my portfolio redesign, but at last, I finally had a filterable portfolio.

The end result looked something like this:

complex-portfolio

Except, with only a couple pieces per section, it ended up looking pretty sad and bare. I ended up inflating it with mediocre work just to get it to fill out. It was stupid. I fell in love with a idea because it sounded cool, not because it made my portfolio better.

Less is more, as long as it’s high quality.

This brings me to another point: less is more, as long as it’s high quality.

My first portfolio had as many items as I had work to show that I wasn’t embarrassed by, since I was still starting out. My next iteration saw an influx of mediocre work just to fill space. When I was showing a lot of examples, they weren’t that great. The quality of my entire portfolio was lower. I was only showing images, not giving any sort of explanation.

I thought more was better and images were better than lots of writing, but I realized I was wrong. Just a couple pieces are okay, and your portfolio is only as strong as your weakest piece.

My current portfolio only has four pieces. I’ve decided on a 4-6 project limit for now, just to make sure I’m not tempted to add in any work just to fill out space. This has worked out pretty okay for me.

Explain your process. Your work doesn’t speak for itself

Related to just showing images, I’ve learned that in order for my projects to have any impact, I need to explain them. (This is also much easier to do when you only have a handful of projects.)

You should focus on the problem you solved, not the tools you used. My first site did have some explanation around each piece, but I emphasized the tools I used instead of the underlying problems, goals, and process. It doesn’t really matter how I did it. Tools come and go and are specific to each person’s workflows. You should like your tools and be passionate about them if questioned, but I don’t think they matter as much in your portfolio.

(Side note: the only big exception to this that I can think of is a fine art, photo or video portfolio, where the tools and the outcome are tied much more closely than in a web work portfolio.)

I used to just have thumbnails that opened into light boxed static mockups, along with a short blurb about the piece. When I redesigned my portfolio the first time, I cut even that out and just used static thumbnails and mockups to show off my work. It wasn’t super effective. The lightbox technique was fine, but without any sort of content backing up my images, the impact of each piece was totally lost.

One of the best ways to explain your work is through case studies. Case studies are detailed overviews of a project. They focus on the entire project and its different moving piecing, rather than just looking at the finished product. Depending on the scope of the project and the purpose of your overall portfolio, they can go from long and detailed to short and succinct.

Writing a longer case study

  1. What was the overall goal of the project?
    • ex: increase membership by 10%, double revenue, gain 100 new subscribers, etc. Usually tied to a metric, but not always. Could also be raising brand awareness or perception.
  2. What problem was the project trying to solve?
    • ex: how can we make our content more relevant, how can we reach the right user base?
  3. What role did you play in the project?
    • designer? developer? copywriter?
  4. What was the process you used to solve the problem?
    • ex: user interviews, users testing, built custom solution, load testing, etc.
  5. What were the results?
    • Were you able to meet your project goals? Why/why not?
    • Good place to include testimonials, if you have them
  6. Link to the final product

A shorter case study can also be okay. Artists, musicians, or anyone making a showcase-style portfolio can get away with a brief project description.

Writing a shorter case study

  1. What was the project?
  2. What was your role?
  3. Relevant screenshots, mockups, code snippets
  4. Link to the final product

(Side note: Don’t rely on your GitHub or Dribbble accounts. I’ve seen a pretty big trend of people relying on their Github accounts instead of having a portfolio. While GitHub and Dribbble are great for seeing an overview of your technical skills, they’re not great for learning about your process or how you work in a team (unless you’re very visible in OSS). It’s okay to link to and hype up your Github/Dribbble profile, but your work there doesn’t speak for itself.)

Make it easy for the right audience to get in touch with you

This pretty much goes without saying, but make it easy for people to contact you. This could be a general, all-purpose contact form, a contact form crafted for generating project leads, or even just links to your professional accounts like LinkedIn. People shouldn’t have to hunt for a way to chat with you, unless you want them to have to hunt.

In my case, I actually removed the contact form from my website, since it was just being used by sketchy recruiters or people looking for support with my theme, which I’d prefer to go through the support forums. Anyone who really needs to get in touch with me can ping me on Twitter.

What do employers look for in a portfolio?

I polled twitter to see what employers look for in portfolios. Here are some of the responses I received:

https://twitter.com/stevehickeydsgn/status/460531873731846144

https://twitter.com/norcross/status/460532773866852352

Building a Portfolio

So that’s all well and good, but how do you actually *make* a portfolio?

With WordPress, you have two big choices: host it yourself, or use WordPress.com.

Here are some general ideas for displaying portfolio pieces on your site:

  1. Use or make a portfolio custom post type
  2. Use category pages
  3. Make each portfolio piece its own page, and link to them from a central portfolio page

Finding (or making) a good theme

What makes a good theme?

  • Keep it simple so you can customize
    • Even if you’re non-technical, I’d try to customize any theme you choose just a little bit. If child theming is a little too much, there are plugins that allow you to change a theme’s css without overwriting the theme itself.
  • Aim for the general layout you want
    • Aim for the general layout you want, especially if you aren’t as strong with css. Layout changes are a pain, but basic style changes (like colors and fonts) are much easier.
  • Avoid themes with too many options
    • Additionally, try to stay away from themes with a million different options. In my experience, they end up being a lot more complicated than if you’d just done some basic customizations yourself. It’s easy to lose site of what you’re doing when you’re presented with 10 pages of options.
  • Avoid baked-in functionality
    • Same, avoid baked-in functionality like custom portfolio solutions. Leave those for plugins. If you decide to change themes later, you’ll lose all of that functionality.

I’ve gone through and picked a couple free themes I think would be good starting points for portfolios.

  • Widely has nice, big images and has fairly simple styles, making it really easy to customize. Get it on WordPress.com or download for WordPress.org.
  • Same with SemPress, which I think would make a great starting point for someone without a lot of images, like developers or writers. It’s also fairly simple, so you can do a lot with just a couple color or font changes. Get it on WordPress.com or WordPress.org.
  • I found Mixfolio to be complicated to set up like the demo page, especially without reading the documentation, but it has a pretty great layout for a portfolio. It also looks super bare- bones, making it easier to customize with your own style and personality. Get it on WordPress.com or WordPress.org.
  • Hatch is pretty similar to Widely, and is made just for portfolios. It’d be great for a visual designer, artist, or photographer. Get it on WordPress.com or download for WordPress.org.
  • Portfolio Press is a portfolio-specific theme built by Devin Price, who also has a Portfolio CPT plugin that pairs with the theme, making it easier to add content. Disclaimer: it does have options, which I’m generally against, but they’re less egregious than other themes, and are added via a plugin, not the theme itself. Get it for WordPress.org.
  • Motif is great for a more business-y, professional portfolio, especially for a one-person agency. If you’re using it on WordPress.com, it also hooks in to our testimonials custom post type so you can easily enter quotes from clients. Get it on WordPress.com or download for WordPress.org.
  • Illustratr and Espied are using WordPress.com’s new Portfolio custom post type, which makes adding projects super easy. They’re both designed explicitly to be portfolios. Both are pretty simple, so again, it would be easy to apply your own colors and fonts.
  • If you’re a developer an you’re looking for more of a casual, blog-style portfolio, Crowd Favorites has a really awesome theme called Capsule, which they label as a “developer’s code journal.” You can easily add and annotate code snippets. It’s a really fun and unique use of WordPress. Download it for WordPress.org.
  • Feel confident with your css skills and want to roll your own? Check out _s. It’s what Automattic’s theme wranglers use to start all of their themes.

These are just a couple I pulled out that would make an okay starting point for creating your own portfolio. There are hundreds of free or paid themes out there you could potentially use!

Enhance your self-hosted portfolio with plugins

  • Jetpack comes packed with awesome functionality. I’m mentioning it first because it actually has a lot of the same functionality that the other plugins I’m going to recommend, except in one plugin. Here are some Jetpack modules you can use to make a portfolio:
    • Photon (load your images from WordPress.com’s CDN)
    • Widget Visibility (chose what widgets appear on each page)
    • Publicize (easily share your work with your social media accounts)
    • Carousel (shows your images with a nice lightbox effect)
    • Tiled Galleries (adds a bunch of different gallery layouts to chose from. I love the tiled mosaic one)
    • Contact Form (easily add a contact form to your site)
    • Custom CSS (lets you customize your css without overwriting your theme)
    • Portfolio custom post type (coming soon?)
  • Don’t want Jetpack? No problem. For better galleries, I’ve used Nextgen before. Definitely adds another layer of complexity, but you get a ton of control over your galleries, which is extra great if you’re an artist or photographer.
  • Contact Form 7 was my go-to contact forum plugin before I started using Jetpack. It looks a little more technical, but it actually has a lot of pre-set options that make it easy to throw together a form.
  • Devin Price’s Portfolio Post Type plugin is great if you want to add your content using a CPT, but don’t want to write it yourself. You’ll still need to customize your theme to take advantage of the post type, so I’d recommend this more for users with a little bit of templating knowledge, or really great documentation reading skills.
  • In general, it’s worth looking at a…

Thanks to everyone who came to see my presentation live at WordCamp Connecticut!

Posted on

One thought on “Creating a Great Portfolio Site”

Mentions

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.