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

537 Aufrufe

Veröffentlicht am

Farbgestaltung & Typographie bei Webseiten

Veröffentlicht in: Internet
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

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

Keine Downloads
Aufrufe
Aufrufe insgesamt
537
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
1
Aktionen
Geteilt
0
Downloads
2
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie
  • Anwendungsbeispiele
    Farbraum und Einschränkungen gegenüber Druck

    Psychologie, Statistische Werte
  • Gleich Einsteigen!  Stellt euch mal kurz die Frage

    Trostlos, Langweilig, Unattraktiv,
    Alles Gleich,
    Nur Text --> Anstrengend
    Wie herausstechen

    Ganz schön viel genannt auf das es bei Farbe ankommt. Nun mehr im Detail
  • Anwendungsbeispiele
    Farbraum und Einschränkungen gegenüber Druck,
  • MARKE, UNternehmen direkt erkennbar, Wiedererkennungswert
    CD-Handbuch Pflicht die Farben zu verwenden  so Gut eben möglich!
  • Farben müssen sich an verschiedenen Stellen wieder finden.
    Farbschema kann Helfen
    Komplementärfarben verwenden

    Bisschen klein  Nicht so wichtig. Mal Farbschema sehen  Darunter das Ergebnis

     Eben Stimmiges gesamtbild
  • Einfacher Machen
    Besser lesbar
    Einfacher zu Navigieren
    Auf wichtige Dinge hinweisen
    unbewusste Benutzerführung

    Eben Usibility  Verschiedene Möglichkeiten: Hervorhebung, Farbleitsystem, als Erkennungsmerkmal  Jetzt vorstelln
  • ORIENTIERUNGSHILFE

    Marke direkt erkennbar
    Farben des Logos

    ABER USABILITY  Menue DIREKT als solches Erkennbar und Farbig KLAR plaziert
  • Bsp Farbleitsystem

    Oft von Redaktionellen Seiten genutzt..
    Versch. NewsThemen verschiedene Farben
    Hauptseite
    ThemenSeiten nochmal untermalt
  • Direkt auf Handlungsaufforderung hingewiesen
  • Wie mein Text hier oben eine
    ganz DEUTLICHE Hervorhebung

    Aufmerksam Machen.
    2Dinge: 1) Gelber Bereich, 2)Take a Free Test Version  Auffordernd
  • Anwendungsbeispiele
    Farbraum und Einschränkungen gegenüber Druck,
  • Designer-Hardware (GraKa, Bildschirm) anderst als beim User
    Gleiche … Einstellungen die jeder Anderst hat
    Blickwinkel  Laptop auf der Couch, Evtl Tablet
    Lichtverhältnisse  Nachts, Tagsüber

       Lösung:
  • Problem! Im Wesentlichen 2 Verschiedene Farbmräume (AdobeFarbraum, sRGB Farbraum,…Je Gerät)

    RGB (Rot, Grün, Blau )Farbraum  Monitor/Leuchtfarben - groß

    CMYK (Cyan, Magenta, Yellow, Black) Farbbereich  Druck – Kleiner

    Lösung?  Schnittmenge verwenden

    Praxis Tip:
    Photoshop CMYK Werte eingeben und RGB Werte ablesen

    Bei Freier Farbwahl darauf achten das die Farben der Wahl bei beiden gibt!  Da Drucke und Andere Medien angepasst werden können
  • Anwendungsbeispiele
    Farbraum und Einschränkungen gegenüber Druck,
  • Ausreichend Hohe Kontraste aber nicht zu Hoch
    Nicht Ablenken vom Inhalt oder nerven
    Weiß leuchtet am Bildschirm,
    hell Pastel passt zu dunkler Schrift

    -- genau so wichtig wie der Hintergrund, der Fordergrund!

    Flimmert
    Zu ermüdend anstrengend (E-Book Reader)
    Rot/Grün

  • Anwendungsbeispiele
    Farbraum und Einschränkungen gegenüber Druck,
  • Was fällt euch spontan zu rot ein? (Martin benutzen) Zu gelb? (Strom?) Andren Farben. Lila? Rosa?
    Kurz Fragen
    Sowohl bei Männern als auch frauen…. Danach geht’s auseinander

  • Lange Recherschiert  Sehr Interessiert hat WAS IST DIIIIE FARBE IM WEB

    Statistische Erhebung COLOURLOVERS.COM (Bekannte Trend-Marken) von 2010
    Persönliche Meinung

    Blau (http://www.dropbox.com) zu Trendfarbe Grün (http://www.evernote.com)
  • http://www.colourlovers.com/business/blog/2010/09/15/the-most-powerful-colors-in-the-world
  • Anwendungsbeispiele
    Farbraum und Einschränkungen gegenüber Druck,
  • Nochmal Erinnerung  KONTRASTE
    Leider nicht viel aber funktionieren. Neues OS  Neue Schriften, gerne nutzen aber alternativen anbieten
    Bestimmte Schriften, oft nur recht kleine größen, können in Programmierung mit flash oder als Bilder verwendet werden nicht aber in html! teschnisch
  • Keiner Will auf einer Seite Bücher Lesen
    Einfacher, Angenehmer


  • 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

    ×