Caleb Raney Logo
Services

Brand Identity

Logo

Web Design

Webflow

Idiom

November 2019

The Challenge

Old meets the new

The founders of Idiom came to me at the very early stages of their business. They had completed the legal documentation, and finalized the name, but had no graphics or logo whatsoever. Because of this I had the rare opportunity of working with a clean slate. They wanted Idiom to really set itself apart from other indie publishers by having a bold and cohesive graphic system.

The Solution

A fresh take on an established brand

As a business in “the arts” Idiom was much more open to some of my outside the box conceptual ideas for how to define their brand and I really enjoyed the entire process. What we ended up with is a recognizable and heavy-handed graphic system that works hand in hand with a robust conceptual framework.

Idiom Key Art

Grid System

2

The eyes of the machines

When I create a graphic system to accompany a brand I always start with a conceptual framework. There needs to be a connection to the name/product/goals of the company or else the system is only visual and has no deeper purpose. With Idiom I wanted to focus on the niche of the brand – discussing how technology has revolutionized and disrupted traditional ways of life.

During the discovery phase I noticed that they gravitated towards flat graphics and said something about how “that looks like how a computer would see things.” I latched onto that phrase as a conceptual starting point and quickly began to create graphics within a very defined grid system where each object was created from a line, square, or a circle. This system of flat geometric patterns represents the digital world of binaries, where at the most basic level, computers understand the world (and people) as points of data. In this system of harsh geometry I added a layer of humanity – typography. Because Idiom is a publishing company using language to analyze and understand the complexities of our changing lives it felt fitting to use a very stylized typeface to contrast the linear forms of the underlying grid system.

Screenshot of hero section of the Idiom website
Geometric pattern created for the brand
Geometric pattern created for the brand
Idiom logo

Color

4

Warm & Cool

The color palette underwent multiple re-works as the graphic system got refined. My first idea was to have a Red, Green, and Blue color palette that which connected to the digital RGB color space. The initially bright colors got toned down and modified significantly to create a series of hues that would work well together in busy patterns as well as large blocks. They wanted the colors to becalm and inviting in order to not increase visual intensity unnecessarily. I also wanted the colors to cover a wide range of values so that the visual system could work well in both light and dark themes.

Typography

5

Harmony meets contrast

As I was developing the logo, I knew that I wanted Kate to fit into the typography system, but it is not a typeface suited for high volume and really works best in larger sizes. In order to create a sufficient framework, I wanted to include two playful and distinct typefaces that could work in headers and body text. My first choice was Brandon Grotesque, its consistent weight and playful lines work hand in hand with the patterns I had created to accompany the brand. As a partner in crime I decided to use PT Serif because of the way its humanistic serifs complement the other two typefaces.

The primary display typeface - Kate
character set from kate typeface
secondary typefaces pt serif and brandon grotesque

Website

6

Putting the pieces together

After creating the initial style guide, I was tasked with building out the website. Because of their varying content needs, and their desire to create a site that could expand easily with them, I suggested that we create the website using Webflow. Webflow’s flexible CMS was perfect for Idiom because it allowed them to easily add books, authors, and news articles without having any intermediary.

Because Idiom’s brand is so visually distinct, I wanted it to be visually present on each page. In order for this to happen I created a CMS Collection with 40 different Idiom patterns and added them as backgrounds to each of the other dynamic pages. This strategy allowed contributors to have the book’s content front and center, and also add a background from the pattern list in order to tie the entire site together in an extremely interconnected manner.

Since Idiom is just getting started, they had me create dummy content to help define the structure of the website as well as playfully engage with viewers and push them to send Idiom a message. They wanted the homepage to be a little mysterious in an attempt to get curious viewers to keep looking through the website. In order to balance this out I suggested that we create a fun and thorough “about” page that had clear and engaging content.

Geometric pattern created for the brand
Screenshot of Books page on Idiom's website
Screenshot of about page on Idiom's website
Geometric pattern created for the brand
Screenshot of a book page on the Idiom website
Mobile Screenshot of Idiom website, about page
Mobile Screenshot of Idiom website, What is Idiom section
Mobile Screenshot of Idiom website, news page
“Caleb’s work quality was outstanding — creative, imaginative, and very much aligned with the vision articulated. Caleb was also easy to work with and highly responsive, making the process very easy for us. We'd hire him again without hesitation.”

Keelin McDonell

CEO/Co-founder

Next

My Story