I. Farbe im Screendesign

• dient als Orientierungshilfe und um Informationen zu strukturieren (z.B. die Menüführung)
• dient zur Kennzeichnung oder zur Hervorhebung
• nicht zu bunt, nicht zu wenig.. lieber ein bestimmtes Farbschema
• Augenfreundlich gestalten (zu starke Kontraste meiden)
• gleiche Inhalte farblich gleich gestalten
• gute Lesbarkeit braucht einen Hell-Dunkel-Kontrast (lieber dunkle Schrift auf hellem Grund)
• Inhaltsbezug und Zielgruppe berücksichtigen (keine warmen Farben für einen Skiort, keine kalten für ein Urlaub am Mittelmeer)
• Farbmenge (eher gezielt und zurückhaltend einsetzen)
• Wiedererkennbarkeit eines Erscheinungsbildes durch Farben des Corporate Design
• Navigation und Benutzerführung durch systematischen Farbeinsatz

II. Kontraste am Bildschirm

• Komplementärkontraste flimmern am Monitor stärker als auf Papier
• bei schwarzer Schrift auf weißem Grund kommt es zum Überstrahlen der Schrift (Haarlinien werden "verschluckt")
• um dies zu vermeiden lieber ein ganz leichtes kaum wahrnehmbares Grau als Hintergrundfarbe nehmen, das ist für das Auge angenehmer zu lesen und es ermüdet nicht so schnell

III. Fragestellungen in puncto Farbe beim Design

Farbpsychologie, Farbsymbolik, Farbwirkung
Welche Bedeutung hat jene Farbe? Welche Farbe eignet sich für jene Zielgruppe? Welche Farbe passt thematisch zu jenem Thema der Website? Welche Wirkung hat die Farbtemperatur?

Farbkontraste, Farbschemata, Farbrad, Farbeigenschaften
Welche Farbkontraste gibt es? Welche eignen sich für das Screendesign und wofür genau (z.B. Lesbarkeit von Texten)? Welche sollten vermieden werden und warum (z.B. Komplementärfarben flimmern)? Welche Farbharmonien passen, wie können Farbschemata entwickelt werden (z.B.Triade, Monochromatisch)? Welche Eigenschaften von Farben (Farbton, Helligkeit, Sättigung) können angepasst und kombiniert werden? Wie sollten Farben dosiert werden (Quantität)? Wie kann Raumwirkung erzielt werden?

Aufgabe von Farbe im Screendesign
Wie lassen sich Elemente farblich hervorheben? Wie kann ein Wiedererkennungseffekt erzielt werden? Wie wird durchgängige Benutzerführung erreicht (z.B. alle Links in einer Farbe, Farbkonzept für Navigation)? 

Farbfehlsichtigkeit
Wird bei dem Thema leicht übersehen, ca. 8% der Männer und ca. 0,5% der Frauen haben Farbsehstörungen, die bei der Farbgestaltung berücksichtigt werden sollten. Siehe Artikel "Augenerkrankungen und barrierefreies Webdesign" bei drweb.
Wie kann Barrierefreiheit durch Farbgebung erreicht werden (z.B. entsprechende Farbkombinationen vermeiden, ausreichend Kontrast)?


IV. RGB

• Bildschirme sind selbstleuchtend
• einzelne Bildpunkte bestehen aus 3 Phosphorzellen, je eine für Rot, Grün und Blau (dazu angemerkt, die Info war auf Farbbildröhre bezogen.. sollte es also bei LCD oder TFT anders sein, bitte ich um Korrektur)
• diese 3 Punkte verschmelzen in der Wahrnehmung zu einer Farbe
• eine Mischung aus allen 3 Farben in höchster Intensität ergibt weiß
• im RGB-Modus lassen sich mehr Farben darstellen als im CMYK-Modus

V. Websichere Farben

•  alle Systeme (Mac, Windows,etc.) können diese 256 Web Save Colours gleich darstellen
•  deshalb wurde eine Web-Palette mit 216 Farben entwickelt, die auf allen Plattformen gleich darstellbar sein sollen
•  20 Farben sind vom Betriebssystem für Fensterrahmen, Hintergründe etc. belegt
•  für R, G und B stehen jeweils 6 Werte zur Verfügung (6*6*6=216)
•  diese sind jeweils 0, 51, 102, 153, 204 und 255
• bestehen im Hexadezimalsystem ausschließlich aus den Kombinationen von CC, FF, 00, 33, 66 und 99
• in der Praxis haben die websicheren Farben faktisch keine Bedeutung mehr

VI. Farbunterschiede

• nicht bei jedem sehen die Farben auf dem Monitor gleich aus
• das kann am Betriebssystem liegen, an der Hardware (z.B. Grafikkarte) oder auch am Monitor, da diese selten gleich kalibriert sind, wenn überhaupt

VII. Farbangaben in HTML

• Farben werden im Hexadezimalsystem angegeben
• die Angabe "color: red;" ist auch möglich, sollte jedoch vermieden werden, da nicht jeder Browser damit gleich umgeht

Weiterführende Links

• The Art and Science of Color in Multimedia Screen Design, Part 1: Art, Opinion, and Tradition
  http://www.eric.ed.gov/ERICWebPortal/contentdelivery/servlet/ERICServlet?accno=ED381143 (pdf, 232K), Part II: -> hier <-
• http://www.drweb.de/magazin/farbe-und-screendesign/
• http://www.drweb.de/magazin/farben-auswahlen-und-optimal-einsetzen-experten-tipps-nicht-nur-furs-webdesign/
• http://www.drweb.de/magazin/auch-das-gehort-zur-usability-farben-furs-webdesign-teil-2/
• http://www.tomatoco.de/valbers/kontrast1.html

siehe auch WBT "Typografie am Bildschirm"

Monitorauflösung

zwischen 72 und 96 ppi Auflösung am Monitor, einzelne Pixel erkennbar, Feinheiten und Details gehen bei kleiner Schriftgröße verloren

Schriftdarstellung im Internet

• Bei HTML-basierten Websites werden vom browser nur Schriften dargestellt, die auf dem Rechner der Users selbst vorhanden sind, die so genannten Systemschriften (Helvetica/Arial, Times/Times New Roman, Georgia, etc.)
• Schrift als Grafik einzubetten bietet viele Nachteile und ist nicht mehr zeitgemäß
• Aktuelle Entwicklung als Alternative: Webfonts

Kriterien für die Schriftwahl – Lesbarkeit am Monitor

• Serifenlose Schriften bevorzugen
• Schriften mit offenen Punzen, keine Condensend-Schnitte
• Schrift für Fließtext sollte zwischen 10 und 12 Pixel (px) groß sein, je nach verwendeter Schriftart auch bis zu 14 px. Die Schriftgröße sollte zudem vom User über die Browsereinstellungen editierbar sein und nicht fixiert, so dass man die Schriftgröße an die eigene Monitorauflösung und Sehstärke anpassen kann
• Schriftart für Fließtext mit feinen Linien (z.B. Klassizistische Antiqua) lässt sich schwerer darstellen

Layout

• die Satzbreite sollte etwa 50-65 Zeichen betragen (Mit Zeichen sind nicht nur die Buchstaben, sondern auch Satzzeichen und Leerzeichen gemeint.)
• linksbündiger Flattersatz in der Regel vorzuziehen.
• Kein Blocksatz bei HTML-basierten Websites, da Browser bisher noch keine Trenn-Algorithmen besitzen, kommt es in der Regel bei Blocksatz zu unschönen Löchern im Text,
• Text in überschaubaren und inhaltlich zusammengehörenden Blöcken gliedern
• Möglichst klaren Farbkontrast von Schrift und Hintergrund, Komplementärkontrat (rot-Grün) vermeiden, da es zu Flimmern führt
• Keine Schrift auf einem unruhigen Hintergrund (Bild, Illustration) platzieren

Weiterführende Links:

http://home.arcor.de/rnbbox/bildschirmtypo.pdf


 

Mobile Design Essentials

Auf unserer Lernplattform entsteht eine Zusammenfassung dieser Videos unter dem Punkt "mobile design", Wir haben unter "Responsive Parallax Perspektiven" eine für mobiles Web spezialisierte Webseite. In den Videos wird erklärt wies das geht. Unter dem Punkt "Speed Pimp" sind viele Tipps wie man eine Seite schnell bekommt.

http://code.arnoldbodeschule.de/responsive-parallax-perspektiven/

Google Material Design

Google hat mit dem Material Design Style Guide eine sehr umfangreiche und gut ausgearbeitete Ressource bereit gestellt. Es gibt umfangreiche Beispiele und Anregungen für Animation, Farben, Ebenen, Pattern, Components - schlicht alles was für Apps und Mobile wichitg ist.

Weiterführende Links:

http://t3n.de/magazin/praxis-guide-mobile-websites-fit-furs-mobile-web-230209/
http://mediaqueri.es/

Hier noch ein Artikel über adaptives und responsives Webdesign:
http://blog.kulturbanause.de/2012/11/adaptive-website-vs-responsive-website/ 

Unterscheidung von Responsive, Adaptive, Fluid, Mobile First und Elastic
http://t3n.de/news/responsive-design-web-entwicklung-504906/

Start Mobile erklärt warum das alles so wichtig ist!
http://www.startmobile.de/

Vortragsfolien zum Thema
http://de.slideshare.net/peterrozek/handliche-designkonzepte-ux-und-mobi...

http://hackdesign.org/lessons/3

http://webdesignresponsive-px.rtrk.de/

https://www.google.com/design/spec/material-design/introduction.html

Gestaltung der Webnavigation
Eine gut strukturierte und gestaltete Navigation ist die wichtigste Vorraussetzung für die Usability einer Website. Sie führt den Nutzer zu den relevanten Bereichen und zeigt an, wo dieser sich befindet.
Hauptmenü
Ein Hauptmenü verdeutlicht, welche Inhalte eine Website anbietet und macht sie auf strukturierte Art und Weise zugänglich. Gleichzeitig wird den Nutzern ihre aktuelle Position in der Seitenstruktur vermittelt. Das Hauptmenü ist im Normalfall das wichtigste Navigations-Element. Der erste Schritt bei der Konzeption oder Überarbeitung einer Website ist die Auswahl wichtiger Inhalte und ihrer Strukturierung.
Card Sorting
...bezeichnet die Gruppierung und Benennung von Inhalten einer Website. Die Ergebnisse werden in einer Informationsstruktur zusammengefasst.
Wann: Card Sorting wird in der Konzeptions- und Analysephase angewendet. Es kann schnell und günstig ausgeführt werden.
Wer: Wenn möglich Meinungen von bereits vorhandenen Nutzern einholen. Auswertung von Umfragen durch erfahrene Experten.
Wo: Usability-Labor, beim Kunden, Online...
Tools: Analog oder mit desktop- / software-basierten, bzw. Online-Werkzeugen
Menü - Darstellungsformen
Vertikales Menü: Enthält die Hauptmenüpunkte und ggf. Untermenüpunkte untereinander aufgelistet. Untermenüpunkte können auch erst eingeblendet werden, wenn der jeweilige Bereich aktiv ist (vertikales Dropdown). Ein vertikales Menü wird von den Nutzern meist links des eigentlichen Inhalts erwartet.

Vorteil: Anzeige von mehr Menüpunkten und Ebenen als im horizontalem Menü
Nachteil: Weniger auffällig platziert
Horizontales Menü: Hauptmenü und ggf. zweite Navigationsebene befinden sich oben. Zur Darstellung dieser Form werden häufig Tabs verwendet.

Vorteil: Mehr Platz für Inhalte auf Website
Nachteil: Anzahl der Menüpunkte ist durch Breite der Seite begrenzt.
Kombiniertes Menü: Die ersten Menü-Ebenen befinden sich oben auf der Seite, weitere Menüebenen werden ggf. in einem vertikalen Menü angezeigt.
Dynamische Menüs: Sowohl bei vertikalen als auch horizontalen Menüs einsetzbar. Sie öffnet weitere Navigationsebenen bei Mouse-Over oder einem Klick.

Vorteil: Es wird weniger Platz benötigt
Nachteil: Nicht alle Ebenen sind sofort sichtbar
Globale Navigation
zusätzlich zu den Hauptinhalten werden oft wichtige Links und Funktionen, die nicht in die allgemeine Struktur der Seite passen, im Hauptmenü oder darüber angezeigt, damit sie überall auf der Seite zugänglich sind (Links zum Impressum oder Sitemap, Suchfunktion oder Sprachmenü). Ein etablierter Standart ist dabei ein Logo oben links, das den Nutzer immer zur Startseite zurückführt.