iconography - zebra technologies · 2019-12-23 · iconography basics character all our icons have...

ICONOGRAPHY

January 2017 | GPDL 2.0

Iconography

Using the Guidelines

This document contains basic information about Zebra icons. The proper use of Zebra icons helps create a unified family appearance that is used across a variety of platforms.

To access the current library or to request a new icon, contact: GPDL@zebra.com

Icons are symbols that help users to interact with our devices, draw attention to features, and guide a user through an interface, without relying on a written language. Due to the growing occurance of displays and the global reach of products, universal icons are critical to a positive and consistent user experience.

The three main categories are general icons, app icons, and Mobility DNA software ecosystem icons.

Essence of Iconography

2ICONOGRAPHY GUIDELINESPrivileged and Confidential. Do not copy or distribute.

Privileged and Confidential. Do not copy or distribute.

Table of Contents

Iconography Basics5 Character

6 Standardization and Scalability

7 General Icon Color Use

8 Icon Library

9 Do’s and Dont’s

App Icons12 Character

13 Color Use

14 Do’s and Dont’s

Mobility DNA Software Ecosystem Icons16 Character

17 Color Use

18 Do’s and Dont’s

Contact19 Contact Information

3ICONOGRAPHY GUIDELINESPrivileged and Confidential. Do not copy or distribute.

Iconography Basics

4Privileged and Confidential. Do not copy or distribute.Privileged and Confidential. Do not copy or distribute. 4ICONOGRAPHY GUIDELINES

Iconography BasicsCharacter

All our icons have been created to visually

match with our logo. The Zebra head symbol

in our logo has both sharp corners and soft

edges, parallel lines and curves, negative

space and solid fills and so do our icons.

Our icon shapes are bold and geometric.

Symmetry and consistency of shapes give our

icons a unique quality, while keeping them

simple and easy to understand.

The design of our icons is modern and

friendly. Each icon is distilled to its essence

and designed to ensure readability and clarity

even at small sizes.

Sharp

SharpRounded

Rounded

Sharp

Rounded

5ICONOGRAPHY GUIDELINESPrivileged and Confidential. Do not copy or distribute.

Iconography Basics

Icons are developed on a 64 x 64 grid so

that they can easily scale across a range

of resolutions.

The metaphor is the core of each icon.

All metaphors are are drawn in 2D frontal

view as a silhouette. This helps convey

the message directly and easily.

Standardization and Scalability

6ICONOGRAPHY GUIDELINESPrivileged and Confidential. Do not copy or distribute.

Iconography BasicsGeneral Icon Color Use

In most cases, the general icons should

use black and white depending on what

provides the highest contrast. Grey

colors can be used in buttons, shapes

and other user interface assets to create

a color diversity.

Brand colors can also be used for

general icons when necessary.

Black and White Greyscale

Brand Colors

7ICONOGRAPHY GUIDELINESPrivileged and Confidential. Do not copy or distribute.

Iconography BasicsIcon Library

These basic principles help create the

unique Zebra icon library. Each member

communicates well with other members in

the library since they share the same

principles and this strengthens the “family”

feel.

Please contact GPDL@zebra.com for the

latest version of the icon library.

General Icons

App Icons

Mobility DNA Software Ecosystem Icons

8ICONOGRAPHY GUIDELINESPrivileged and Confidential. Do not copy or distribute.

DO use the icons on solid color backgrounds and use high contrast between the metaphor and the background.

DON’T use patterns or gradient backgrounds. Make sure to use high contrast between the metaphor and the background.

X X X X

Iconography BasicsDo’s and Don’ts

The following rules apply to all icons.

9ICONOGRAPHY GUIDELINESPrivileged and Confidential. Do not copy or distribute.

DO provide clearspace around the icons.

DO use the original icons.

DON’T crowd the icons very close to each other.

DON’T modify or change the icons.

X

X

x

1/4x

1/4x

1/4x

Iconography BasicsDo’s and Don’ts

The following rules apply to all icons.

10ICONOGRAPHY GUIDELINESPrivileged and Confidential. Do not copy or distribute.

App Icons

11Privileged and Confidential. Do not copy or distribute.Privileged and Confidential. Do not copy or distribute. 11ICONOGRAPHY GUIDELINES

App IconsCharacter

App icons build upon the general icon

principles. With the addition of colors and

shadows, these icons are designed to

stand out from the crowd.

12ICONOGRAPHY GUIDELINESPrivileged and Confidential. Do not copy or distribute.

App IconsColor Use

The colors for the application icons are

selected based on their functionalities.

Each color indicates a different category. This is our first primary color.This color is used for productivity apps, like communications, barcode

scanning, etc.

This is our second primary color.This color is used for apps that help maintain the device, like file browser,

network operations etc.

This is our supplementary color.This color is used for apps that help manage the device, like settings,

diagnostics, etc.

This is our supplementary color.This color is used for apps that add extra functionalities to the device, like

configuration tools, enterprise keyboard, etc.

This is our supplementary color.This color is used for miscellaneous apps of secondary importance.

This is our supplementary color.This color is used for demo apps to help sales and marketing.

13ICONOGRAPHY GUIDELINESPrivileged and Confidential. Do not copy or distribute.

DO use the shadow to add depth.

DO use the original icons.

DON’T remove the shadow.

DON’T modify or change the icons.

X

X

App IconsDo’s and Don’ts

The following rules apply to app icons.

14ICONOGRAPHY GUIDELINESPrivileged and Confidential. Do not copy or distribute.

Mobility DNA Software Ecosystem Icons

15Privileged and Confidential. Do not copy or distribute.Privileged and Confidential. Do not copy or distribute. 15ICONOGRAPHY GUIDELINES

Mobility DNA Software Ecosystem IconsCharacter

Mobility DNA software ecocsystem icons

build upon the general icon principles.

With the addition of gradient colors and

strokes, these icons are designed to

stand out from the crowd whether they

are used in print or on screen.

16ICONOGRAPHY GUIDELINESPrivileged and Confidential. Do not copy or distribute.

Color Use

Mobility DNA software ecosystem icons use

blue tones combined with gradients and

highlight sheens. These additional elements

add a unique visual appeal and distinction

that makes them well suited for marketing

purposes.

Mobility DNA Software Ecosystem Icons

17ICONOGRAPHY GUIDELINESPrivileged and Confidential. Do not copy or distribute.

DO use the supplied colors.

DO use the original icons.

DON’T use different colors.

DON’T modify or change the icons.

Do’s and Don’ts

The following rules apply to Mobility DNA

software ecosystem icons.

X

X

X

Mobility DNA Software Ecosystem Icons

18ICONOGRAPHY GUIDELINESPrivileged and Confidential. Do not copy or distribute.

CONTACTZebra Technologies Corporation3 Overlook Point

Lincolnshire, IL 60069

For more information, contact:

GPDL@zebra.com

Privileged and Confidential. No unauthorized distribution or copying. ©2016 ZIH Corp and/or its affiliates. All rights reserved. ZEBRA and the stylized Zebra

head are trademarks of ZIH Corp., registered in many jurisdictions worldwide. All other trademarks are the property of their respective owners.