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

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.

Das Raster ist in der Mediathek unter folgendem Link zu finden:

Landingpage-Raster

Das kleinste Element ist 20 x 20 Pixel groß, sodass bei der Bilddarstellung  ein 4:3 Format in verschiedenen Größen möglich ist.

Die Abstände zwischen den Spalten und Zeilen sind 20 Pixel groß, die Spalten sind 140 Pixel breit.

Das gesamte Raster ist 1024 Pixel breit und 768 Pixel hoch.

Edit:

Das gleiche Raster mit der Schrift “Verdana” in der Größe 10 (damit sie besser in das Gitter passt).

Für die Gestaltung der Landingpage habe ich nach seitenweise Rechnungen und Überlegungen folgendes Raster als Grundlage gewählt:

Grid – Bild zum Vergrößern anklicken

Das kleinste Bildelement entspricht dem 4:3 Bildschirm-/Fotoformat mit 120×90 Pixeln. Die Schriftgröße liegt bei 12 Pixeln, der Zeilenabstand bei 15 Pixeln. Daher wurden 15 Pixel als Grundlage für das Raster verwendet. Alle Elemente sind ein Vielfaches der 15 Pixel, der Zeilen- sowie Spaltenabstand betragen genau 15 Pixel. Insgesamt kommt die Seite auf eine Breite von 795 Pixeln und ist damit auch auf der kleinsten Bildschirmauflösung mit einer Breite von 1024 Pixeln noch darstellbar und behält auch dort einen akzeptablen Randbereich.