Benefits Counselor art and animation style

The goal of this guide is to give artists sufficient information that they may work competently in the style of ALEX Benefits Counselor. In hopes of best communicating that style, we’ll discuss its philosophical foundation as well as its practicalities.

We are: expert, tasteful, human, intelligent, clear, present. We are casual where appropriate. Smiling where appropriate.

We are not: cheap, childish, messy-brained, expected, rote. We do not condescend to the subject or user.

Art and animation philosophy

Clarity

Clarity, and the simplicity that comes from efficient, intelligent communication, is a primary goal. We are here so our users better understand the decisions they are being asked to make. To do this, we must entice them to engage with us, and compel them to continue doing so. We assist in this by creating clear, informative, entertaining, and efficient art.

We support and clarify the ideas the conversation is attempting to communicate. Pretty art that confuses, or simply does not help communicate, is a failure. We are here to put ideas in people’s heads. Consider that most of our work is time-based, and so is only visible to the user for a short period of time. It’s essential that our work is understood at a glance.

We approach visual explanation as a narrative. How the elements are presented, how clearly we can illustrate their relationship and impact on one another; this is our central focus. This process, of translating ideas to visuals, begins with the writing. Close communication between creators is required.

Personality

We allow our personality and humor to come through in our work. We are not creating an inert computer program that people tap responses into. Our users should feel they are engaging with minds and personalities on the other side of the screen. Honesty can be underappreciated when creating content of our sort, but these glimpses of real personality are disarming and engaging in a way that serves the user.

Appeal

Most obviously, our work must have visual appeal. We need to project professionalism, invite confidence, feel valuable, and satisfy the eye. Our work must always feel tailored, special, considered.

Practicalities

Font

Within the art, we use Museo Sans (typically 700 and 900 weight), Caveat, and Mansalva. There are no firm rules regarding which font to use in which situation. Precedence has been set, though, and should be followed; look over the art and see what fonts are used in what situations. Generally, we use Museo for labeling, but match it with one of the handwritten fonts to bring a sense of spontaneity to the art. Of the two handwritten fonts, Mansalva is most often chosen for shorter text while Caveat is used for longer text strings. This optimizes the strength of each; Mansalva’s greater personality and Caveat’s greater legibility.

Palette

We use the house ALEX palette, though we tilt toward the earthtones and more somber colors. Though all colors in the palette are available, the goal in color selection should be to match the tone set in existing art. Colors should support the art’s projection of maturity and value. Avoid choosing colors that make your art look unrefined.

Gradients

In addition to the palette, we allow for gradients to be used in two ways.

In the first, we use gradients to subtly mold our shapes. The goal here is to be almost invisible; the piece should feel tactile and dimensional, but the gradient should not call attention to itself.

This can be done with a very low opacity black fade, or with slightly darker and lighter tones added to the base color. Adobe filters can be used, though these filters are often misinterpreted when the files are converted for a different program, or exported to svn. So, when used, pay extra attention to how well the filters hold up as you work toward the finished product.

Gradients can also be used in a non-objective, graphic style. When used in this way, the gradient is not applied to an object, but is used as a graphic element. Here, the gradient can be as bold or subdued as necessary to the project, though we are restricted to our palette (and slight variations of tones, if needed), as well as our brand attributes (your gradient can be bold and bright, but must still feel tasteful, etc.

Shapes

We use simple shapes that can be immediately identified. As discussed above, clarity is paramount to the success of Benefits Counselor, and since most of our work is time-based, our art must be grasped in a moment. In pursuit of this, we reduce the complexity of our shapes as far as possible without eliminating the piece’s personality or appeal.

Animation

Our animation focuses on storytelling, timing, and personality.

Our foremost goal is to support the story being told. What do people need to understand at this moment? How do we translate an idea into visual beats that communicate with speed and clarity? Are elements presented in a way that makes visual sense? Do the animations themselves support understanding, or distract from it?

Timing is crucial. Where an animation event plays in relation to the voice over, precisely, will determine the clarity, artistry and humor of the work.

We focus on giving our animations personality as well. Humanness. We do not use canned animations; they give work a facelessness, a sameness. We make bespoke animations for the specific needs of the moment. We look for ways we can bring unexpected beats and details to the animation. Secondary actions show an investment in the work, a creatorial presence that evokes in the product humanness and value. Our animations are never illustration assets being moved around. We animate our assets.