Inhalt Format Gestaltungsraster Farben Farbkontraste Hintergrund Schrift Schriftattribute

1. Inhalt • Format • Gestaltungsraster • Farben • Farbkontraste • Hintergrund • Schrift • Schriftattribute • Navigation • Navigationselemente • Zusammenfassung Screen-Design > Inhalt

2. Nutzfläche Format • Hauptproblem: Variable Größe des Browserfensters. • „Standard-Monitor“: 1024 x 768 Pixel, abzüglich Browserränder verbleiben etwa 1000 x 600 Pixel Nutzfläche. Screen-Design > Format

3. Format • Wichtige Seitenelemente wie Buttons sollten bevorzugt links / oben platziert werden – sie sind dann immer sichtbar. • Wenn Bildlaufleisten (Scrollbalken) unvermeidbar sind, dann vertikal und nicht horizontal. Horizontale und vertikale Bildlaufleiste Screen-Design > Format

4. Gestaltungsraster • Screen-Design beginnt mit der Planung des Seitenlayouts. Ein Gestaltungsraster gestattet • eine klare und verständliche Seitenstruktur. Hauptnavigation (unveränderlich) • Bild Unter-navigation (variabel) Unter-navigation (variabel) Text Screen-Design > Gestaltungsraster

5. Gestaltungsraster • Liegt das Seitenlayout fest muss es konsequent auf allen Seiten umgesetzt werden. Der Nutzer findet sich auf der gesamten Site schnell und intuitiv zurück. Screen-Design > Gestaltungsraster

6. Farben • ... rufen Assoziationen und Emotionen hervor! Sonne Wärme Helligkeit Gold Freundlichkeit LiebeEnergie Feuer Gefahr Blut Zorn Natur Wachstum Frische Ruhe Hoffnung Gift Reinheit Klarheit Ordnung Vollkommenheit Himmel Meer Unendlichkeit Kühle Passivität Neutralität Nüchternheit Theorie Sachlichkeit Langeweile Screen-Design > Farben

7. Ungeeignete Farbkontraste Kontrast zu gering Text • Ein zu geringer Kontrast verschlechtert die Lesbarkeit. • Ein zu hoher Kontrast strengt das Auge stark an. • Bei komplementären Farben kann es zum „Flimmereffekt“ kommen. Das Auge wird durch den Kontrast überlastet. Kontrast zu hoch Text Komplementär-Kontrast Text Screen-Design > Farben > Farbkontrast

8. Geeignete Farbkontraste Bunt-Unbunt-Kontrast Text • Bunt-Unbunt-Kontrast Kombination einer Buntfarbe (rot, gelb, grün) mit einer unbunten Farbe (grau, braun) • Kalt-Warm-KontrastKombination einer „kalten“ (blau, lila) und „warmen“ (gelb, rot, orange) Farbe • Intensitäts-KontrastKombination einer „reinen“ und einer „trüben“ Farbe. Kalt-Warm-Kontrast Text Intensitäts-Kontrast Text Screen-Design > Farben > Farbkontrast

9. Ungeeignete Hintergründe Kopfweh ist absehbar! Hier steht der Text, und den muss man lesen können. • Grelle, leuchtende Farben • Unruhige Motive wie z.B. Fotos • Hintergründe mit „Wallpaper“-Effekt Können Sie alles lesen? Hier steht der Text, und den muss man lesen können. „Tapeten“ sind Out! Hier steht der Text, und den muss man lesen können. Screen-Design > Hintergrund

10. Geeignete Hintergründe Optimale Lesbarkeit Hier steht der Text, und den muss man lesen können. • Helle, aber dezente Farben z.B. Pastellfarben • Mehrfarbige Motive, die aber nicht „unruhig“ sein dürfen • Dunkle Hintergründe eignen sich nur für geringe Textmengen. Wolkenbild nach Weich-zeichnung Hier steht der Text, und den muss man lesen können. Negative Schrift auf dunklem Hintergrund Hier steht der Text, und den muss man lesen können. Screen-Design > Hintergrund

11. Schrift Windows-Systemschriften • Hauptproblem: HTML kann keine Schriften einbetten. Die verwendete Schrift muss im System installiert sein. • Für den Fließ- oder Mengentext muss eine der wenigen Systemschriften verwendet werden. • Wer z.B. für Buttons oder Überschriften andere Schriften verwenden will, muss diese als GIF-Grafik abspeichern. Times New Roman Arial Verdana Tahoma Courier New Screen-Design > Schrift

12. Schriftattribute Schriftgröße • Schriftgröße Für Mengentexte beträgt die Schriftgröße üblicherweise 11 bis 12 Punkt. • ZeilenlängeDie Zeichenanzahl pro Zeile sollte einschließlich Leerzeichen maximal 50 betragen. Bei längeren Zeilen verrutscht das Auge leicht beim Lesen. Schriftbeispiel in 8 pt. Schriftbeispiel in 10 pt. Schriftbeispiel in 12 pt. Schriftbeispiel in 14 pt. Schriftbeispiel in 16 pt. Zeilenlänge (ca. 50 Zeichen) Ich bin ein Blindtext ohne jeglichen Sinn. Meine Aufgabe besteht nur darin, einen visuellen Eindruck von der Zeilenlänge zu geben. Schade, dass ich es nicht zu mehr gebracht habe. Ich bin ein Blindtext ohne jeglichen Sinn. Meine Aufgabe besteht nur darin, einen visuellen Eindruck von der Zeilenlänge zu geben. Schade, dass ich es nicht zu mehr gebracht habe. Screen-Design > Schrift > Schriftattribute

13. Schriftattribute Linksbündiger Flattersatz • SatzartAls Satzart kommt für Mengentext nur linksbündiger Flattersatz in Frage. Blocksatz wird von vielen Browsern nicht unterstützt. • AuszeichnungZur Auszeichnung (Hervorhebung) von Text kann dieser Fett fett (bold) oder in einer anderen Farbe gesetzt werden. Kursiv ist schlecht lesbar und unterstrichen kennzeichnet Hyperlinks. Ich bin ein Blindtext ohne jeglichen Sinn. Meine Aufgabe besteht nur darin, einen visuellen Eindruck von der Zeilenlänge zu geben. Schade, dass ich es nicht zu mehr gebracht habe. Ich bin ein Blindtext ohne jeglichen Sinn. Meine Aufgabe besteht nur darin, einen visuellen Eindruck von der Zeilenlänge zu geben. Schade, dass ich es nicht zu mehr gebracht habe. Auszeichnung Ich bin ein Blindtext ohne jeglichen Sinn. Meine Aufgabe besteht nur darin, einen visuellen Eindruck von der Zeilenlänge zu geben. Schade, dass ich es nicht zu mehr gebracht habe. Ich bin ein Blindtext ohne jeglichen Sinn. Meine Aufgabe besteht nur darin, einen visuellen Eindruck von der Zeilenlänge zu geben. Schade, dass ich es nicht zu mehr gebracht habe. Screen-Design > Schrift > Schriftattribute

14. Schriftattribute Gliederung in Absätze • Gliederung Texte am Bildschirm sind schlecht lesbar. Sie sollten deshalb kurz gehalten in überschaubare Einheiten gegliedert werden. • TrennungHTML kennt keine automatische Trennung. Trennungen müssen per <br>-Tag „erzwungen“ werden. Ich bin ein Blindtext ohne jeglichen Sinn. Meine Aufgabe besteht nur darin, einen visuellen Eindruck von der Zeilenlänge zu geben. Schade, dass ich es nicht zu mehr gebracht habe. Ich bin ein Blindtext ohne jeglichen Sinn. Meine Aufgabe besteht nur darin, einen visuellen Eindruck von der Zeilenlänge zu geben. Schade, dass ich es nicht zu mehr gebracht habe. Textumbruch ohne Trennung Da HTML nicht automatisch trennt, kann dies zu einem sehr unschönen Schriftbild führen. Abhilfe kann nur das Einfügen manueller Trennungen schaffen. Bei dynamisch erstellten Seiten geht dies nicht. Textumbruch mit manueller Trennung Da HTML nicht automatisch trennt, kann dies zu einem sehr unschönen Schriftbild führen. Abhilfe kann nur das Einfügen manueller Tren-nungen schaffen. Bei dynamisch erstellten Seiten geht dies nicht. Screen-Design > Schrift > Schriftattribute

15. Homepage (index.html) Home 1. Informationsebene News Kontakt Termine Aufgaben 2. Informationsebene Schüler Lehrer Navigation • Die Navigation der Website muss im Vorfeld geplant werden. Hierzu wird ein Navigationsplan erstellt. • Ein Navigationsplan zeigt alle Screens als Kästchen. Jedes Kästchen ergibt bei der Umsetzung eine eigene HTML-Datei. • Der Navigationsplan zeigt alle Links als Pfeile. Screen-Design > Navigation

16. Navigationselemente Navigationsleiste bei www.europapark.de • Navigation und Inhalt müssen klar voneinander getrennt werden. • Die Navigationselemente sollen sich auf jedem Screen an der gleichen Stelle befinden. Nur so erschließt sich dem Nutzer die Bedienung intuitiv. • Die Navigationselemente sollten nicht zu klein sein. Der ungeübte Nutzer hat sonst mit der Bedienung Schwierigkeiten. • Die Navigationselemente sollten nicht zu groß sein. Im Vordergrund stehen die Inhalte der Site und nicht deren Bedienelemente. Screen-Design > Navigation > Navigationselemente

17. Navigationselemente YelloStrom hält sich an die „magische“ 7 • Der Mensch kann auf einen Blick maximal sieben Navigationselemente erfassen. • Werden mehr als sieben Links benötigt, sollten diese als Unternavigation realisiert werden. • Bei Textlinks müssen kurze und passende Begriffe gefunden werden. Unternavigation Screen-Design > Navigation > Navigationselemente

18. Navigationselemente Homepage • Grafische Links müssen durch Verwendung geeigneter Metaphern selbsterklärend sein:Haus > zur HomepageBriefumschlag > KontaktmöglichkeitGlobus > Links ins Internet • Zur Unterstützung sollte beim Berühren mit der Maus (Rollover) zusätzlicher Text eingeblendet werden. • Grafiken (Icons) sollten stilisiert, abstrahiert und einheitlich gestaltet werden. Kontakt Links Screen-Design > Navigation > Navigationselemente