1. 1. Einführung
„Grundlagen der Gestaltung von Webseiten”
im Virtuellen Klassenraum am 13.06.2012
1. Einführung
2. Die Gestaltgesetze
3. Form und Farbe
4. Typografie
5. Bilder

2. 1. Einführung
2

3. 1. Einführung
3

4. 2. Die Gestaltgesetze Das Gesetz der Nähe
4
„Elemente mit geringen Abständen zueinander
werden als zusammengehörig wahrgenommen.”
Aus einem gleichmäßigen Punktraster werden senkrechte Linien,
weil die Punkte näher aneinander liegen.

5. 2. Die Gestaltgesetze Das Gesetz der Nähe
5
Bild, Text und Preis sind schwer zuzuordnen Hier ist die Zuordnung klar ersichtlich

6. 2. Die Gestaltgesetze Das Gesetz der Nähe
6
Moodle-Beispiel:
Selbst bei diesem einfachen
Textaufbau helfen die
verschiedenen Abstände, die
Zusammengehörigkeiten der
Elemente zu verdeutlichen.

7. 2. Die Gestaltgesetze Das Gesetz der Ähnlichkeit
7
„Einander ähnliche Elemente werden eher als zusammengehörig erlebt
als einander unähnliche.”
Die drei Gruppen schwarzer Linien sind
klar erkennbar, obwohl das Gesetz der
Nähe aufgehoben wurde.

8. 2. Die Gestaltgesetze Das Gesetz der Ähnlichkeit
8
Moodle-Beispiel:
Durch Farbauszeichnungen
können Bezüge über Gruppen
hinweg geschaffen werden.

9. 2. Die Gestaltgesetze Das Gesetz der Ähnlichkeit
9
Die Warenkorbbuttons gehören von ihrer Funktion
her zusammen, sind aber räumlich voneinander
getrennt. Dennoch werden sie als zusammenge-
hörend betrachtet, da sie gleich gestaltet sind.

10. 2. Die Gestaltgesetze Das Gesetz der Geschlossenheit
10
„Geschlossene Formen werden besser wahrgenommen als offene.”
Die geschlossene Form wird gesucht und Eindeutige Abgrenzung durch Rahmen.
ergänzt.

11. 2. Die Gestaltgesetze Das Gesetz der Geschlossenheit
11
2 Menüs mit geschlossenen Formen. Die dezente
Variante links, bei der die Formen erst ergänzt wer-
den müssen, ist der rechten vorzuziehen, da hier die
Abgrenzung so stark ist, das die Menüpunkte kaum
noch als zusammenghörend wirken.

12. 2. Die Gestaltgesetze Das Gesetz der Kontinuität
12
„Reize, die eine Fortsetzung vorangehender Reize zu sein scheinen,
werden als zusammengehörig angesehen.”
Die Ergänzung der weißen Linien gelingt mühelos. Der Betrahter erkennt sofort das Kreuz,
nicht die 2 abknickenden Linien

13. 2. Die Gestaltgesetze Das Gesetz der Kontinuität
13
verschieden starke Texteinzüge erleichtern das
Erkennen der Hierarchieebenen

14. 2. Die Gestaltgesetze Das Gesetz der Erfahrung
14
Gesetz der Erfahrung
Es genügen nur wenige Striche und wir erkennen das Zebra.
Auch ein halbierter Text ist durchaus lesbar.

15. 2. Die Gestaltgesetze Das Gesetz der Erfahrung
15
Psychotherapie
STANDORTE Coaching
Beratung
Naturheilpraxis „Heilsame Massage“
Breisgauer Str. 13
14129 Berlin-Zehlendorf
S-Bahn Haltestelle Schlachtensee
Potsdam – Innenstadt
Praxis Regine Müller
Am Andreaswall 4a
27283 Verden/Aller
0331 588 02 80
fon
0163 696 47 76
mobil
mail@psychotherapie-thomasklaus.de
www.psychotherapie-thomasklaus.de
Flyergestaltung: vom Bild ausgehend entsteht das Logo, daraus wiederum kann
die geschwungende Grafik z.B. großflächig im Hintergrund verwendet werden -
die Elemente bleiben wiedererkennbar

16. 2. Die Gestaltgesetze Das Gesetz der Erfahrung
16
Die „Print wirkt“-Kampagne des Media-Services der Pub-
likumszeitschriften würde ohne unsere visuelle Erfahrung
nicht funktionieren.

17. 2. Die Gestaltgesetze Das Gesetz der Erfahrung
17

18. 3. Formen Linie und Fläche
18
ausgeglichen
aufwärts gemütlich
dynamisch
negativ
instabil stabil passiv
Gleichgewicht abfallend es geht aufwärts

19. 3. Formen Linie und Fläche
19
Hier gilt es viele Informationen zu ordnen, da macht der inten- Rahmen sind auch hier unerlässlich zur Informations-
sive Einsatz von Rahmen Sinn. bündelung, dennoch ist die Seite unübersichtlich.

20. 3. Formen Linie und Fläche
20

21. 3. Formen Anordnung
21
der linke, von der Mitte entfernte die beiden Kreise sind ungefähr dunkle und warme Farbe hält die
Kreis hat mehr Gewicht gleich schwer, Größe und Farbe Kreise hier ebenfalls im Gleich-
gleichen sich aus gewicht
unstabil, schwebend ruhig, angenehm

22. 4. Farben Farbtheorie
22
Farbkreis von Johannes Itten die wichtigsten Farbräume
(1888 – 1967)

23. 4. Farben Farbe suchen
23
Ein intuitives Werkzeug, um passende Farben
für Ihr Projekt zu finden: kuler.adobe.com

24. 4. Farben Farbe wirkt
24
Trotz des riesigen Angebotes ein gutes Beispiel
für den Einsatz von Farbe zur Menükategorisierung

25. 4. Farben Farbe wirkt
25
Beispiele für sehr bunte Farbakzente, eine Farbgestaltung aus-
gehend vom Bild und die Verwendung von „besetzten“ Farben.

26. 5. Text Empfehlungen
26
• Vermeiden Sie Schriftgrößen unter 10 Punkt.
• Verwenden Sie serifenlose Schriften. Studien belegen die bessere Lesbar-
keit. Auch die optische Darstellung ist augrund der Monitor-Rastermatrix
besser. Arial, Verdana, Trebuchet, Tahoma sind für die Monitorverwendung
konzipiert.
• Gliedern Sie den Text. Geordnete und nummerierte Listen sowie Aus-
zeichnungen schaffen Übersicht. Heben Sie Schlüsselwörter farbig oder
fett hervor. Vermeiden Sie aber zu viele und zu lange Hervorhebungen.
• Die optimale Zeilenlänge einer Textspalte liegt in etwa zwischen 50 und 70
Zeichen.
• Vermeiden Sie Blocksatz. Die Browser beherrschen keine Silbentrennung.
Je nach Fensterbreite wird es zu mehr oder weniger unschönen Um-
brüchen kommen.

27. 6. Bildbearbeitung Formate
27
Das JPEG:
+ Ideal für Fotos, diese können sehr stark komprimiert werden.
+ Unterstützt 16,7 Mio. Farben.
– Je nach Kompression sehr starke Qualitätsverluste. Kein Arbeitsformat.
– Keine Transparenz.
Das GIF:
+ Ideal für Grafiken mit klaren
Konturen, diese können sehr
stark komprimiert werden.
+ Unterstützt farbbasierte Trans-
parenz.
+ verlustfreie Optimierung
+ kann animiert werden.
– Nur 256 Farben.
Das PNG: – Nicht für Fotografien geeignet.
+ Vielfältige Weiterentwicklung – Keine echte Transparenz.
des GIF.
+ Unterstützt 16,7 Mio. Farben.
+ Unterstützt echte Transparenz.
+ verlustfreie Optimierung.
– Keine Animationsmöglichkeit.

28. 6. Bildbearbeitung Bildgrösse
28