Crossmedia Grundlagen WS 2013/14

Nachdem Sie ein kleines Zeichensystem entworfen haben, werden Sie sich nun mit einem Redesign einer Applikation auseinandersetzen. Meine Präsentation mit Beispielscreens die ich das letzte Mal gezeigt habe, liegt als PDF Dokument (präsentation_flatdesign.pdf) in unserer Dropbox.

Gestaltungsaufgabe
Wählen Sie “einen” spannenden Screen einer iPhone App und gestalten Sie diesen in Richtung eines Flatdesigns von iOS7 um. Nutzen Sie die User Interface Guidelines von iOS7, um die Applikation neu zu gestalten. Die PDF Versionen habe ich heruntergeladen und in unsere Dropbox gelegt.

Abgabe:
- eine Photoshopdatei mit ihrem pixelgenauen Entwurf ihrem Redesign eines Screens
- Ablegen der Datei in die Dropbox (www.dropbox.com) in Ihren Ordner

Zum Selbststudium gibt es einen Film aus der Crossmedia Tutorialreihe zum Thema “detaillierte Screens (Zeichen, Ebenenstile, Filter) in Photoshop erstellen“. Schauen Sie sich das Material an, damit Sie einen ersten Eindruck bekommen. Bei Pinterest finden Sie auch viel Input zum Thema Flatdesign.

Viel Erfolg!

NounProject.

Nachdem Sie ein Raster und ein Layout entworfen haben, werden Sie sich nun mit Zeichen (Icons) auseinandersetzen. Marken nutzen für Applikationen auf dem Smartphone, Tablets, etc. Zeichen, die für die Marke auch innerhalb von Appstores angeboten werden. Marken haben viele Apps, die einem visuellen Gesamtauftritt folgen sollen.

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.

Gestaltungsaufgabe
Entwickeln Sie drei neue Zeichen für einen Appstore für ein Smartphone, um einen visuellen Gesamtauftritt zu schaffen. Die Zeichen sollten nachher als System wahrgenommen werden, um später weitere Zeichen entwerfen zu können, die in die Reihe passen. Eine Beispieldatei von mir von dem Aufbau eines Zeichensystems inklusive eines Rasters finden Sie in Ihrer Dropbox.

Abgabe:
- eine Illustratordatei mit drei Zeichen Ihrer Marke für ein Smartphone
- Ablegen der Datei in die Dropbox (www.dropbox.com) in Ihren Ordner

Zum Selbststudium gibt es Informationen, Entwürfe von anderen Studierenden und Literaturtipps auf der Seite “Zeichen entwickeln” und einen 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 responsives (reaktionsfähiges) Raster für eine Webseite eines Unternehmens aufbauen.

Nehmen Sie das Unternehmen aus Ihrer ersten Aufgabe. Nehmen Sie die Inhalte (Bilder, Überschriften, Fließtexte, Icons, etc.) und bauen für folgende vier Bildschirmauflösungen jeweils ein Raster auf und fügen Sie die Inhalte dort ein:

1. Smartphone 320px Breite (bis zum 14.11.2013)
2. Tablet 768px Breite (bis zum 14.11.2013)
3. Netbook 1024px Breite (bis zum 28.11.2013)
4. Desktop 1600px Breite (bis zum 28.11.2013)

Beispiele wie es bei Ihnen aussehen sollte:
http://mediaqueri.es/

Folgendes müssen Sie für das Bildschirmraster in dem Indesign Dokument definieren: Das Seitenformat, 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

Viel Spass und Erfolg!

Abgabe:
- vier Indesigndateien mit einer eigenen neuen Ebene für das Raster mit Angaben
- Ablegen der Datei in die Dropbox (www.dropbox.com) in Ihren Ordner

Hilfe:
Crossmedia Tutorialreihe: Raster entwickeln in InDesign

Responsive Typography: The Basics | Information Architects.

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, Schriftgröße, Zeilenabstand, Stege, etc.) werden mit aufgeführt.

Abgabe:
- eine Photoshopdatei mit einer eigenen neuen Ebene für das Raster mit Angaben
- Ablegen der Datei in die Dropbox (www.dropbox.com) in Ihren Ordner (Einladung kommt per Email)

Zuordnung Marken zu Person:

01 Rusel Alhyalie – www.fsb.de
02 Vadim Bauer – www.vitra.com
03 Hannah Brodmann – www.thonet.de
04 Julien Burckhardt – www.apple.de
05 (Gaetano) James Dipasquale – www.berker.de
06 Nadja Herrmann www.braun.de
07 Vasilij Kotov – www.gaggenau.com/de/
08 Jessica (Ellen) Markhoff – www.busch-jaeger.de
09 Andy Mergens – www.dornbracht.com
10 Alexander Pütz – www.audi.de
11 Anna Scherf – www.hewi.com/content/de/
12 Pascal Schoenen – www.keuco.de/
13 Maximilian Schramer – www.metadesign.com/
14 Constance Sease – www.lamy.com/#markenwelt
15 Linus Stadtler – www.loewe.tv/de
16 Christiane Tänzer – www.cor.de/
17 Jan(-Henrik) Walter – www.duravit.de/
18 Irena Weiß – www.dyson.de/
19 Marie-Delphine Schickel – www.beetle.com/int/en/home
20 Annick Stoldt – www.nike.com
21 Jack Hermes www.microsoft.com/
22 Lynn Friedrich – www.skype.com/

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

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

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.