We are donating 100% of June’s Dribbble shop proceeds to the Equal Justice Initiative, a nonprofit challenging racial and economic injustice.

Ccaa2b3c5187be540f54aa07def81b33

Art by Adam Ho

Exploring Illustration Systems with Brand Designer Adam Ho

Adam Ho Independent brand and web designer Adam Ho joins us today to shed light on illustration systems and the role they play in defining a brand’s visual story. Plus, get an inside look at the illustration systems Adam created for Bitly and Abstract!

Creating a system benefits both designers and stakeholders within a company. There’s a new shared language being created.

I’m Adam Ho, a graphic designer specializing in brand identities and (web) interaction design. I’ve always been drawn to absurdly technical and seemingly-overly-complicated brand standards like the NASA Graphics Standards Manual or the New York MTA, and that’s probably where my obsession for creating systems started.

How I got started designing systems

A couple of years ago, I did a freelance project for The Verge with the wonderful team over at Vox Media. They actually requested a system of the concepts I had originally sketched out so that their designers could take the concepts and assets, and create whatever else was needed (signage, napkins, trailer wraps, etc.). I really saw the importance of that documentation and utility when trying to design things that are consistently “on brand.”

The Verge—Conference Visual Identity System visual system the verge design system

The Verge—Conference Visual Identity System

by Adam Ho

A peek into some of the visual systems work I did for @Vox Media and The Verge for their recent presence at CES. Head over to https://www.adamho.com/the-verge-ces-identity for more visualz. :)

View on Dribbble

I also worked on the brand design team over at Zendesk for a couple of years. Creating systems served as a way for us to scale processes within the design team. Trivial things like font sizes and colors were already decided, so we eventually ended up spending less time on small discrepancies like that, and more time on solving business problems and coming up with interesting art direction concepts. We went as far as creating a public set of guidelines that allowed us to educate the whole company on what the brand team did across several verticals.

Zendesk Brandland 👀 branding web design interaction design website brandland brand guide zendesk

Zendesk Brandland 👀

by Adam Ho

https://www.adamho.com/zendesk-brandland Art direction + props by @Lizzie Oh

View on Dribbble

What is an illustration system?

Although design systems and illustrations are seemingly new in recent years, they’ve been around for a while. Design work has become more and more transparent as of recent, so naturally, they have become more popular.

Illustration systems are a set of standards & guidelines that enable the creation of artwork in a certain style.

Illustration systems are a set of standards and guidelines that enable the creation of artwork in a certain style. They can include things from colors, icons, and props to more detailed things like brush weight, perspective, and composition. Talented illustrators like Alice Lee and Ryan Putnam have done an amazing job over the past couple of years sharing that process.

937da26597808ba337d4c051ab94ba8f

Credit Karma Illustration Guide by Ryan Putnam


How do they help brands?

Brands can benefit from having an illustration system by having their stories and messaging be supported visually, both in-product and brand-wise.

Creating a system benefits both designers and stakeholders within a company. For designers, they have a guidebook on creating illustrations that match the brand style. For other stakeholders, it allows them to better communicate and collaborate with designers. There’s a new shared language being created.

Brands have been getting a lot of criticism recently for "looking the same" as other companies...

Although there are inherent benefits to having consistency, brands have been getting a lot of criticism recently for “looking the same” as other companies—especially as certain design and illustration trends become more popular and widely-used.

This is a topic that has been debated constantly, but overall, it’s important to keep in mind business goals, have a respect for the origin of certain illustration styles, and know that there is still room to create something that people haven’t seen before.

Where to start:

A good starting outline when planning an illustration system would be defining common visual metaphors, color, common shapes and forms, and usage guidelines. Anything can be a guideline! i.e. Don’t use these two colors together, or use only 2px strokes for designing at this size, etc.

A look inside Bitly’s illustration system:

Bitly’s illustration system was created with the intention of being used to outfit their growing content pipeline, and be the new style for their marketing site. The system is definitely more on the rigid side, providing shapes, props, devices, and color usages. One of the core components of Bitly’s business is understanding data, so elements and guidelines were created specifically for the brand that might not be applicable for other brands.

Bitly Illustration System illustrations brand guidelines guidelines technology colors characters texture illustration

Bitly Illustration System

by Adam Ho

Was debating on even posting this project because I never considered myself being a great illustrator, but I loved creating this system for Bitly. Will be posting more of the guidelines shortly. Also shoutouts to Matthew Ström for guiding and bringing m...

View on Dribbble

Getting experimental with Abstract:

Abstract is a product design tool that speaks to a different audience, so it had allowance to be a bit more experimental. The illustration system was part of the larger brand identity project we were creating, so there was continuity in us refreshing the brand along with the illustration system. With Devin Jacoviello and Heather Phillips, we created a system that integrated textures, grit, saturated colors, and quirky concepts into one. Their in-house design team has done an impeccable job evolving this system over the past couple of years—they’re amazing.

Abstract — Homepage Illustrations branding texture brand identity abstract illustration

Abstract — Homepage Illustrations

by Adam Ho for Abstract

Excited to share some work @Devin Jacoviello and I did in collaboration with the wonderful, and amazingly talented people over at Abstract! We poured everything into this project, and we couldn’t be happier with how it turned out. Here are the the illu...

View on Dribbble

Final thoughts

Creating design systems and guidelines can be an incredibly valuable resource for you and your team. Generally, I try to make sure that whatever systems I am creating or collaborating on are flexible enough so that it’s not a bore nor a chore for people to use. This probably helps the work itself to be more dynamic and interesting in the end. I try to approach guidelines as being a starter kit, as opposed to an end-all-be-all



Find more Process stories on our blog Courtside. Have a suggestion? Contact stories@dribbble.com.


Icon shot x light