Design Guideline

← zurück zum Design Wiki

Verantwortlicher: Jennifer Egner

Im folgenden wird die Design-Guideline beschrieben in der dargestellt wird nach welchen Grundsätzden unser Design entstanden ist. Diese werden genauer erläutert und beschreiben somit, weshalb und wie das Design unserer Seite aussieht.

---

Zum Aufbau des Frameworks siehe Design Development Guideline.

Bei der Erstellung des Designs wird sich auf die Ansicht auf einem Smartphone bzw einem Gerät in Smartphonegröße konzentriert. Die Darstellung am PC in einem Browser wird hierbei vernachlässigt.

##Material Design Grundsätzlich haben wir uns dazu entschieden unser Desgin im Material Design zu gestalten. Material Design ist eine Design Richtlinie, welche von Google entworfen wurde und unteranderem für Google Chrome, Android oder auch Google Webseiten verwendet wird. Grundgedanke dieses Designs ist es eine gute Optik mit den Innovationen und Möglichkeiten der Technologie zu verbinden. Wichtig hierbei ist es leicht verständliche Symbole zuverwenden und auch die Gestaltung bezüglich des Aufbaus sollte einem „realen und physischen“ Aufbau entsprechen. Denn hierdurch ist dieser gut verständlich und intuitiv zu bedienen. Aus diesem Grund haben wir uns entschieden unser Design dieser Richtlinie nachzuempfinden.

Die Verwendung des Material Design wird auch besonders gut in der Gestaltung unseres Logos wiederzufinden. Bei der Erstellung dessen wurde sehr darauf geachtet die Form- und Schattengebung möglichst genau einem realen Material nachzuempfinden. Eine weitere und genauere Erläutertung zum Entwurf und Enstehung des Logos ist hier zu finden.

####Schriftzug

##Farben Bei der Auswahl der Farben haben wir auf schlichte Grundfarben im Bereich der Grautöne beschränkt. Diese sind zum Einen schlicht und vermitteln einen modernen Eindruck, welche somit sehr gut zu unserem gesamten Designbild passen. Des Weiteren herrscht zwischen den Farben ein sehr hoher Kontrast, dieser ermöglichkeit eine optimale Lesbarkeit und gute Bedienbarkeit der Anwendung, auch wenn eventuelle Einschränkungen der User in diesem Bereich vorhanden sind.

Ein weiterer Grund weshalb wir uns für diese schlichten Farben der Hintergründe und Schrift entschieden haben ist auch, dass diese sich sehr gut mit den verwendeten Bildern verknüpfen lassen und somit ein harmonisches Gesamtbild ergeben, ohne eventuelle Dissonanzen zwischen Farbtönen zu erzeugen. Folgende Farben wurden bei dem Design sowohl als Schriftfarbe als auch als Hintergrund- und Schattenfarbe verwendet:

Angabe des genauen Farbtons als hexadezimal Wert.

Ausnahme hierbei sind lediglich einzelne kleine Aktzente die es in der Anwendung gibt. Zum Einen wird in der Sidebar wird durch einen dezenten Blauton der jeweilige ausgewählten Skalenbereich der einzelnen Parameter mit den entsprechenden Werten hervorgehoben. Dies ermöglicht dem Anwender einen schnelleren Überblick zu bekommen welche Werte die jeweilige Suche bzw. Routengenerierung beeinflussen. Denn dies sind auch die Werte die vom Anwender selbst gesetzt und festgelegt werden können.

Zum Anderen sind in der aktuellen Routenansicht weitere Farb-Highlights gesetzt. Da hier als Hintergrund ein buntes Fotot verwendet wird, wenn auch bearbeitet (hierauf wird in einer anderen Stelle nochmals genauer eingegangen). So dienen die Farben zum hervorheben dieser Bereiche. Es werden zum Beispiel die zwei Ranking Werte bezüglich der Gesmatbewertung der Bar und des Kostenindexes dieser farblich dargestellt.

Sobald die Anzeige einer Bar durch draufklicken vergrößert wird, ist eine weitere wichtige Funktion rot markiert: oben links erscheint ein kleiner roter Kreis mit einem Minus. Mit diesem lässt sich die jeweilige Bar aus der geplanten Route herausnehmen und durch eine andere Bar ersetzen. In deieser Ansicht gibt es auch einen roten Button "melden". Hierüber kann der Anwender eine Meldung machen, falls die Anwendung fehlerhafte Daten enthält.

##Bild Für die Hintergründe der verschiedenen Ansichten, als auch für die einzelnen Bars haben wir Fotos verwendet. Diese haben immer ein Motiv, welches zu den Themen Bar und Happy Hour passt.

Ersteinmal ist bei der Bildbeschaffung und –auswahl der Bilder auf die jeweiligen Lizenzen der Bilder zu achten. Zum Einen ist es wichtig, dass die Bilder zur Weiterverwendung freigegeben sind, auch ohne auf den Ursprung des Bildes zu vermerken. Des Weiteren muss die jeweilige Lizenz ein bearbeiten und verändern des Fotos erlauben. Beispiel für eine solche Lizenz ist: CC0 Public Domain.

Denn die Bearbeitung der Fotos ist für unserer Design wichtig. Über die jeweiligen Hintergründe haben wir einen sogenannten Blur-Effekt drüber gelegt. Dieser weicht die vorhanden Konturen auf und lässt das Bild unschärfer wirken. Durch diesen Effekt erreichen wir einen besseren Kontrast zwischen Hintergrund Bild und der darauf liegenden Schrift. Somit wird ein leichteres und besseres lesen des Inhaltes ermöglicht. Des Weiteren erreichen wir durch diesen Effekt, dass der Fokus der jeweiligen Ansicht nicht auf dem Bild liegt. Es rutscht sprichwörtlich in den Hintergrund.

##Schrift Bei der Schriftart haben wir uns für die moderne und bei mobilen Anwendungen häufig verwendete Schriftart „Roboto“ enstschieden. Diese wird, abgesehen von unserem Logo Schriftzug, durchgehend verwendet. Als sogennante Fallback Angabe, falls „Roboto“ nicht verwendbar sein sollte, haben wir die Schriftart „sans-serif“ gewählt, welche sehr viel häufiger vorhanden ist um auch immer eine Anzeige der Schrift zu ermöglichen. Bei der Schriftfarbe haben wir uns abhängig vom jeweiligen Hintergrund auf die Farben Schwarz, Weiß und Grau beschränkt.

Schriftgröße und –gewichtung variieren je nach Textinhalt und Verwendungsort, wie in nachfolgender Liste aufgeführt:

• Größe Body: 62.5%
• Schriftgewichtung Body: 100
• Größe Topbar: 1.6rem
• Schriftgewichtung Topbar: 200
• Größe Sidebar: 1rem
• Schriftgewichtung Sidebar: 200

##Icon/Symbol Bei der Auswahl der Symbole war es uns sehr wichtig leicht verständlich und selbsterklärende Symbole zu verwenden. Dem Benutzer soll die jeweilige Funktion des Icons sofort ersichtlich sein. In der Darstellung der Symbole findet sich auch das von uns verwendete Material Design wieder. Folgende Symbole finden für die jeweils aufgelistete Funktion Anwendung:

Name/Funktion	Icon/Symbol
löschen
neu laden
ersetzen
Karte
Route
Menü
Einstellungen
Download
Favoriten

##Navigation Aufgrund unseres in Deutschland üblichen Leseflusses von oben nach unten und von links nach rechts, haben wir auch in dieser Logik die Navigationsbereiche unserer Anwendung angebracht. Um so eine leichte Navigation in der Anwendung zu ermöglichen. In jeder Ansicht befindet sich immer im oberen Teil die Menüleiste, die sogenannte Topbar (siehe Abbildung unten). Diese ermöglicht durch einfaches klicken auf den jeweiliugen Schriftzug ein einfaches und schnelles Wechseln zwischen den verschidenenen Seiten, wie der aktuellen Route, den Top 7 und den offline gespeicherten Routen. Auch kann man durch einfaches klicken auf das entsprechende Symbol die Seite neu laden oder auf die Kartenansicht wechseln.

Zu weiteren Optionseinstellungen gelangt man durch das am linken Rand befindliche Symbol, das sogenannte Hamburger-Icon (bei den Icons unter dem Namen: Menü zu finden). Durch das klicken auf dieses schiebt sich die sogenannte Siedebar in das Bild (siehe Abbildung unten). Wahlweise kann dies, bei einem Touchscreen, auch durch ein wischen von links nach rechts über den Bildschirm geschehen. Daraufhin verschiebt sich die Hauptansicht nach rechts und macht die Sicht auf die darunter liegende Ebene der Optionseintsellungen frei. Dies geschieht durch eine „Bewegung“ welche zuerst langsam dann schneller und zuletzt wieder langsamer abläuft. Hierdurch wird ein natürlicheres und realistischeres Bewegungsbild ermöglicht. Dieser Aufbau der übereinander liegenden Ebenen ist ein weiterer Aspekt des bereits oben erläuterten Material Design. Das übereinanderliegen der verschiedenen Ebenen wird durch einen entsprechenden Schatten verdeutlicht.

Wichtig war uns beim Aufbau der Navigation auch eine Trennung der allgemeinen Navigation zu den genaueren Options- bzw. Filtereinstellungen zu erreichen. Die thematische und auch geoprafische Trennung trägt zu einem übersichtlichen Aufbau der Anwednung, welche somit auch wie gewünscht einfach und schnell zu bedienen ist. Ist man in der Ansicht der aktuellen Route kann man sich weitere Details zu einer Bar durch einfaches klicken auf diese anzeigen lassen. Dadurch wird der Bereich dieser Bar größer und verschiebt den restlichen darunter befindlichen Teil der Ansicht weiter nach unten. Durch erneutes klicken verkleinert sich die Anzeige der Bar wieder wie zuvor.

Bei der erweiterten Detailansicht einer Bar ist es auch möglich diese aus der aktuell geplanten Route herauszunehmen und druch eine andere Bar zu ersetzten. Hierzu klickt man auf den im oberen linken Eck befindlichen roten Kreis mit dem Minus. Dadurch „verschwindet“ diese Bar aus der Ansicht und es erscheint ein Schriftzug „Bar austauschen“. Durch einen weiteren Klick auf diesen erscheinen weitrere Bars die sich an dieses Stelle der Routen setzen lassen. Man sieht einen verkleinerte Ansicht der Bar wie sie dann nacher auch in der Routenübersicht dargestellt wird. Am rechten Rand sieht man bereits einen Teil einer weiteren Bar. Hierdurch wird deutlich, dass sich links wietere Bars zur Auswahl befinden.

###Topbar

###Sidebar ###aktuelle Route

Bars tauschen

###Kartenansicht

###Startscreen