Creating a Unified Brand Icon Style & Library for desktop (as SVG), and mobile (as TTF)
Intro
Blue Yonder is the world leader in digital supply chain transformations and omni-channel commerce fulfillment. Their products & services offerings are primary focus on the supply chain. As a full-stack UX designer (UX/UI product/app design, visual identity, illustrations, etc.), I single-handedly created and built an icon library set used across UI on desktop & mobile applications. The visual design was aligned to the new company name, logo, and brand voice, I chose an outline semi-illustrative style to make it possible to illustrate visually complex supply chain terms and concepts.
Aesthetic-Usability effect – users’ tendency to perceive attractive products as more usable. People tend to believe that things that look better will work better. An estimated 84% of communications will be visual and more the reason visual design and aesthetic plays an important role in Product Design.
Facts
- Tools – Figma, Color Contrast Checker
- May 2019
- Role – Illustrator, Visual Design, Creative Lead
- Tasks- Sketching, AB Testing, User validation, Dev Handoff
Process
Tasks
Having a playbook helps to stay within icon guidelines – posted by the icon environment, ambiance, medium, and call to actions
- Decide on the style
- Use simple metaphors
- Working within Grid
- Limit the details
Design Principles
Iconography is a powerful visual cue to the user and should reflect our particular sense of style.
- Balance and structure
- Simple and concise
- Creatively clever
- Modern and approachable
- Avoid icon proliferation
Closing
As Bonnie Kate Wolf says – Icons are a crucial part of any design system or product experience. Icons help us quickly navigate. They are language-independent. And best of all: they’re real tiny, so they don’t take up very much real estate.
Icons are a fundamental part of a good design system and are very helpful for marketing materials. They’re the foundational building block of illustrated content, but they are also highly technical and need special talent and skills.