Defining brand characters using shape language
How we designed Chairman — the Paystack FM mascot
The psychology of shapes
This may be a challenge for some of you — imagine that you’re seeing these characters for the very first time 👇🏾
What comes to your mind when you look at each one?
Professor probably strikes notes of intellect, dependability, and maybe even support. Doofenshmirtz might seem like a dangerous, slightly deranged, and unpredictable character. Bubbles looks cute and harmless.
Without knowledge of their behaviors in the cartoons they star in, we’re able to attribute personality to them.
Why? Because of something called shape language. Walt Disney’s education resource defines shape language as a concept used in art and animation to communicate meaning based on shapes we’re familiar with.
Square or rectangular characters denote sturdiness, reliability, and strength.
Triangles are sharp and directional. They communicate a sense of danger and unpredictability in characters.
Circular characters are usually portrayed as soft, warm, and approachable.
Defining a character’s visual identity
We recently launched an internal podcast called Paystack FM. To add a fun element, we also introduced Chairman — a quirky, witty mascot who drops boisterously whimsical announcements of new episodes weekly. While his character is sharp and charismatic, Stacks (Paystack team members) were won over by his captivating visuals.
Chairman’s designer, Mariam, shared insights into her process for refining the rooster’s visual identity with input from other teammates and an understanding of the principle of shape language.
Mariam expressed that her intent for Paystack FM’s brand identity was for it to embody Stacks and possess a strong character. The rooster was one of four options that she presented during feedback sessions with the team, and its strong character and promising visuals drew everyone in. After multiple rounds of feedback, she was able to go down a visual path for the rooster’s character.
She began by exploring different versions of the character, polishing the concept with each iteration.
She then properly defined the radio as the secondary element of the character. Both the rooster and the radio began to look polished but still lacked the edgy, coarse quality that she envisioned for Paystack FM’s quirky mascot.
Communicating personality using shape language
At this point, she had a discussion with Kaz, Art Director at Paystack, and he pointed out something that sparked an epiphany for Mariam. Had she considered the shape language of the character? The rounded shapes softened the look of the rooster, signalling a delicate friendliness. Instead, sharp corners on the mascot could help her achieve the edgy look she desired.
With this input, Mariam began the third leg of character refinement.
At last, the strong character was beginning to take shape. Mariam began to apply the concept of shape language to other parts like the rooster’s eyes and the radio. The formerly rounded eyes were sharpened for an intense look from the rooster, and the formerly rounded radio elements (seen in the previous iterations) were squared out.
The finishing touches were added, and the character, Chairman, was ready.
Once Mariam released Chairman into the wild, she was able to extend the concept of shape language to influence typography choices and character poses to maintain consistency with Chairman’s strong personality.
Mariam’s work highlights the significance of shapes in character design and also how crucial it is to get the technical details right. It reiterates that understanding shape language is not just an artistic endeavor but an intentional communication tool that can make or break a visual identity. By taking a deep dive into shape language, she was able to not only enhance the design outcome but also enrich the story being told.
Do you lead a design agency or dev shop?
Partner with Paystack to gain new client leads referred by Paystack, enjoy priority access to new features, and access priority support.
Apply to the Service Partner Program →