GNG Visual Design Guidelines

GNG Visual Design Guidelines Stephanie Häusler January 2014

INTRODUCTION Objective This guideline provides a binding basis for redesigning the GUI and user guidance of the GEUTEBRÜCK software to create a consistent visual impression as well as a user-friendly interaction for the whole system. This documents contains the visual design guidelines. The interaction concept is documented in a separate file (GNG_User Interface Guideline_V1-0_KEK_20131211). Page 2 January/ February 2014 GNG Visual Design Guidelines

INTRODUCTION Content 01 Design & Icon Style Gives an overview of central design elements including the icon style as guidelines for the existing product as well as further projects 02 Control Overviews Provide information on dimensioning, fonts and colors for specific controls 03 Icon Overviews List of available icons and icon stati Page 3 January/ February 2014 GNG Visual Design Guidelines

GNG VISUAL DESIGN GUIDELINES 01 Design & Icon Style

01 DESIGN & ICON STYLE Basis for GNG design & icon style The basis for the GNG design & icon style was developed in a mood chart workshop 2013 together with the GNG project team. High-quality functional stylish decent serious innovative technical clear The workshop resulted in requirements for the visual appearance of the GNG software. Further the GNG design & icon style is based on the Geutebrück CI (GB_Brand_Book_DE_Update2013_10.09.pdf; Geutebrück_Corporate Produkt Designmanual_update230812) Page 5 January/ February 2014 GNG Visual Design Guidelines

01 DESIGN & ICON STYLE Clear structure and modules The design style provides a clear structured look & feel and thereby allows the users to focus on the functionality. Therefore areas are used to create the overall structure of the different screen parts. Furthermore lines set further accents where needed to structure and highlight specific elements. Page 6 January/ February 2014 GNG Visual Design Guidelines

01 DESIGN & ICON STYLE Consistent design language Part I The general reduced color scheme allows to set highlights on information of specific interest using light-dark contrasts or the sparingly used highlight colors orange as well as several signal colors. Orange is used for selected elements and is directly derived of the Geutebrück CI. Signal colors like green and red are used to communicate different states; e.g. Green = OK, working Red = Alarm, attention! Page 7 January/ February 2014 GNG Visual Design Guidelines

01 DESIGN & ICON STYLE Consistent design language Part II Font Seago UI is a lightweight and easy to read font. Font Sizes used 7.5 Pt, 9 Pt, 10,5 Pt, 12 Pt. The light font color on dark background provides a high contrast. Bold typeface is used to structure the information on the screen by highlighting central pieces of information. Page 8 January/ February 2014 GNG Visual Design Guidelines

01 DESIGN & ICON STYLE Icon Style The reduced and clear icon style fits itself into the general visual design. Two-dimensional icons allow the user to focus on the functionality while providing enough means of expression to transport the meanings behind the respective functions. Cut-outs let the icons have an high-quality look and create distinctiveness and value recognition. The usage of highlight or signal colors is an exception reserved for important information or states in the system. Page 9 January/ February 2014 GNG Visual Design Guidelines

01 DESIGN & ICON STYLE Color Scheme #83bb25 RGB 131 / 187 / 37 #FFFFFF RGB 255 / 255 / 255 #878786 RGB 135 / 135 / 134 #292a2b RGB 41 / 42 / 43 #f7921e RGB 247 / 146 / 30 #e3e4e5 RGB 227 / 228 / 229 #757575 RGB 117 / 117 / 117 #151515 RGB 21 / 21 / 21 #b51f1e RGB 181 / 31 / 30 #e4e4e4 RGB 228 / 228 / 228 #686868 RGB 104 / 104 / 104 #050505 RGB 5 / 5 / 5 #0072bc RGB 0 / 114 / 188 #87888a RGB 135 / 136 / 138 #414447 RGB 65 / 68 / 71 #000000 RGB 0 / 0 / 0 Page 10 January/ February 2014 GNG Visual Design Guidelines

GNG VISUAL DESIGN GUIDELINES 02 Control Overviews

CONTENT GNG CONTROL OVERVIEWS In alphabetical Order: Collapsible Panel - Extended Settings Collapsible Panel Main Navigation Command Button Complex Table Connection Control Layover Main Menu Main Navigation Plus Button Scroll Bar Sequence Map Switch Button Complex Table Text Box Timeline Alpha Slider 01 Timeline Alpha Slider 02 Viewer GNG Setup Viewer GNG View Page 12 January/ February 2014 GNG Visual Design Guidelines

*CALCULATION OF FONT SIZE FOR WPF IN THIS DOCUMENT All font sizes are listed in pt and are calculated based on the following formula from the Microsoft WPF developer network (http://msdn.microsoft.com/en-us/library/system.windows.documents.textelement.fontsize%28v=vs.110%29.aspx). Example: 12px 72 96 = 9pt 12px 0,75 = 9pt Page 13 January/ February 2014 GNG Visual Design Guidelines

03 Icon Overviews

CONTENT GNG ICON OVERVIEWS Geutebrück_Icons_GnG_01 Geutebrück_Icons_GnG_02 Geutebrück_Icons_GnG_03 Geutebrück_Icons_GnG_04 Geutebrück_Icons_GnG_05 Geutebrück_Icons_GnG_06 Geutebrück_Icons_GnG_07 Geutebrück_Icons_GnG_08 Icon Stati Page 32 January/ February 2014 GNG Visual Design Guidelines

02 DESIGN AUSARBEITUNGEN

Screendesign Ansichten

02 DESIGN AUSARBEITUNGEN SCREENDESIGN EVENTLISTE MOUSE OVER UND LOST FOCUS Mouseover Primärfokus Lost Fokus Seite 54 August 2014 GEUTEBRÜCK Konzept und Design Quick Review

02 DESIGN AUSARBEITUNGEN SCREENDESIGN FEHLERSTATI BEI EINGABEFELDERN VAR 02 Seite 56 August 2014 GEUTEBRÜCK Konzept und Design Quick Review

Control Overviews

02 DESIGN AUSARBEITUNGEN CONTROL OVERVIEW BUTTON TEXT AND ICON Seite 61 August 2014 GEUTEBRÜCK Konzept und Design Quick Review

02 DESIGN AUSARBEITUNGEN CONTROL OVERVIEW COMMAND BUTTON (ERWEITERT ZWEIZEILIG) Seite 62 August 2014 GEUTEBRÜCK Konzept und Design Quick Review

Kacheln Größe G-Set

02 DESIGN AUSARBEITUNGEN KACHELGRÖßEN RESIZEVERHALTEN G-SETUP Seite 64 August 2014 GEUTEBRÜCK Konzept und Design Quick Review

Kacheln Größe G-View

02 DESIGN AUSARBEITUNGEN KACHELGRÖßEN RESIZEVERHALTEN G-VIEW Seite 73 August 2014 GEUTEBRÜCK Konzept und Design Quick Review

Stephanie Häusler INTERFACE DESIGNERIN Stephanie.haeusler@uid.com Esther Wilczek USABILITY ENGINEER Esther.wilczek@uid.com Kerstin Klauß SENIOR USER EXPERIENCE CONSULTANT Kerstin.klauss@uid.com www.uid.com