Upload
others
View
1
Download
0
Embed Size (px)
Citation preview
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: [email protected]
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 [email protected] 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:
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.