The Magnetic State Blog Dept.

The blog at Brooklyn web design studio Magnetic State.

  • Our Work
  • Best of the Blog
    • This Major Athletics Brand Needs a Redesign
    • Why You Need a Responsive Website
    • Interpreting Banksy’s ‘Evil’ Painting
    • Are There Breasts in the McDonald’s Logo?
  • Featured Design
    • Responsive Feature Article for Men’s Health Magazine
    • Responsive Website for Coldfront Magazine
    • Logo Design: Men’s Health Next Top Trainer
    • EverPower Corporate Reports
  • Contact Us

How to Build a WordPress Portfolio Site

May 6, 2014 by Dan Redding 1 Comment

If you are a professional working in a visual field (be it photographer, illustrator, poodle groomer, etc), you will probably want to represent your work online. This is an enjoyable job for a web designer like myself, because the portfolio website is blissfully simple and beautiful in comparison to, say, a big e-commerce website with complex functionality. The portfolio site can be treated like an artist’s canvas. It’s an opportunity to make your work shine. Here are some best practices to keep in mind.

The custom WordPress portfolio site I created for Shannon Grey Williams

Cut to the Chase

In most cases, your work (the actual images of your portfolio) should be the focal point of the website. That means dropping users directly into the portfolio.

When the user arrives at your site, they should already be looking at your work. The portfolio I built for mega-talented makeup artist Shannon Grey Williams drops site visitors into her ‘Studio’ portfolio category, with an easy top-level navigation ability to choose another. Don’t make the user take ten clicks into your site until they find the thing they came for (or the thing you want them to come for). Show it to them first.

I used the same strategy with my own portfolio.

Use WordPress

Most clients want the ability to update their portfolio with new work on their own. This way, you can keep your portfolio fresh and let your site visitors see what you’ve been up to without having to pay someone else to update it.

WordPress offers an easy way to do this: you’ll be able to easily upload images and write blog posts to your heart’s content (and if you also want to sell widgets or do just about anything else with your site, WordPress can handle that too). My current stance is that responsive design gives us two good options for WordPress development: customizing an existing responsive theme or framework (I like the Genesis framework and I like the portfolio themes at Theme Trust), or using Bootstrap and a custom theme built from scratch (a technique I used on the design for Coldfront magazine).

Go Responsive (Duh)

Obviously you will create a responsive portfolio site, for reasons I’ve previously outlined here. But you already know that.

If you prefer a super-simple approach without a CMS, another option is the ultimate responsive simplicity of a site like the one I built for fashion illustrator Ryan McMenamy, whose drawing skills are so good I tend to drool a bit when viewing his work.

Let the Work Shine

The idea is to practice a kind of simple web design visual zen and put the portfolio images in an environment where there they can shine. Give them plenty of room to breathe (i.e. whitespace, simple UX) and put a spotlight on them.

Use large images. You’ll want to show the work nice and big. However, since we are going responsive, you’ll want to use a responsive image solution so that users are not downloading the same huge image on mobile that they need to load on desktop. Responsive image techniques are always changing, so you’ll want to work with a professional instead of your sister’s boyfriend, who will probably make your site look like this one.

Image Quantity – Less is More

In the Illustration department at Parsons School of Design, we were usually taught that roughly 10–15 images was an ideal number of images for a portfolio. Maybe you can use this number for each individual category, but I believe it’s a good general target.

Your work looks great, but it’s unlikely that any user is going to click through 50+ images. Plus, I think a digestible batch of content feels more sophisticated. So keep it digestible, and keep it fresh by updating it regularly.

Do it Right

Whether we’re talking about building a website or building a house, I subscribe to the philosophy that you should do it once and do it right. Granted, the ever-changing nature of the web means that you’ll need to update your site when the web goes through an evolutionary step (i.e. when the mobile web and responsive design came around, most sites needed to get on board with that sea change). But if you do it wrong today – and work with someone who doesn’t know what they’re doing – you may have to pay to fix it or do it over again next month.

That’s why you should hire a pro. I can help get your work online and make it shine, so drop me a line.

Related Posts:

  • New WordPress Portfolio Design: SebastienTardif.comNew WordPress Portfolio Design: SebastienTardif.com
  • What is Responsive Web Design?What is Responsive Web Design?
  • Here’s Why Designing Your Website Yourself Could Ruin Your DayHere’s Why Designing Your Website Yourself Could Ruin Your Day
  • Protein: the Manual for MenProtein: the Manual for Men

Filed Under: Web Design, WordPress

Work with Dan

Do you need a website or logo design? Check out my portfolio and drop me a line to discuss!

Comments

  1. michigancreative says

    January 5, 2016 at 11:54 pm

    Very interesting article, i really enjoyed to read this…

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

ADVERTISEMENT

About

Magnetic State is a design studio powered by Dan Redding. We create websites, brand identity, and print design. Wanna work together? Send Dan an email.

Visit Culture Creature!

Culture Creature is a music blog and podcast founded by Dan Redding. Visit CultureCreature.com!

Free Design News

Sign up for the Magnetic State newsletter! Receive important updates and tips from Magnetic State a few times a year.

Search

Categories

HYPE

Loading Quotes…

© Copyright 2015 Magnetic State. Privacy Policy