Styleguide Version 1.0, 24.10.2012

2

1. Einleitung. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3

2. Logo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4

1. Aufbau/Größen.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .5

2. Schutzraum.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .6

3. Schwarzweiß-und Negativdarstellung.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .7

4. Verwendung auf der Webseite. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .8

5. Falsche Anwendung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .9

3. Farben. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .10

4. Typografie. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11

1. Desktop.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .12-14

2. Mobile. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .15 -16

5. Grundaufbau/Raster. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .17

5.1 Grundaufbau Desktop.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .18

5.2 Grundaufbau Mobile. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .19

6. Elemente. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .20

6.1 Hintergründe.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .20

6.2 Buttons. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .21- 23

6.3 Dropdowns.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .24

6.4 Icons. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .25

7. Seitentypen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .26

1. Startseite. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .26

2. Detailseite. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .27-28

3. Suchergebnisseite. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .29-30

4. Übersicht responsive Seiten.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .31-32

Inhaltsübersicht

3

1. Einleitung

Das Corporate Design wird als Gestaltungskonzept einer Institution oder eines Unternehmensbezeichnet. Mit diesem CD soll ein einheitliches Erscheinungsbild erzielt werden, um einen hohenWiedererkennungswert 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. “

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ßenabgerundeten Quadraten besteht und einer Wortmarke, bestehend aus dem Namen des Angebots.Die abgerundeten Quadrate symbolisieren die 16 Bundesländer Deutschlands, die drei farbigenQuadrate ( 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.

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

6

2.2 Logo: Schutzraum

Für die optimale Wirkung

Dem Logo muss immer ein Schutzraum von mindestens einer Quadratgröße gegeben werdenin dem es nicht mit Schriften, Bildern und anderen Elementen in Berührung kommt.

Optimale Schutzzone

11

Minimale Schutzzone

1

1 + 1

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.

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

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.

10

3. Farben

# 006293 R 0 G 98 B 147

# 000000 R 0 G 0 B 0

# 888888 R 136 G 136 B 136

# acacacR 172 G 172 B 172

# dcdcdcR 220 G 220 B 220

# dddddd - # e8e8e8R 221 G 221 B 221 - R 232 G 232 B 232

# f3f3f3 - # ffffffR 243 G 243 B 243 - R 255 G 255 B 255

Navigation, Erweiterte Suche, Überschriften der Apps, Lupen-Icon, Subnavigation, Breadcrumb, allgemeine Links

Headlines, Fließtext, Dropdown-Texte, Hover Navigation, Text in den Sidebarelementen

Navigation im Footer, Breadcrumb

Navigationspfeile, Suchfeldtext

Hintergrund der Filter „Relevanz“, „Preis“, „Name“ auf der Suchergebnisseite, Trenner beim Footer

Hintergrund

Hintergrund Contentboxen, Anwendung mit 70% Deckkraft

3.1 Farbverläufe

Hauptfarben

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

A B C D E F G H I J K L M N O P Q R S T U V W X Y ZTitilliumText22L, Regular ( Verwendung im Logo, Fließtext, Filter )

a b c d e f g h i j k l m n o p q r s t u v w x y zTitilliumText22L, Regular

a b c d e f g h i j k l m n o p q r s t u v w x y zTitilliumText22L, XBold

a b c d e f g h i j k l m n o p q r s t u v w x y zTitilliumText22L, XBold ( Verwendung im Logo )

a b c d e f g h i j k l m n o p q r s t u v w x y zTitilliumText22L, Medium

a b c d e f g h i j k l m n o p q r s t u v w x y zTitilliumText22L, Medium ( Verwendung in der Navigation, Headlines, Footertext, Breadcrumb, Filter )

12

4.1 Typografie: Desktop

Screen: Startseite

Screen: Detailseite

Medium, 16 Px, # 006293

Headline: Medium, 35 PxFließtext: Regular, 20 Px# 000000

Medium, 20 Px, # 000000

Medium, 16 Px, # 006293

Medium, 13 Px, # 888888

Medium, 13 Px, # 888888

Medium, 30 Px, # 000000

Medium, 16 Px, # 000000Android: # 9b9b9b,iOS: # 9b9b9b, Windows: # 9b9b9b ( 50% Deckkraft )

Regular, 16 Px, # 000000

Medium, 20 Px, # 000000

Regular, 14 Px, 23 ZA# 000000

Regular, 14 Px, 23 ZA# 000000

13

4.1 Typografie: Desktop

Regular, 15 Px,# 000000

Medium, 15 Px, # 000000

Regular, 13 Px, 20 ZA# 000000

Screen: Overlay erweiterte Suche

Screen: Overlay Berechtigungen

14

4.1 Typografie: Desktop

Regular, 20 Px, # 888888

Medium, 20 Px, # 000000

Regular, 15 Px, # 000000

Regular, 14 Px, # 4b4b4baktiv: Bold, 14 Px, #000000

Screen: Suchergebnisseite

15

4.2 Typografie: Mobile

Regular, 13 Px, # 006293# 888888

Regular, 15 Px, 24 ZA, # 006293

Medium, 20 Px, # 000000

Regular, 15 Px,# 000000

Medium, 16 Px,# 006293

Medium, 20 Px,# 006293

Medium, 13 Px,# 888888

Medium, 16 Px,# 006293

Medium, 20 Px, # 000000

Regular, 16 Px, # 888888

Regular, 15 Px, 24 ZA, # 888888

Medium, 26 Px, # 000000

Screen: Detailseite

Screen: Suchergenisseite

Screen: Startseite

16

4.2 Typografie: Mobile

Medium, 20 Px,# 000000

Regular, 15 Px,# 000000Medium, 20 Px,

# 000000

Screen: Suchergebnisseite;Filterfunktionen

Screen: Suchergebnisseite;Filterfunktionen ausgeklappt

17

5. Grundaufbau / RasterDas 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.

Screen: Detailseite ( Desktop )

Bootstrap - Raster

* http://twitter.github.com/bootstrap/

18

5.1 Grundaufbau : DesktopDas 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 PxBreadcrumb inbegriffen

Abstand zur Headline und Content: 70 Px

Abstand zwischenSidebarelementen: 30 Px

Breite der Sidebarelemente:271 Px

Breite der Contentbox: 870 Px

Abstand zwischen denModulen: 30 Px

Gesamtbreite: 1170 Px

Abstand zwischenContent und Footer : 55 Px

1

2

3

5

6

7

8

4

9

10

Screen: Detailseite ( Desktop )

19

5.2 Grundaufbau : MobileDas unten stehende Wireframe, am Beispiel der Detailseite, verdeutlicht die Aufteilung der Module bei der mobilen Variante. Die Zahlen zeigen, welches Element wie umgebrochen ist.

Screen: Detailseite ( Mobile)

1

2

3

4

5

6

7

8

10

9

Abstand: 20 PxBreadcrumb inbegriffen

Gesamtbreite: 320 Px

Contentbreite: 286 Px

Abstand: 20 Pxzwischen Modulen

Abstand: 30 Px

Abstand: 30 Px

20

6.1 Elemente: Hintergründe

Hintergründe

Hintergrund Header:

Verlaufsüberlagerung: # f5f5f5 - # ffffffSchlagschatten: # dbdbdb, normal, 100% Deckkraft, 1 Px Abstand, 20% Überfüllen, 6 Px Größe, 90 °

Hintergrundmuster

Über dem grauen Hintergrund liegt ein leichttransparentes, vektorisiertes Muster

Hintergrund Contentboxen

Verlaufsüberlagerung: # f3f3f1 - # ffffffSchlagschatten: # 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ß.

21

6.2 Elemente: Buttons

Buttons

Verlaufsüberlagerung: # 4681a7 - # 5aa7da, 90°Kontur: # 006293, normal, 100% Deckkraft, 1 Px AußenSchatten nach innen: # 91cffa, 100% Deckkraft,2 Px Distanz, 100% Unterfüllen, 0 Px GrößeTypo: Titillium22L Medium, 16 Px, #ffffff

*Dieser Buttonstil findet auf den DesktopseitenVerwendung, lediglich in der Länge kann er variieren( je nach Spaltenlänge/ Textlänge )

HoverFarbüberlagerung: #006293, 100% DeckkraftKontur: #006293Schatten nach Innen: # 91cffa, 100% Deckkraft,2 Px Distanz, 100% Unterfüllen, 0 Px Größe

Sliderpfeile

Pfeil

Farbe: # 5aa6d7Schlagschatten: # ffffff,100% Deckkraft, 1 Px Abstand, 100% Überfüllen, 0 Px Größe, -90°

Kreis:

Verlaufsüberlagerung: # ebebeb - # ffffff, 100% DeckkraftSchlagschatten: # 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

Höhe: 40 Px Typo sitzt mittig vom Button

22

6.2 Elemente: Buttons

Filterbuttons „Übernehmen“ und „Abbrechen“

Übernehmen Button:

Effekte wie beim blauen Button ( siehe oben)Typo: Titillium22L, 20 Px, Medium, #ffffff

Abbrechen Button:

Verlaufsüberlagerung: # 909090 - # cdcdcdKontur: # 979797, 1 Px Größe( restliche Effekte wie anderer Button )

* Finden Verwendung in der mobilen Suchergebnisseite, nach Drücken des Filterbuttons. Der Nutzer hat dieMö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% DeckkraftKontur: #979797, 1Px GrößeSchatten nach Innen: # 91cffa, 100% Deckkraft,2 Px Distanz, 100% Unterfüllen, 0 Px Größe

Höhe: 37 Px Typo sitzt 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% DeckkraftKontur: #006293Schatten nach Innen: # 91cffa, 100% Deckkraft,2 Px Distanz, 100% Unterfüllen, 0 Px Größe

Höhe: 37 Px Typo und Icon sitzten mittig vom Button

23

6.2 Elemente: Buttons

Navigations-Icons

abgerundetes Rechteck:

Verlaufsüberlagerung: # e6e6e6 - # f5f5f5Schatten nach Innen: # ffffff, normal, 100% Deckkraft, 90°,2 Px Abstand, 100% Unterfüllen, 0 Px GrößeKontur: # d0d0d0,normal, 1 Px Außen, 100% Deckkraft

* Ersetzen in der mobilen Variante die Navigation unddie Suche

Google Play Store Button

Verlaufsüberlagerung: # 4681a7 - # 5aa7da, 90°Kontur: # 006293, normal, 100% Deckkraft, 1 Px AußenSchatten nach Innen: # 91cffa, 100% Deckkraft,2 Px Distanz, 100% Unterfüllen, 0 Px GrößeTypo: Titillium22L Medium, 16 Px, #ffffffTrennstrich hell: # 91cffaTrennstrich dunkel: # 006293

* Dieser Button findet sich auf der Detailseite ( Desktop und Mobile )

Hover

Farbüberlagerung: #006293, 100% DeckkraftKontur: #006293Schatten nach Innen: # 91cffa, 100% Deckkraft,2 Px Distanz, 100% Unterfüllen, 0 Px GrößeTrennstriche: im Farbton gleichgeblieben

Menü Suche

Höhe: 40 Px Typo sitzt mittig imrechten Teil vom Button

24

6.3 Elemente: Dropdowns

Schnellauswahl- Dropdown/ Erweiterte Suche

Farbe: # ffffffKontur: # 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

Farbe: # ffffffKontur: # cedade ,normal, 1 Px Außen, 100% Deckkraft

* Die Subnavigation von Themen, Höhe ist abhängig von der Menge des Inhalts

Type Ahead- Dropdown

Farbe: # ffffffKontur: # cedade ,normal, 1 Px Außen, 100% Deckkraft

* Das Dropdown der Suche, Höhe ist abhängig von der Menge der Ergebnisse

Filter- Dropdown ( Suchergebnisseite )

Verlaufsüberlagerung: # f3f3f3 - # ffffff

* Das Dropdown der Filterfunktion der Suchergebnisseite,Höhe ist abhängig von der Menge der Filterfunktionen

Höhe: 31 Px

16 Px, regular, #000000

14 Px, regular, #006293

14 Px, regular, #006293 12 Px, regular, #9f9f9f

25

6.4 Elemente: Icons

26

7. Seitentypen: Startseite

Header

Footer

Big Sliderüber Pfeile steuerbar

Modul: SchnellauswahlAuswahl über Dropdowns

Modul: Neueste Appsüber Pfeile steuerbar

Screen: Startseite/ Aufbau

Screen: Startseite

27

7.1 Seitentypen: Detailseite

Breadcrumb

Icon und Headlinerechts: Social Bookmarks

Tabs (optional)

Marginalspaltevon oben nach unten:Berechtigungen, Region, Autor

Text zur HeadlinePlattformen über Reiter steuerbar

Screenshots

Modul: Ähnliche Appssteuerbar über Pfeil

Screen: Detailseite/ Aufbau

28

7.1 Seitentypen: Detailseite

Screen: Detailseite

29

7.2 Seitentypen: Suchergebnisseite

Headline mit Anzahl der Trefferrechts: Social Bookmarks

SuchergebnisseApp-Icon mit Erklärungstext und dazugehörigenBerechtigungen und Plattformen

Pagination

Such- und Filterfunktionenbefinden sich immer links;nach Thema, Preis, Plattform, Berechtigung , Region

Suchergebnis filternnach Relevanz, Preis, Name

Screen: Suchergebnisseite/ Aufbau

30

7.2 Seitentypen: Suchergebnisseite

Screen: Suchergebnisseite

31

7.3 Seitentypen: Responsive Seiten

Header

Breadcrumb

Big Slider

Footer

Neueste AppsSlider

SchnellauswahlFilterfunktion überDropdowns

Headline

Filterbutton

Suchergebnisse

Footer

Text

Screenshots

Berechtigungen

Details

Region

Autor

Ähnliche Apps

Google Button

Headline

Screen: Detailseite/ Aufbau

Screen: Suchergebniseite/ Aufbau

Screen: Startseite/Aufbau

32

2.4 Seitentypen: Responsive Seiten

Screen: Detailseite

Screen: Suchergebnisseite

Screen: Startseite

33

Ansprechpartner

compuccino GmbH

Rungestraße 22-24D-10179 Berlin

Tel: +49 30 247 24 000Fax: +49 30 247 24 002Mail: office@compuccino.com

compuccino.com