IFD:WebApps/Ani Jordanowa

Kurzbeschreibung

„Ein E-Book, eingedeutscht E-Buch oder auch Digitalbuch versucht im weitesten Sinne, das Medium Buch mit seinen medientypischen Eigenarten in digitaler Form verfügbar und an die persönlichen Bedürfnisse anpassbar zu machen.“ (Wikipedia) Entgegen dem ausgedruckten und gebundenen Buch weisen eBooks so zahlreiche Vorteile auf, die man als moderner Mensch und PC-Nutzer gerne verwendet. Genau dies stellte schließlich den Hintergrund für die im Rahmen des Kurses umzusetzende WebApp dar. Grundidee dabei war eine App zu erstellen, die eine Art Sammelalbum für Rezepte repräsentiert und dem Nutzer somit die Möglichkeit eines personalisierten, durchweg dem eigenen Geschmack entsprechenden und dank Smartphone und Co. portablen Kochbuches bietet. Schnell fand sich damit auch der passende Name für das Projekt: NoteCook - die optimale Verbindung aus Notizbuch/Sammelalbum (Notebook) und dem Kochen (Cooking).

Umsetzung

Phase I

Ich begann die Umsetzung meiner App ausschließlich mit der grundlegenden Gestaltung der Seite, da ich die genaue Funktionalität mit meinem damaligen Wissensstand noch nicht eindeutig festlegen und so den damit verbundenen technischen Aufwand noch nicht abschätzen konnte. Im Hinblick auf das Design war mir dagegen relativ schnell klar, was ich realisieren wollte. Der Hauptgedanke bestand in der Analogie zum gewöhnlichen gebundenen Buch in der Verbindung mit einem etwas unordentlich wirkendem Hintergrund, um den Aspekt des Sammelalbums zu unterstreichen und einer Handschriftlichen Typografie für den Bezug zum herkömmlichen Kochbuch.

Den so entstandenen ersten Entwurf verwarf ich dennoch relativ schnell, da mir bewusst wurde, dass diese Gestaltung zu sehr in den Vordergrund rückte und den Informationsgehalt und die Funktionalität der Seite zu stark beeinflusste. Die einzelnen Komponenten waren zwar schon den Vorstellungen entsprechend, jedoch im Zusammenspiel noch nicht optimal. So entschloss ich mich, die besagte Analogie zwar keines Falls zu verwerfen, doch stark zu abstrahieren.

Screenshot

erster Entwurf der Seite

Phase II

Die zweite Phase beschäftigte sich ebenfalls mit dem gestalterischen Aspekt der App. Der erste Entwurf wurde überarbeitet und wie erwähnt stark abstrahiert. Ich entschloss mich für einen Schreibblock, um den Bezug zum Kochbuch beizubehalten. Den„unordentliche“ Hintergrund beschränkte ich nur auf eine Seite. Des Weiteren setzte ich einen Header bzw. Footer in Holzoptik. Dies soll zum einen die Analogie weiterführen - ein Buch, das auf dem Tisch liegt - zum anderen verbindet man mit Holz eine gewisse Behaglichkeit, die ich mir für meine Zwecke zu Nutze mache. Das Menü wurde zum farblichen Akzentpunkt der Seite und kann als Reihe von Klebezetteln verstanden werden. Die farbliche Gestaltung soll die Assoziation von frischem Obst und Gemüse erzeugen, um die Komponente des Kochens ins Design einfließen zu lassen. Im Rahmen des neuen Designs habe ich schließlich auch das Logo überarbeitet, da die kursive Eigenschaft nicht mehr zum restlichen Eindruck der Seite passte. Den handschriftliche Stil wollte ich dennoch beibehalten.

Die letztendliche Fassung umfasst neben den gestalterischen auch auf die Bedienbarkeit abgestimmte Besonderheiten.

• Auflösung
  • Die minimale Auflösung ist 768px : 1024px. Damit ist es vor allem für die horizontale Anwendung auf dem i-Pad und dem i-Phone optimal. Die maximale Auflösung ist bewusst auf 1280px beschränkt, da ansonsten das Design unproportional wird.
• Menü
  • Das Menü ist „fixed“ und somit immer verfügbar. Dies vermeidet unnötiges Scrollen auf Ausgabegeräten wie Smartphones und Co.

Screenshots

farbliche Gestaltung des Menüs

erster Entwurf des Logos

noteCook Logo

noteCook Design