Refreshing the ONA brand
With colors, typography and patterns, the Online News Association’s brand is more than a logo
As we began to implement a new branding process for our annual conference, we revisited the ONA brand itself to generate a similar package and branding guide.
Before developing the guide, I couldn’t answer basic questions. What is our color palette, and how is it used? What are our typefaces? We hadn’t streamlined how we use color and sometimes introduced new ones on an ad hoc basis.
In refreshing the ONA brand, we made strategic choices around three elements: colors, typography and patterns.
Colors
Reviewing the existing colors revealed how difficult it would be to use them broadly across websites and documents. We refreshed the color palette by replacing the secondary color and modifying other complementary shades.
Our primary color remains Deep Koamaru. It’s the main color in our logo and has been consistently used in brand materials, so I felt no need to jeopardize this brand recognition.
ONA had two logos, however. One version still in use by ONA Local groups includes Viridian Green, a color that never transitioned into our other digital assets — instead, our website featured Bright Navy Blue. This blue has a bit more going for it, compared to Viridian Green, as it is bright and draws attention. However, colors don’t create a brand unless they are complementary and selected with intention. Viridian Green and Bright Navy Blue aren’t versatile enough working alongside our primary blue.
Moving forward, we’re introducing Ball Blue as our new secondary color. It will be used throughout our branding — in social media and documents and as our bright action color on the website. It compliments Deep Koamaru by providing a stark contrast. It also brings more visual energy, which better matches the organization.
For ONA Local, it’s important to have a look that both complements and differentiates the group logos from ONA’s brand as the umbrella organization. Viridian Green was not a good compliment — it was too similar to Deep Koamaru, and a little drab, too. With the new palette we are introducing Sage as a unique color for Local branding.
The other two colors in the new palette are tweaks. We’re adding a light blue (Columbia Blue) to serve as a background color. Where we previously used a bright red as a mouseover color for Bright Navy Blue buttons, we’ll now use Tomato to better pair with the new Ball Blue.
Typefaces
The only type used on our website was Open Sans, and there hasn’t been guidance around why or how we use it. I really wanted a typeface that reflected the culture of the organization. Adding Ball Blue to our color palette provided more energy, for example, but Open Sans was too casual and relaxed. Our typeface should convey expertise and professionalism, but also have some character.
I experimented with a few typefaces over the last few months, including Hind and Muli. In this rollout, however, we replaced body copy on our website with Roboto. It hits the mark for the mood I wanted to convey, and maintains quality across sizes. We’ll use Roboto consistently across the documents and graphics that we design, so versatility is important. Roboto offers six weights, as well as condensed and slab styles.
I’m continuing my experimentation by introducing a serif typeface — Spectral — as our H1 on the web. Traditionally, we hadn’t had a sans-serif, but I felt it was important in order to have more design options. Spectral is a really unique typeface, which was one reason I chose it. As part of this entire project, one goal is to enhance the reading experience on the ONA site. Roboto is a small step up for body copy, and a unique serif like Spectral should make the experience of navigating our website a bit more memorable.
Lastly, our brand guide will include Barlow Semi Condensed. We will use this additional font in headings in certain circumstances — such as brochures and business reports — but also in footnotes and other detail-oriented locations. It resembles the typeface in the ONA logo, so it will feel familiar to our audience.
Patterns
I’m excited to introduce guidance around patterns to our brand guidelines — these will provide structure to lean on while building new deliverables. When paired with a thoughtful color palette and typography, patterns provide a way to cohesively communicate the feel of the ONA brand in the absence of a logo.
The ONA circle is the most well-known element we have, and the circular element in the patterns comes from our logo itself. By modifying its design so the central circle is smaller, this pattern becomes an element we can use in myriad places. Made much bigger, it becomes a graphic element that adds style and interest.
For backgrounds, I wanted to find something that spoke to the digital nature of our mission. The enlarged pixel pattern is a subtle reference to this digital element. We can easily place text on top of it without diminishing readability.
Each of these elements — color, typography and patterns — plays a key role in developing a brand. Used consistently and together over time, they translate to a uniform user experience. When users can expect what they are going to get from a brand, they can have deeper engagement.
With these new ONA branding guidelines, I aim to firmly set our users’ expectations.
