digital media, ux-ui design > db icons...digital media, ux-ui design > db icons deutsche bahn...

Digital Media, UX-UI Design > DB Icons

Deutsche Bahn AG · Corporate Design · Digital Media, UX-UI Design · Revision: 30.03.2017

Contents

At a glance:

Icon systematics

Corporate design guidelines:

Icon form and construction

Design grid

Image sizes

Design variants

Contour lines

Drop shadows

Brightness gradients

Colors

Multicolored symbols

DB Icons Electronic Media

Icons influence usability and mark the esthetic quality of all electronic media.Use exclusive DB icons with our own language and system of symbols fordesigning our media.

Templates for the icons can be downloaded license-free. They are availablein SVG format and can be scaled and/or adapted as needed without loss inquality.

An entire assortment of design possibilities such as contours, colors,brightness profiles and shadows is available for differentiated use in variouskinds of content, functional applications and diverse media.

On this page you can find the DB Icons for the most important functions ofelectronic applications. You can find DB Dashboard Icons for individualapplication purposes under:

DB Dashboard Icons

The downloads are gradually being expanded with additional icons. Questions?Please contact the Corporate Design Team.

Email the Corporate Design Team [1]

mailto:[email protected]



At a glance:Icon systematics



Please note: The full functionality of the tutorial is guaranteedonly with use of the latest browser versions.



Icons are constructed according to anewly-developed system.Each icon consists of a symbol and abase area (1) in a fixed relation to thesymbol. The base area is square withrounded corners.The design lies within a mutual, pixel-based design grid (2). The pixel-preciseconstruction of the icon enablesoptimal reproduction (with sharpedges) on displays and monitors.

Certain image sizes are especiallyrecommended when using icons.These sizes retain the pixel-preciseconstruction and ensure loss-freerepresentation of the icon.

An assortment of design versions isavailable for use with icons.The icons can be used as free-standingsymbols or together with a base area.Both positive and negative versions arepossible. Stylistic elements includingcontour lines, drop shadows andbrightness gradients (3) can be used inthe base area according to fixedrequirements. We deliberately avoidfaddish, short-lived visual effects suchas pseudo-realistic representation byimitating surfaces and textures.DB Gray tones are used as colors.Additional web red tones and DB Redare available for icons that representfunctions.

A unified language of symbolsand formsThe symbols in our icons are based onalready ‘learned’ images, are self-explanatory and universallyunderstandable (4).The symbols are designed to focus onessentials and are thereforeimmediately comprehensible. They aregeometrically constructed according toa system, so do not alter them.



Corporate design guidelines:

Icon form and construction

The form of the icons may not be changed.

The icons have been created vector-based as SVG files.They can generally be enlarged or reduced without loss

of quality and, unlike pixel-based data formats, areespecially suitable for representation of on-screencontent across the most diverse end-user devices.The icons are also available in PNG format.

Vector files on the screenVector files are also reproduced on-screen in the form of pixels. Objectedges that do not lie precisely on thepixel grid result in blurs, becauseadditional pixels are in use.

Comparison: The icon is optimally reproduced only when the object is aligned precisely along the pixel grid.

Design gridThe icons are designed for optimalreproduction on displays and monitors.They have been designed on a pixel-based grid of 32x32 pixels with amaximum symbol size of 24x24 pixels.Pixel-precise construction and the fixedsize of the symbol relative to thesurrounding base area enable optimallysharp reproduction on displays andmonitors (despite simplifiedrepresentation).

Image sizesTo ensure optimal reproduction, werecommend five image sizes for usewith the icons, each of whichrepresents a respective 25% sizeincrease or decrease on the base size.These image sizes retain pixel-preciseconstruction of the icons. Users canproduce additionally requiredintermediate sizes as pixel-optimizedversions.

Recommended image sizes for optimal reproduction

Please noteYou can find information on the design grid and image sizesof DB Dashboard Icons under:

DB Dashboard Icons

DB Dashboard Icons



Icon templatesThese vector-based SVG files consist of a base area and symbol. Positive icontemplates are created with a transparent base area.

Templates can be adapted as needed by certified agencies and trained personnelusing specialized software, e.g. Adobe Illustrator, or through CSS.

Design variants

The following design variants for using the iconshave been defined for your needs.

Contour linesThe base area of the icon can beaugmented by a contour line in thecolor of the symbol. The contour line isaligned outward.

Drop shadowsTo help icons stand out against thebackground and to distinguish themfrom other design elements, add asimple shadow edge with little depth tothe base area. Do not use a blur. Theicon symbol is used without a shadow.

Brightness gradientsTo achieve a lively, object-like effect,the base area of the icon can bedesigned with a brightness gradientfrom the top down with a maximalbrightness difference of 30%. Gradientsare not used on icon symbols.

ColorsUse DB Gray tones and white. For iconsindicating functions, DB Red and otherred tones are also available. Colors canbe applied on both symbols and baseareas.

More colors can be used inagreement with GNM 11.

Website Principles



Multicolored symbolsTo emphasize a symbol’s message or add information to anicon, symbols can be designed multi-colored by addingDB Red as a distinguishing color. To ensure that the imageremains clear and concise, only self-contained forms withinthe icon symbol are shown in DB Red. Only in a few designvariations does the multi-colored symbol contrast sufficientlyto the base area.

A defining mark of the design is the omission of pseudo-realistic representation by imitation of surfaces andtextures. Unnecessary and exaggerated effects are likewisenot used, for the sake of a durably effective presence.Exceptions are project- or campaign themes that must reflectthe necessary ‘spirit of the time’ to be effective publicly andreach a specific target group for a limited period of time.

DB Icons Electronic Media

All downloads contain the complete set of DB Iconsin the design variant shown, in SVG and PNG file formats.

Download: DB Icons eM 001-103DB Gray positive v1.4File format: ZIPFile size: 6.9 MB

Download: DB Icons eM 001-103DB Gray negative v1.4File format: ZIPFile size: 7 MB

Download: DB Icons eM 001-103White v1.4File format: ZIPFile size: 6.9 MB

Download: DB Icons eM 001-103DB Dark Gray contour v1.4File format: ZIPFile size: 7.5 MB

Download: DB Icons eM 001-103DB Red positive v1.4File format: ZIPFile size: 5.7 MB

Download: DB Icons eM 001-103DB Red negative v1.4File format: ZIPFile size: 7.3 MB



Download: DB Icons eM 001-103gradient negative v1.4File format: ZIPFile size: 7.3 MB

Download: DB Icons eM 001-103drop shadow positive v1.4File format: ZIPFile size: 7.4 MB

Download: DB Icons eM 001-103drop shadow negative v1.4File format: ZIPFile size: 7.5 MB

Download: DB Icons eM 001-103outline positive v1.4File format: ZIPFile size: 7.2 MB

Download: DB Icons eM 001-103outline negative v1.4File format: ZIPFile size: 7.3 MB



as of: 20 April 2017 (Version 1.4) – assortment is expanded regularly



Contact

Any questions about the contents of this page? [2]

published: 30.03.2015

Verweisliste

[1] Email the Corporate Design Team: [email protected]

[2] Any questions about the contents of this page?: [email protected]

[email protected]

mailto:[email protected]

[email protected]

digital media, ux-ui design > db icons...digital media, ux-ui design > db icons deutsche bahn...

Documents