Regeln zur Gestaltung von Webseiten

Ziel und Zielgruppenorientierung

Bevor man herangeht, eine Website zu produzieren, müssen einige bedeutende Fragen geklärt werden. Erst nachdem diese Fragen geklärt sind, kann man sich über das Design der Website Gedanken machen. Die zwei wichtigsten sind:

1. Was soll mit dieser Web-Präsenz erreicht werden?
2. Welches Publikum soll angesprochen werden?

Die 1. Frage dient überhaupt als Grundlage für die Entwicklung einer Website. Folgende Ziele könnte man z.B. verfolgen:

• Verkauf eines Produktes,
• Information über ein bestimmtes Thema, Produkt oder Dienstleistung
• Unterhaltung
• etc.

Ist diese Frage einmal geklärt, ist als nächstes zu hinterfragen, welches Publikum angesprochen werden soll bzw. welche potentiellen LeserInnen man hat. Eine erfolgreiche Website muss den EndnutzerInnen gefallen und sie müssen erkennen wo sich sich befinden. („Das ist genau das, was ich haben will.“) Erst dann ist es möglich, NutzerInnen zu binden oder neue NutzerInnen zu gewinnen. Will man beispielsweise junge Leute erreichen, ist es ratsam die Seiten möglichst modern darzustellen.

Allgemeine Regeln zur Gestaltung

Navigation und Aufbau von Webdokumenten müssen benutzerfreundlich sein. Die Website muss richtig funktionieren und auch von ungeübten NutzerInnen bedienbar bzw. leicht erlernbar sein. Webseiten müssen auf diese „Gebrauchstauglichkeit“ (Usability) überprüft werden, da die Einhaltung dieser Standards die Frustration der User verringert und sie zu zufriedenen NutzerInnen macht.

Neben der Gebrauchstauglichkeit spielt auch Zugänglichkeit (Accessibility) eine große Rolle. Beim Design einer Website sollte daher auf Barrierefreiheit geachtet werden. Somit ist es auch möglich, für körperlich beeinträchtigte Menschen einen Zugang zu gewähren. Um Accessibility zu gewährleisten, spielt die Trennung von Form und Inhalt eine große Rolle.

Techniken, die nur mit einem speziellen Browser oder Plugin funktionieren, können Websites für NutzerInnen, die das nicht installiert haben (oder nicht installieren wollen), unzugänglich machen. Ist es nicht möglich auf diese Techniken zu verzichten, sollten beispielsweise Text-Alternativen zu multimedialen Inhalten angeboten werden.

NutzerInnen wollen in der Regel klare und lesbare Informationen und keine animierten Banner, etc. sehen. Diese werden ohnehin von den NutzerInnen meist übersprungen oder weggeklickt und sollten daher vermieden werden.

Da die Verwendung von mobilen Endgeräten wie Tablets oder Smartphones zum Standard gehören, ist es wichtig, Webseiten zu programmieren, die sich den Endgeräten anpassen (Stichwort: Responsive Webdesign).

Nicht außer Acht gelassen werden darf eine gute Suchmaschinenoptimierung. Neben der Auswahl eines geeigeneten Domainnamen ist es auch bei der Gestaltung von großer Bedeutung einige Dinge in diesem Zusammenhang zu bedenken. Webseiten werden von Suchmaschinen nur gefunden, wenn auf allen Dokumenten viel und vor allem aussagekräftiger Text gefunden wird. Um gefunden zu werden, ist es auch wichtig, dass die Website den aktuellen technischen Standards entspricht und keine HTML-Fehler aufweist.

Farben und Schriften

Für die Darstellung von Schriften auf Monitoren muss man auf Helligkeit und Kontrast achten. Farben mit ähnlicher Helligkeit oder Sättigung, die dicht nebeneinander liegen, erzeugen ein „Flimmern“ (z. B. gesättigtes Blau und gesättigtes Rot nebeneinander, siehe [1])

Bei der Hintergrundgestaltung ist natürlichen Pastelltönen sowie hellen Grau- und Erdtönen, gegenüber schrillen, gesättigten Primärfarben der Vorzug zu geben; Abgesehen von Bereichen, die besonders hervorgehoben werden sollen.

Für die Schrift sollte man dunklere Farbtöne verwenden, die sich deutlich vom hellen Hintergrund abheben. Bietet man allerdings Texte zum Ausdruck an, ist es besser, wenn dafür Texte auch in Schwarz zur Verfügung gestellt werden, da dies auf Papier besser zu lesen ist.

Weißer Hintergrund schwarze Schrift GUT

Pastellfarbener Hintergrund schwarze Schrift GUT

Weißer Hintergrund graue Schrift GUT

Pastellfarbener Hintergrund graue Schrift GUT

Roter Hintergrund blaue Schrift SCHLECHT

Bei Schriften in Webdokumenten muss man beachten, dass nicht jede Schriftfamilie für die Darstellung auf dem Bildschirm geeignet ist. „Times Roman“ ist zwar auf einem Ausdruck auf Papier gut lesbar, allerdings nicht die optimale Schrift auf Monitoren. Für den Monitor adaptierte Schriften wie „Times New Roman“ eignen sich zwar besser für die Darstellung am Bildschirm, sind aber dennoch für textlastige Webdokumente geeignet, die man eher ausdrucken würde, als sie auf dem Monitor zu lesen. Bildschirmschriften wie „Verdana“ und „Georgia“ eignen sich am besten für Webdokumente. Grundsätzlich lässt sich sagen, dass für die Darstellung am Monitor serifenlose Schriften („Verdana“, „Georgia“ etc.) besser geeignet sind. Schriften mit Serifen („Times New Roman“ etc.) sind hingegen besser im Druckbereich aufgehoben. Außerdem ist zu beachten, dass auf den unterschiedlichen Plattformen verschiedene Schriften installiert sein können. Am besten ist es, wenn man bei der Font-Angabe immer auch eine alternative Schrift dazugibt. (Beispielsweise könnte man die Macintosh-Schrift "Helvetica" in der Font-Angabe zusätzlich einfügen.)

Verdana wurde für den Bildschirm entwickelt und ist daher sehr gut auf Monitoren lesbar.

Times New Roman ist die bekannteste Serifenschrift. Besser für Ausdrucke geeignet.

Außerdem ist bei Webdokumenten zu beachten, dass sie, abhängig vom Computer und von den Bildschirmeinstellungen des/der NutzerInnen, immer anders dargestellt werden. Modernes Webdesign berücksichtigt diesen Umstand und bietet für alle möglichen Endgeräte und Einstellungen das beste Erscheinungsbild.

Bei der Erstellung von Webdokumenten ist auf die Einheitlichkeit der Schriften und Farben zu achten! Es sollten immer dieselbe Schriftfamilie, immer dieselben (wenigen!) Farben und Formatierungen für Hervorhebungen verwendet werden. Ansonsten wirkt die Website gleich unleserlich und sehr unprofessionell.

Oben genannte Beispiele finden Sie in korrekter, farblicher Darstellung unter http://mussswiki.idb.edu/iv/Webdokumente#Farben_und_Schriften.

Texte, Bilder und Videos

Informationen können auf Webseiten mit unterschiedlichen Möglichkeiten transportiert werden. Texte kommen am häufigsten vor und werden für Inhalte verwendet, die nicht bildlich dargestellt werden können wie. z.B. Produktinformationen oder Lebensläufe. Sie sprechen das rationale Denken an und sind daher für sachliche Argumente gut geeignet.

Bilder sprechen hingegen die emotionale Ebene an und werden von der/dem Betrachter/in unmittelbar aufgenommen. Bilder dienen nicht nur als schmückendes Beiwerk oder als Layoutelement, sondern sind in der Lage Emotionen zu wecken oder zu übermitteln. Natürlich können mit Bildern auch wichtige Informationen übermittelt werden wie z.B. in Infografiken.

!!!Infografik-Beispiel einfügen.!!!

Um Informationen noch schneller und emotionaler zu übermitteln, können Videos verwendet werden. Informationen lassen sich mit kurzen Info- oder Imagevideos noch schneller vermitteln. Der/die Betrachter/in des Videos braucht nicht aktiv nachdenken und wird emotional geführt. Dabei muss es nicht immer ein High-End-Video, sondern kann auch ein charmantes (oftmals verwackeltes) Video sein, welches mit einem Smartphone aufgenommen wurde. Dies trägt oftmals zur stärkeren Emotionalisieren bei.

Bilderquellen

Will man in Webseiten Bildmaterial einbauen, stellt sich die Frage, woher bekomme ich die Bilder? Es ist verlockend Bilder bei Google Bilder einfach mit copy und paste in die Webseite einzubauen. Das sollte man allerdings unterlassen, da in der Regel die Bilder (Fotos, Illustrationen, Grafiken, etc.) dem Urheberrecht unterliegen. Es ist immer der Urheber bzw. Rechteinhaber um Erlaubnis zu fragen, ob dieses Bild verwendet werden darf. Dies kann unter Umständen eine umständliche und langwierige Sache werden.

Um sicher zu gehen, ist es ratsam Bilder mit "Creativ-Commons-Lizenzen" zu suchen. Es gibt 6 verschiedene CC-Lizenzen:

!!! Bild einbauen !!!

Es ist allerdings auch hier zu beachten, dass Urheber und Lizenz genannt werden müssen.

Rechtliche Aspekte

Urheberrecht Datenschutz Cookie-Richtlinie

Literatur

Quellen

WEINMAN LYNDA, Insiderbuch.WebDesign.3,Midas, Zürich 2004

LYNCH J.PATRICK, HORTON SARAH, Hrsg. ROSDALE RAY M., Erfolgreiches Web-Design, Koch Media, München 2001

Weiterführende Links

• http://webstyleguide.com/
• http://www.castelligasse.at/Werbetechnik/Typografie/typografie.htm
• http://www.die-barrierefreie-website.de/

Zitiervorschlag

Bodenhofer in Höller, Informationsverarbeitung I, Gestaltung von Webseiten (mussswiki.idb.edu/iv1)