Crossmedia Grundlagen WS 2011/12

Lehrveranstaltung FH Trier Intermedia Design

5. Aufgabe: iPhone/Blackberry App mit Beispielscreens

Tennisarm by HEAD Mobile App for Blackberry (interaktive PDF)

Für die finale Umsetzung der mobilen Anwendung zum Thema “Wie werde ich Tennisprofi?” habe ich mich für das Blackberry Bold 9900 statt dem  iPhone entschieden, da ich selbst eines besitze und somit auch ein Eigeninteresse für eine solche Anwendung darauf verfolge. Zudem ist das Blackberry technisch zu allem in der Lage was auch das iPhone kann und es besitzt bereits von vornherein einen Bildschirm im Breitbildformat, muss also beim Betrachten von Videos nicht mehr zusätzlich gedreht werden.

Bevor ich mit dem Layout der Anwendung beginnen konnte, habe ich mich zunächst informiert, was es bei Blackberry-Apps zu beachten gibt, welche Größe die Schaltflächen haben müssen, ihre Anordnung weitere Richtlinien, denn die App darf nicht nur über Touch bedienbar sein, sondern muss auch mit dem Trackpad unter dem Bildschirm verwendbar sein.

Mit diesem Hintergrundwissen konnte ich mit der Umsetzung der Idee beginnen.

Wie bereits in dem Mockup muss die Anwendung zuerst mit dem Tennisschläger über Bluetooth oder Funk verbunden werden. Der aktuelle Status dieser Verbindung ist am Icon der Schaltfläche(Zweite von links) zu erkennen. Ist diese grün, so ist alles in Ordnung und es kann weiter fortgefahren werden, befindet sich jedoch ein kreisrundes rotes Symbol mit Ausrufezeichen darüber, so muss die Verbindung durch Betätigen der gleichen Schaltfläche und eventuell eines Knopfes am Tennisschläger, noch geschaffen werden.

Steht die Verbindung, so kann das Aufzeichnen der Schlägerbewegungen durch betätigen der mittleren Schaltfläche beginnen.

Während der Aufnahme werden alle Bewegungen des Schlägers erfasst und aufgezeichnet. Die erfassten Bewegungsdaten werden mit denen aus einem Katalog an solchen Aktionen verglichen und ausgewertet. Die Bewegungen aus dem Katalog entsprechen den Idealbewegungen, daher wird beim Vergleich die Abweichung davon bestimmt und bewertet.

Nach Beenden der Aufnahem gelangt man automatisch zum Statistikbereich der Anwendung. Man kann diesen Bereich auch erreichen in dem man die entsprechende Schaltfläche des Startbildschirms betätigt(Zweite von rechts).

Der Statistikbereich stellt die Auswertung der Bewegungen zu den Idealbewegungen grafisch dar. Man hat hierbei die Möglichkeit die Resultate mit denen eines anderen Tages direkt zu vergleichen, um seine Verbesserung oder Verschlechterung in den verschiedenen aufgelisteten Disziplinen selbst zu sehen.

Unter den Statistiken schlägt die App dem Anwender Lernvideos vor, um seine Defizite in diesem Sport direkt anzugehen.

Zu den Videos gelangt man nicht nur über das Statistikfenster sondern auch über die anwendungsinterne Videoauflistung. Eine Schaltfläche hierfür befindet sich auf dem Startbildschirm ganz rechts.

Die Videoauflistung beherbergt alle verfügbaren Videos, unterteilt in drei Schwierigkeitsstufen: Beginner, Fortgeschrittene und Profis.

Die Statistik empfiehlt dem Anwender stets nur Videos entsprechend seines Könnens, im Videobereich dagegen kann er alle Videos die für ihn von Interesse sind jederzeit aufrufen.

Die Videos werden in diesem Bereich mit einer Einleitung kurz erklärt. Über eine Schaltfläche gelangt man dann direkt zum Video oder über eine weitere Schaltfläche (i) zur Theorie in schriftlicher Form und sonstigen Informationen zum Thema.

Der Videobildschirm entspricht dem Standard des Blackberry-Systems. In dieser Anwendung dient er vor allem der schnellen und unkomplizierten Informationsaufnahme, da alles wissenswerte bildlich vorgeführt wird.

Die verwendete Tennisspieler-Vektorgrafik im Hintergrund des Startscreens stammt von hier, der Videoausschnitt im Videobereich stammt von hier und das Beispielbild für das zweite Video von hier.

Das Blackberry-Template sowie die Infografiken am oberen Bildschirmrand und das UI im Videoplayer sind Eigentum von Research In Motion Limited.

Das HEAD-Logo auf dem Startscreen ist Eigentum von HEAD.

Alle weiteren auf den Screens zu sehenden Grafiken sind selbst entworfen.

3. Aufgabe: Layouts gestalten

Aufbauend auf meinem zuvor selbst erstellten Raster, habe ich mich an drei unterschiedlichen Layouts der Landingpage versucht.

Es war für mich wichtig das aktuelle Programm der Marke, What’s your Game?, das auch zu unserem Thema “Wie werde ich Tennis-Profi?” passt, an oberster Stelle zu platzieren. Ungünstig hierfür waren die vier Spalten meines Rasters, wo die Kampagne sich allerdings um fünf Stile dreht.

Beim ersten Layout habe ich den neusten Stil noch rausgelassen, da die Kampagne bis vor Kurzem noch mit nur vier Stile hatte und der fünfte noch ganz neu ist. Es war auch schwer an Bildmaterial für eben diesen Stil heranzukommen.

Layout 01 (3-seitige PDF, inkl. Raster)

Dem Hauptprogramm der Marke folgen die für unser Thema “Wie werde ich Tennis-Profi?” die besonders wichtigen Bereiche Fitness und Gesundheit. Direkt neben den großen Überschriften der Bereiche finden sich weiterführende Links, die das entsprechende Thema, das den Besucher interessiert näher beleuchten.

Ebenfalls sehr wichtig zum Verbessern im Sport ist die Community, die ebenfalls in allen Layouts weit oben ihren Platz gefunden hat.

Layout 02 (3-seitige PDF, inkl. Raster)

Beim zweiten Layout habe ich die Darstellung der fünf Stile in die Vertikale gebracht, womit nun alle sauber und passend zum Gesamtbild abgebildet sind.

Erst am unteren Ende findet sich der bei HEAD heutzutage stark vertretene, für das Thema aber nebensächliche, Shop-Bereich. Unter Equipment sieht man die von HEAD vertretenen Produkte nebeneinander aufgereiht und über weiterführende Links erreichbar.

Direkt darunter finden sich die Technologie-Informationen, die  das jeweils darüber liegende Produkt näher beleuchten.

Layout 03 (3-seitige PDF, inkl. Raster)

Die in Layout 03 verwendeten Tennisspieler-Vektorgrafiken im Hintergrund stammen von hier.

Alle anderen Grafiken sind entweder selbst entworfen oder Eigentum von HEAD.

Aufgabe 3: Layout für Landingpage “Einstieg ins Golfen”

Bei den folgenden beiden Bildern handelt es sich um die finale Auswahl der Landingpage zum Thema “Einstieg ins Golfen” (mit und ohne Raster).

1 mit Raster

Die Überarbeitungen betreffen zum einen die Textplatzierung (Texte näher an Überschriften gesetzt, vertikale Schriften durch horizontale ersetzt) und zum anderen die Platzierung unterschiedlicher Bildelemente (wenige große, blockartige Bilder wurden gegen viele kleine, freier angeordnete Bilder ersetzt). Des weiteren habe ich eine Navigationsleiste zur besseren Übersicht eingefügt und kleine Änderungen bezüglich des Abstands einzelner Themenblöcke vorgenommen.

Der Vollständigkeit wegen auch noch die beiden anderen Entwürfe, die ich zur letzten Vorlesung vorbereitet hatte:

Landingpage-Layout 2

Landingpage Layout 3

Kursinfo

Aufgabe des Kurses Grundlagen Crossmedia & Integrierte Kommunikation ist es, sich mit dem Thema crossmedialer Markenführung auseinanderzusetzen und ein eigenes kleines Entwurfsprojekt zu durchlaufen. mehr erfahren

Archive

Meta