Iconography – Fundamentals
What Makes A Great Icon
Creating an element that adds both form and function into one cohesive design.
7 Ways To Make A Great Icon
Great design foundations include icons. Inconsistent or unaligned icons can frequently confuse users, leading to errors, abandonment, or frustration. Additionally, there is an accessibility requirement to consider. If an icon is overly complex or improperly labeled, it may fail to comply with accessibility standards.
1
Clarity
Communicate the
concept quickly
2
Readable
Make sure it is
readable
3
ALIGNMENT
It should have a
balance
4
CONCISE
Keep the design
simple
5
CONSISTENT
Keep the similar visual
treatment
6
Themeable
Allow the icon to have
different style
7
EASE OF USE
Create flexibility in size
and code
So Many Icons!
Icons are a crucial component of great design foundations. Users can frequently become confused, frustrated, or abandon tasks when confronted with inconsistent or unaligned icons. Furthermore, it is essential to consider accessibility requirements. If an icon is overly complex or lacks proper labeling, it can fail to comply with accessibility standards.
Why You Need Alignment With Icons
PROBLEM: There can be different interactions for the same icon and different icons for the same interactions. Both create a lack of consistency and can disrupt the customer’s experience.
SOLUTION: Align with both interaction and the icon at the top level so that you keep the affordances and design consistent across all funnels.
Setting Up A Universal Library
Creating a universal library is one of the ways you can start from the top. The challenges with keeping both interactions, intentions, and designs in check are knowing which group or team is creating them and oftentimes if they aren’t pulling from a centralized library or reviewing as a collective which leads to variances in tone and design when they should be the same.
Icon Theming
Universal icons in an evergreen set are available as both a fill and outline.
From here the icons can be themed to work with branding/platform/channel for the experience needed. The primary changes available are the following:
- Color
- Shape
- Backgrounds
Scrutinize additional customizations that change the icon’s primary intention.
Universal Icon Library
The location of your library is not specific but Figma, XD, or Sketch is a great tool to utilize. IFigma is utilized in this example.
Creating a centralized location with the same style, color, and enacts as a source of truth when an icon is used on multiple platforms and themes.
Governance
At this point is also critical to set up governance to manage and maintain the icon library. It is recommended that there are a limited amount of creators making icons to avoid multiple styles of designs being created in a silo.
A strong workflow and handoff process can also serve as a way to verify a new icon needs to be created, edited, or added to a design.
Icon Features And Functions
Now that icons have been designated to being part of a universal library and governance has been defined. Another part of establishing a strong icon library is defining icons by their function and status. This topic will be discussed further in a later article. For now, at a high level, there are 3 main functions for icons: Functional, Helper, and Illustrative. Followed by: Universal, Conflicting, and Unique. Depending on the outcome of the icon will determine the usage, commonality, and need for additional contexts like labels or text.
Reference Article: https://www.smashingmagazine.com/2016/10/icons-as-part-of-a-great-user-experience/