Portfolio Websites: Best Practices

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.

portfolio website design

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.

What Does the Apple Logo Mean?

apple logo symbol

Still frame from Disney’s Snow White

I used to teach an art class for teenagers, and there was one lesson that would always blow their minds. Here’s how the conversation usually went.

“Do any of you have an Apple computer, or an iPhone?” I’d ask. The answer was always yes. “What does the logo look like?”

“It’s an apple,” they’d reply.

“Is it just a plain apple? Is there anything unusual about it?”

“There’s a bite out of it.”

Here’s where the fun starts. “Have you ever heard a story where someone takes a bite out of an apple?”

A few moments of silence from the class. Then: “Snow White…”

“Right, Snow White,” I’d say. Then I’d ask a student to recall the plot: “The witch gives Snow White a poison apple that kills her.”

“Are there any other stories with an apple?” I’d ask, leading them another step back. This time, there was usually two moments of silence. Sometimes I’d have to nudge them with a clue (“Maybe an older story?”). Eventually, someone would shout, “The Bible!” Cue the astounded chorus of woah.

Apple advertisement

Early Apple advertisement

The Apple computers logo symbolizes knowledge.

In the Bible, Adam and Eve are tempted, by Satan, to taste the fruit from the tree of knowledge. Eve, like Disney’s heroine, gives in to temptation and takes a bite of an apple. Once Adam and Eve had their first taste of knowledge, they knew that they were naked, and they were ashamed. That first bite of the apple represents the fall of man.

This symbol is one of the oldest and most potent in Western mythology. Apple’s use of the logo is extremely powerful; their name and corresponding pictorial icon are synonymous. The simple logo design deftly carries the heft of centuries of meaning. Apple likes their symbol so much that they’re very protective of it, and they don’t like when other people attempt to use apples in their logos.

Rob Janoff, the designer of the Apple logo, claims that he didn’t explicitly intend this meaning when he created the logo in 1977. He didn’t have to. Mr. Janoff said he included the bite “for scale, so people get that it was an apple not a cherry. Also it was kind of iconic about taking a bite out of an apple.” Why is the bite iconic? Because of its use as a symbol over hundreds of years of mythology. Former Apple executive Jean Louis Gassée called the logo “the symbol of lust and knowledge.”

The Apple logo symbolizes our use of their computers to obtain knowledge and, ideally, enlighten the human race (when we’re not too busy using them to look at cat GIFs, that is).

Guide to WordPress Magazine Design

If you’re ready to publish your magazine online, or if you’re moving it from another platform, WordPress is the way to go. The platform offers total flexibility for layout, publishing options, customization, and easy SEO optimization. You’ll want to work with a team of WordPress designers and developers who specialize in WordPress (spoiler alert: we are that team, and you should contact us).

I’ve published magazines of all shapes and sizes online, and I have encountered just about every challenge in the book (at least the ones that exist at the time of this writing). This post is a guide to some of the biggest challenges you might discover along the way, including tips for overcoming them.

online magazine

Magazine rack photo by Ken Hawkins

Image Standardization and Magazine Layouts

For my money, integrating images into your site is the biggest challenge in online publishing because how you choose to handle it can make or break a magazine publishing system. Like all publishers, you’ll probably want to use bold and dynamic images as focal points of your site, illustrating each article with potent graphics. But how do you display images as thumbnails in a sidebar, or on a homepage feed, without breaking the layout? How should text flow around them, and what size should they be? An added challenge is the user. Most magazines have a staff of editors and interns who create and upload images, in addition to the designer. Have you provided them with clear, easy guidelines for images? [Read more...]

Responsive Redesign Leads to Traffic Surge

Responsive Redesign Increases Traffic

My recent responsive redesign for Coldfront magazine has yielded some startling results. Coldfront site enjoyed 6,642 visits during the week of March 13–19, which is an increase of over one thousand percent from the corresponding week in February. There are many factors involved in the traffic surge, including Coldfront’s awesome content, but according to owner/editor John Deming, “the redesign ought be credited above all else.”

Here’s why your business needs a responsiva responsive redesign leads to higher traffic. Modern website visitors want to visit a site that’s accessible on all platforms and devices. A well-designed responsive site with a pleasant user experience encourages engagement, interaction, and sharing across the board. Because we were upgrading from an outdated desktop site, there was a lot of room for improvement in all of these departments. A great deal of Coldfront’s traffic comes from social media, and an easy-to-navigate responsive site helps facilitate sharing. I couldn’t be happier with these results!

More: Why Your Business Needs a Responsive Website

Why You Need a Responsive Website

Responsive design is the modern and future-friendly way to create websites that look good across all devices and platforms. If you’re creating a website for the first time, or if your business is using a standard desktop website that was created before the proliferation of mobile and tablet devices, then responsive is likely the solution for you.

For further definition on the term, here’s the description that Time magazine used when it launched its responsive redesign: “All the pages of the website will now automatically resize to fit all computer and mobile-device screens.” To see a responsive design in action, check out this resizable demo.

responsive-ad

The bottom line is this: responsive web design is good for business. Ensuring that your site provides a pleasant user interaction on any device means extending a welcoming hand to all users. That means your audience is more likely to interact with your site, follow its calls to action, proceed to checkout, and more. Upgrading to responsive design can dramatically increase conversion rates (that’s the conversion of casual site visitors into users who are performing primary site functions like making a purchase or filling out a form). Some brands that made the transition have enjoyed an increase in conversion rates of up to 100%. That’s huge.

Here at Magnetic State, we know responsive. Recent responsive web designs include a complete magazine CMS for Coldfront, a custom feature article for Women’s Health, and a WordPress artist’s portfolio. Contact us to upgrade your existing site, or to create a new one that will work wonders for business. Send an email to dan@magneticstate.com and we’ll discuss your needs.

New Work: EverPower Corporate Reports

Last year, Magnetic State designed two corporate reports for EverPower wind energy supplier: their Ten-Year Anniversary Report and Corporate Social Responsibility 2013. The documents were designed by myself and freelancer Monica Susantio, who brought her impeccable layout and typography skills to the project.

EverPower covers

To view more of these projects, download the Corporate Social Responsibility report or a segment of the Anniversary Report. Need an annual report or other corporate/promotional document for your business? Send me an email and we’ll make it happen!

EverPower Spread

Click the above image to view full-size spread.