Transcript Proseminar „ Website-Management-Systeme“ Design und Ergonomie von Webseiten Galina Antonova Gliederung Motivation und Begriffserklärung Gestaltung der Webseiten 1. 2. 3. 4. 5. 6. 7. Vorüberlegungen zur Seitengestaltung Layoutentwurf Navigation Inhalt und Länge der Seiten Lesbarkeit und Typografie Grafiken Testphase Zusammenfassung Motivation und Begriffserklärung „Der.

Proseminar
„ Website-Management-Systeme“
Design und Ergonomie
von Webseiten
Galina Antonova
Gliederung
Motivation und Begriffserklärung
Gestaltung der Webseiten
1.
2.
3.
4.
5.
6.
7.
Vorüberlegungen zur Seitengestaltung
Layoutentwurf
Navigation
Inhalt und Länge der Seiten
Lesbarkeit und Typografie
Grafiken
Testphase
Zusammenfassung
Motivation und Begriffserklärung
„Der Stil ist der genaue Abdruck der Qualität
des Denkens.“
(Arthur Schopenhauer)
„Design ist Kunst, die sich nützlich macht.“
(Carlos Obers)
Motivation und Begriffserklärung
Definition von Ergonomie:
Ergonomie, ein Begriff aus dem altgriechischen
(Ergon = Arbeit, Nomos = Regel, Gesetzmäßigkeit),
befasst sich mit den Fähigkeiten und Bedürfnissen
des Menschen und passt die Arbeit und Arbeitsmittel
seinen Fähigkeiten und Bedürfnissen an.
Gestaltung der Webseiten
1.Vorüberlegungen zur Seitengestaltung
Wen will ich ansprechen?
Was will ich vermitteln?
Welche Form passt zu meinem Inhalt?
2. Layoutentwurf
Räumliche Gestaltung
Harmonie mit dem Goldenen Schnitt
2. Layoutentwurf
Farbliche Gestaltung
Nicht mehr als 5 Farben benutzen
Kontrast zwischen Vorder- und Hintergrund
Für größere Flächen – hellere Farben
Für kleinere Details – intensivere Farben
Ruhiges Layout
• Blinkende Bilder und Schriften meiden
• Genügend freie Fläche
• Ausrichtung der Elemente
2. Layoutentwurf
Ausrichtung der Elemente
2. Layoutentwurf
Ausrichtung der Elemente
3. Navigation
5 bis 7 Punkte - optimal
Ein Muss: „Startseite“ und „Kontakt“
Menünamen sollten kurz und aussagekräftig sein
Weg zur gesuchten Information so kurz wie möglich halten
Zusätzliche Orientierung: Suchfunktion, Site-Map, Backtracking-Liste
Einheitlichkeit des Layouts
4. Inhalt und Länge der Seiten
Inhalte internetspezifisch gestalten:
Möglichst kurze Texte
Journalistischer Schreibstil:
• Aktive statt passive Satzkonstruktion
• Klare Informationen, bildhafte Sprache
• Keine langen verschachtelten Sätze
Veranschaulichung durch Bilder und Grafiken
5. Lesbarkeit und Typografie
Schrift
Geeignete Schrifttypen
Dies ist ein Absatz in der
Serifenschrift Times New Roman.
Diese Schriftart wird zwar in
Zeitungen verwendet, aber sie ist bei
kleiner Schriftgröße am Bildschirm
nicht gut lesbar.
Dies ist ein Absatz in der
serifenlosen Schrift Arial. Diese
Schriftart ist bei kleiner
Schriftgröße zwar lesbarer als
Times, aber durch das enge
Schriftbild auch nicht besonders
geeignet.
Dies ist ein Absatz in der
serifenlosen Schrift Verdana.
Diese Schriftart ist auch bei
kleiner Schriftgröße am
Bildschirm relativ gut lesbar.
Unter Unix und MacOS wird
sie durch Helvetica ersetzt
Schriftgröße
Schriftgröße 1 <font size=„1“>
Schriftgröße 2 <font size=„2“>
Schriftgröße 3 <font size=„3“>
Schriftgröße 4 <font size=„4“>
Kontrast zwischen Schrift- und Hintergrundfarbe
blaue Schrift
gelbe Schrift
rote Schrift
Rote Schrift auf blauem Hintergrund ist schwer lesbar
5. Lesbarkeit und Typografie
Räumliche Gestaltung
Hervorhebungen verwenden
• Überschriften, Zwischenüberschriften
• Aufzählungen zur Strukturierung
• Fettdruck zum Hervorheben
Auflockerung durch Zwischenräume und
Abstände zwischen Zeilen und Absätzen
Die Zeilenlänge nicht größer als 80 Zeichen
6. Grafiken
ein Bild sagt mehr als tausend Worte
Nachteil: lange Wartezeiten
Zur Reduzierung der Antwortzeit
Nur Grafiken mit Aussagewert einsetzen
Grafiken sparsam und mehrfach verwenden
Dokumente auch ohne Grafiken nutzbar machen
6. Grafiken
Komprimierung der Grafiken
JPG 3,1 KB
GIF 2,8 KB
GIF 3,89 KB
JPG 2,38 KB
7.Testphase
Webseiten müssen getestet werden
auf verschiedenen Plattformen
mit verschiedenen Browsern und Browserversionen
mit verschiedenen Bildschirmauflösungen
und unterschiedlicher Farbtiefe
ohne HTML- Erweiterungen
ohne Grafiken
Zusammenfassung
Design
Navigation
Inhalt
Weiterführende Information:
www.ideenreich.com
www.farbenlehre.de
www.KommDesign.de
www.10-webdesign-regeln.de