Successfully reported this slideshow.
Farbgestaltung & Typografie 
bei Webseiten 
Was der Webdesigner 
wissen sollte. 
QUELLE http://www.genial-wohnen.de/Bilder...
Inhalt 
1. Farbgestaltung 
1. Wozu dienen Farben in Webseiten? 
2. Was ist technisch zu beachten? 
3. Wie wird richtig mit...
Wie würde das Internet wohl ohne 
Farbe aussehen?
Inhalt 
1. Farbgestaltung 
1. Wozu dienen Farben in Webseiten? 
2. Was ist technisch zu beachten? 
3. Wie wird richtig mit...
Wozu dienen Farben in Webseiten 
Corporate Design
Wozu dienen Farben in Webseiten 
Farblich stimmiges Gesamtbild 
Quelle: http://www.drweb.de/magazin/auch-das-gehort-zur-us...
Wozu dienen Farben in Webseiten 
Orientierung erleichtern 
Usability
Wozu dienen Farben in Webseiten 
Orientierungshilfe
Wozu dienen Farben in Webseiten 
Farbleitsystem (ARD, SpiegelOnline, futerzone.at)
Wozu dienen Farben in Webseiten 
Handlungsaufforderung (http://finderly.com/)
Wozu dienen Farben in Webseiten 
Hervorhebung, Betonung, Auffallen, Einprägen 
Quelle: http://www.drweb.de/magazin/auch-da...
Inhalt 
1. Farbgestaltung 
1. Wozu dienen Farben in Webseiten? 
2. Was ist technisch zu beachten? 
3. Wie wird richtig mit...
Was ist technisch zu beachten 
Farbverbindlichkeit 
o Hardware 
o Helligkeit, Kontrast, Farbtemperatur 
o Blickwinkel 
o L...
Was ist technisch zu beachten 
o Bildschirmfarben (RGB) 
Schnittmenge verwenden 
Quelle: http://blog.xritephoto.com/wp-con...
Inhalt 
1. Farbgestaltung 
1. Wozu dienen Farben in Webseiten? 
2. Was ist technisch zu beachten? 
3. Wie wird richtig mit...
Richtig mit Kontrasten arbeiten 
Hintergrund 
o Kein zu hoher Kontrast 
o Steht auch optisch hinten 
o Pastellfarben für H...
Inhalt 
1. Farbgestaltung 
1. Wozu dienen Farben in Webseiten? 
2. Was ist technisch zu beachten? 
3. Wie wird richtig mit...
Wirkung von Farben 
o Assoziationen und Emotionen 
o Eure Lieblingsfarben? 
Blau 
Rot 
Grün
Wirkung von Farben 
Meist genutzte Farbe im Web? 
BLAU 
Quelle: http://www.colourlovers.com/
Quelle: http://www.colourlovers.com/
Inhalt 
1. Farbgestaltung 
1. Wozu dienen Farben in Webseiten? 
2. Was ist technisch zu beachten? 
3. Wie wird richtig mit...
Typografie – Regeln 
o Selbststrahler statt Reflektion 
o Systemschriften statt Druckschriften 
o Pixelfonts ja aber nicht...
Typografie – Regeln 
o Kernaussagen statt Romane 
o Texte gliedern 
o Längere Text einleiten und dem Nutzer 
die Wahl lass...
Vielen Dank 
für Ihre Aufmerksamkeit
Nächste SlideShare
Wird geladen in …5
×

Farbgestaltung & Typographie bei Webseiten

630 Aufrufe

Veröffentlicht am

Farbgestaltung & Typographie bei Webseiten

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

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

Farbgestaltung & Typographie bei Webseiten

  1. 1. Farbgestaltung & Typografie bei Webseiten Was der Webdesigner wissen sollte. QUELLE http://www.genial-wohnen.de/Bilder/wohnen/Wand-streichen_
  2. 2. Inhalt 1. Farbgestaltung 1. Wozu dienen Farben in Webseiten? 2. Was ist technisch zu beachten? 3. Wie wird richtig mit Kontrasten gearbeitet? 4. Welche Wirkung können Farben haben? 2. Typografische-Regeln
  3. 3. Wie würde das Internet wohl ohne Farbe aussehen?
  4. 4. Inhalt 1. Farbgestaltung 1. Wozu dienen Farben in Webseiten? 2. Was ist technisch zu beachten? 3. Wie wird richtig mit Kontrasten gearbeitet? 4. Welche Wirkung können Farben haben? 2. Typografische-Regeln
  5. 5. Wozu dienen Farben in Webseiten Corporate Design
  6. 6. Wozu dienen Farben in Webseiten Farblich stimmiges Gesamtbild Quelle: http://www.drweb.de/magazin/auch-das-gehort-zur-usability-farben-furs-webdesign-teil-2/
  7. 7. Wozu dienen Farben in Webseiten Orientierung erleichtern Usability
  8. 8. Wozu dienen Farben in Webseiten Orientierungshilfe
  9. 9. Wozu dienen Farben in Webseiten Farbleitsystem (ARD, SpiegelOnline, futerzone.at)
  10. 10. Wozu dienen Farben in Webseiten Handlungsaufforderung (http://finderly.com/)
  11. 11. Wozu dienen Farben in Webseiten Hervorhebung, Betonung, Auffallen, Einprägen Quelle: http://www.drweb.de/magazin/auch-das-gehort-zur-usability-farben-furs-webdesign-teil-2/
  12. 12. Inhalt 1. Farbgestaltung 1. Wozu dienen Farben in Webseiten? 2. Was ist technisch zu beachten? 3. Wie wird richtig mit Kontrasten gearbeitet? 4. Welche Wirkung können Farben haben? 2. Typografische-Regeln
  13. 13. Was ist technisch zu beachten Farbverbindlichkeit o Hardware o Helligkeit, Kontrast, Farbtemperatur o Blickwinkel o Lichtverhältnisse Monitor kalibrieren und Normlicht verwenden
  14. 14. Was ist technisch zu beachten o Bildschirmfarben (RGB) Schnittmenge verwenden Quelle: http://blog.xritephoto.com/wp-content/uploads/2010/05/CMYK-in-Adobe-RGB.jpg
  15. 15. Inhalt 1. Farbgestaltung 1. Wozu dienen Farben in Webseiten? 2. Was ist technisch zu beachten? 3. Wie wird richtig mit Kontrasten gearbeitet? 4. Welche Wirkung können Farben haben? 2. Typografische-Regeln
  16. 16. Richtig mit Kontrasten arbeiten Hintergrund o Kein zu hoher Kontrast o Steht auch optisch hinten o Pastellfarben für Hintergründe Textfarbe o Kein zu hoher Kontrast o Keine komplementäre Farbe zum Hintergrund o Bei längerem Text weder S/W noch W/S o Farbfehlsichtigkeit beachten
  17. 17. Inhalt 1. Farbgestaltung 1. Wozu dienen Farben in Webseiten? 2. Was ist technisch zu beachten? 3. Wie wird richtig mit Kontrasten gearbeitet? 4. Welche Wirkung können Farben haben? 2. Typografische-Regeln
  18. 18. Wirkung von Farben o Assoziationen und Emotionen o Eure Lieblingsfarben? Blau Rot Grün
  19. 19. Wirkung von Farben Meist genutzte Farbe im Web? BLAU Quelle: http://www.colourlovers.com/
  20. 20. Quelle: http://www.colourlovers.com/
  21. 21. Inhalt 1. Farbgestaltung 1. Wozu dienen Farben in Webseiten? 2. Was ist technisch zu beachten? 3. Wie wird richtig mit Kontrasten gearbeitet? 4. Welche Wirkung können Farben haben? 2. Typografische-Regeln
  22. 22. Typografie – Regeln o Selbststrahler statt Reflektion o Systemschriften statt Druckschriften o Pixelfonts ja aber nicht in HTML o Unterstrichen werden nur Links
  23. 23. Typografie – Regeln o Kernaussagen statt Romane o Texte gliedern o Längere Text einleiten und dem Nutzer die Wahl lassen, zusätzlich per PDF
  24. 24. Vielen Dank für Ihre Aufmerksamkeit

×