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.

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!

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

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.