Building a logo system for SinnerSchrader


Creating a logo for a brand or product is a tough job. Finding the right meanings and metaphors, choosing the right balance of simplicity and complexity, develop a distinct design language including colours, shades and fonts — all while pleasing the clients wishes or self created high standards and standing out of the competition.

But what if there is a family of products, tools and sub-brands that need to be unified by distinct design language?

Of course companies like Adobe, Apple or Google come to mind as their own products and apps are mostly easily recognised. But also companies like Atlassian manage to create a style for their digital brands that matches the language of the main brand, while still being unique and recognisable on their own.


SinnerSchrader has been in the game for more than 20 years, and with the aquisition of ever larger and multinational clients the need for tools that match more complex workflows has arisen. Tools created on this journey include Patternplate (a tool to manage large design systems), Alva (a component driven design tool) or Paperboy (a super fast CDN). But also publishing brands like Next Factory or co-worker education like Next Campus have been established. They demand a visual representation too.

Taking Stock

Some of the examples above already had a logo, typeface or visual element of some sort. Not all were created by a designer. Some were based on text, some only an icon, most had nothing.

Current selection of logos shows a wide variety

SinnerSchrader’s collection of products will only grow as it heads into the future, with new finely-tuned workflows demanding custom built solutions. This will lead to the development of yet more tools, so a logo system catering to as yet unknown requirements needs to be future-proof, extendable and flexible, but also easy to use.


1996, the year SinnerSchrader entered the digital design world, was also the year CSS came to life and Macromedia first released Flash. It was a time of flashy graphics, vibrant colours, experimental typography and geometric shapes. This playful and experimental time is reflected as one of SinnerSchrader’s core principles.

The company’s colours are derived from RGB values, in reference to the core technology of the screen, and the development of products for every digital touchpoint. Each of these colours is also matched to a department. Red represents design, blue engineering, green management. With cross-functional teams, these colours won’t be seen in isolation anymore and need to work together.

Each department is represented in a specific colour

Setting the boundaries

Besides the main task of unifying the scattered landscape of product logos, there are other benchmarks that need to be met. The DNA of SinnerSchrader needs to be present. Although this doesn’t need to be visible upfront we still wanted to make the DNA part of the core concept.

Each logo not only needs to be recognisable on its own, but also fit within, and strengthen the perception of the product family. Besides that, logos need to be easy to use and easy to create, and cater for a variety of new products in the future. Most of these will want and need a visual representation.


Sketching Logos
As most design processes start out, pen and paper are still the best tools on the market. Scribbling down some initial thoughts, keywords, visual styles. In parallel books, inspirational pages have been searched and inspiration collected.

Keeping it hands on

When designing a whole set on logos it is very important to also talk with people responsible for a product. They are very passionate about their tools and want to have a say in how they are represented visually. It’s important to keep the balance between the bigger picture, holistic approach and vision on a detailed level.

Take a step back to see the bigger picture.

First dimension

Modular

The web is increasingly constructed in a modular way. Each module is built from smaller components and is again the basis for another component. We wanted this Atomic Design concept to be visible in all SinnerSchrader’s products. When we break shapes down to their most simple elements we get circles, triangles and rectangles. With these simple elements, every other shape can be created and combined into meaningful compositions. The elements can vary in size, rotation and can also exist in parts.

Simple shapes as base of the system

Second dimension

Intersected

The web isn’t one dimensional and neither are digital products. They offer a large range of levels with hierarchies and overlapping areas. The logos need to represent and visualise this reality.

As a second concept the people working on products can’t be easily categorised anymore. Often, their skillsets can apply to multiple departments. For example, designers working more and more with code can be seen as drifting into the area of product engineering.

Third dimension

Iterating

The lifecycle of a component both technically and visually starts with an early draft. From this point on you iterate, extend or entirely rethink the component until it is finally implemented in the product. And the journey might start over from there. That living component approach is also part of the logo system — by visually separating between draft components as outlines and implemented components as filled form.

Fourth dimension

Human

Lastly, every product has a human factor. Geometric shapes are easy to use and commonly known, but always feel technical and a little cold. To counter that, rounded corners make the products more approachable.

Reaping the rewards

At the end of the day it’s all about bringing single elements together in a meaningful manner to really deliver the product’s message. Carefully arranging the elements, colours, and overlapping areas to create a well balanced range of logos that work across all channels, whether printed, used in websites, on mobile, or sitting in the dock of OS X, every channel needs to work.

When these logos really shine is when they are used with vibrant colours. They have a playful appeal in the way they are arranged, and in combination with random shapes such as zig zags, half-circles, and outline circles they show of the experimental approach.

Another requirement was the reusability of the logos in the existing SinnerSchrader illustration style, without being completely unrelated to the actual logos. To show processes and workflows it’s necessary that the logos integrate themselves rather than being too prominent.

Logos can also be seamlessly integrated into SinnerSchrader illustration style

What’s left to say

Creating logos and building a system for a bigger context and multiple products (that are not even there yet) is still a long and demanding task. But seeing all strings come together, the final outcome is very satisfying (to be humble). We now have logos that work on all channels, and a system that is flexible enough to support all future products that may come.


In collaboration with: Tilman Frick, Markus Ölhafen, Sandy Strobel

Like what you read? Give Markus Ölhafen a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.