Anhand eines eigenen App-Konzeptes im Bereich Event wurden in dem Kurs »Software Interfaces: App Prototypen Entwicklung« die unterschiedlichen Arten des Prototypings und deren Möglichkeiten ausgelotet. Vom Paper-Prototyping über Click-Dummies bis hin zum interaktiven, selbst programmierten Framer.js-Prototypen.

Kern des Kurses bildete das Aneignen von framer.js und CoffeeScript, um die gestalteten Screens der Event-App mit Basis- und Micro-Animationen in Framer Studio erfahrbar zu machen.

Ich entschied mich für eine App, die über das aktuelle Kinoprogramm informiert und hilft, den Kinobesuch zu planen.

Die Kino-App »35mm« bildet das gesamte aktuelle Filmangebot der Kinos ab – sowohl Blockbuster als auch Autorenfilme – und zeigt die Neuerscheinungen der kommenden Wochen auf. Außerdem erhält man sämtliche Informationen zu den Filmen, wie z.B. Plot, Schauspieler, Regie. Eine Eigenschaft, die mir bei vielen Apps der Art fehlt, ist die effiziente Suche nach speziellen Fassungen (OmU, OV, 3D, etc.) eines Films. Das versuchte ich in der Entwicklung zu berücksichtigen.

Zielgruppe und Personas

Ich erstellte mehrere unterschiedliche Nutzer_innen für die App, die der zuvor festgelegten Zielgruppe angehören – sogenannte Personas. Davon suchte ich mir zwei Persona aus, deren Szenarien ich als Grundlage für die Funktionsweise der App nutzte.

Zielgruppe: Kinogänger – von gelegentlich bis leidenschaftlich

Paper-Prototyping

Zunächst skizzierte ich erste Gedanken zum Aufbau der App. Dies hilft, die Inhalte der einzelnen Screens zu konkretisieren, Funktionalitäten aufzuzeigen und Klickabfolgen verständlich zu machen.

Wireframes

Basierend auf den Skizzen erstellte ich in Sketch Wireframes. Sie sind genauer als auf Papier gezeichnete Prototypen und ich erhielt ein besseres Gefühl für die Dimensionen des Screens.

Den ersten klickbaren Prototyp setzte ich mithilfe von Invision um. Er enthält die zuvor erstellten Wireframes, die zum Testen auf dem Smartphone ausreichen und bei inhaltlichen sowie funktionalen Änderungen schneller überarbeitet werden können.

Invision Click-Dummy: https://invis.io/UB57G92KC

Screendesign

Als die Funktionsweise und die Screenabfolgen feststanden, entwickelte ich den visuellen Stil der App.

Generell orientierte ich mich sehr stark am Material Design von Google.

Angelehnt an die Atmosphäre im Kino wählte ich neutrale dunkle Farben, die neben den Filmbildern etwas zurücktraten. Der kräftige Rot-Ton wird für Auszeichnungen wie z.B. Links und ausgewählte Tabs verwendet.

Framer-Prototyp

In Framer begann ich bereits nach den ersten Tutorials die App anzulegen. So konnte ich mich mit der Umgebung besser vertraut machen und austesten, wie ich die Screens in Sketch anlege, um in Framer Studio bestmöglich mit den Screens zu arbeiten. Nach den Iterationsschritten bei den Wireframes nutzte ich die gestalteten Screens, die deutlich mehr Details enthielten.

Framer-Prototyp zum Durchklicken: http://share.framerjs.com/jacktsjqrvrc/

Der Kurs gab einen breiten Überblick über die zu dem Zeitpunkt vorhandenen Tools zum Prototyping. Zudem wurde durch Referate und Präsentationen seitens der Studenten und die Vorlesungen von Pierre Grundwissen für die Konzeption, Gestaltung und Umsetzung einer App geliefert.

Die intensive Beschäftigung mit Framer Studio bot mir die Möglichkeit, meine Programmierkenntnisse zu erweitern und lieferte mir ein Tool, um meine Detailverliebtheit auch in Prototypen einfließen zu lassen.

Neben den vermittelten thematischen Inhalten gab Pierre auch oft Einblicke in seinen Arbeitsalltag und welchen Stellenwert Prototypen dort einnehmen. Herzlichen Dank dafür!