Framing your portfolio

Apr 11, 2012 by Shaun Smylski

Picture frames. There are different types to choose from, but which is the right one for you? It’s tedious to think about and it drives me bat crazy. Where will they hang? What photos go in them? Or perhaps this isn’t a problem for you? Maybe you’re normal? Not obsessed, like I’ve become.

I’m writing today to convince you of how important it is to frame images accordingly. Hanging picture frames is a lot like designing galleries & portfolios. I compare framing Grandma and her cat ‘Mr. Tibbs’ to customizing a Behance Prosite portfolio, or cropping a website thumb to post on Dribbble.

One drive-by in our sweet Google chrome convertible to Behance Prosite, Cargo Collective (or what have you) will show you a multitude of gallery framing styles.

In this post, I will only be talking about what I’ve learned from creating thumbnail layouts. It’s short for how large the topic is, but let’s walk outside and discuss the finer points of framing your thumbnails.

Borders

First lesson I learned was, “If you don’t need a border, then don’t use borders.” Functionally, borders are tools for separating an image from its environment.

However, they are terrible for taking up space that could be used for content. Additionally, they’re inherently making more hard lines to what can be a cleaner layout. Ask yourself, “Does the environment affect the display of the thumbs?” if so, borders may be necessary.

Margin

The simpler the content, the easier it is to view, which is why some of the examples below look great without margins. Images with fewer colors and lines are easier to work with; it also helps if they have a visual property in common. That is how they can sit directly side by side in harmony. Similarities such as: being all logos, photographs, portraits or landscapes; have color, shape, texture or transparency in common. As you scroll down the images, each example gradually starts to have content that has less in common.

Nathan Brunstein

Mark Summers

Akos Major Photographic Works

Kyle Trafton

Laurie Mucciolo

Becka Hussey

Red Antler

Not all work will look the same. Some designers have taken it upon them to force similar color on all their work to make a condensed & uniform layout, much like Toto has.

Toto Screen Printing

Otherwise, some even try to use transparency or add borders to create cohesion between the thumbs, just like Dribbble does.

When do you need margins and borders?

The more detracting elements there are, the more separation is needed. More separation leaves less space for content. Ergo, removing distracting elements removes the need for more margins and borders, making the best use of space.

Public galleries like Behance cannot force properties like color onto the images like Toto has. Instead, they make room for the different types of content.

Online Public galleries will subtract from their layout to make more room for content (removing color, margins and borders); making a bare and neutral space. Because the thumbs have no similar visual property to connect them, margins are necessary.

What is the best way to frame thumbs?

I really should make a series of posts because it is still too short. And this subject, so very big, but alas, I must conclude for now.

This is where it becomes subjective. Knowledge is the most important. Be good at what you do and you can do anything with it. Bend or break rules. Although this is a post on containing content, its focus is to teach the knowledge that will expand its limits. I’d love to hear your own solutions to framing images. Perhaps then, I can end my obsession and join you in normal life.

Shaun Smylski - Design Lead

Shaun Smylski is a UI/UX Designer, Brander, & Typographer. He also meditates on the way design affects thoughts, emotions, and behaviours.

Personal Blog | LinkedIn

Comments

comments powered by Disqus