Inside the New Hangar Web & Brand Update
I’m happy to announce an update to the Hangar brand and website.
For those who get excited by brand development and iterations, I’ll break down some of our new elements. I always like to view brands and visual identity in startups as a living, breathing thing that needs to evolve with the company and products. I prefer a slow, gradual expansion of visual materials to implementing rigid guidelines across the board from the very beginning.
When Hangar first started our visual identity was entirely in grayscale with a red accent color, which worked fine for our preliminary materials and beta stages. As we expanded into different industries and our collateral needs grew, red wasn’t enough. Also, standard rules for user interface design suggest red only be used as a negative for user actions (closing a window versus submitting a form, for example), so we wanted to avoid using that color in various interactions in our website and our applications.
Enter the updated Hangar pallete:
How did we get to these colors? We started with our brand’s initial red color and worked through many iterations using the free, useful Coolors tool.
How do we use these colors? To make headers and images lightweight for web, and to establish visual style in collateral.
Color Use Examples
Originally we focused on high impact, high resolution aerial images that really showcase the kind of content our platform can capture, but delivering these quickly and making them work as a design tool cohesively with our collateral and sites was a challenge. We instituted the use color washes for web sections, for tools in our applications, as a design tool for print, and matched them with gradient styles for web header backgrounds.
Color washes for print collateral:
Gradient washes for pngs:
The Hangar Logo
Icon usage: We wanted our visual stamp to not just work with the logo, but also be usable inside our products to connote a pin for map points.
Using Gifs to Solve Communications Challenges
Our products aren’t represented correctly with just still images, and our team often has just a split second of a website or email review to grab attention, so we’ve worked to integrate .gif files that tell our story in quick snapshots.
And Introducing… Jobsight
For Hangar’s first branded product, we wanted to keep many of the styles of our initial logo, but include our expanded pallete and give the product a feel of its own.
Thanks for following along! There is a lot of hard work here from various members of the Hangar team; Lon for his work on gifs and UI, Hunter for his work on Hangar360, and Marina for much of our website development. Most of all, thanks to Jered from Hit Machine Creative for his work on the logos, icons and design elements.
