Crossmedia Grundlagen WS 2011/12

Mein Raster:

1024px x 3000 px

Kästchen sind 12px x 15px

http://sport.crossmedia-integrierte-kommunikation.de/files/2011/11/Raster_2.pdf

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

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

Neues Raster

Ich habe Versucht das Raster dem von ROXYs Homepage anzupassen, doch leider konnte ich dort kein durchgängiges Raster erkennen.

Letzlich habe ich ein Raster basierend auf der Schriftart Arial in Schriftgröße 12 entworfen.
An allen Seitenrändern gibt es jeweils ein wenig Freiraum.
Die Spalten habe ich versucht an ein Bildformat 3:4 anzupassen.

Raster

Methode:Gestaltungsraster erstellen und Schriften einsetzen.

Aufgabe:
Im ersten Schritt haben Sie ein Thema für eine Landingpage einer Marke ausgewählt und die Inhalte auf der Webseite der ausgewählten Marke zusammengetragen. Neue Inhalte die es nicht auf der Webseite zu ihrem Thema gibt, haben Sie zusammengetragen.

Im zweiten Schritt haben Sie ein Gestaltungsraster entwickelt, in dem Sie Bilder und Texte platzieren können. Grundlage dafür war eine Fläche von 1024 px auf ca. 3000/4000 px.

Im dritten Schritt prüfen Sie das Gestaltungsraster auf ihre Praxistauglichkeit. Wählen Sie Bild und Textinhalte (von der Webseite oder auch von Ihnen selbst erstellte Inhalte) aus und entwickeln Sie drei verschiedene Layouts. Stellen Sie diese in der Gruppe vor und begründen Sie, warum Sie diese drei Layouts erstellt haben. Finden Sie Bewertungskriterien und setzen Sie diese in ihrer Begründung ein.

Raster für Pro-Tec

habe mich an den vorhandenen bildformaten (150×200) orientiert

Eindrücke und Informationen des Webfontdays in München.

PAGE Online – Das war der Webfontday.

2011.webfontday.de

Ich habe ein quadratisches Raster erstellt, da auf der Seite von Pro-Tec sowieso fast nur quadratische Bilder zu sehen sind. Die Quadrate haben eine Größe von 50×50 px, die Abstandshalter sind 10px breit. Für Fließtext entsteht so eine Schriftgröße von 10px mit 10px Zeilenabstand.