Crossmedia Grundlagen WS 2011/12

Lehrveranstaltung FH Trier Intermedia Design

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 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.

iPad Photoshopdatei

Information Architects – iPad Stencil for Omnigraffle.

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.

Wireframes

Wireframes

Hier meine Mockups für die ProTouch App.

Die App soll in Situationen in denen man sich unsicher ist helfen Tipps zu geben.

Wenn man schnelle Hilfe braucht hilft auch ein lauter pfiff jemanden vertreiben.

Polizei in der Nähe und/oder öffentliche Einrichtungen werden angezeigt damit man dorthin gehen kann wenn man unsicher ist.

Layouts ProTouch

Layout1

Layout2

Layout3

Hier meine 3 Layouts für die Page ProTouch (“Kampfsport und Selbstverteidigung”)

Themenwahl ProTouch

Themen

Hier die Themen für die ProTouchWebseite zum Thema “Kampfsport und Selbstverteidigung”.

Abgesehen von den Produkten, stehen die Themen “Kampfsport” und “Selbstverteidigung” im Vordergrund.

Zu “kampfsport” sind aufgelistet: Welche Arten es gibt, Welche passt zu mir, die Geschichte des Kampfsports  sowie Kampfsportreisen.

Zu “Selbstverteidigung” stehen die Erläuterung und Hilfsmittel.

Ausserdem sind der Servicepoint, Links zu Clubs und Vereinen, welche sich in der Nähe befinden, Forum und rechtliche Grundlagen.

Raster

Hier mein Raster für die ProTouch-Seite mit dem Thema “Kampfsport und Selbstverteidigung”

Raster

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