Digital Media, UX-UI Design > Display Design

Transcription

1 Contents At a glance Displays in trains and buses Displays as operating element In the external presence of DB, screens are used to transmit information. Especially within the travel chain, they have a multitude of possible uses, e.g. ticket vending machines, ServicePoints, travel centers, lounges, passenger trains and buses. Technical and conceptual guidelines, as well as requirements for terminal displays, vary substantially. Displays in DB facilities Corporate design guidelines General Design Information Design Guidelines for a Display Design Page 1

2 At a glance Displays in trains and buses with passenger information, such as train specifications, arrival and departure times, route information and news reports. The design is based on existing information carriers as part of the orientation system in railway stations. Displays as operating element e.g. touchscreen on ticket vending machines or wall touchscreens in ServicePoints. Displays contain selection and interface elements to operate the vending machine or to access further information levels. General information on display design and CD relevant guidelines is defined as follows, in order to guarantee a uniform and DB-typical appearance despite the variety of possible applications. Displays in DB facilities such as railway stations and travel centers. They carry information, annotations and/or advertising messages (images, moving images). Color and stylistic elements are based on the external identity of the Passenger transport division as part of the mobility chain. If you have questions on display design, please the Corporate Design Team [1] Page 2

3 Corporate design guidelines General Design Information When designing a display, factors to be taken into account include function, task and location. many displays used by DB have high information density and are directed at large numbers of viewers. Whether on buses or trains or in stations, displays are always installed so that every passenger can see them equally, if possible. Therefore, these displays must be designed with their long-distance effect in mind. Legibility and long-distance effect Font size: Older people and those with impaired vision must be considered when choosing a font size. Clear structure: A well structured design that is rich in contrasts enables the viewer to absorb the information levels more easily. Location: Design must consider on site lighting conditions through the day and the resulting brightness of the room. DIN standards (Germany) Uniform standards for designing objects in public spaces can be found in the following DIN norms: DIN : Graphic symbols for public information DIN 1450: Fonts, legibility E DIN 32975: Visual contrasts in publicly accessible areas Displays with operating elements touchscreen When designing touchscreens, special emphasis should be put on usability. Operating elements and content should be hierarchically structured and sensibly arranged to allow users a comfortable and simple handling. Page 3

4 Design Guidelines for a Display Design Flexible guidelines have been provided to accommodate the highly varied requirements of different kinds of display and guidelines for content. The following information should be considered as framework guidelines adapted from design elements that are anchored in DB Corporate Design. Please note: the styleguide presents the status of Please regard the changes in our brand architecture of 2016! Guidelines for online media and ticket vending machines can also serve as an orientation aid. You can download them here: Styleguide for DB ticket vending machines: Website Principles UX-UI Design Download: _DB-Automat_ Styleguide_v1.4 (German only) File format: PDF File size: 4.5 MB The main features as framework guidelines for designing displays: Horizontal alignment of design elements Flat, linear distribution of space with horizontal emphasis and right-angle edges Large surfaces should preferably be placed bled-off The Color Scheme Uniform coloring from the DB Group color scheme DB Red serves as surface- and accent color (plus DB Blue in Land transport, air and ocean freight, contract logistics) The basic color scheme is characterized by white and different gray tones of various brightness. The color values of the gray tones are adapted to conditions on site and the desired contrast on the display. The DB Color Scheme and style guides for color values for the Internet and DB ticket vending machines serve as orientation aids. For displays whose design is based on the navigation and orientation system in passenger train stations, the colors Night blue (Nachtblau) and Sun yellow (Sonnengelb) from the orientation system are used as well. RGB 240/20/20 Web #F01414 RGB 10/30/110 Web #0A1E6E RGB 255/255/255 Web #FFFFFF RGB 0/0/0 Web # RGB 17/22/134 Web # RGB 255/175/0 Web #FFAF00 Color Page 4

5 Placing the logo the logo stripe The sender logo is placed on the left in the logo stripe or the logo box Size and position are based on proportions laid out in other DB media and are selected according to the requirements of the application at hand. Typography Fonts of the type system DB Type are used. Exception: displays integrated into the environment of railway station navigation and orientation systems are designed with the DB WLS (orientation system). If, for technical reasons, the mentioned fonts cannot be used, choose Arial as replacement font. Typeface The DB Corner Element As a visual constant of our appearance, the DB Corner Element enhances the familiarity of our various communications media. It is used to structure text and surface elements. Placement of the DB Corner Element and its offset is based on the CD guidelines of Print Media No inflationary use of edges and corners. The corner is used instead to offset the emphasis on horizontal lines. Graphic stylistic devices Information is structured through the use of horizontal lines, as these emphasize the horizontal alignment, e.g. as overscores assigned to individual text lines/paragraphs. Tables can be arranged in a purely linear way or over an area using gray shades. The style for graphics and tables is uniform within each application. Tables Images Images do not have borders or rounded edges. In the interest of authentic imagery, do not use gradient feathers or crossfading Graphic effects Design of spaces in button optics should be avoided if not essential for reasons of usability. Page 5

6 Icons, pictograms and operating elements For the sake of uniformity, design of icons and pictograms should make use of existing precedents. As with operating elements, these are discussed in more detail in the Style Guide for DB ticket vending machines. published: Verweisliste [1] the Corporate Design Team: Page 6