1.	Einführung      „Grundlagen der Gestaltung von Webseiten”      im Virtuellen Klassenraum am 13.06.2012      1.	Einführu...
1.	Einführung                2
1.	Einführung                3
2.	Die Gestaltgesetze		          Das Gesetz der Nähe                                                                     4...
2.	Die Gestaltgesetze		                 Das Gesetz der Nähe                                                               ...
2.	Die Gestaltgesetze		   Das Gesetz der Nähe                                                                             ...
2.	Die Gestaltgesetze		   Das Gesetz der Ähnlichkeit                                                                      ...
2.	Die Gestaltgesetze		   Das Gesetz der Ähnlichkeit                                                                      ...
2.	Die Gestaltgesetze		   Das Gesetz der Ähnlichkeit                                                                      ...
2.	Die Gestaltgesetze		         Das Gesetz der Geschlossenheit                                                            ...
2.	Die Gestaltgesetze		   Das Gesetz der Geschlossenheit                                                                  ...
2.	Die Gestaltgesetze		           Das Gesetz der Kontinuität                                                              ...
2.	Die Gestaltgesetze		   Das Gesetz der Kontinuität                                                                      ...
2.	Die Gestaltgesetze		   Das Gesetz der Erfahrung                                                                        ...
2.	Die Gestaltgesetze		           Das Gesetz der Erfahrung                                                                ...
2.	Die Gestaltgesetze		             Das Gesetz der Erfahrung                                                              ...
2.	Die Gestaltgesetze		   Das Gesetz der Erfahrung                                                     17
3.	Formen		        Linie und Fläche                                                                                       ...
3.	Formen		             Linie und Fläche                                                                                  ...
3.	Formen		   Linie und Fläche                                 20
3.	Formen		             Anordnung                                                                                         ...
4.	Farben		         Farbtheorie                                                              22   Farbkreis von Johannes I...
4.	Farben		           Farbe suchen                                              23Ein intuitives Werkzeug, um passende Far...
4.	Farben		           Farbe wirkt                                                    24Trotz des riesigen Angebotes ein gu...
4.	Farben		           Farbe wirkt                                                                 25Beispiele für sehr bun...
5.	Text		   Empfehlungen                                                                                                26...
6.	Bildbearbeitung 	   Formate                                                                                            ...
6.	Bildbearbeitung 	   Bildgrösse                                    28
Nächste SlideShare
Wird geladen in …5
×

„Grundlagen der Gestaltung von Webseiten” im Virtuellen Klassenraum am 13.06.2012

2.445 Aufrufe

Veröffentlicht am

Veröffentlicht in: Bildung
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

„Grundlagen der Gestaltung von Webseiten” im Virtuellen Klassenraum am 13.06.2012

  1. 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. 2. 1. Einführung 2
  3. 3. 1. Einführung 3
  4. 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. 5. 2. Die Gestaltgesetze Das Gesetz der Nähe 5Bild, Text und Preis sind schwer zuzuordnen Hier ist die Zuordnung klar ersichtlich
  6. 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. 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. 8. 2. Die Gestaltgesetze Das Gesetz der Ähnlichkeit 8 Moodle-Beispiel: Durch Farbauszeichnungen können Bezüge über Gruppen hinweg geschaffen werden.
  9. 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. 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. 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. 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. 13. 2. Die Gestaltgesetze Das Gesetz der Kontinuität 13 verschieden starke Texteinzüge erleichtern das Erkennen der Hierarchieebenen
  14. 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. 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. 16. 2. Die Gestaltgesetze Das Gesetz der Erfahrung 16Die „Print wirkt“-Kampagne des Media-Services der Pub-likumszeitschriften würde ohne unsere visuelle Erfahrungnicht funktionieren.
  17. 17. 2. Die Gestaltgesetze Das Gesetz der Erfahrung 17
  18. 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. 19. 3. Formen Linie und Fläche 19Hier 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. 20. 3. Formen Linie und Fläche 20
  21. 21. 3. Formen Anordnung 21der linke, von der Mitte entfernte die beiden Kreise sind ungefähr dunkle und warme Farbe hält dieKreis hat mehr Gewicht gleich schwer, Größe und Farbe Kreise hier ebenfalls im Gleich- gleichen sich aus gewicht unstabil, schwebend ruhig, angenehm
  22. 22. 4. Farben Farbtheorie 22 Farbkreis von Johannes Itten die wichtigsten Farbräume (1888 – 1967)
  23. 23. 4. Farben Farbe suchen 23Ein intuitives Werkzeug, um passende Farbenfür Ihr Projekt zu finden: kuler.adobe.com
  24. 24. 4. Farben Farbe wirkt 24Trotz des riesigen Angebotes ein gutes Beispielfür den Einsatz von Farbe zur Menükategorisierung
  25. 25. 4. Farben Farbe wirkt 25Beispiele für sehr bunte Farbakzente, eine Farbgestaltung aus-gehend vom Bild und die Verwendung von „besetzten“ Farben.
  26. 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. 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. 28. 6. Bildbearbeitung Bildgrösse 28

×