Layout

Das Layout.

Gestalterische Macrostruktur

./images/layout-01.png

./images/layout-02.png

./images/layout-03.png

./images/layout-04.png

./images/layout-05.png

./images/layout-06.png

./images/layout-07.png

./images/layout-08.png

Was? Inhalt

Warum? Ziel

Für wen? Zielgruppe

Wo? Präsentationsmedium

Wie? stilistische Festlegungen

./images/layout-09.png — Elemente einer Seite

./images/layout-09b.png — Layout

./images/layout-09c.png

./images/layout-10.png — Satzspiegelkonstruktion durch Diagonalzug (Villardsche Figur)

./images/layout-11.png — Satzspiegel

./images/layout-12.png — Satzspiegel

./images/layout-14.png — Gestaltungsraster

./images/layout-15.png — 2-spaltiges Gestaltungsraster

./images/layout-16.png — 3-spaltiges Gestaltungsraster

./images/layout-17.png — 4-spaltiges Gestaltungsraster

./images/layout-19.png

./images/layout-18.png

Das Gestaltungsraster.

Gestalterische Mikrostruktur

./images/gestaltungsraster-01.png

./images/gestaltungsraster-02.png

./images/gestaltungsraster-03.png

./images/gestaltungsraster-04.png

./images/gestaltungsraster-05.png

./images/gestaltungsraster-06.png

./images/gestaltungsraster-07.png

Ein Gestaltungsraster hilft immer!

./images/sketch-01.png

./images/sketch-02.png

Rastersysteme zum Starten

Raster sollten gleichmäßig sein.

Abstand zwischen zwei Spalten muss stimmig sein.

Spaltenbreite muss auf Brotschrift abgestimmt sein.

Raster, Icons & Größe.

Lessons Learned

./images/raster-01.png — Raster: Grund- und Gestaltungsraster verwenden

./images/raster-02.png — Icons: benutze fertige Sets

./images/raster-03.png — Größe: Layout auf Device testen

Danke für's Mitmachen

https://christiannoss.de