Embed Size (px)
DESCRIPTION
Citation preview
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
1. Einführung2
1. Einführung
1. Einführung3
42. Die Gestaltgesetze Das Gesetz der Nähe
„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.
52. Die Gestaltgesetze Das Gesetz der Nähe
Bild, Text und Preis sind schwer zuzuordnen Hier ist die Zuordnung klar ersichtlich
62. Die Gestaltgesetze Das Gesetz der Nähe
Moodle-Beispiel:
Selbst bei diesem einfachen Textaufbau helfen die verschiedenen Abstände, die Zusammengehörigkeiten der Elemente zu verdeutlichen.
72. Die Gestaltgesetze Das Gesetz der Ähnlichkeit
„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.
82. Die Gestaltgesetze Das Gesetz der Ähnlichkeit
Moodle-Beispiel:
Durch Farbauszeichnungen können Bezüge über Gruppen hinweg geschaffen werden.
92. Die Gestaltgesetze Das Gesetz der Ähnlichkeit
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.
102. Die Gestaltgesetze Das Gesetz der Geschlossenheit
„Geschlossene Formen werden besser wahrgenommen als offene.”
Die geschlossene Form wird gesucht und ergänzt.
Eindeutige Abgrenzung durch Rahmen.
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.
2. Die Gestaltgesetze Das Gesetz der Geschlossenheit
122. Die Gestaltgesetze Das Gesetz der Kontinuität
„Reize, die eine Fortsetzung vorangehender Reize zu sein scheinen, werden als zusammengehörig angesehen.”
Der Betrahter erkennt sofort das Kreuz, nicht die 2 abknickenden Linien
Die Ergänzung der weißen Linien gelingt mühelos.
132. Die Gestaltgesetze Das Gesetz der Kontinuität
verschieden starke Texteinzüge erleichtern das Erkennen der Hierarchieebenen
142. Die Gestaltgesetze Das Gesetz der Erfahrung
Gesetz der Erfahrung
Es genügen nur wenige Striche und wir erkennen das Zebra. Auch ein halbierter Text ist durchaus lesbar.
152. Die Gestaltgesetze Das Gesetz der Erfahrung
fon 0331 588 02 80
mobil 0163 696 47 76
www.psychotherapie-thomasklaus.de
STANDORTE
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
Psychotherapie
Coaching
Beratung
0331 588 02 80
mobil 0163 696 47 76
www.psychotherapie-thomasklaus.de
Psychotherapie
Coaching
Beratung
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
162. Die Gestaltgesetze Das Gesetz der Erfahrung
Die „Print wirkt“-Kampagne des Media-Services der Pub-likumszeitschriften würde ohne unsere visuelle Erfahrung nicht funktionieren.
172. Die Gestaltgesetze Das Gesetz der Erfahrung
183. Formen Linie und Fläche
ausgeglichen
gemütlichdynamisch
aufwärts
instabil stabil passiv
negativ
Gleichgewicht abfallend es geht aufwärts
19
Hier gilt es viele Informationen zu ordnen, da macht der inten-sive Einsatz von Rahmen Sinn.
Rahmen sind auch hier unerlässlich zur Informations-bündelung, dennoch ist die Seite unübersichtlich.
3. Formen Linie und Fläche
203. Formen Linie und Fläche
213. Formen Anordnung
unstabil, schwebend
der linke, von der Mitte entfernte Kreis hat mehr Gewicht
die beiden Kreise sind ungefähr gleich schwer, Größe und Farbe gleichen sich aus
dunkle und warme Farbe hält die Kreise hier ebenfalls im Gleich-gewicht
ruhig, angenehm
224. Farben Farbtheorie
Farbkreis von Johannes Itten(1888 – 1967)
die wichtigsten Farbräume
234. Farben Farbe suchen
Ein intuitives Werkzeug, um passende Farben für Ihr Projekt zu finden: kuler.adobe.com
244. Farben Farbe wirkt
Trotz des riesigen Angebotes ein gutes Beispiel für den Einsatz von Farbe zur Menükategorisierung
254. Farben Farbe wirkt
Beispiele für sehr bunte Farbakzente, eine Farbgestaltung aus-gehend vom Bild und die Verwendung von „besetzten“ Farben.
265. Text Empfehlungen
• 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.
276. Bildbearbeitung Formate
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.– Nicht für Fotografien geeignet.– Keine echte Transparenz.
Das PNG:+ Vielfältige Weiterentwicklung
des GIF.+ Unterstützt 16,7 Mio. Farben.+ Unterstützt echte Transparenz.+ verlustfreie Optimierung.– Keine Animationsmöglichkeit.
286. Bildbearbeitung Bildgrösse
