Illustration Systems: Introducing Atomic Design
Let’s take closer look at a Garfield cartoon by Jim Davis.
- Can you spot how many colors are being used?
- Did you realize the similar shapes of the eyes and fingers used for different characters?
- The same lettering is used in the dialogues and as the signature of the artist and the number of the strip
- The texture for the backgrounds is used in several panels
Garfield is a good example of an “atomic illustration system”.
Maybe what we call “style” in art is just another word for “system”.
Illustration systems
Some time ago I came across the “illustration framework” called humaaans by Pablo Stanley. It is free to use under the creative commons license. The most interesting thing about thte humaaans library is its construction: all the elements (heads, upper body, legs, hair styles) are based on each other. They follow a “design system”.
Design System
What is a design system?
A design system is applied today to the development of User Interfaces. Companies like Airbnb, UBER pioneered the industry building complex design system to harmonize the user experience accross several products and plattforms.
Design systems are more than a guideline or pattern library. They are build as an atomic library of components that are consistent. This building blocks allow infinite possibilites like pieces of lego.
As Lego, design systems apply the atomic design principles.
If you want to learn more about how to build a design system I recommend reading the chapter two from Brad Frost available at his webpage: http://atomicdesign.bradfrost.com/chapter-2/
On this chapter, Frost gives an example of the system with the Anatomy of a Search form.
If we list the different categories of the elements we got:
- Atoms: Label, input field, button
- Molecule: Search form (label + input field+ button)
- Organism: Header (Logo + navigation + search form)
- Template: type of page
- Page: the instance or state of a page
Elements of the Illustration system
Now let’s apply the atomic design categories to the Garfield comic strip.
- Atoms: Grid(gutter, spacings), Colors, Line types, textures, basic shapes, typography(lettering style)
- Molecules: eyes, faces, fingers, hairs, drops.
- Organism: character, background, table
- template: frame / composition.
- Cartoon: Sequence of frames from left to right (as described by Will Eisner in his Comics and Sequential Art)
Benefits of the System
Consistency
Consistent use of the elements of the system gives the reader/user a sense of unity and familiarity which empowers engagement.
Modularity
Building the elements with hierarchical relationships (in Sketch we can use nested Symbols) allows editing just one part of the system and updating several parts at once.
Sharing the system within a team enables more consistent results.
Scalability
A system gives as the foundation for future needs and yet mantaining the principles of the system.
A system speeds up the creation of new items thanks to ready-to-use templates and building blocks.
