Since we recently launched the third iteration of our website, I’d like to take this opportunity to point out some of the key differences in how we now showcase our logos, print work, and interactive pieces.

Our makeshift photo studio located in Oxide’s basement

On the previous version of our site, all our portfolio pieces were bound to the same dimensions. For the redesign, we set out to find a way to show everything in its ideal size and aspect ratio — meaning that images shouldn’t be constrained to a preset size. Despite necessitating a tricky, ultra-flexible design and a complex back-end to arrange them all, our new images give us significantly more control over how our work is presented.

Throughout this post, on the left you’ll see the way we used to feature a particular portfolio piece, and  on the right, how our work is currently shown.

Logos

Previously, logos were forced into the set box whether they sat on a white background or not. The right image below shows how logos are now able to float freely without the constraint of the defined box. If logos look best on a tinted/textured background, we set a visual standard that would create some consistency across the board.

Logos before and afterThe previous way we displayed logos (left), and the new unfettered display method

Print (flat)

Posters are now shown flat, as if they’re hung on a white wall. We built several light faux shadows, which are randomly loaded below the image to show the thickness of paper. Flat printed pieces, many of which are in the Info design category, are also shown in this manner. Again, this is all about showing each portfolio piece in its ideal form.

Print before and afterThe previous way we displayed print work (left), and the new flat display method

Print (dimension)

Print work, package design, and many of the miscellaneous pieces in our portfolio have dimension, which means they need to be photographed in a way that shows this. Photographing our work in the past meant finding a spot in the office that had an interesting background. Our very inconsistent incandescent lighting (blue, yellow, and white) usually meant a lot of time in photoshop. So, we built build a simple studio in our basement to shoot these piece. We’re now able to take photos with proper lighting quickly and consistently.

FUMC print before/afterThe previous way we displayed dimensional print pieces (left), and the new cleaner display method

Everything else

Some pieces in our Everything else category are best shown as a photo. Since everything on our site appears as if it was hung on a wall or photographed on a perfect white backdrop, we decided to make the photos appear as if they lived in the same environment. This is where the styling for the logos with tinted/textured backgrounds came from. The off-white border and random loading faux shadow (already created for the posters) was the best solution.

Photos before and afterThe previous way we displayed photographs (left), and the new, more consistent display method

Interactive

Showcasing digital work presented a similar challenge: we needed the interactive work to appear as though it was in the same environment as everything else. The answer was to place the work inside a flat screen with a light shadow below it. To stay ahead of the constantly-evolving style of the hardware, we created our own simplified monitor and mobile device that would not be locked to a specific model (and eventually appear outdated). Our devices have no manufacturer logos, buttons, or specific styling cues.

Web before and afterThe previous way we displayed online and interactive work (left), and the new contextual display method