Designing Hopper’s Visual Identity
Or, “I Design, Therefore I am”
Not too long ago, the Hopper design team wrote about the great strides we made in the design of our Android app. This included a better understanding of how to apply our brand color to the product as well as long overdue updates to our overall color usage, the unveiling of sky blue, Hopper’s new primary, in-app tint color, and some navigational and structural updates.
We’ve now extended this visual language to our iOS app, and advanced it in the process.
Humble Beginnings
The very first release of the Hopper app relied heavily on default iOS standards: the out-of-the-box tint blue, UIkit translucent tab bars and menus, and the typeface Helvetica Neue (later San Francisco).
Before Hopper had validated product/market fit, these decisions allowed us to focus quickly on the things that would help us get there: the product concept and experience. Nearly a year and a half after that first release, we felt it was time Hopper had a visual voice of its own, and we had enough of an intuitive sense of this voice to execute on it.
Color
One of the core components of our visual voice is color. The default iOS blue we were using lacked brand character and felt too devoid of energy. We initially reacted to it by experimenting with using our primary brand color, a rich coral, more prominently in our Android app.
This, however, felt too loud, and we eventually settled on our new sky blue, using it across the app as a primary tint. It proved to be a better complement to the other colors in our palette and helped brighten up our UI overall for a more light-hearted and inviting interface.
Sky blue now takes center stage in the latest version of our iOS app as well, along with an expanded use of white space, a host of darker and lighter neutrals tones, and a supporting cast of similarly playful hues.
Style
In addition, we updated the hopper navigation and tab bars from the default, translucent style of UIkit to an opaque white. The translucence of the default style often makes the nav and tab bars a dull gray color, relative to the content area. While this is a way to help create focus on the content itself, use of an opaque white further lightened up the interface, supporting our other color choices.
We also replaced the default border, a mid-gray rule of about a 1px width, with a gray, mostly transparent rectangle, creating the illusion of a hard shadow.
The choice was inspired by similar styles applied in the Peach and Citymapper iOS apps. This treatment worked more harmoniously with our flat, illustrative aesthetic elsewhere, creating more cohesion in the interface.
By making the border thicker and a lighter gray, relative to the default UIkit style, the transition from app bar to content became softer and more subtle.
Typography
The last release also debuted Proxima Nova as our new app type family. We had already been using it on the web for quite some time but finally made the decision to have it formally be our in-app typeface.
Its geometric qualities fit in more naturally with the hard shadows we introduced on the nav and tab bars, and its humanistic elements played well with our idiosyncratic illustration style.
Bringing It Together
From the typeface to nav bar, from color usage to drop shadows, these decisions work together and support each other in ways that make them greater than the sum of their parts. They create the refined yet quirky, expert yet inviting interface we wanted to establish, and we’re pretty excited about it.
Let us know how you feel about it by tweeting at @hopper!
—Pantelis Korovilas (@pantelisak), Lead Product Designer at Hopper
