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.
Grid System
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.
Logo
Juggling simplicity and character
During he whole process of refining the graphic system I was also creating Idioms’ logo system. For This I wanted to use a typeface with a unique character along with a very simple mark for use in smaller situations. After several different rounds of edits and many different custom lettering versions we ended up with the logo set in a modified version of Kate Medium. To accompany the logotype I wanted to create a very simple abstract mark with a subtle connection to technology. After playing around with a bunch of different ideas we ended up choosing one with a subtle reference to the wifi symbol, one of the universal icons of technology that so many people rely on.
Color
Juggling simplicity and character
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
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.
Website
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.
“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.”