Crossmedia Grundlagen WS 2012/13

Lehrveranstaltung FH Trier Intermedia Design
Tom Hirt

Artikel der Kategorie 01 Organisation

3. und 4. Aufgabe: Zeichen analysieren und selber gestalten

 

Nachdem Sie ein Raster und zwei alternative Layouts entworfen haben, werden Sie sich nun mit Zeichen (Icons) auseinandersetzen. Internetdienste wie Youtube, Vimeo, etc. nutzen viele Zeichen, die international verstanden werden müssen. Zeichen werden in digitalen Medien eingesetzt, aber auch in z.B. Orientierungssystemen von Gebäuden. Smartphones und Tablets nutzen in ihrem Betriebssystem oder in ihren Apps auch viele Icons. Sie sollen lernen, die Zeichen nach ihrer gestalterischen Qualität zu bewerten und selbst drei Zeichen zu gestalten.

3. Analyseaufgabe bis 10./11.01.2013
Gehen Sie auf die Webseite, die Ihnen zugordnet wurde. Extrahieren Sie die drei Zeichen in eine Photoshopdatei. Analysieren Sie die Zeichen und beschreiben sie den Aufbau. Sind die Zeichen sich ähnlich und folgen sie einem System? Welche Linienstärke (Px), Farbe, Hintergrund, Fläche, etc. haben die Zeichen? Gibt es ein Pixelraster?

4. Gestaltungsaufgabe bis 24./25.01.2013
Jetzt entwickeln Sie drei neue Zeichen auf einem Pixelraster und versuchen, die Zeichen so weit wie irgendwie möglich zu vereinfachen. Es sollen nur die Farben Schwarz/Weiß/Grauwerte eingesetzt werden. Die Zeichen sollten nachher als System wahrgenommen werden, um später weitere Zeichen entwerfen zu können, die in die Reihe passen.

Abgabe:
- eine Photoshopdatei mit den bekannten drei Zeichen der Webseite oder des Internetdienstes
- eine Illustratordatei mit ihren neu entworfenen drei Zeichen

Zuordnung Dienste zu Person:

Gruppe A. Freitag
Thema: Videoplayer Zeichensystem
Zeichen: 1. Play/Pause, 2. Vor/Zurück, 3. Vollbild
1 Cornelia Broell – www.facebook.com
2 Mario Burbach – www.vimeo.de
3 Ekaterina Konstantinovna Denissova – www.youtube.com
4 Maxine Hammen – www.tape.tv
5 Matthias Heintz – www.flickr.com
6 Janine Heinz – www.twitter.com
7 Sabrina Huppertz – tv.audi.de
8 Ilja Ionov – www.zdf.de/ZDFmediathek
9 Jacek Kuclo – instagram.com

Gruppe B. Donnerstag
Thema: Socialmedia Zeichensystem
Zeichen: 1.Facebook, 2.Twitter, 3.Youtube
10 Laura-Isabell Dietrich – www.db.com/medien/en/content/socialmedia.htm
11 Ho Sam Lee – www.coca-colacompany.com
12 Yasmine Plein – www.mcdonalds.com
13 Joanna Salfellner – microsoft.com
14 Yasmin Schraven – www.nike.com
15 Benjamin Sonnenschein – http://www.metadesign.com/de/clients/audi
16 Nadine Steiner – www.philips.com
17 Vivi Vo-Le – www.volkswagen.com
18 Gordon Vogel – www.siemens.com
19 Julia Wolf – www.ikea.com

 

Zum Selbststudium gibt es Informationen, Entwürfe von anderen Studierenden und Literaturtipps auf der Seite “Zeichen entwickeln” und einen ersten Film aus der Crossmedia Tutorialreihe zum Thema “Zeichen entwerfen“. Schauen Sie sich das Material an, damit Sie einen ersten Eindruck bekommen, wie man ein Zeichen bewertet und erstellt.

Vier Aufgaben im Semester

Es wird insgesamt vier Aufgaben in diesem Semester für euch geben. Zwei Aufgaben werdet ihr bis zum 4.1.2013 abgegeben haben. Die zweite Aufgabe musste noch einmal überarbeitet werden. Dann gibt es noch zwei Aufgaben bis zum 24./25.1.2013. Die dritte Aufgabe werde ich euch in der ersten Januarwoche zur Verfügung stellen. Falls es Fragen gibt, gerne fragen.

Überarbeitung der 2. Aufgabe bis zum 4.1.2013

Nach dem letzten Korrekturtermin sollten bitte alle ihren Entwurf des Rasters nochmal überarbeiten und sich die Aufgabestellung nochmal genau durchlesen. Zu dem erstellten Beispiellayout sollt ihr noch ein zweites alternatives Layout der Bildelemente und Textelemente basierend auf dem gleichen Raster erstellen. Falls es Fragen gibt, bitte fragen! Ich werde noch einen Dropboxlink per Email schicken. Bitte eure Aufgaben in Zukunft dort vor dem nächsten Kurstermin ablegen. Die Dokumente der zwei Aufgaben bitte bis zum 4.1.2013 in die Dropbox legen.

2. Aufgabe: Gestaltungsraster entwerfen


 

Aufgabe: Sie werden nach der Einführung in die Makrotypographie (Gestaltung eines Rasters) nun selber ein eigenes Raster für eine Webseite eines Unternehmens entwerfen.

Das Unternehmen ist in der Reisebranche in der Umgebung von Trier tätig. Suchen sie sich ein Unternehmen aus (Reiseanbieter, Campingplatzanbieter, Hotel, Pension, etc.) und entwickeln Sie für das Unternehmen eine einzelne Internetseite, die das Unternehmen darstellt.

Folgendes müssen Sie für das Bildschirmraster in dem Indesign Dokument definieren: Das Seitenformat (1024 px mal ca. 6000 px), die Flächen die keine Inhalte haben (Kopfsteg, Bundsteg, Außensteg, Fußsteg) und das Raster- und Register-Umbruchsystem (Zeilenraster, Bildraster, Zeilenabstand, Durchschuß, Satzspalten, Satzbreite, Schriftsatzarten, Schriftgrössen, Spaltenabstand, Überschriften, etc.)

In dem Indesign Dokument sollten Sie folgende Ebenen anlegen und das nächste Mal präsentieren:

1. Ebene: Raster

2. Ebene: Genaue Zahlen, Daten, Fakten zu ihrem Raster mit grauen Beispielbildformaten und Blindtext

3. Ebene: Beispielinhalte mit Blindtext für eine Seite

Viel Spass und Erfolg!

Crossmedia Tutorialreihe “Raster entwickeln: InDesign”

Ein guter Einstieg für die Aufgabe in der Entwurfsphase bietet die neue Crossmedia Tutorialreihe “Raster entwickeln”, die als begleitendes Material zur Verfügung steht.

 

1. Aufgabe: Gestaltungsraster einer Marke vorstellen

Sie werden nach der Einführung in die Integrierte Kommunikation sich selber eine Marke (Unternehmen) vornehmen und erkunden, ob Sie im Internet ein Raster einsetzen. Stellen Sie das nächste Mal das Unternehmen vor, ob ein Raster eingesetzt wird und wo es nicht eingehalten wird. Wählen Sie eine Marke aus, die designbewusst ist.

Zum Selbststudium gibt es Informationen, Entwürfe von anderen Studierenden und Literaturtipps auf der Seite “Raster entwickeln” und einen ersten Film aus der Crossmedia Tutorialreihe  zum Thema “Raster erstellen“. Schauen Sie sich das Material an, damit Sie einen ersten Eindruck bekommen, was ein Gestaltungsraster ist.

Sie erstellen eine Photoshopdatei einer Webseite und legen das Gestaltungsraster in einer neuen Ebene über die eigentliche Webseite. Alle Angaben (Bildformate in Pixel, Schrift in Pixel, Zeilenabstand, Stege, etc.) werden mit aufgeführt.

Vorlage:
Ich habe das Programm Pagelayers gekauft und aus den Webseiten Phtoshopdateien mit Ebenen erstellt. Sie können diese nutzen, um ihre Ebene mit dem Gestaltungsraster darüber zu setzen. Dadurch müssen Sie die Phtoshopdatei mit den Inhalten der Webseite nicht selbst aufbauen. Sie liegen abholbereit in der Dropbox.

Abgabe:
- eine Photoshopdatei mit einer eigenen Ebene für das Raster mit Angaben

Zuordnung Marken zu Person:

Gruppe A. Freitag
1 Cornelia Broell – www.tripadvisor.de
2 Mario Burbach – www.lonelyplanet.de
3 Ekaterina Konstantinovna Denissova – www.lufthansa.de
4 Maxine Hammen – www.dav-summit-club.de
5 Matthias Heintz – www.thomascook.de
6 Janine Heinz – www.opodo.de
7 Sabrina Huppertz – www.forumandersreisen.de
8 Ilja Ionov – www.bahn.de
9 Jacek Kuclo – www.hrs.de

Gruppe B. Donnerstag
10 Laura-Isabell Dietrich  – www.tripodo.de
11 Ho Sam Lee – www.travel-to-nature.de
12 Yasmine Plein – www.weg.de
13 Joanna Salfellner – xctravels.com/en
14 Yasmin Schraven – www.ycoyacht.com
15 Benjamin Sonnenschein – www.hymer.com
16 Nadine Steiner – www.expedia.de
17 Vivi Vo-Le – www.studiosus.com
18 Gordon Vogel – globalbackpackers.com
19 Julia Wolf – www.buerstner.com

 

Kursinformation

Titel des Seminars: Crossmedia und integrierte Kommunikation
Veranstalter: FH Trier, Intermediales Design
Projektlink: Seminardokumentation im Web
Lehrveranstaltung: Grundlagen 1. Semester, Crossmedia und integrierte Kommunikation
Lehrgebiet: Medienkommunikation

Beschreibung:

Aufgabe des Kurses Grundlagen Crossmedia und integrierte Kommunikation ist es, sich mit dem Thema crossmedialer Markenführung auseinanderzusetzen und ein eigenes kleines Entwurfsprojekt zu durchlaufen.

Vorträge während der Veranstaltung:

1. Grundlagen integrierte Kommunikation und Corporate Design
2. Grundlagen Designprozess: von der Idee zum Entwurf
3. Grundlagen Gestaltung am Bildschirm
4. Grundlagen crossmediale Gestaltung

Ziele der Veranstaltung:

Um digitale Mediensysteme an der Schnittstelle von Kommunikation und Produkten entwerfen zu können, benötigt man als Mediengestalter Methodenwissen innerhalb eines Designprozesses.

Folgende Methoden werden exemplarisch innerhalb des Entwurfsweges vermittelt: Nutzeranforderungen definieren, Interaktionsdiagramm erstellen, Informationsarchitektur erstellen, Steuerelemente und Zeichen definieren, Typografie am Bildschirm festlegen, Gestaltungsraster erstellen, Usabilitytest durchführen, Wireframes erstellen, Prototyping (Papier, Photoshop, Flash) durchführen, Medienübegreifende Regeln erstellen, Styleguide erstellen, etc.