traitpics

DT: Trait Iconography

Hey everyone! Alpha 21 and the basis for the Hearthling Trait infrastructure is now on the Steam Stable branch, and should be coming soon to Humble Bundle. In the meantime, the team is starting work on Alpha 22, (focus on conversations), fixing a few last minute bugs, making investments in some long term features we expect will hit in future alphas to come–improvements to water infrastructure and building. 

Before we leave A21 behind, I’d like to take a moment to explore a really small, but very cool corner of this release: the work Artist Allie did on the trait icons, and more importantly, on the visual standard that dramatically improves our ability to scale out our UI in general.

Iconography & Visual Standards

Recap from the video:

  • So when Allie first joined Team Stonehearth a year ago, one of her first tasks was to make buff icons for the then-new combat classes: knight, cleric, and archer.
  • She immediately noticed that our icons, and the UI in general, had no explicit visual language binding the pieces together, and no written rules to constrain how to make additions.
  • For example, sometimes we used the color red to mean enemies. Other times we used it to denote the trapper. It’s also a primary color in Rayya’s children’s default templates. Sometimes we made icons that were stylized, and other times they conveyed tons of detail.
  • The UI worked because Tom made all of it, and his implicit artistic style–the very way he learned to draw–was what held all the things together.
  • This was less than ideal for several reasons: first of all, a new artist, there was no easy way for Allie to extend the UI without worrying that her stuff would look out of place.
  • Secondly, for all you players, there was no way to associate colors and shapes with any particular significance. Simulation games tend to have UIs that are dense with information; if ours assigned meaning to certain colors and shapes, then you could get more data at a glance and be less distracted by stuff you don’t need to care about.
  • Because Allie is fantastic, she managed to absorb Tom’s aesthetic enough to jam in new icons for cleric, knight, and archer, for example, and pick a color scheme for each, but she’s always had in mind that before she next did serious work on the UI, that we’d need to agree on a visual language for that feature before continuing.
  • When Allie started working in A21’s traits, she saw immediately that we’d want to establish exactly this sort of visual language before continuing.
  • Traits are the passive, persistent qualities that make hearthling interesting and unique. Trait icons serve as your at-a-glance guide to these conditions, so they need to be just as interesting as they make your hearthling, easy to find, and distinguishable in a group.
  • Instead of agonizing over what each icon should be individually, Allie worked with Designer Nikki to make a list of basic rules that all icons must follow, and then designed and polished the icons very quickly within those rules.
  • For all of you who hope to add traits to the game, via mods and for those of you who love visual design, here they are:
    • Unique, singular objects: Though she tried icons that were little scenes, involving characters and objects, she saw that seeing a group of these together would get busy really fast. Furthermore, they emphasized the character in the scene, instead of the quality of the character.
    • Only one symbol: She noticed that though it was tempting to clutter the design w/ supporting details, successful icons just needed to relate tonally to the concept driving the trait. This rabbit book icon has cute details, but doesn’t do a better job of conveying the idea than the simple book.
    • Simple, exaggerated silhouettes: Good visual hierarchy helps icons read quickly and remain distinct at tiny scales. All the final icons are built around one major detail, and everything else is simplified. In these lantern and radish counterexamples, you can see that when everything is the focus, nothing stands out, especially zoomed out.
    • Bold and bright colors: Against a UI largely comprised of muted tones, color and contrast help make the traits easy to spot whenever they can be found. Furthermore, almost every color used for trait icons can be found within the stained glass window in the character screen. Most icons start with red, green, blue or gold as it’s primary color, and accents it with one ore more colors of a neutral variant.
    • Geometric design: The look for this family of icons was influenced by the stained glass window, both in terms of color and in terms of shape. By keeping all the icons geometric and solid, they cue the viewer that they all go together. This curvy feather, for example, looks cool but the geometric feather looks better when paired with all the other icons.
    • No backgrounds: so icons cannot be mistaken for buttons, and so that their silhouette remains distinct. The exception that proves the rule are passion icons, because this is a set of a dozen plus traits that all do the same thing, but vary in detail. Therefore, they have one shape, and a dozen details.
  • Finally, all the trait icons are pulled together into one cohesive unit by sharing the same four pixel black stroke, a dropshadow, and a little lighting glow for visual interest.

Other Announcements

Thursday stream will be happening as usual this week at 6:00pm PST. See you there!