Style Guide

Photography & Assets


Introduction

Visual Aesthetic

Assets are often regarded as secondary to the content, seen simply as "flare"… but that is an unfair assumption. Assets may exist to compliment the content, but great imagery can truly make the content shine, clarify points, and establish the personality of the brand.

It's important that we take care to create the best assets possible. The vision for our imagery is comprised of two equally important parts: bold, playful photography complimented by sharp illustrations to help explain our more abstract concepts.

Primary

Used across the site.

Primary

Used across the site.

Secondary

Used for details and stand-out elements.

Secondary

Used for details and stand-out elements.

Accent

Used for errors and sparingly in assets.

Darkest

Header color

Primary

Text colour

Lightest

Light background

Asset Inspiration

As we're still in the early development stages of trying to truly own our look and feel, it can be difficult to say "it should look like [whatever]" when we haven't settled on a particular aesthetic! However, we can lean on more established brands and sites to see what they're doing, and sample their successes.

Charity: Water

Visit Site

What we liked: Simple, natural photography seamlessly blended with bold background colours. Interesting illustrations. Plus, lots of beautiful white space!

Percolate

Visit Site

What we liked: Great integration of natural photography with strong technical interfaces. Neat use of overlays for text on photography background. Whitespace!

Litmus

Visit Site

What we liked: Bold backgrounds, beautifully simple sections, animated elements, all complimented by sharp, classic illustrations.

Photography

Finding the right look for photography can be tough. We definitely want to avoid schlocky, forced look of stock photography, but we're also still trying to fit into a enterprise oriented world of business. But that doesn't mean we can't have fun! After all, we're a unique company, and that's something we should communicate through our site.

The happy medium between these two is natural, contextual photography: our employees caught in the moment of work, gathering together, or showing off their talents; users enjoying our customers' sites in the real world—such as shopping by phone in a cafe, or reading on their tablet at home; our customers watching how easily it all comes together.

The photo used here is an excellent example. It shows the fun environment we work in, and showcases our employees.

Photography

Monochrome

Using full color photography may not always be an option. Perhaps it's too strong for that particular section, or maybe you just want to add a subtle texture, or you just want a different look! That's where monochrome photography comes in.

The most important thing to know about using monochrome photography is that it's not as easy as laying a multiply layer overtop of black and white photography. After all, black and cool greys are not part of our brand colour scheme!

What you want to do is to select all the darks of the photo (directions on how to do that in Photoshop are below) and fill them with a dark, on brand colour. Use one of our neutrals if the background is white or light grey, and the darker of the primary and secondary pairs for colour backgrounds.

Photography

The Right Way to Create a Monochrome Image

Step One
De-saturate your photo

Once you have the photo you want to use, and have added all effects you want—fades, blurs, contrast adjustments, etc.—then you can turn your black and white. There are many ways to do this (Hue & Saturation, layer styles, or a adjustment layer), it doesn't matter how you do it, as long as it gets the job done!

Step Two
Select the Empty Space

This isn't just using the Magic Wand tool. The best way to do this is to go into Channels (either a tab in your Layer window, or under the Windows menu). Make sure all your channels are selected, and then click the "Load Channel as Selection" button at the bottom of the panel. Now you have a selection of all the negative space!

Step Three
Inverse and Fill

Now return to the Layers window, and create a new blank layer. Inverse your selection (under the Select menu), so now only the darks as selected. Then just fill your selection with the colour you want to use.

Hide your other layers and you'll see you have a perfect, transparent monochrome version of your image!