Crossmedia Grundlagen WS 2011/12

Lehrveranstaltung FH Trier Intermedia Design

Artikel der Kategorie 05 Aufgabe: iPhone App mit Beispielscreens

Aufgabe 5: “Hole in 1″ – mobile Applikation

Die iPhone-App “Hole in 1″ soll den Spieler unterstützend auf dem Golfplatz begleiten.

Der Startbildschirm soll mit einem wechselnden “Golfzitat” zum Benutzen der App motivieren. Dem Anwender steht es hier nun offen, ob er sein Profil sehen will, etwas in der Community posten will, oder mit dem Hauptteil der App – dem spielbezogenen Teil – beginnen möchte. In diesem fall kann eine Synchronisation mit dem Golfschläger hergestellt werden.

Bei der Platzwahl sollen dem Nutzer sämtliche Golfplätze in seiner Nähe aufgezeigt werden, er soll aber auch die Mögleichkeit haben einen eigenen Platz zu tracken, sowie zwischen Zähl- und Lochspiel unterscheiden können.

Während des Spiels kann sowohl manuell als auch automatisch mitgezählt werden. Durch die Buttons oben kann der Spieler jederzeit auf der Karte sehen, wo er sich befindet und kann die Synchro mit seinem Schläger an bzw. ausschalten.

Koordinaten- und situationsbezogene Tipps sollen dem Spieler als eine perfekt an das Spiel angepasste Hilfe aufgezeigt werden.

Die Auswertung des Spiels kann über Diagramme aus Piktogrammen (erklärt werden diese beim Fragezeichen oben rechts – die Piktogramme sind: normaler Schlag, Schlag aus dem Bunker heraus, Schlag vom Grün, Hole in 1)…

… oder die Piktogramme direkt mit zugehörigen Koordinaten auf einer Karte.

“Patagonia Umweltcamp”

Fertige Screens der App “Patagonia Umweltcamp”

Diese App richtet sich an alle Freunde der Natur und des Wandersports. Auf nützliche und zugleich spielerische Art und Weise macht sie einem die Natur ein Stück verständlicher und ermöglicht tiefe Einblicke in die Welt der Pflanzen und Tiere.

 

Startbildschirm:

Startbildschirm

 

“Tracker” Menü:
Von hier aus gelangt man zu verschiedenen Optionen wie einer Übersichtskarte der Wanderroute, einem Verlauf der letzten Routen, zu den Routenoptionen und zum Routenplaner.

Tracker Untermenü

 

“Tracker”:
Hier sieht man, dank der Kamerafunktion des Mobilephones den nächsten Routenabschnitt, den es zu bewältigen gilt. Hier wird die Umgebung Detailgetreu wiedergegeben und der Weg markiert. Informationen zu verschiedenen Pflanzen und Bäumen erhält man durch antippen der “Blätter”.

Tracker

 

Lexikon:
Das Lexikon weiß alles über die Natur! Möchte man Informationen zu Flora und Fauna auf seiner Route, einfach ein Foto des Objektes der Begierde machen und das Lexikon zeigt alle interessanten Informationen dazu auf.

Lexikon

Beispielscreens

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

Startseite
Link – Isolation
Link – Funktionsweise
Link – Wetter
Schneebeispiel

Landingpage ausgearbeitet

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.

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.

Aufgabe 4/5 – Appdesign – Spread your Style

Zusätzlich zu den bereits geposteten Designs habe ich eine weitere dunkle Designvariation der App gestaltet. Diese hatte ich in der Vorlesung leider nicht dabei gehabt, hier im Blog möchte ich das Layout einmal nachliefern:

Das original weiße Design (unten) bietet viel Spielraum für Variationen und auf einen bestimmten Kleidungsstil angepasste Designvariationen. Das dunkle Layout (oben) könnte eine dieser Designvariationen darstellen.

IphoneApp mit Screens

Appscreen1

AppscreenMenu

Appscreen2

Appscreen3

Appscreen4

Logodesign

Hier meine Screens und die Logodesigns für die ProTouch App zur Selbstverteidigung.

Ich habe die Ideen der Wireframes übernommen und kann dort angesehen werden.

App-Screens DC

DC-App-Screens

5. Aufgabe: iPhone App Beispielscreens bis zum 13./14.01.2012

Methode:
-
Zeichen entwickeln
- Bedienungsablauf als Film
- Zeichen, Wireframes, finale Beispielscreens des Entwurfs Flinkster Campus aus einem Hauptskurs.

Aufgabe: Sie haben Wireframes (Skizzen) von Ihrer Idee entworfen. Jetzt geht es darum die Detailgestaltung für diese Screens zu erarbeiten. Dei Detailgestaltung beinhaltet folgendes: Raster entwickeln für die Bildschirmgrösse, Schrift festlegen, Zeichen entwickeln falls notwendig, Bedienungsablauf zeigen. Am Schluss sollten 3-5 ausgearbeitete Screens vorliegen.

Die technischen Daten des aktuellen iPhone können Sie hier nachlesen.

So könnte es nachher aussehen:

00

08

05

Präsentation_FlinksterCampus_Seite_11

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