Farbe

Den E-Covers aus der Übung «Layout» sollte nun einen farblichen Anstrich verpasst werden. Farben können ein Design entscheidend beeinflussen. Sei es der Kontrast der verwendeten Farben oder aber auch die psychologische Bedeutung einer Farbe, je nach dem wann wir wo eine Farbe verwenden, wir die Wirkung eines Werks völlig unterschiedlich ausfallen.

In unserer Übung mit den E-Covers galt es nun die passenden farblichen Akzente zu setzten, so dass das Layout das literarische Werk optimal unterstützt.

Meine Vorschläge:

bookcover_gatsby_farbe-01

Das Auto als gestalterisches Element

Das Cocktail-Glas steht für die Parties

Bei allen drei Varianten habe ich versucht, sowohl dass die Farbe als auch die verwendeten Elemente einen Bezug zur Geschichte haben. Einmal ist es das grüne Licht, welches Gatsby in der Gesichte sieht. Bei der zweiten Variante habe ich ein Auto aus dieser Zeit illustriert, da ja ein Autounfall auch ein entscheidendes Ereignis in der Gesichte ist. Die letzte Variante repräsentiert mit dem Cocktail-Glas die Parties aus der Gesichte.

Raster

Gestaltungsraster sind sowohl bei Print- als auch bei Webmedien essentiell. Die Anordnung aller Elemente (Bild, Text, Video, Navigation, etc.) sollten nach einem bestimmten Gestaltungsprinzip aufgebaut werden. So können einerseits die Proportionen zwischen Elemente auf einer Seite bestimmt werden und andererseits wird so eine Einheitlichkeit über mehrere Seiten hinweg geschaffen.

Responsive Web Design Raster

Heute verlagern sich zunehmend alle Medien auf digitale Geräte. Diese Geräte haben alle unterschiedliche Eigenschaften, gerade was die Bildschirmgrösse und -auflösung betrifft. Damit man all die unterschiedlichen Bildschirmgrössen abdecken kann, empfiehlt sich die gestalterische und technische Ausführung des Mediums so umzusetzen, damit auf das jeweilige Endgerät reagiert werden kann. Diesen Vorgang nennt man Responsive Webdesign.

Die schwarzen Kacheln ordnen sich je nach Browserfenstergrösse unterschiedlich an
Die schwarzen Kacheln ordnen sich je nach Browserfenstergrösse unterschiedlich an

Raster im Gebrauch

Sehr viele Websites arbeiten mit klar definierten Rastern, damit ihr Content einheitlich daher kommt. Als Beispiel hier das Raster des Online-Auftritts der US-amerikanischen Zeitschrift «The Wall Street Journal»:

Desktop

Raster Desktop wsj.com
Raster Desktop wsj.com

Tablet

Raster Tablet wsj.com
Raster Tablet wsj.com

Mobile

Raster Mobile wsj.com
Raster Mobile wsj.com

Weissraum

Der Weissraum muss nicht zwingen weiss sein. Weissraum bezeichnet den Raum zwischen jeglichen Elementen. Dieser «Leerraum» kann richtig eingesetzt den Benutzer zu den entscheidenden Informationen führen, die Lesbarkeit steigern und so ein gutes Design unterstützen. Vollbepackte Layouts wirken äusserst selten ästhetisch, während geräumige Layouts mit grosszügigem Weissraum hingegen elegant und seriös wirken.

Gutes Beispiel von Weissraum:

weissraum_gut
Webseite von crd-select.de (Rote Flächen sind Weissraum)

Schlechtes Beispiel von Weissraum:

weissraum_schlecht
Webseite von roverp6cars.com (Rote Flächen sind Weissraum)

Layout

Die Anordnung der zur Verfügung stehenden Elemente auf einer Seite, um den bestmöglichen Informationsgehalt und auch Aufmerksamkeit zu erhalten.

Übung E-Cover gestalten

Bei dieser Übung mussten wir ein E-Cover für das Buch «Der Grosse Gatsby» gestalten. Vorgegeben war die Verwendung von einer Antiqua-Schrift, sowie das weglassen von Farbe, also rein schwarz-weiss zu arbeiten.

bookcover_gatsby-01

bookcover_gatsby-02

bookcover_gatsby-03

Gestaltgesetzt

Gesetz der Geschlossenheit

Wir nehmen geschlossene Flächen als Einheit wahr. Rahmen bilden eine
Begrenzung des Wahrnehmungsfeldes, dadurch wirken die eingegrenzten Elemente zusammengehörig.
Unser Wahrnehmungssystem neigt dazu, unvollständige Dinge zu
vervollständigen. So können wir bei Serienbilder (z.B. beim Animieren) dennoch einen vollständige Bewegung erkennen, obwohl wir die eigentliche Bewegungsabläufe nicht sehen können.

Unsere Wahrnehmung schliesst die einzelnen Elemente zu einer Figur
Unsere Wahrnehmung schliesst die einzelnen Elemente zu einer Figur
Serienbilder nehmen wir als Bewegungsablauf war
Serienbilder nehmen wir als Bewegungsablauf war