Crossmedia Grundlagen WS 2011/12

Lehrveranstaltung FH Trier Intermedia Design

Beispielscreens

Der Mock-up Entwurf wurde ausgearbeitet und dabei auch überarbeitet/perfektioniert.

Startseite
Link – Isolation
Link – Funktionsweise
Link – Wetter
Schneebeispiel

Landingpage ausgearbeitet

Wireframe App Roxy

Mock ups

Landingpage

Landingpage Gonso
Die Aufgabe wurde anfänglich fehl verstanden.
Das Konzept konzentrierte sich auf die Sportmarke Gonso und erweiterte das Sortiment um Sicherheitsausrüstungen.

Diese Idee wurde nach Zugewinnung eines weiteren Gruppenmitgliedes verworfen.
Das neue Konzept befasst sich mit der Marke ROXY und dem Thema Isolation.
Übersicht von Christina Reuter

Layouts Roxy

Die Layouts entsprechen auch dem ROXY Design, damit der Zusammenhang schnell klar wird.

Roxy layout1
Roxy layout2
Roxy layout3

Beispielscreens der App “Pro Planer”

Thema: “Wie werde ich Tennisprofi” mit HEAD

Die Anwendung “Pro Plan” wendet sich direkt an Personen die Tennisprofi werden wollen. Sie dient zur Übersicht und Erinnerung für alle Termine die mit dem Sport in Verbindung stehen. Außerdem bietet sie durch einen übersichtlichen Statistiken -Teil zusätzlichen Ansporn.

Screen 1: Start

Auf der Startseite werden in kürze anstehende Termine angezeigt, zusammen mit einer kurzen Beschreibung. Von hier aus kann man entweder durch drücken auf “Stats” zu den Statistiken gelangen oder durch drücken auf einen der Wochentage oder “Calendar” rechts unten im Bild zum ausführlichen Kalender gelangen.

Screen 2: Calendar

In dem Kalender sind nochmals alle Termine durch kleine Symbole gekennzeichnet. Durch drücken auf einen Monatstag kann man schnell einen neuen Termin mit einem der zwei Symbole eintragen. Jede Woche schlägt die Anwendung zusätzlich noch eine Aufgabe vor, die dem Nutzer hilft gesünder und fitter zu werden.

Screen 3: Statistics

In den Statistiken gibt der Benutzer an, ob er die im Kalender vermerkten Spiele gewonnen oder verloren hat. Die Angaben werden dann gespeichert und übersichtlich dargestellt um bei kommenden Spielen zu motivieren.

IPhone Wireframes zum Thema “Wie werde ich Tennisprofi” mit HEAD.

Wireframes zum “Profi Planer”

Die Applikation “Pro Planer” ist für die Menschen gedacht, die Tennisprofi werden wollen und dabei auf die Marke HEAD stoßen. Sie dient als Terminkalender, Motivator und Statistikensammler.

Dieser frühe Entwurf unterscheidet sich zwar stark von den daraus entstandenen Beispielscreens aus Aufgabe 05, die zuvor genannten drei Aufgaben erfüllt er jedoch nachwievor.

Landingpages zum Thema “Wie werde ich Tennisprofi” mit HEAD

Überarbeitetes Layout

Altes Layout 1

Altes Layout 2

Hier 2 alte und ein neues, überarbeitetes Layout für eine HEAD Landingpage zum Thema “Wie werde ich Tennisprofi”. Alle drei basieren auf dem Raster aus Aufgabe 2 und legen besonderen Wert auf Gesundheit, Fitness, die Technologie von HEAD und auf die Suche nach dem Schläger, der exakt zu dem jeweiligen Spielertypen passt.

06. Aufgabe: Plakat und Abgabe der fünf Aufgaben bis 1.3.2012

Aufgabe: Sie haben anhand einer Sportmarke ein Konzept für eine Landing page und eine mobile Applikation entworfen. Bitte alle 5 Aufgaben die erarbeitet worden sind digital abgeben und auf einem Plakat die beiden Entwürfe konzentriert vorstellen. In dem Text auf dem Plakat sollten sie den Entwurf klar und kurz beschreiben. Unterteilen Sie den Text in die Abschnitte Ziel, Konzept und Entwurf. Bildunterschriften bitte bei Bedarf bei den Bildern einsetzen. Abgabetermin ist der 1.3.2012. Die Vorlage des Plakates erhalten Sie per Email. Das Plakat bitte als PDF und in gedruckter Form abgeben.

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.

4. Aufgabe: iPhone App als Wireframes

Mockup

Stellt man sich vor, HEAD würde das Ziel verfolgen seine Webseitenbesucher zu Tennisprofis auszubilden, so ist in der modernen Zeit der Gedanke nicht fern, dieses Vorhaben mit einer Anwendung für das Mobiltelefon zu unterstützen.

Doch wie kann ein Programm jemandem effektiv etwas beibringen?

Ich habe mir gedacht, dass diese Anwendung in der Lage sein müsste das Verhalten des Spielers zu erfassen, auszuwerten und danach mit Lehrvideos Tipps zum besser werden geben.

Diese Anwendung könnte sich beim Start mit einem vorbereiteten Tennisschläger über Funk oder Bluetooth verbinden(bei Problemen auch über eine Schaltfläche auf dem Display).

Nach betätigen einer speziellen Schaltfläche auf dem Display(“record”) würde sie jede Bewegung des Schlägers aufzeichnen und einer entsprechenden Bewegung aus dem Tennissport zuweisen. Die Abweichung von der idealen Bewegung wertet sie dann aus und gibt sie in statistischer Form wieder. Aufbauend auf dieser Auswertung, weiß die Anwendung, wie der Spieler seine Bewegung optimieren kann und berät ihn dann mit den oben erwähnten Lehrvideos in seinem Training.

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