Styleguide Version 1.0,

Transkript

1 Styleguide Version 1.0,

2 Inhaltsübersicht 1. Einleitung Logo Aufbau/Größen Schutzraum Schwarzweiß-und Negativdarstellung Verwendung auf der Webseite Falsche Anwendung Farben Typografie Desktop Mobile Grundaufbau/Raster Grundaufbau Desktop Grundaufbau Mobile Elemente Hintergründe Buttons Dropdowns Icons Seitentypen Startseite Detailseite Suchergebnisseite Übersicht responsive Seiten

3 1. Einleitung Das Corporate Design wird als Gestaltungskonzept einer Institution oder eines Unternehmens bezeichnet. Mit diesem CD soll ein einheitliches Erscheinungsbild erzielt werden, um einen hohen Wiedererkennungswert in der Öffentlichkeit und die Wirkung nach Außen und Innen zu gewähren. Zu einem durchdachten CD gehören unter anderem die Gestaltung der Kommunikationsmittel wie Unternehmenslogo, Internetauftritt und der durchdachte Einsatz von Typografie und Farben. Dieser Styleguide definiert Richtlinien für das Erscheinungsbild der GOVAPPS. Die Gestaltung der Elemente des CD geschieht unter einheitlichen Gesichtspunkten, um einen Wiedererkennungswert zu erzielen. 3

4 2. Logo Über das Logo: Das Logo dient als Aushängeschild des Unternehmens, es kann in verschiedenen Ausführungen zum Einsatz kommen ( siehe Seite 5 ). Das Logo sollte nur in den aufgeführten Formen verwendet werden, um das CD aufrecht zu erhalten. Der Name der App bildet sich aus der Abkürzung GOV für Government und dem Namen APPS. Die verwendete Schrift ist die TitilliumText22L in zwei verschiedenen Schriftschnitten, GOV in extra bold und APPS in regular. Grundelemente: Das Logo besteht aus zwei Elementen; einer Bildmarke, die aus 16 gleichgroßen abgerundeten Quadraten besteht und einer Wortmarke, bestehend aus dem Namen des Angebots. Die abgerundeten Quadrate symbolisieren die 16 Bundesländer Deutschlands, die drei farbigen Quadrate ( schwarz, rot, gold ) greifen die Farben der Deutschlandflagge auf. Einsatz: Das Logo wird auf der Webseite in Gesamtausprägung und in den anderen Anwendungszenarien als Bildmarke eingesetzt, zum Beispiel als Favicon und App-Icon. 4

5 2.1 Logo: Aufbau / Größen 1 2 0,5 Entspricht der Logogröße auf der Webseite Bildmarke alleinstehend ( App-Icon, Favicon ) Minimalgröße 5

6 2.2 Logo: Schutzraum Für die optimale Wirkung Dem Logo muss immer ein Schutzraum von mindestens einer Quadratgröße gegeben werden in dem es nicht mit Schriften, Bildern und anderen Elementen in Berührung kommt. Optimale Schutzzone Minimale Schutzzone 1 1 6

7 2.3 Schwarzweiß -und Negativdarstellung Schwarzweiß Darstellung Gedacht ist diese Version für Schriftverkehr ohne farbige Dokumente wie z.b. Fax, Kopien und Handzettel. Negativ Darstellung Zum Einsatz des Logos auf dunklen Hintergründen. Die Negativdarstellung darf nur im Rahmen von bestimmten Sonderfällen verwendet werden. 7

8 2.5 Logo: Verwendung auf der Webseite Bei der Desktopdarstellung wird das Logo linksbündig mit den Contentboxen und mittig der Navigation gesetzt. Beim Mobileeinsatz wird, aufgrund der geringeren Größe im Header, nur noch das Bildelement verwendet, das ebenfalls linksbündig mit den Contentboxen sitzt und dieselbe Höhe wie die Navigationsicons hat. Screen Desktop: Startseite Screen Mobile: Startseite 8

9 2.4 Logo: Falsche Anwendung Das Logo sollte in der Regel in voller Ausprägung ( Wort-und Bildmarke ) auf weißem bis leicht gräulichem Hintergrund stehen. Die Bildmarke kann, sofern notwendig, auch einzeln als App- Icon oder Favicon genutzt werden. Beispiele für die unsachgemäße Darstellung des Logos: a) Die Farben der Quadrate dürfen nicht verändert werden. b) Das Quadrat darf in seiner Form nicht verändert werden. c) Die Position der Wortmarke darf nicht verändert werden. d) Die Relation zwischen Wort-und Bildmarke darf nicht verändert werden. 9

10 3. Farben Hauptfarben # R 0 G 98 B 147 Navigation, Erweiterte Suche, Überschriften der Apps, Lupen-Icon, Subnavigation, Breadcrumb, allgemeine Links # R 0 G 0 B 0 Headlines, Fließtext, Dropdown-Texte, Hover Navigation, Text in den Sidebarelementen # R 136 G 136 B 136 Navigation im Footer, Breadcrumb # acacac R 172 G 172 B 172 Navigationspfeile, Suchfeldtext # dcdcdc R 220 G 220 B 220 Hintergrund der Filter Relevanz, Preis, Name auf der Suchergebnisseite, Trenner beim Footer 3.1 Farbverläufe # dddddd - # e8e8e8 R 221 G 221 B R 232 G 232 B 232 Hintergrund # f3f3f3 - # ffffff R 243 G 243 B R 255 G 255 B 255 Hintergrund Contentboxen, Anwendung mit 70% Deckkraft 10

11 4. Typografie Die verwendete Hausschrift ist die TitilliumText22L. Sie ist eine sehr moderne Schrift, die einen gewissen konstruierten Charme besitzt. Die TitilliumText22L ist charakteristisch für ihre stilvolle und zeitgemäße Formensprache, die besonders durch ihre konsequente, aber unaufdringliche Ausprägung besticht. Die TitilliumText22L hat sechs Schriftschnitte ( Thin, Light, Regular, XBold, Medium und Bold ). Unten sind die verwendeten Schnitte beispielhaft aufgeführt. Die kleinste lesbare Schriftgröße ist 9 px. TitilliumText22L ABCDEFGHIJKLMNOPQRSTUVWXYZ TitilliumText22L, Regular ( Verwendung im Logo, Fließtext, Filter ) abcdefghijklmnopqrstuvwxyz TitilliumText22L, Regular abcdefghijklmnopqrstuvwxyz TitilliumText22L, XBold ( Verwendung im Logo ) abcdefghijklmnopqrstuvwxyz TitilliumText22L, XBold abcdefghijklmnopqrstuvwxyz TitilliumText22L, Medium ( Verwendung in der Navigation, Headlines, Footertext, Breadcrumb, Filter ) abcdefghijklmnopqrstuvwxyz TitilliumText22L, Medium 11

12 4.1 Typografie: Desktop Medium, 16 Px, # Headline: Medium, 35 Px Fließtext: Regular, 20 Px # Medium, 20 Px, # Medium, 16 Px, # Medium, 13 Px, # Screen: Startseite Medium, 13 Px, # Medium, 30 Px, # Medium, 16 Px, # Android: # 9b9b9b, ios: # 9b9b9b, Windows: # 9b9b9b ( 50% Deckkraft ) Regular, 16 Px, # Medium, 20 Px, # Regular, 14 Px, 23 ZA # Regular, 14 Px, 23 ZA # Screen: Detailseite 12

13 4.1 Typografie: Desktop Regular, 15 Px, # Screen: Overlay erweiterte Suche Medium, 15 Px, # Regular, 13 Px, 20 ZA # Screen: Overlay Berechtigungen 13

14 4.1 Typografie: Desktop Regular, 20 Px, # Regular, 14 Px, # 4b4b4b aktiv: Bold, 14 Px, # Medium, 20 Px, # Regular, 15 Px, # Screen: Suchergebnisseite 14

15 4.2 Typografie: Mobile Regular, 13 Px, # # Medium, 20 Px, # Regular, 15 Px, 24 ZA, # Regular, 16 Px, # Medium, 26 Px, # Regular, 15 Px, 24 ZA, # Medium, 20 Px, # Medium, 16 Px, # Screen: Startseite Regular, 15 Px, # Medium, 20 Px, # Medium, 13 Px, # Screen: Suchergenisseite Medium, 16 Px, # Screen: Detailseite

16 4.2 Typografie: Mobile Medium, 20 Px, # Medium, 20 Px, # Regular, 15 Px, # Screen: Suchergebnisseite; Filterfunktionen Screen: Suchergebnisseite; Filterfunktionen ausgeklappt 16

17 5. Grundaufbau / Raster Das verwendete Raster basiert auf Bootstrap* und bildet die Grundlage für die Webseite der GOVAPPS. Bootstrap hilft beim Strukturieren der Inhalte der Website, indem es ein gleichermaßen auf mobilen Endgeräten als auch auf Desktop-Browsern funktionierendes Raster-System inklusive Grundlayout bereitstellt. Bootstrap - Raster Screen: Detailseite ( Desktop ) * 17

18 5.1 Grundaufbau : Desktop Das unten stehende Wireframe, am Beispiel der Detailseite, verdeutlicht die Aufteilung der Module beim Desktop. Die Zahlen zeigen, welches Element bei der mobilen Variante umbricht Abstand zwischen Header und Headline: 38 Px Breadcrumb inbegriffen Abstand zur Headline und Content: 70 Px Abstand zwischen Sidebarelementen: 30 Px Breite der Sidebarelemente: 271 Px 8 Breite der Contentbox: 870 Px Abstand zwischen den Modulen: 30 Px 9 Gesamtbreite: 1170 Px 10 Abstand zwischen Content und Footer : 55 Px Screen: Detailseite ( Desktop ) 18

19 5.2 Grundaufbau : Mobile Das unten stehende Wireframe, am Beispiel der Detailseite, verdeutlicht die Aufteilung der Module bei der mobilen Variante. Die Zahlen zeigen, welches Element wie umgebrochen ist. 1 2 Gesamtbreite: 320 Px Abstand: 20 Px Breadcrumb inbegriffen Abstand: 30 Px 3 Abstand: 20 Px zwischen Modulen 4 Contentbreite: 286 Px Abstand: 30 Px 10 Screen: Detailseite ( Mobile) 19

20 6.1 Elemente: Hintergründe Hintergründe Hintergrund Header: Verlaufsüberlagerung: # f5f5f5 - # ffffff Schlagschatten: # dbdbdb, normal, 100% Deckkraft, 1 Px Abstand, 20% Überfüllen, 6 Px Größe, 90 Hintergrund Contentboxen Verlaufsüberlagerung: # f3f3f1 - # ffffff Schlagschatten: # d7dcdd, normal, 75% Deckkraft, 2 Px Abstand, 100% Überfüllen, 0 Px Größe, 135 * Die Boxen werden immer mit abgerundeten Ecken angewendet und stehen immer auf einem dunkleren Hintergrund als Weiß. Hintergrundmuster Über dem grauen Hintergrund liegt ein leicht transparentes, vektorisiertes Muster 20

21 6.2 Elemente: Buttons Höhe: 40 Px Typo sitzt mittig vom Button Buttons Verlaufsüberlagerung: # 4681a7 - # 5aa7da, 90 Kontur: # , normal, 100% Deckkraft, 1 Px Außen Schatten nach innen: # 91cffa, 100% Deckkraft, 2 Px Distanz, 100% Unterfüllen, 0 Px Größe Typo: Titillium22L Medium, 16 Px, #ffffff *Dieser Buttonstil findet auf den Desktopseiten Verwendung, lediglich in der Länge kann er variieren ( je nach Spaltenlänge/ Textlänge ) Hover Farbüberlagerung: #006293, 100% Deckkraft Kontur: # Schatten nach Innen: # 91cffa, 100% Deckkraft, 2 Px Distanz, 100% Unterfüllen, 0 Px Größe Sliderpfeile Pfeil Farbe: # 5aa6d7 Schlagschatten: # ffffff,100% Deckkraft, 1 Px Abstand, 100% Überfüllen, 0 Px Größe, -90 Kreis: Verlaufsüberlagerung: # ebebeb - # ffffff, 100% Deckkraft Schlagschatten: # bbbbbb, 100% Deckkraft, 1 Px Abstand, 20% Überfüllen, 6 Px Größe, 90 Kontur: # c1c1c1, normal, 100% Deckkraft, 1 Px innen * Finden Verwendung bei Slidern ( Desktop und Mobile ) Navigationspfeil -und Trenner Farbe: # bababa * Die Pfeile führen den Nutzer zur Subnavigation; die Trennstriche schaffen Abstand zwischen den einzelnen Themen der Navigation 21

22 6.2 Elemente: Buttons Höhe: 37 Px Typo und Icon sitzten mittig vom Button Filterbutton Effekte wie beim Button ( siehe oben) Typo: Titillium22L, 16 Px, Medium, #ffffff * Findet Verwendung in der mobilen Suchergebnisseite; der Button ersetzt das Filtermenü der linken Seite. Hover: Farbüberlagerung: #006293, 100% Deckkraft Kontur: # Schatten nach Innen: # 91cffa, 100% Deckkraft, 2 Px Distanz, 100% Unterfüllen, 0 Px Größe Filterbuttons Übernehmen und Abbrechen Übernehmen Button: Effekte wie beim blauen Button ( siehe oben) Typo: Titillium22L, 20 Px, Medium, #ffffff Höhe: 37 Px Typo sitzt mittig vom Button Abbrechen Button: Verlaufsüberlagerung: # # cdcdcd Kontur: # , 1 Px Größe ( restliche Effekte wie anderer Button ) * Finden Verwendung in der mobilen Suchergebnisseite, nach Drücken des Filterbuttons. Der Nutzer hat die Möglichkeit, seine Auswahl zu übernehmen oder den Suchvorgang abzubrechen. Hover Übernehmen Button: Gleiche Effekte wie bei den anderen blauen Buttons. Abbrechen Button Farbüberlagerung: #acacac, 100% Deckkraft Kontur: #979797, 1Px Größe Schatten nach Innen: # 91cffa, 100% Deckkraft, 2 Px Distanz, 100% Unterfüllen, 0 Px Größe 22

23 6.2 Elemente: Buttons Höhe: 40 Px Typo sitzt mittig im rechten Teil vom Button Google Play Store Button Verlaufsüberlagerung: # 4681a7 - # 5aa7da, 90 Kontur: # , normal, 100% Deckkraft, 1 Px Außen Schatten nach Innen: # 91cffa, 100% Deckkraft, 2 Px Distanz, 100% Unterfüllen, 0 Px Größe Typo: Titillium22L Medium, 16 Px, #ffffff Trennstrich hell: # 91cffa Trennstrich dunkel: # * Dieser Button findet sich auf der Detailseite ( Desktop und Mobile ) Hover Farbüberlagerung: #006293, 100% Deckkraft Kontur: # Schatten nach Innen: # 91cffa, 100% Deckkraft, 2 Px Distanz, 100% Unterfüllen, 0 Px Größe Trennstriche: im Farbton gleichgeblieben Menü Suche Navigations-Icons abgerundetes Rechteck: Verlaufsüberlagerung: # e6e6e6 - # f5f5f5 Schatten nach Innen: # ffffff, normal, 100% Deckkraft, 90, 2 Px Abstand, 100% Unterfüllen, 0 Px Größe Kontur: # d0d0d0,normal, 1 Px Außen, 100% Deckkraft * Ersetzen in der mobilen Variante die Navigation und die Suche 23

24 6.3 Elemente: Dropdowns Schnellauswahl- Dropdown/ Erweiterte Suche Höhe: 31 Px Farbe: # ffffff Kontur: # c1cccf,normal, 1 Px Außen, 100% Deckkraft * Auf der Startseite kann man in der Schnellauswahl die Dropdowns wählen ( Thema, Region, Plattform ) Länge passt sich Textlänge/ Spaltenlänge an Subnavigation- Dropdown 14 Px, regular, # Farbe: # ffffff Kontur: # cedade,normal, 1 Px Außen, 100% Deckkraft * Die Subnavigation von Themen, Höhe ist abhängig von der Menge des Inhalts 16 Px, regular, # Type Ahead- Dropdown Farbe: # ffffff Kontur: # cedade,normal, 1 Px Außen, 100% Deckkraft * Das Dropdown der Suche, Höhe ist abhängig von der Menge der Ergebnisse 14 Px, regular, # Px, regular, #9f9f9f Filter- Dropdown ( Suchergebnisseite ) Verlaufsüberlagerung: # f3f3f3 - # ffffff * Das Dropdown der Filterfunktion der Suchergebnisseite, Höhe ist abhängig von der Menge der Filterfunktionen 24

25 6.4 Elemente: Icons 25

26 7. Seitentypen: Startseite Header Big Slider über Pfeile steuerbar Modul: Schnellauswahl Auswahl über Dropdowns Modul: Neueste Apps über Pfeile steuerbar Footer Screen: Startseite/ Aufbau Screen: Startseite 26

27 7.1 Seitentypen: Detailseite Breadcrumb Icon und Headline rechts: Social Bookmarks Tabs (optional) Text zur Headline Plattformen über Reiter steuerbar Marginalspalte von oben nach unten: Berechtigungen, Region, Autor Screenshots Modul: Ähnliche Apps steuerbar über Pfeil Screen: Detailseite/ Aufbau 27

28 7.1 Seitentypen: Detailseite Screen: Detailseite 28

29 7.2 Seitentypen: Suchergebnisseite Headline mit Anzahl der Treffer rechts: Social Bookmarks Suchergebnis filtern nach Relevanz, Preis, Name Suchergebnisse App-Icon mit Erklärungstext und dazugehörigen Berechtigungen und Plattformen Pagination Such- und Filterfunktionen befinden sich immer links; nach Thema, Preis, Plattform, Berechtigung, Region Screen: Suchergebnisseite/ Aufbau 29

30 7.2 Seitentypen: Suchergebnisseite Screen: Suchergebnisseite 30

31 7.3 Seitentypen: Responsive Seiten Header Headline Google Button Breadcrumb Headline Filterbutton Text Big Slider Suchergebnisse Screenshots Neueste Apps Slider Schnellauswahl Filterfunktion über Dropdowns Berechtigungen Footer Details Screen: Startseite/Aufbau Region Autor Footer Screen: Suchergebniseite/ Aufbau Ähnliche Apps Screen: Detailseite/ Aufbau 31

32 2.4 Seitentypen: Responsive Seiten Screen: Startseite Screen: Suchergebnisseite Screen: Detailseite 32

33 Ansprechpartner compuccino GmbH Rungestraße D Berlin Tel: Fax: Mail: compuccino.com 33