Project CADRE: Branding
Creating the visual identity of the CADRE project
Year
2018 - 2019
Team
2 Web developers (1 full-time, 1 part-time)
2 Principal Investigators
2 Data Scientists
Project Lead (IUNI's IT Director)
UI/UX/Web Designer (me, part-time)
Project Type
Branding Graphic Design Visual Identity
Introduction
As an important part of the work I've done working as the UI/UX designer of [the CADRE project](http://cadre.iu.edu), I created a complete set of branding material for CADRE including logos, brand colors, and so on. The creation of the branding assets has been documented here. The actual applications of these graphic assets can be found in my other case study, CADRE: Official Website & Query Interface.
Ideation and Sketches
A fun coincidence that happened in the ideation stage in which the team tried to think of a visual identity for CADRE was I and Matthew Hutchinson, our in-house database manager and data schema specialist, both thought of using an owl as our visual identity. In Matthew's picture, the owl would be named Hootenburg and is a post-steam-cyber-punk cyborg-ish bird who can shoot a laser beam from one eye. For me, thinking of using an owl is not just because owls are my favorite birds, but also because of how owls are often connected to erudition, wisdom, academia and education. Naturally speaking, owls are also known as great predator birds who possess big round eyes, amazing night vision, wide-spreading powerful wings, and evolved hunting skills. Tying all these traits of an owl to our project, I was hoping the image of an owl would signify what CADRE as a search & query platform is capable of: fast and accurate data fetching, functions that support users to reach target data and network with ease and efficiency, and massive datasets for users to dig into.
Taking this photo of an great horned owl on Wikipedia as reference, I drew the first sketch on my iPad in Procreate:
Initial sketch of Hootenburg the Owl
Simplifying the Simplification
The team loved the owl, but also posed a very obvious problem: the level of details for sure won't be preserved when the logo is used on a smaller scale, and a more polished, modern, sleek visual style is definitely needed. Additionally, for a single logo, there are too many different visual elements involved, and the impact of each element would be weakened. Soon I created a simplified vector version of the owl:
Initial sketch of Hootenburg the Owl
Instead of having the network as an individual element, I attempted to "combine" it with feathery patterns on the owl's chest; the outcome was better than I expected, so we moved forward with this design.
Another problem emerged: the owl is definitely too tall for a logo. We were not going for anything that's typically round or square, but to cater to the height of the graphics means we could be losing other details because they are simply too small. At this point I had to make a big, hard decision: we are going to use the head part of the owl.
Visual Identity Development
Zooming in on the Essentials
Deciding to only keep the head and nothing else was a big decision for me, because this way I will need to work harder on making the image clear and legible so audience recognizes it easily. A lot of drafts were made during this period, attempting at figuring out what's the best possible style and composition:
Owl head variations
Other Possibilities?
Valentine Pentchev, IT Director of IUNI, suggested that we don't have to be limited to the owl and I make some "safer" options since after all CADRE is something created in the academia. My immediate thought was letter logos that are very straightforward; for letter logos legibility is also usually not a problem. Some versions I made in this stage are as the followings:
Ideas for CADRE identity other than the owl.
Among the five options listed above, number 2 (first image on the left below) and 4 (middle and right image) are scratched very soon after the first sketches were made. Number 4's problem was simply legibility - the stylized letters was not easy enough to be recognized as "CADRE" immediately; Number 2's problem was the team thought it seemed too general and is not special to reflect what CADRE is; additionally, the "network" element in it does not seem that much like a "network", but rather feels like having more to do with bio-medical or genomic fields.
Scrapped designs: Number 2 perspective letters (leftmost) and number 4 layers + network (middle and rightmost).
Logo options I provided were discussed among project directors and in an all-member meeting. Eventually the team's decision was to move forward with an improved version of owl head.
Final design the team decided to move on with.
What color?
Other than typical considerations any team or designer would have for their color palette such as uniqueness, visibility, mood of colors and so on, accessibility was included in our thinking process starting the first day of woking on the color palette for CADRE. I wasn't familiar with accessible design or taking care of audience groups with special needs before this project, but after intensive research and learning I learned that at least on the color aspect, different kinds of color weaknesses and color blindnesses need to be catered to. Typically this is not a major point that'd be considered by VI designers, but I decided to take it seriously because our intention was to build a data-mining platform for everyone.
How people with different color blindness see compared to people with normal vision. Image from Wikipedia. Source: https://en.wikipedia.org/wiki/Color_blindness#/media/File:Color_blindness.png
Taking this into consideration, I came up with 4 color palettes to be used on the own head logo. All of them involve some kind of blue, which if we refer to the comparison diagram above, tend to be the hue that's the least affected by color blindnesses; worst case scenario the blue gets seen as a dark turquoise color.
The 4 color palettes.
Then the palettes were applied to the shape for demonstration:
Owl heads in different color palettes.
At the same time I also tried out each of the other shape options that were not chosen with the four palettes, just to see if any of the combination would strike a second spark.
Some drafts of trying out different combination of shape options and palettes
The Final Design
After some minor tweaks and adjustments, work on creating branding assets for the CADRE project was completed:
A collage of the full set of CADRE branding assets.
Typography
Initially we wanted to use the weight Medium from Benton Sans family, which is an Indiana University brand font. Unfortunately, several details of "CADRE" in Benton Sans did not line up with our vision of CADRE and how we want our audience to perceive CADRE as. See the image below about how Benton Sans Medium is different from our final pick, Yantramanav by Erin Mclaughlin, a font published under the Open Font License.
A collage of the full set of CADRE branding assets.
Web Design with Branding
An example to explain how branding of CADRE influenced web design of CADRE is the web design color palette created after the whole branding.
The web palette was created after branding colors were defined. Colors in the middle row are branding colors while other colors above and below the middle row are web design colors.
Colors in the web palette were also used in multiple illustrations (you can find them in the CADRE: Official Website and UI case study), therefore it included a wider range of colors with less contrast.
I even created some visual mock-ups to show how the brand and logo would look like on physical objects, such as when used as letter head or printed on a name card.
Mock-up of CADRE official letterhead and business cards.