Creating a consistent visual hook

This is always a very simple request, but when you dig a little deeper you realise that they don’t just need some illustrations (you could very easily swap ‘illustration’ for logo here). A quick look at their marketing site and product, and you’ll quickly realise that everything is disjointed. They need a visual hook that will create a unique identity for them. Something that will allow their product to scale, safe in theknowledge that their visual identity is solid and consistent.

The thing is that they aren’t thinking holistically about the problem. They’re mainly thinking ‘Next up, I need 4 illustrations on the landing page so that the landing page will look snazzy.’ It doesn’t work like that.

A visual identity is obviously so much more than a logo or a set of illustrations. It’s a coherent collection of systems that work in tandem,each neutered to work alongside each other, with the main goal of each to create a unique personality for your product. Ok, that is total wanky design jargon. I’ll try break down how I see it all fitting together.

Building a Visual Identity (from a business perspective)

The first thing that you should do if you’re looking to create a solid consistent brand, from a business perspective, is do the Google Ventures Brand Sprint. It takes 3 hours, but the output is so so valuable. I highly recomment it. You’ll end up with a doc outlining the core values and personality of the product. And I strongly urge you to do this if you’re planning on introducing a designer to work on your brand identity.

Building a Visual identity (from a designers perspective)

Get the business to do the Google Ventures Brand Sprint. See above. Without a clear definition and understanding from the business side of the company values, then its going to be virtually impossible to be able to create a style that suits their personality.

The Basics of a Visual Identity

I’m not going to use this article to explain how you go about coming up with colour palettes, choose a font or creating a tone of voice document. Everyone is aware of what is needed to create a solid set of brand guidelines:

1. Logo

2. Colour Palette

3. Typography

4. Tone of voice document

5. Iconography/Illustration style

6. Imagery style

7. Design principles.

These are all generally easy to create for the most part. Spell out the colours, call out the font styles etc. They just need to be well documented and distributed across the teams so that everyone is consistent when using them.

The difficult comes in when you need to try create a style that is coherent and all well considered across all aspects of the guidelines. Sometimes it can be difficult to know where to start. It’s a pretty scarey thought, trying to tie up so many different strands. Getting this sorted as early as possible in the product life cycle can really helps things.

Here’s one I prepared earlier…

Where I’m focusing in on is the part of creating a style that is consistent across all aspects of the visual identity. Let me show you an example of what I mean.This was a project I worked on to create a visual identity for a product called BrightSpot that specialises in gettingstudents into college and in time finding them a suitable employer.

The plan was to find a visual hook that would work across all aspects of the branding. So I broke it down into four areas that I felt I couldtie it all up, the colour palette, the logo, typography and the illustration style.

The Colours:

I took different aspects of how the business works and assigned them each a colour. In this instance I separated the different areas into three areas. Orange for Schools, Red for Colleges and Blue for Employers. This allowed us to create some visual differences when separating the flows for students (orange landing page), for college members (red landing page) and for potential employers (blue landing page). You’ll get the idea later on.

The Logo:

So with the colour palette in mind, I introduced a bar shape into the mix, positioning them to create a unique symbol, allowing the coloursto overlap each other. I explained that the colours overlaying are the different areas of the product connecting. Pretty flakey but it makes sense in my mind. I also helped sell the idea by explaining how the symbol resemble an uppercase B…that was probably better seller than the connecting idea 😂

I then fleshed out different variations of the symbol to give the mark some flexibility. This allowed the logo to be used in different use cases but the mark is strong enough to keep its consistency.

The Typography:

Keeping with that round style that was outlined in the logo symbol, I opted for a very round font that complimented the style. Nunito was the font of choice, which is a Google Font which was handy as it allowed me to use it across the product design too.

The Illustrations:

The illustrations were going to be the linchpin of everything. They were going to be used to explain how the product worked, but they were also going to use the different colours explaining the different areas of the business as well as leaning on the bar shape that is visible in the logo. They’re used to tie up the experience.

The Conclusion:

So, where I am going with all this is the illustrations is where it all started. The first conversation regarding this project was ‘we needan illustration style’. They had also mentioned that a logo was needed but mainly it was some illustrations that would help explain the product. The ask wasn’t about a coherent style that was consistent across all aspects of the core elements of the identity. It was focusing on one aspect of the visual identity. And thats where I feel alot of people go wrong. They look at things too granular. If you’re to create a consistent high level brand experience, everything has to grow together. It has to be somewhat organic. But everything has to be considered and merged together. Everything needs to gel.

You can see the product for this project over at Stride (rename in progress)

I’ve tried simple approaches to creating basic illustration styles and broader branding styles on various projects, you can see some of the case studies here:

• TeamHuddl — illustration, logo and colours

• Qstream — illustration, colours and iconography

• PrivateVPN — illustration, logo, colours, iconography

• Brightspot– illustration, logo, colours

• OnSecurity — illustration, colours, logo

Anyway, enough of my rambling. I hope you find this useful. If you have any questions or have any tips, please give me a shout.

Feel free to pick my brain (or whats left of it) over at:

// Twitter // Dribbble // Behance // Portfolio site //

Note: Thanks to Al for the contribution. Originally published on Medium