Crossmedia Grundlagen WS 2011/12

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.

Das Raster der HEAD LandingPage

Füllung der geordnete Bereiche mit Inhalt:

In diesem Arbeitsschritt wurde aus dem erstellen Gestaltungsraster eine passende Aufteilung gewählt. Diese Aufteilung gliedert die Themen nach Wichtigkeit und Aktualität. Im folgenden Schritt wurde die Einteilung mit Inhalten gefüllt.

Inhalt der Landingpage:

- Fit durch den Winter

- Winter 2012 Collection

- Asics Winter Lauf 2012

- Finde die passende Bekleidung

- Online Store

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

Das erstellte Raster ist lediglich 4 Spalten breit, was zum einen stark einschränkt, zum anderen aber auch deutlich für Ordnung sorgt.

Das kleinste Element ist 215px breit und 100px hoch. Bei Bedarf können daraus auch zwei 105x100px Felder entstehen.

Die Abstände betragen in der Vertikalen 10px und in der Horizontalen 15px, was unterbrechungsfreien Text der Schriftart Helvetica in der Größe 12pt ermöglicht.

Drei Felder in der Höhe und zwei in der Breite erlauben das Darstellen von Grafiken im 4:3 Format.

Einteilung einer Webseite in geordnete Bereiche:

Die Animation zeigt das Raster sowie eine vorgeschlagene Größennutzung für verschiedenen Webseiten-Elemente. Die “Platzhalter” bzw. Flächen können jetzt pixelgenau mit Inhalt gefüllt werden.

Gestaltungsraster Demo

Das Gestaltungsraster:

Das Raster hat eine Gesamt-Pixelbreite von 960px in der Breite.

In der Höhe ist es variabel.

Analyse der Webseite: www.acics.com

Zuerst schauten wir uns die vorhandenen Inhalte genau an. Dabei viel uns auf, dass vieles da ist, aber leider zum Teil sehr versteckt. Die Idee war nun: Eine Landingpage zu erstellen, von der aus man einfach zu den gewünschten Produkten und Informationen findet. Um uns einen besseren Überblick zu verschaffen, schrieben wir uns alle relevanten Themen auf Karteikarten um diese in eine sinnvolle Reihenfolge zu bringen und variabel zu Ordnen.

Bildbeschreibung:

Auf den grünen Kärtchen sind unsere neuen Ideen. Auf den roten Kärtchen die bereits vorhandenen Ideen.

Unsere Gruppe hat sich für die Sportmarke Puma entschieden. Das Thema für die Landingpage ist “Einstieg ins Golfen” und bezieht sich damit auf das Angebot an Golfausrüstung von Puma (http://de.puma.com/golf).

Um eine ansprechende und gleichzeitig interessante Landingpage zu schaffen haben wir diese in drei Überrubriken (Basics, Ausrüstung und Locations) gegliedert, die folgende Punkte beinhalten:

Basics:

Grundlagen – Welche grundlegenden Techniken sind beim Golfen zu beachten? Wie ist die richtige Körperhaltung etc.?

Training – Wo nehme ich am besten Training? Wie sollte ein solches Training aussehen?

Ausrüstung

Schläger – Welcher Schläger eignen sich wofür?

Bälle – Was ist zu beachten bei der Wahl der Golfbälle?

Kleidung – Gibt es Kleidung, die den Sportler beim Golfen unterstützt?

Locations:

Clubs – Wo befindet sich ein Golfclub in meiner Nähe? Macht es Sinn einem Club beizutreten?

Plätze – Wo in meiner Nähe befinden sich Golfplätze?

Platzreife – Wissenswertes über Platzreife und allgemeine Turnierbedingungen

Zusätzlich sollen zu den jeweiligen Unterpunkten News- und Community-Features angeboten werden.

Für die Gestaltung einer Landingpage wurde die Sport- und Fashionmarke Bench (www.bench.co.uk/) ausgewählt. Als Thema für diese Landingpage haben wir uns auf den “Finde deinen Style” Stilfinder geeinigt. Dieser besteht aus Grundsätzlich zwei Komponenten:

a.: Der Startscreen, auf welchem der User verschiedene Outfits bewerten kann und nach einer bestimmten Menge an Bewertungen “seinen Stil” – den laut Ergebnissen passenden Kleidungsstil – findet. Er wird dann auf die eigentliche Landingpage zu seinem speziellen Stil weitergeleitet

b.: Die eigentliche Landingpage: Hier werden Informationen, Bilder, Videos, News, Community, Beratung und Events auf einer einzigen Page für jeden Stil zusammengefasst. Geplant sind u.a. folgende Seitenelemente

Interaktiver Teil/Community:

• User-Bilder: Die Möglichkeit eigene Bilder hochzuladen und die Bilder andere Leute dieses Fashion-Stils zu betrachten und zu kommentieren.
• User-Karte: Zeigt die Aktivitäten der User aus verschiedenen Regionen. So kann man zum Beispiel sehen in welchen Städten der eigene Stil besonders verbreitet ist.
• Eventkalender: Zeigt alle anstehenden Veranstaltungen rund um den Stil in der Nähe

Informeller Teil:

• Bilder (Slideshow): Was interessiert beim Fashion-Style am meisten? Die Fotos. Diese werden in einer Slideshow auf der Landingpage gezeigt.
• Informationen: Ein Überblick über den Stil sowie einige vertiefenden Informationen
• News: Neuigkeiten aus der Szene