Screendesign

“Sceendesign” ist der Prozess, in dem das Layout der App erstellt wird. Das Design wurde in den Bildbearbeitungsprogrammen Adobe Photoshop und Adobe Illustrator ungesetzt.

Als Vorlage für das Screendesign des Homescreens haben wir uns für die Variante mit den zwei Kacheln nebeneinander entschieden. Die größten Beweggründe hierfür waren, das zwei Kacheln nebeneinander eine optimale Icon-größe für Fingergesten bot und außerdem bei der in Zukunft wachsenden Modulanzahl eine gute Balance für das Scrollen schafft.

Um beim Screnndesign den Effekt der „Corporate Identity“ zur Hochschule Offenburg zu erzielen, haben wir folgende Grundlegende Designelemente aus dem Styleguide der Hochschulwebseite zum Standard gesetzt:

Farben

Die Webseite der Hochschule Offenburg besitzt viele große weiße Flächen und verwendet nur bestimmte Grautöne. Zur Übersichtlichkeit hat jede Fakultät ihre eigene (offizielle) Farbe. Die Farbe mit dem größten Identifikationswert der Hochschule im Allgemeinen, ist ein spezielles Dunkelblau das sich aus folgenden Werten zusammensetzt (Abb.).

Diese Farben sind das Fundament für die Symbolisierung der Zusammengehörigkeit zwischen unserer App und der Hochschule.

../_images/colors.png
Verwendete Schriftarten Arial, Helvetica
Schriftfarbe für Text (CMYK 0 0 0 75)
Schriftfarbe für Überschriften (CMYK 100 70 0 40)

Grafische Umsetzung

Ein Iphone 5, welches unser Referenzgerät ist, besitzt eine Bildschirmauflösung von 640 x 1136 Pixeln, in diesem Fall haben die Kacheln eine Größe von 320 x 300 Pixeln. Alle Kacheln haben die identische Größe.

../_images/empty_home.png

Im Header-Bereich sind der Titeltext der anzeigt in welchem Bereich man sich befindet und der Panel-Button, beide sind den Grautönen für normalen Text.

Im fertigen Design befinden sich die Icons und die passenden Beschreibungen in den Kacheln. Sowohl die

Beschriftungen als auch die Trennlinie zwischen Header und Content färben sich im Hochschulblau. Die Icons sind in der dunkelsten Graustufe 100% des Styleguides gefärbt und heben sich gut von den Hintergrundfarben der Kacheln ab. Der Grauton der Kacheln liegt bei 50%.

../_images/homescreen.png

Um Inhalte anzuzeigen wie in den Modulen „Mensa“ und „Kontakte“ gibt es ein Layout wo sich welcher Text in einer Box anzeigt. Die Box befindet sich im Content- Bereich. Diese Box unterteilt sich zwei Teile. Der obere Teil gibt die Kerndetails für die untere Box, dieser grenzt sich den grauen Hintergrund ab. Im Falle eines Professors steht dort der Name bei der Mensa das Datum.

Überschriften in der unteren Box sind im Hochschulblau gefärbt, außerdem verdeutlichen die Bullets unter der Box wo man sich befindet (Abb.). Klickbare Links sind ebenfalls Blau gefärbt um im Fließtext besser wahrgenommen zu werden (Abb.).

../_images/contact1.png ../_images/contact2.png

Mit der Off Canvas-Technik (was ungefähr “außerhalb des Bildes” heißt) kann man auf mobilen Geräten Inhalte rechts und links vom Haupt-Inhalt der Seite platzieren. Diese werden nur sichtbar wenn auf den Stern-Button geklickt oder auf dem Bildschirm von links nach rechts geswiped wird.

Eines der bekanntesten Off Canvas-Beispiele in Apps ist Facebook. Hier kann je nach Bildschirmgröße eine linke und auf Smartphones noch eine rechte Sidebar- Navigation aufgerufen werden. Bei der Gestaltung haben wir uns an diesem Vorbild orientiert.

../_images/offcanvas.png

Deshalb ist der Hintergrund des Panels in der dunkelsten Graustufe. Die Schrift der Shortcuts ist Weiß um gut lesbar zu sein. Das Panel nimmt nur einen Teil des Bildschirms ein und nicht den ganzen, damit der Benutzer weis, dass er die eigentliche Seite noch nicht verlassen hat, sondern nur zusätzliche Inhalte dazu gekommen sind.

Listen haben die Eigenschaft dass jedes Listenelement die passende Fakultätsfarbe trägt. Dadurch kann in langen Listen schneller ein Überblick verschafft werden

Splashscreen

Der Splashscreen ist ein grafischer Platzhalter, der während dem Laden bzw. Starten der App angezeigt wird, solange der Ladevorgang noch nicht fertig ist.

../_images/splash.png

Dadurch erhält der Benutzer sofort nach dem Starten der App eine erste Reaktion des Programms und muss sich nicht fragen, ob das Programm überhaupt startet.

Unser Splashscreen wurde so designt das auf Anhieb ein Bezug zur Hochschule entsteht. Das offizielle Hochschul-Logo ist groß in der Mitte platziert somit wird es von jedem Benutzer beim Start der App wahrgenommen. Außerdem ein Abbild der Hochschule zu sehen, die Rechte des Bildes liegen bei der Hochschule Offenburg, es befindet sich auch auf der Webseite www.hs-offenburg.de.

Icon-Set

Das von uns verwendete Icon-Set trägt den Namen „Mimiglyphs“. Es handelt sich dabei um ein Set das frei für jeglichen privaten und auch kommerziellen Zweck eingesetzt werden darf. Der Besitzer heißt Jeremy Sallee und besitzt eine Webseite namens http://salleedesign.com, auf der dieses Set kostenlos heruntergeladen werden darf. Gestalterisch passen die Icons gut zum Flat-Design Gedanken der App, da auf Verläuft, Glanz, Schatten usw. verzichtet wird. Da es sich um Vektorgrafiken handelt lassen sich diese auch problemlos skalieren ohne Qualitätsverluste verzeichnen zu müssen. Folgende Icons wurden verwendet:

../_images/icons1.jpg ../_images/icons2.jpg

Inhalt