Mar 30, 2018
by
Caroline Zook
Drumroll please! Today we finally get to reveal to you the complete brand identity design for the new Wandering Aimfully!
If you've been following along on our three-part branding journey, you might be interested to see how the various pieces of the puzzle come together. You've gotten hints on the color palette and typography here on the Wandering Aimfully Under Construction site, and possibly over on our YouTube channel and Instagram, but now you get to read about the method behind the madness!
But first, let's recap. In Part One, we went through the important exercises to form the
basis for our Brand Story
. This led us to create our Brand Canvas document (basically a creative brief) resulting in our six brand tone words:
funky, modern, bold, vibrant, friendly,
and
seeking
.
Wandering Aimfullly brand mood board
From there, we
put together a mood board
to translate those six tone words into one visual concept. Once we were happy with the mood board, we pulled out a preliminary color palette and I did some brand explorations of typography and web design elements.
After that it was off to the races! I had a clear visual direction to go in, so my goal became coming up with fun graphic elements to tie everything together, and to define clear guidelines about how all these visual elements should be used throughout our branding.
This led to the final piece of the puzzle... our logo! (Yes, my branding chef's secret is I typically design logos LAST in the brand identity process... I find that it's much easier to narrow in on a design once you have your brand fonts and an overall visual language!)
Now that you're up to speed, let's go through each piece of our new branding and the reasoning behind it so you can see exactly how the Wandering Aimfully brand identity ties in to our brand story and our business goals.
Coming up with our brand color palette
As I mentioned in the visual explorations post, I had a bit of a head start on our color palette since the mood board had a lot of great jumping off points.
I wanted to streamline these swatches down a bit though and prioritize them into primary and secondary categories, which I knew would help us apply them to our branding going forward.
Here are the three that I picked out as our primary brand colors, and I felt it was really important to include black in the primary palette as a grounding force to keep the combination from feeling
too
whimsical and light-hearted. Gotta add that funky/bold flavor in there too!
I really like the harmony created between these four swatches and I can clearly feel the connection to our tone words. The bright cobalt blue brings a bit of boldness, while the softer pink adds a more approachable and friendly feeling to the mix. The final addition of the yellow offers a pop of vibrant energy as an accent that speaks to our fun and playful personalities.
While some designers prefer a more minimal and streamlined color palette, I'm just too much of a color lover to stick to four brand colors. That's where the addition of a secondary palette comes in handy. This makes our palette a bit more versatile and gives us some wiggle room for fun accents, as well as flexibility for things like web elements and buttons.
You'll see, though, that even with our secondary palette, I didn't stray too far from the hues in our primary palette to give the final overall palette a feeling of cohesion and memorability.
Finally, in thinking ahead about how these colors would live "in the wild," I knew it would be necessary to add some additional neutrals and color variations for when I would design the website and the WAIM member dashboard. I consider this our "extended palette" which gives us more versatility for backgrounds and text.
Color usage
At this stage I also find it helpful to define some guidelines about how these colors should be used together. (I usually create a complete brand guide once I've locked in the entire brand identity which more clearly defines color scenarios and how the whole brand is to be used.)
I find that including which colors should be used as text and with which backgrounds is a great place to start. You may also remember from my visual explorations that I knew we wanted to use a duotone photography treatment as a graphic element, so I also specified the three combinations of our color swatches to be used for those treatments.
Building out our typography palette
Once my colors were chosen, I moved on to typography! From years of experience inside my branding course, I know that a LOT of people get stuck during the typography phase, mainly because there are so many fonts to choose from and virtually endless font combinations.
I think the key is to start with just
one
central font and then start expanding the typography palette from there based on what visual balance you want to bring that first font.
Faro Display by Luzi Type
In this case, the typography palette came together rather quickly because I immediately found a typeface I wanted to start with. It was called
Faro Display
by a type foundry called Luzi Type, and I stumbled upon it thanks to this image on Pinterest. I found that it had both a bold, modern vibe but also some really unique details that made it whimsical and friendly.
For the majority of the branding process, I was sold on this font. (I used their free test drive font to play around with it in Illustrator and see if I liked it.) But, when it came time to buy the licenses, I realized it would run us about $300 just for the two weights of the font we needed. I'm all for investing in a font if you are really in love with it, especially because it will help your brand set itself apart if you're not using free fonts everyone else is using. BUT, Jason and I both agreed there were certain aspects to the font we weren't sold on (like the way the bottom of the "g" is kind of cut off.)
Ultimately I found a Typekit font called Gira Sans that was VERY similar in many ways and since it is included in our Creative Cloud subscription (that we already pay for), we decided to go with it instead.
Faro Display Lucky and Gira Sans both have a lot of similarities so we opted to go with the more affordable and versatile option in Gira Sans.
Once I had our display font in place, it was time to ask ourselves what other elements from our brand story and mood board we wanted represented in our typography palette. From the beginning I was pretty set on using some sort of monotype font, and Source Code Pro was the first one that caught my eye. I find that monotype fonts have this interesting blend of both feeling modern and digital, but also reminiscent of something more vintage like a typewriter. For some reason, the visual aesthetic reminds me of an old label maker or something, which contributes to this layered, "found object" vibe that speaks to the
wandering
part of our brand.
The final piece of the puzzle was to come up with a body font. I've almost exclusively used sans-serif fonts as body fonts throughout the years, but I had recently come off of formatting Jason's book where I used Adobe Garamond Pro as the body font. I loved the juxtaposition of the more traditional feeling serif font paired with these too other more modern and direct typefaces in Gira Sans and Source Code Pro. I found the pairings to be balanced but also not too visually predictable.
Typography Usage & Hierarchy
With these three fonts picked out, now it was just time to figure out how they work together! This is where defining the hierarchy of your typography is very important. Knowing which fonts (and which font styles) belong in which contexts is key to using typography in a consistent way going forward.
Here's a look at the scenarios I usually like to assign fonts and font styles too, which will make our lives much easier when it comes time to design the new website and any graphics.
Setting your brand apart using graphic elements
Now for possibly my favorite part of the branding process: graphic elements!
Graphic elements are things like patterns, icons, illustrations, photo styles—basically any visual motif—that can be used in concert with your colors and fonts to make your branding even more memorable and versatile.
My personal design aesthetic tends to be slightly more eclectic, so I love developing a vast, rich "library" of graphic elements that can be swapped out and combined in different permutations so that your overall brand appears to be cohesive yet still visually surprising and interesting.
Our graphic elements journey started with one key element:
hand-drawn arrows
. Arrows were a natural thing that came to mind for me because of the
wandering
piece in our brand name, but I also felt it could be a helpful element to have in our arsenal that could be used to direct visual attention and add a whimsical, organic element.
Recess Atlanta branding and menu
I was particularly inspired by the logo and brand elements of Recess (an Atlanta restaurant that I happened to stumble upon on Instagram.) I loved the child-like whimsy that their crayon-style logo suggested, so I went in search of the perfect crayon textured Procreate brush. This would allow me to draw by hand graphic elements and text with a consistent style that jives with our brand aesthetic. I found the
perfect
brush set through
Tip Top Brushes
—their Crayon Brush Set! I love that it's a digital tool but the texture gives that very tactile hand-drawn with a crayon look.
After the arrows I started experimenting with drawing more crayon illustrations that I could use together or individually to add whimsy, creativity and approachability to our brand...
Drawing the illustrations on my iPad in Procreate using the TipTop crayon brushes
Each element is its own layer so it can be pulled out individually as its own graphic or used together
You can see in the illustration I also have a few torn paper and graph paper elements. Again, going back to what I said before about that "found object" feeling, I was so inspired by the collage and paper elements in our mood board that I could see how these elements would bring a great organic vibe to the graphics of our brand. To balance the more organic and loose elements of the illustrations and paper, I also brought in this element of grid paper and a grid pattern as a background. I like that it adds an element of structure (a nod to the
aimfully
part of the brand
).
The result of all these elements is a graphic elements library that can be mixed and matched for unique but brand-consistent visuals. The torn paper pieces, polaroid frame, and paper scraps were all purchased items on
Creative Market
that I adapted to our brand colors or style. When I'm under a time crunch, I try to customize ready-made design resources because it still gives you a custom look if you integrate it well into your brand identity design while saving you a ton of time!
our Graphic Elements Library
Photography treatment
Where do photos fit into this brand picture? I knew we'd likely be using a lot of photos from our travels and our lives, and I wanted a way to incorporate photography into the design that would feel uniquely
Wandering Aimfully
. Based on inspiration from our initial mood board, I decided to use the duotone treatment for photos used in our graphics, as well as a cut out and collaged feeling to go with that "found object" and layered visual aesthetic.
Bringing photography and graphic elements together
Now, I know that is A LOT of different elements to play with, which is why it's important to create very
specific
ways that those elements work together and should be used. Here are just a few examples of combining our various graphic elements and photo styles.
Grids are used for backgrounds...
Polaroids for more casual photos of us...
Arrows for movement and layering...
Duotone treatment for photos or backgrounds...
Torn paper for pops of color or text backgrounds...
Defining how your brand elements will be used is equally as important as defining what they are.
And that, my friends, brings us to...
Our logo design process from start to finish
Now for the pièce de résistance (and yes, I Googled how to spell that.) As I mentioned, I tend to save the logo design for last. I just find for my personal process that rather than using the logo design as the springboard for the brand identity, I like to think of it like the cherry on top. My intention is always to use it as a shorthand for the brand identity, and it's a lot easier to do that when I already have the colors, typography and graphic elements solidified.
As for the tools I used for designing logos, it starts out with sketches using my iPad Pro/Apple Pencil. Once I decide on a few concepts, I digitize them primarily in Adobe Illustrator, or if they're hand-drawn concepts I first play around with them in Adobe Photoshop until I have to vectorize them. When I'm ready to "present" them to Jason so we can make some decisions and move forward, I actually place the images in a Google Slides presentation (this makes it easy to view on multiple devices and update as it evolves!). I also love that this allows us to keep a record of the logo variations and concepts as we move along the process. For a sneak peek of what's to come (AHH SPOILERS), you can check out the full Google Slides presentation here:
And now let me walk you through the process, so you can see every decision that brought us to our final logo!
Step 1: brainstorm Brand concepts
My logo concept brainstorm notes
Before I even start designing, I sit down for fifteen minutes and let my brain run wild with concepts that might represent Wandering Aimfully as a brand or any underlying concepts we want potential customers to pick up on. This is another time when all that
Brand Story homework
comes in handy! I often find myself going back to those worksheets and looking for keywords or concepts I can add to my list. I wrote down motifs that would reference our brand story and the feelings/tone I wanted to convey.
Step 2: Begin thumbnail sketches
The next step of the process is to start sketching! Again, I try to keep it loose and free at this stage so I can let my brain and creativity wander (pun intended.)
Full disclosure: I'd usually do WAY more sketches than you see here, but Jason and I were on a strict deadline. Just two days to complete the final branding and logo! So I fought my instincts and kept it very limited!
Step 3: Take the best thumbnails and start developing them
From the thumbnail sketches, I take a look back and see if any ideas stand out to me. My goal is to develop three of these concepts into more finished logos so I can choose a general direction to go in.
In this case, the sketches that stood out to me most were: 1) the arrow with the W through it (symbolizing the wandering twists and turns in our journey), 2) using a curved arrow as a bounding shape for the logotype, and 3) using the WA acronym and incorporating the compass arrow shape for the A within the crook of the W (this was Jason's favorite of the three concepts).
At this stage, I don't want to spend too much time refining concepts knowing we're only going to pursue one of them, so I tweak each concept just enough to get a feel for how it might look in finished form, but not so much that I waste time making it pixel perfect. For this particular logo, I did most of the refining on my iPad in the program Procreate which ended up looking a little something like this.
Step 4: round one presentation - present versions of best three logo concepts
At this point it's time to make some decisions! This is when I bring all three final concepts into Google Slides and Jason and I decide on which we like best.
As much as we liked the whimsy of the more hand-drawn concepts (A & B), Jason and I both agreed we liked the final W concept the best. It felt the most memorable and it kept some of the hand-drawn elements that incorporated the friendliness of our brand tone while also feeling bold and modern. We also loved that the compass arrow was a subtle nod to the wandering aspect of our brand story.
One of the happy accidents that came out through this part of the process was that I initially added the yellow dashes outside the circle to make the arrow feel more compass-like. However, we realized in doing this that the circle took on additional symbolism as a sun. We loved that this communicated the optimistic tone that is close to our hearts and is a subtle nod to the "life" part of the work/life blend which was so important to us as a brand.
One down-side: Jason didn't realize that the compass arrow doubles as an A, as in "W.A." or Wandering Aimfully. This wasn't particularly concerning since the compass arrow as a symbol only still works, but I wondered if it was possible to make that more obvious as we refined the concept.
Step 5: Round two Presentation - Take best concept from round one and refine further or explore variations
We took Concept C from the first round, but I tried a few variations playing around with the arrow compass behind the W. I worked on trying to make the compass arrow read better as the A to accompany the W, but the idea never felt successful. Jason and I also thought the arrow got lost next to the boldness of the W and might prove difficult to read at smaller sizes. That's when I opted to pull out the compass/sun elements and use them on their own as a logomark in concert with the name of the brand. Again, I tried a few slight variations on this as you can see in the first slide below.
Ultimately we both liked the simplicity of the first iteration (A), with the compass direction pointing to the right with a sense of forward motion and purpose.
When we compared it to the original W concept, we decided we loved the simplicity of the lone compass sun concept the best (C). It also was the most recognizable at varying sizes which felt the most versatile.
Step 6: Round three - Finalize and tweak winning concept and vectorize it
Since our favorite concept (the "sun compass") was mostly hand-drawn, I decided to recreate it in Illustrator just to make sure the proportions were correct. I played around with different tiny variations and subtle changes to the text in Illustrator to get our final logo. (Pro tip: be sure you test out a one-color variation and see how your logo responds on dark and light backgrounds!)
This is all the tiny variations on the logo I experimented with inside Adobe Illustrator
My go-to process for making tiny tweaks like this is to compare one change at a time and put the two next to each other in Google Slides so we can decide. (If you’ve ever done one of those eye tests to get a lens prescription and they ask you if A or B is clearer, it's a little bit like that game.) Choose which looks better to you, and move on! For example...
Uppercase or lowercase for the logo?
We liked the lightness and structure of the uppercase.
Logomark with or without the compass background?
Without. (We decided it felt more open, airy, and the sun symbolism felt more visible.)
Blue or black type?
This was a toughy because we'd seen it so many times with the black. But we decided blue!
Hand-drawn or geometric, vector icon built in Illustrator?
Hand-drawn. (Though in this image it was still the original rougher sketch.)
We decided the imperfection of the hand-drawn arrow brought in that friendly and approachable aspect of our brand so we wanted to retain that. That was the last face off!
Finally, at this point I re-drew my hand-drawn icon by tracing over my vector sketch, then I vectorized it in Illustrator which allowed it to retained those slightly imperfect edges.
Once we saw everything finally together, we ultimately decided to go back to the lowercase version of the logotype to better match the whimsy and fun of the hand-drawn mark, but we increased the tracking just a tad to still give it an airy and open vibe.
And VOILA, the final logo! 🙌 🙌 🙌
But boy oh boy was it a journey of a million tiny tweaks to get there!
Extending the brand to social media
In today's digital landscape, an integral part of the branding process is also thinking about how your brand's identity, voice and personality will extend to social media. Before we launched our social channels, I actually designed these mock-ups to see how we might design things like YouTube thumbnails and our Instagram feed.
Final thoughts
You made it! We know this was a monster post, but so rarely do you get a peek inside the branding process and every bit of decision-making that goes into the formation of a brand identity. We hope it was fun to see how our Brand Story informed our tone words which informed our mood board which informed the final logo and brand identity!
If I could offer any advice to any of you out there designing (or re-designing) your own brand, it would be this:
Don't be afraid to be decisive and move forward.
Nothing is permanent. I know when you’re starting out you want it to be
perfect
. You want to design the logo that will last you for 20 years. But that’s just not realistic. It’s more important that you move forward. You can always redesign in the future. In fact, you probably WILL. So embrace that. Do the best with the tools you have in this moment and just stay focused on making sure the overall feeling of your brand matches your values and who you're trying to attract.
A note about trends
It’s not lost on me that our brand color scheme seems to follow some design trends right now. The primary colors, the 90’s-esque vibe of the illustrations... these things are on the upswing. BUT the truth is that I didn’t necessarily
try
to pull together elements that were trendy (in fact, most times I try to avoid it), it just naturally grew out of our brand story (and my own subconscious I’m sure.) But as long as the final product feels congruent with the feeling we’re trying to achieve and it's not born out of a desire to chase trends, I’m okay with that! As I mentioned, whatever unfolds in the process, embrace it and move forward.
If you made it to the very end of this post, goodonya! Feel free to comment over on Instagram (
@wanderingaimfully
) with any questions you have about the process. I geek out on this stuff so I'm happy to answer them!
(And if you want to save our branding to Pinterest for the future, here's a handy image for you to do just that!)