Select Page

Case Study and Branding Style Guide for: And Studio

Recently, our team just finished the design process for our very own And Studio! It has very much been a labor of love and has been fun to turn the tables on ourselves by being our own client. In order to show how much we love to create digital masterpieces, be it mobile apps, websites or logos, we knew we needed a brand identity that portrayed who we are!

We believe that clients shouldn’t have to choose between Beautiful & Beastly. And Studio creates digital masterpieces that provide the connection between you & your customers.

One of the first things to consider when branding yourself is knowing what you want to be known for. For us, our goal was to create a logo that projected:

  • Bold
  • Fun
  • Creative

We wanted to create something that filled us with joy every time we looked at it.  We achieved these ideals with the style and the colors we created. It all started with creating an ampersand (ie. & symbol) that communicated all of the above values. After hand lettering MANY prototypes, we settled on one that flowed and looked gorgeous.

Brand Style Guide - And Studio - Cover Logo

 

PROCESSING…

After sketching the ampersand, it was on to sketching the rest of the And Studio logo.  We decided that a flowy, script-type of custom font would be perfect.  After playing around and sketching a few ideas, the best designs arose to the top with the idea of taking the S to cross the t and dot the i.

The next stage of developing the And Studio logo was importing all of the final hand letterings into the computer to vectorize the logo.  Vectorizing a logo allows the logo to be big enough to put on the side of a building, yet able to be small enough to be on the size of a stamp without losing a bit of quality in either case.  After a few program crashes and losing everything in the process (twice), we actually had an idea that made the total logo better in the end.  Although starting over twice on the digital file was beyond frustrating, it led us to pause and have an epiphany! We discovered that we needed to make the small cap letters a little taller to better compliment the capital A and S. It created a better sense of cohesion and eased readability!

Brand Style Guide - And Studio - Process

 

COLORS SPEAK LOUDER THAN WORDS

People will feel your brand before they understand it.  In other words, people will feel the emotion of a design before they read the contents.  Colors speak volumes about what you value and who you are and want to be.  We started off with 21 different color schemes. So what did we do to narrow them down?  What anybody would do!  We ran those colors on brackets like it was March Madness!

From 21 color schemes, we came down to 7, then 3, then 2, then 1.  Ultimately, a specific Red, Yellow, and Blue combination was the one that won our hearts and consistently put smiles on our faces!  It needed to work in various combinations because we wanted to be able to use all three colors at any point in time for different applications.

Each color also represents a leg of our primary offerings as a digital workshop. Red is for apps, yellow is for logos, and blue is for websites. These colors will be represented in a few secret upcoming projects for And Studio!

Brand Style Guide - And Studio - Color Variations

 

SPACING… THE FINAL FRONTIER

The next step in the process revolved around getting the spacing pixel perfect.  Up to this point, we had just eye balled the spacing for the ampersand logo and the name “And Studio”.  It was now time to fine tune this baby and take it from an art to a science.

Everything in the spacing of our logo and logotypes is based on the width of the ampersand logo. To our surprise, our estimations of where everything should be spaced were almost exactly where they should be when using the width of the ampersand as the plumb line. It not only determined the spacing in between the different words of the logo, but the spacing outside the logo to take into consideration how close any other text or image can get to the logo.

Brand Style Guide - And Studio - Spacing

 

LOGOTYPES

Once the tedious task of spacing everything out beautifully was complete, we had a complete set of various logotypes. Each logotype was created to display the brand of And Studio in any environment. For example, if there is little space for anything, the ampersand Mark is perfect. If design freedom is limited, the Inline can stand alone but doesn’t demand as much attention. This is best for documentation or basic branding where the focus lies elsewhere. Lastly, the Stacked logo is the primary logotype of the 3 as it is best used standing on its own.

Brand Style Guide - And Studio - Logotypes

 

SOCIALLY GRACEFUL

Now it was time to have even more fun and begin creating an idea of how our And Studio brand would tie together all of our social media accounts, yet each have it’s own personality. Facebook was first up. Drawing upon the inspiration of our three primary logo colors representing the three legs of our agency – apps, websites, and logos – we made it so that the two different images in Facebook that make the profile picture and cover image looked like they were seamless with the red/blue/yellow colors streaming. Blue was the prominent primary color of the cover iamge on Facebook since that is their branding color.

Next up was Twitter and the same streaming colors were used, but they were laid out in a different way. Twitter works differently than Facebook because the cover image and profile picture change position depending on the size of the browser window. We chose yellow for Twitter to be the prominent color because it just seemed to fit. Then we chose red for Google +, since Google is the biggest player in the app market among the social networks.

Lastly, we had an excellent idea for the Pinterest social network. We took the branding colors of And Studio and created a template with individual cover photos for each of our boards. In the few weeks since we have branded our Pinterest account, our average weekly followership has increased by more than 270%!

Brand Style Guide - And Studio - Usage - Social

 

BRANDING IDENTITY

The final piece of the puzzle rested in creating a general idea of how our brand would look and feel in many different environments. We purposed to create an all encompassing branding identity package for everything that we will be creating and handing to clients in the future. From a branded CD that will contain masterfully designed assets to a mobile login screen, we set up an idea of how our brand will be packaged and interacted with by our clients and users.

Brand Style Guide - And Studio - Usage - Branding Identity

 

WHERE DO WE GO FROM HERE?

So what about you? Do you need to brand yourself? A new website or possibly an app? Let us know by emailing us at hi@andstud.io or fill out our contact form!

And Studio has many projects on the horizon so stayed tuned. Our very next items of priority has to do with redesigning our website to incorporate our new brand image, then on to a beautiful custom mobile app just for And Studio clients to communicate and follow along with their individual projects. Aaaaand away we go!

Check out all of the Branding pieces together by clicking here!

Top