Iconography System

[Sourn Rose]

LucasCarrascosa is a talented graphic designer based in Kln, Germany, known for his branding and iconography work. Recently, he had the opportunity to work with RTL Group Deutschland to create more than 450 icons that represent their digital presence.RTL Group Deutschland is one of the leading television and radio broadcast companies in Germany. With the increasing popularity of their digital media outlets, they wanted to ensure that their online presence was visually appealing and user-friendly. To achieve this, they enlisted the expertise of Lucas Carrascosa and his team. The project involved creating a comprehensive iconography system that would represent the brand's digital channels, including their website, mobile app, social media, and video platforms. The icons were designed to be simple yet visually appealing, with a consistent color palette and style that would make them easily recognizable. Lucas and his team meticulously crafted each icon, ensuring that they were legible and easy to understand. They also ensured that the icons were scalable and adaptable to different screen sizes and resolutions.

LinkedIn and 3rd parties use essential and non-essential cookies to provide, secure, analyze and improve our Services, and to show you relevant ads (including professional and job ads) on and off LinkedIn. Learn more in our Cookie Policy.

Iconography has been around for thousands of years (ask the Egyptians!) By definition, iconography is symbolic representation, especially the conventional meanings attached to an image or images. We rely on icons for everyday tasks such as driving (signage, car operation systems), cleaning (laundry, dishes) and shopping. There are many universal symbols out there like handicap, male/female, and stop/go, that are know worldwide. But even these symbols are represented in a wide variety of icon design.

Developing an icon system creates a platform for uniformity: each icon should be consistent with the rest in the set. When your icons work individually as well as a whole, the result is intuitive flow and provides brand consistency.

COMMUNICATE What symbol best communicates the message. Can the viewer decipher its meaning? Is the message universal (print, shopping cart, etc.) or unique? Cryptic or obscure images create confusion and can hinder the UX.

AESTHETIC Design within the style of your brand. This extends through color, typography, shape, style, scale, and even messaging. Those nips and tucks are important and help unify the set.

CONSISTENCY Establish a system and stay consistent. Icons should flow and function as a system. Use them consistently across all platforms to ensure continuity. Any new or updated icons need to follow suit.

Before we actually dive into the alluring and frightening world of iconography, I want to take some time to introduce you to the concept of a design system, as well as share my thoughts and rules that I follow while working with them.

That sounds like a treat, right? Still, creating a design system is generally viewed as an exceptionally time- and effort-consuming endeavor. If you do want to develop a design system, there is a way to make the process a bit easier. Enter the atomic design approach.

The atomic design approach was pioneered by Brad Frost (a chemist of all occupations). It implies building your system brick-by-brick, starting with the smallest items and going all the way up while sustaining hierarchy. There are five stages to the process.

As any designer knows, users heavily rely on icons as an interactional element of an interface. Despite being the smallest of components, icons might prove to be a major pain in the neck in terms of creation. This is the lesson I have learned during my tenure as a UX designer.

Another key property to consider is the outline weight of your icon if you opt for this type. If you are building an icon library from scratch, it would be wise to test several outline weight values before you make a decision. This is especially crucial for icons that contain fine details.

Granted, you can assign different weight values to different types of icons, but you might struggle to write clear guidelines for your fellow designers. I usually make a conscious decision to go with a unified outline weight for all the icons, namely, 2 points.

I have a little trick I use to see how well a new icon fits the standard. I simply integrate the new icon into the interface populated by already existing elements. This helps determine if the new icon matches the rest.

Such aspects as corner, counterstroke, and stroke terminal provide the much-desired visual consistency. Obviously, all these elements should be unified for all the icons within a design system. A comprehensive guide to icon anatomy is available at Material Design.

The icon library was a mishmash of different icon types, creating quite a noise. The majority of icons differed in style, size, and application. Another problem I had was the fact that most of the icons did not have the source file. So, there was no way to quickly tweak an icon to match the rest.

No matter how sick you might be dealing with unending visual inconsistency, design systems are still challenging. They can scare any designer regardless of their experience. Still, if you want to bring order to chaos, introducing a design system into your workflow is worth the trouble, especially when it comes to maintaining iconography.

Odido is a telecommunications company in the Netherlands that merged with T-mobile and took up a huge rebrand from the ground up. It was a massive team effort, and I lead the icon system direction & creation in coordination with the rebrand.

The icon system took inspiration from the brand typeface and also the iconic brand shapes to create universal icons that are cohesive within the Odido ecosystem. It was a multitiered icon system that delivered 2 levels of fidelity for different use cases. The icon set consisted of nearly 200 icons in 5 different sizes.

Part of the language that forms a digital product experience, an icon system can include workflow icons that people use to interact with and manipulate objects; UI icons, like chevrons, that indicate that interaction is possible; status badges that show states and processes; and cursor styles, the hands and arrows, that provide supporting context for the expected interactivity (like dragging or resizing) of a selected tool.

Our initial explorations for a new set of icons followed earlier sessions with an internal community of advisors, put in place to help the Spectrum team define where the system was headed and to document the principles that would guide decision-making. From those early working sessions, the icon team inherited a high-level checklist of principles that would guide early design explorations.

Although nothing (from abstract ideas to intricate details) is off-limits during design exploration, a checklist provides a place to return to if anyone gets off track or the scope of work begins creeping. It should focus on those principles most important to the expression of your brand:

Instead of meeting as one large working group, consider sharing ideas back-and-forth between two smaller ones: one focused on workstream (comprised of experts from product and product marketing along with an icon and design system designer) and another on icon design (comprised of designers specifically focused on icon production work). Discussing ideas, feasibility, and logistics between two groups, each with a different focus, can uncover complications that could stall progress if they come up later in the process.

As most people know, even when meetings are small, they can easily get off-track and run long. Setting ground rules and confining topics to a set amount of time can help keep conversations brief and constructive, but icon design meetings are most productive with a few additional guidelines for presenters:

During the tail end of design exploration, make time to work in parallel with beta testers from product design teams who will be using the design system. Create a basic icon library of explorations so testers can use them in mockups and provide feedback. It will begin a useful cycle of implementing tester feedback to refine icons that can be shared back with testers for additional feedback.

Sessions with product designers can be pivotal in exploring how well icon visuals will work when placed within the context of specific interfaces. Conversations can uncover edge cases, some of which will require solutions before you can move forward with the broader design of the system. A new or refreshed understanding of product team needs, in conjunction with what you already know about your design system, will help inform the details behind new icon designs:

When working toward finalizing the specific features for icons, consider updating a new shared library. It can include streamlined workflows, accessibility, and, if needed, short-term solutions for transitioning between an existing and new version of your design system. Along with the shared library, provide an easy way for beta testers to comment on and rate design decisions.

Do explorations for how different product teams might pull together the same elements for different expressions (by making them larger, adding colors, gradients, or animation). The same monochrome icon used in an application can be repurposed for marketing content, by allowing for varying degrees of customization and expressiveness (from rational to emotional).

Because every team has unique dependencies and frameworks, offer multiple methods for displaying and implementing icons so teams can use the method that serves them best. SVG is an excellent native format. It serves all states in all color themes, provides a stable creation and export workflow in Adobe Illustrator, requires minimal effort to update color changes, and allows for app-specific custom colors. For Spectrum we also created SVG sprite sheets (a single SVG file containing every icon, along with a corresponding ID, that engineers can reference in their code).

3a8082e126