GNG Visual Design Guidelines

Transkript

1 GNG Visual Design Guidelines Stephanie Häusler January 2014

2 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_ ). Page 2 January/ February 2014 GNG Visual Design Guidelines

3 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

4 GNG VISUAL DESIGN GUIDELINES 01 Design & Icon Style

5 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

6 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

7 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

8 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

9 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

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

11 GNG VISUAL DESIGN GUIDELINES 02 Control Overviews

12 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

13 *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 ( Example: 12px = 9pt 12px 0,75 = 9pt Page 13 January/ February 2014 GNG Visual Design Guidelines

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31 03 Icon Overviews

32 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

33

34

35

36

37

38

39

40

41

42 02 DESIGN AUSARBEITUNGEN

43 Screendesign Ansichten

44 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

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

46 Control Overviews

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

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

49 Kacheln Größe G-Set

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

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

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

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

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

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

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

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

58 Kacheln Größe G-View

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

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

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

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

63 Stephanie Häusler INTERFACE DESIGNERIN Esther Wilczek USABILITY ENGINEER Kerstin Klauß SENIOR USER EXPERIENCE CONSULTANT