Die goldenen Regeln fürs Webdesign

1 | 17 Kommentare | 30203 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "Die goldenen Regeln fürs Webdesign" mit Ihrem Wissen!

Anzeige Hier werben

Einleitung

Der Grad zwischen gelungener und schlechter Website ist oft schmal. Innerhalb von Sekunden entschließt sich der Besucher, ob er weiter auf der Website bleiben möchte oder sie sofort wieder verlässt. Das kann eine inhaltlich hochwertige Website genauso treffen, wie eine, die nur spärliche Informationen bietet. Der Grund ist schlechtes Webdesign.

Im Internet gibt es auch einige Regeln und Grundsätze, die gutes Webdesign und somit ein positives Erscheinungsbild ausmachen. Eine Website muss grafisch nicht top aussehen, um den Besucher zu überzeugen. Schon die die Aufmachung und einige elementare Bedienelemente sind wichtig, um einen Besucher an die eigene Website zu binden.

Dieser Artikel soll Ihnen helfen Ihre Website nicht nur inhaltlich für den Besucher interessant zu machen, sondern auch eine Einführung in wichtige Bedienelemente einer Website sein. Außerdem zeigen wir Ihnen, worauf Sie beim Erstellen Ihrer Website achten sollten.

Markup

Das Markup ist das Grundgerüst einer Website. Es ist also der HTML-Code, der dem Nutzer letztendlich die fertige Website in einem Design auf den Browser bringt. Normalerweise sollte dieses fehlerlos sein, doch häufig werden im Markup einige Fehler gemacht. In diesem Abschnitt wollen wir Ihnen helfen diese abzustellen oder sie gar nicht erst aufkommen zu lassen.

Semantik

Eine, nach den Validatoren des W3Cs entsprechende, valide Seite muss nicht gleich auch den Standards entsprechen und insbesondere semantisch aufgebaut sein. Unter einem semantischen Aufbau versteht man den logischen Aufbau eines HTML-Dokumentes. Das bedeutet, dass z. B. Überschriften explizit als Überschriften, als mit dem <h1>-Tag, <h2>-Tag, etc. ausgezeichnet und Absätze als solche gekennzeichnet sind. Es sollte also eine gewisse Struktur im Markup erkennbar sein.

Dieses spielt insbesonders für die Barrierefreiheit einer Website eine entscheidende Rolle, da Screenreader, also Programme mit denen sich Blinde oder Sehschwache die Website vorlesen lassen, die Website besser erkennen und die Inhalte korrekt darstellen.

Insbesondere ist dieses auch bei Tabellendesigns problematisch, da Screenreader hierbei versuchen die Website als tabellarische Auflistung "darzustellen".

Validität

Zwar oft sogar von Profis missachtet, aber trotzdem ein häufig genanntes Argument ist die Validität. So bezeichnet man die Einhaltung von Standards, unter anderem in HTML und CSS.

Die Schaffer dieser Markup-Sprachen stecken hinter der W3C. Im übrigen kann man auf der Seite auch in die Standards einsehen.

Das einhalten der Standards ist insofern wichtig, da man so eine halbwegs gleichmässige Darstellung in verschiedensten Browsern erreichen kann, vor allem Browsern wie dem Firefox aber auch Opera, Safari und Co. ist dies schon sehr gut möglich, jedoch das Sorgenkind von Microsoft, der Internet-Explorer hat immer noch Probleme, auch bei korrektem Mark-Up.

Wie ein Dokument geprüft werden soll, wird vom Autor im sogenannten "DOCTYPE" angegeben, dabei ist wohl das verbreiteste Standard XHTML 1.0 Strict. Das XHTML 1.0 Strict ist sozusagen die festgelegte Syntaktik, wie der Programmiercode zu schreiben ist.

Heute werden Layouts nicht mehr in verstaubten Tabellen erstellt, sondern mit dem CSS Box-Modell. Dadurch wird erstens der Content vom Layout getrennt, sodass man es mit wenig Mühe übersichtlich editieren kann. Zweitens wird die benötigte CSS Datei im Head geladen. Das Surfen auf der Seite ist nun schneller, da die CSS Datei nun aus dem Cache gelesen wird.

Öffnet man eine Website, wobei die CSS-Wertzuweisung fehlt, sieht die Page in jedem Browser anders aus. Warum? Jeder Browser besitzt eigene Stylesheets, die immer geladen werden. Leider sind die internen Wertzuweisungen von Browser zu Browser unterschiedlich. Aus diesem Grund sollte man zu Beginn einer CSS-Datei alle Werte reseten.

Barrierefreiheit

Barrierefreiheit schließt sowohl Menschen mit und ohne Behinderungen, als auch Benutzer mit technischen (z. B. Textbrowser oder PDA) oder altersbedingten Einschränkungen (z. B. Sehschwächen) sowie Webcrawler ein, mit denen Suchmaschinen den Inhalt einer Seite erfassen.

Statistisch gesehen sind Menschen mit Behinderungen überdurchschnittlich häufig im Internet und dabei auf spezielle Aufbereitung der Webangebote angewiesen. Blinde und sehbehinderte Nutzer lassen sich Webseiten per Software vorlesen oder in Braille-Schrift ausgeben, gehörlose oder schwerhörige Menschen, benötigen auf sie zugeschnittene, besondere Darstellungsformen im Internet.

Zusätzlich zu der Berücksichtigung der Belange von Behinderten bedeutet „barrierefrei“ (behindertengerecht bezeichnet nur einen Teilaspekt), dass ganz allgemein niemandem Barrieren in den Weg gelegt werden sollen. Auch nichtbehinderten Nutzern soll nicht die Pflicht auferlegt werden, beim Abruf von Internet-Angeboten genau dieselbe Hard- und Softwarekonfiguration zu verwenden wie der Autor des Angebots (technische Barrierefreiheit). Neben der Zugänglichkeit (Accessibility) geht es auch um die Plattformunabhängigkeit – ein Internetangebot soll sowohl mit Bildschirm beliebigen Formats als auch mit PDA, Handy u. ä. nutzbar bleiben. Es soll unabhängig vom verwendeten Betriebssystem und von der Software funktionieren.

Mindestens ebenso wichtig ist, dass die Inhalte übersichtlich und in leicht verständlicher Sprache präsentiert werden. Barrierefreiheit umfasst auch, Anforderungen an Bildung, Ausbildung und intellektuelles Niveau zu stellen. Dieser Kontext ist insbesondere für die öffentlich-rechtlichen Webangebote bindend, um die Forderungen nach Gleichberechtigung auch von sprachlich in einem Land gehandicapten Menschen (von der Mehrheit abweichende Muttersprache) zu realisieren, erfasst aber auch die Probleme älterer Menschen, die nicht mit den Möglichkeiten und Methoden moderner Kommunikation aufgewachsen sind, und sozial benachteiligter Schichten.

Optik

Der erste Eindruck, der von einer Website vermittelt wird ist die Optik. Hierbei gilt es zum einen ein schönes Design zu haben, aber auch erkennbare und klare Strukturen zu schaffen, sodass sich der Nutzer schnell auf der Website zurecht findet und nicht lange nach den Inhalten suchen muss.

Doch oft übertreiben auch Webmaster bei der Wahl von Gestaltungsmitteln oder scheitern am Versuch ihren Text klar zu strukturieren.

Damit Ihnen diese Probleme erspart bleiben oder Sie bestehende Fehler verbessern können, gehen wir hier auf einige Gestaltungselemente der Website ein, die man auf jeden Fall beachten oder auch besser sein lassen sollte.

Farben

Zwar ist der Einsatz von Farben oftmals Geschmackssache, jedoch gibt es trotzdem Regeln, an die man sich halten sollte.

Besonderst das Verhältnis zwischen Hintergrund und Schrift ist bei der Erstellung zu beachten. In der Regel gilt: heller Hintergrund, dunkle Schrift. Das optimale ist ein weißer Hintergrund mit Schwarzer Schrift, jedoch kann man auch zum Beispiel einen beigen Hintergrund mit beispielsweise dunkelgrauer Schrift kombinieren.

Das wichtige dabei ist bloß, dass sich die Schrift vom Hintergrund abhebt und somit gut lesbar ist.

Demhingegen sollte man Farbkombinationen vermeiden, die sich beim betrachten mischen. Das wären zum Beispiel grün auf blau.

Außerdem sollten die Farben natürlich zum Thema der Seite passen. So sollte man auf einer Trauerseite keinen pinken Hintergrund wählen und auch eine Seite über Fußball könnte sich mit grün und weiß bestimmt sehr gut identifizieren.

Zusätzlich sollte an Besucher mit einer Farbsehschwäche gedacht werden. Menschen mit einer Rot-Grün-Schwäche werden beispielsweise Probleme haben roten Text auf grünen Hintergrund zu erkennen.

Direkt aus dem Haus Adobe kommt diese sehr hilfreiche Flashanwendung namens kuler, mit der sich online sehr schnell gute Farbkombinationen mischen lassen können.

Bild zu Die goldenen Regeln fürs Webdesign

Schrift

Beim Thema Schrift gibt es einige Punkte, die unbedingt beachtet werden sollten.

Unter anderem sollten auf Webseiten nur Standard Fonts verwendet werden. Zwar gibt es viele, teilweise schöne, freie TTF-Fonts im WWW. Manche sind sogar so schön, dass man sie am liebsten in der eigenen Webseite einbinden möchte. Jedoch sollte man bedenken, dass dann der Benutzer diese Schriftart installieren muss. Für CSS3 soll das zwar geändert werden, aber bis dahin sollte man die Finger davon lassen.

Ein Satz à la "Für die richtige Darstellung der Webseite laden Sie bitte die Schriftart X herunter." kann bei manchen Besuchern sogar dafür sorgen, dass er die Webseite direkt wieder verlässt.

Außerdem ist es sehr zu empfehlen, mehrere Schriftarten anzugeben. Oft wird dann eine Kombination dieser Art gewählt: "font-family: arial, "Helvetica", sans-serif;". Ist die Schriftart Arial nicht auf dem Rechner des Besucher installiert, wird die nächste probiert, im diesem Beispiel Helvetica. Wenn Helvetica nicht vorhanden ist, so wird eine serifenlose Schriftart gewählt.

Wenn dann die passende Schriftart gefunden ist, geht es mit der Schriftgröße weiter. Sie sollten dabei darauf achten, welche Zielgruppe Sie anstreben. Falls Sie also eine Seite mit der Zielgruppe "Senioren" anstreben, sollten Sie eine hohe Schriftgröße wählen, bei einer jungen Zielgruppe darf die Schrift auch mal etwas kleiner sein.

Für längere Texte sollte man eine Schriftart wählen, die man leicht lesen kann. In Büchern werden immer Schriftarten mit Serifen gewählt um ein einfaches Lesen zu garantieren. Auf Webseiten muss man es ausprobieren, da einige Faktoren, wie die Schriftart , die Schriftgröße und das womögliche Anti Aliasing des Browsers wichtige Rollen spielen.

Desweiteren sollten Sie innerhalb einer Webseite weder die Schriftart, noch die Schriftfarbe wechseln.

In diesem Artikel der Webmasterpro Webanalyse, erfasst diese erstmals in einer repräsentativen Statistik die Verbreitung von Schriftarten auf User-Seite im (deutschsprachigen) Netz und stellt neue Alternativen zu Verdana, Arial & Co vor.

Bild zu Die goldenen Regeln fürs Webdesign
Arial MT

Usability

Eine Internetseite muss wie jedes andere technische Hilfsmittel bestimmten Anforderungen gerecht werden, um benutzerfreundlich zu sein. Es gilt, die Darstellung der Inhalte an die menschliche Aufnahmefähigkeit anzupassen.

Wahrnehmung

Der bei weitem größte Teil der Informationen über die Außenwelt (etwa 80 %) erreicht den Menschen über die Augen. Es ist wesentlich einfacher, Informationen zu verarbeiten und zu behalten, die eine bekannte Struktur aufweisen, weil damit ein Wiedererkennungsprozess stattfindet.

Zu viele Informationen überlasten das kognitive System. Durch Abstraktion, Filterung und das Erkennen von kausalen Beziehungen werden Sinneseindrücke bewertet und sortiert.

Es kommen Störfaktoren hinzu, die diese Zahl mindern können. Es gilt, sich ein Zwischenziel zu merken, man ist möglicherweise demotiviert, hat schlechte Laune, steht unter Stress, ist müde, alkoholisiert, etc.. Zudem reicht die Erinnerung beim Surfen nicht weiter als ca. 4–5 Bildschirmseiten zurück. Im Schnitt bleiben drei bis fünf begriffliche Einheiten im Kurzzeitgedächtnis.

Gestaltungsaufgaben

Die Aufgabe einer Web-Seite ist immer zuerst, den Bedürfnissen des Kunden nachzukommen. Der Kunde möchte informiert werden, unterhalten werden, oder etwas kaufen. Um das so gut wie möglich zu gewährleisten, muss die Seite eindeutig ihren Inhalt vermitteln. Die Informationen sollten in eindeutigen Hierarchien klar dargestellt und sinnvoll gruppiert sein. Die Seite muss schnell sein, da der Benutzer ungeduldig ist und schnell an Informationen gelangen möchte. Das Ziel ist eine möglichst große Verarbeitungstiefe, gemeint ist eine möglichst starke Erinnerung an das Gesehene.

Die Bedienung wird durch Standards, wie ein festes Layout oder eine feste Terminologie vereinfacht. Durch die Aktivierung bereits erlernter Vorgehensweisen zu Bedienung technischer Systeme wird eine intuitive Bedienung ermöglicht.

Aufmerksamkeit

Die Aufmerksamkeit anregend wirken intensive Farben, starke Kontraste, scharfe Konturen sowie komplexe Formen und Elemente die eine intellektuelle Auseinandersetzung anregen. Das Andere sticht hervor. Augenfreundlich und angenehm sind dagegen große Flächen, Pastelltöne sowie gedeckte, gebrochene oder abgedunkelte Farben. Besondere „Eye Catcher“ sind hochgesättigtes Rot und Warnfarben wie Schwarz und Gelb, Animationen, Gesichter, Augen, das Kindchenschema oder sexuelle Darstellungen. Treten zu viele dieser die Aufmerksamkeit anregende Elemente auf, wirken sie wieder ablenkend.

Gestaltung

Durch einen klaren Aufbau und einfache Bedienung soll die Seite so zugänglich wie möglich gemacht werden und dem Nutzer möglichst schnell die gewünschten Informationen vermitteln.

Konventionen

Es bestehen bestimmte gestalterische Konventionen (vgl. oben Gestaltungsaufgaben), die immer wiederkehren und deshalb vom Benutzer vermutet bzw. vorausgesetzt werden. In westlichen Kulturen wird ein Textfluss von links nach rechts erwartet. Objekte haben Bedeutung entsprechend ihrer Größe. Oben auf der Seite steht das Wichtigste.

Lesestile

Die Seite muss unterschiedlichen Leseanforderungen gerecht werden. Nutzer mit schwebender Aufmerksamkeit haben einen uneindeutigen Blick auf den Gesamtinhalt und „scannen“ im Text nach den hervorstechendsten Stellen. Dabei erfassen sie etwa 50 % des Inhalts. Ein Nutzer mit fokussierter Aufmerksamkeit filtert das Wahrgenommene. Er „skimmt“ nach einem konkreten Suchbegriff und erfasst dabei ca. 30 % des Gesamtinhaltes. Eine besonders abwechslungsreiche Präsentation erfreut so den ersten Lesertyp, deprimiert aber den zweiten.

Das Lesen von Texten am Bildschirm ist schwieriger als das Lesen in Büchern oder Magazinen. Überschriften sollten wie in jedem Text aber in diesem Fall noch stärker, ein Destillat des Inhalts sein und keine Wortspiele oder Ironie enthalten. Es ist weiterhin günstig wichtige Informationen im ersten Wort oder Anfang des Textes auszudrücken. Das Scannen wird weiter erleichtert wenn nicht jede Seite mit demselben Wort beginnt, generell eine markante Struktur erkennbar ist. Schlüsselreize beim Scannen sind Begriffe wie News, Börse, Travel, Geld, Digital, Jobs, Mobil, etc..

Zudem sollten Texte nicht im „Broschürenstil“ verfasst werden, die keine nützliche Information erhalten und die Bedürfnisse des Nutzers nicht befriedigen. „Wir sind ein fortschrittliches, Unternehmen der XY-Branche, das die neuesten Entwicklungen in der Informationstechnologie kreativ für seine Kunden nutzt.“

Lesbarkeit

Zur Erhöhung der Lesbarkeit tragen viele Einzelelemente bei.

  • Kontrast zwischen Text und Hintergrund: Den besten Kontrast bietet schwarze Schrift auf weißem Grund.
  • Hintergründe sollten einfarbig sein, nicht ablenken oder nur dezente Muster haben.
  • Statischer Text (kein Blinken oder Ändern der Größe)
  • serifenlose Schriften besonders bei kleinen Texten (Verdana, Arial)
  • Hervorhebungen im Text wie Unterstreichungen und Großschreibung ganzer Worte sparsam verwenden

Navigation

Die Navigation soll schnell erkennbar und nachvollziehbar sein. Das wird durch Breadcrumbs und einen wenig verschachtelten Aufbau erleichtert. Es sollten keine alternativen Terminologien verwendet werden, die von den Konventionen abweichen und den Nutzer zu sehr verwirren.

Wissenswertes

Der Disclaimer-Irrtum

Häufig trifft man beim Surfen im Netz, oft bei Linksammlungen, auf etwa folgenden Text:

In einem Urteil des Landgerichtes Hamburg vom 12. Mai 1998 hat das Landgericht entschieden, dass man ggfs. für verlinkte Websites mit zu haften hat und es nur verhindern könnte, wenn man sich eindeutig davon distanziert. Hiermit distanzieren wir uns ausdrücklich zu allen gelinkten Websites und [...]

Ein Webmaster könnte sich durch Abmahnwellen leicht verunsichert fühlen und denken, dass er dazu verpflichtet ist einen Hinweis anzubringen, da er sonst für die Inhalte gelinkter Websites haftbar gemacht werden könnte.

Doch dieses Urteil hat es so nie gegeben und der Richterspruch wird zudem falsch interpretiert. Die Parteien einigten sich in einem Vergleich und so wurde das Urteil nie rechtskräftigt. Außerdem stellten die Richter fest, dass man sich nicht unbedingt von Links distanzieren kann, wenn man sie z. B. bewusst setzt, um eine Person zu verletzen oder verleumden.

Weiter ist bei diesem Text auch anzuzweifeln, ob man wirklich das Besagte ausdrücken will. Schließlich empfiehlt man doch in erster Linie zum Beispiel Bücher oder Websites weiter, die einem gefallen. Warum sollte man sich im nächsten Schritt davon gleich distanzieren? Das klingt schon etwas fragwürdig.

Wenn Sie also guten Gewissens Websites weiterempfehlen, also verlinken, braucht es auch keinen Disclaimer.

Folgende Links befassen sich außerdem mit dem Thema und könnten Interessant für Sie sein:

www.w3.org - Die Website des World Wide Web Consortium - Alle Infos zu Webstandards und Co.


Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 8 Personen an der Seite "Die goldenen Regeln fürs Webdesign" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "Die goldenen Regeln fürs Webdesign" hier bearbeiten.


Kommentare: Die goldenen Regeln fürs Webdesign

Neuen Kommentar schreiben
Webdesign Tipps
Beantworten

Hi ihr Webmaster!

toller Beitrag, finde die Tipps sehr nützlich!
Falls jemand von den Lesern Hilfe bei einer Webseite braucht biete ich gerne meine Hilfe an, bin Webdesigner aus Karlsruhe.

http://www.claudioemnet.de/

Claudio am 18.09.2015 um 20:14
Ergänzt, Erweitert und Veröffentlicht - Freiwillige mit Bildern vor! :-P
Beantworten

Noch eine Baustelle weniger.... Aber wie unten schon diskutiert wären ein paar Veranschaulichungen nicht schlecht. Wer also was visuell Passendes dazu beitragen möchte, nur zu :-)

Wolfgang Schneider am 07.01.2010 um 14:05
"Gesetze" -Titel
Beantworten

Ich würde euch hier "Rechtsgrundlage" Vorschlagen, dann könnte man auf Rechte in und außerhalb Deutschlands was schreiben.
Zum Beispiel der Deutschen Impressums-pflicht etc.

Roman Martin am 10.07.2009 um 13:03
Re: "Gesetze" -Titel
Beantworten

Mit dem "Gesetzte" meinte ich eher Regeln fürs Webdesign, zum Beispiel bestimmte Anordnungen o.ä.

Markus Stahmann am 23.11.2009 um 19:00
Re: "Gesetze" -Titel
Beantworten

Schade das der Artikel immer noch nicht öffentlich abrufbar ist :(

Fabian Ziegler am 23.11.2009 um 19:24
Re: "Gesetze" -Titel
Beantworten

Habe den auch erst durch einen Änderungsnachweis wieder gefunden ;) Werde mich die Tage mal dran setzen, wenn ich Zeit habe. Kann sonst jemand noch mit dran arbeiten?

Markus Stahmann am 24.11.2009 um 17:31
Re: "Gesetze" -Titel
Beantworten

eigentlich gibt es keine goldenen Regeln fürs Webdesign. :)

meggs am 23.11.2009 um 21:07
Re: "Gesetze" -Titel
Beantworten

oh - lol - das sagte ich bereits. siehe unten. *g*

meggs am 23.11.2009 um 21:08
Re: "Gesetze" -Titel
Beantworten

Naja es gibt dennoch Grundsätze an die man sich halten sollte, ähnlich wie der goldene Schnitt, von daher passt das schon finde ich.

Fabian Ziegler am 24.11.2009 um 10:00
Re: "Gesetze" -Titel
Beantworten

jein. gerade das brechen von regeln macht doch design erst interessant. aber da ist man ganz schnell bei einer kunstdebatte. :P

das hier sowieso "tipps".

meggs am 24.11.2009 um 15:05
Re: "Gesetze" -Titel
Beantworten

Irgendwo hatte ich mal gelesen, dass es so eine Art geheimes Gesetz ist, dass man oben rechts meist eine Meta-Navigation mit Startseite, etc. hat. An sowas habe ich da gedacht ;)

Markus Stahmann am 24.11.2009 um 17:32
Bilder
Beantworten

Einige Bilder für den Artikel wären noch toll. Wenn ihr mir sagt, welche Bilder oder Illustrationen benötigt werden kann ich gerne welche erstellen.

Fabian Ziegler am 23.10.2008 um 10:56
Re: Bilder
Beantworten

Irgendwie einen grundsätzlichen Aufbau einer Website, aber ich würde sagen, dass man das vielleicht macht, wenn der Artikel fertig ist?

Markus Stahmann am 06.11.2008 um 12:36
Re: Bilder
Beantworten

an sich sagt der artikel ja nur was überall in den artikeln in "entwicklung" drinsteht - was ich jetzt überflogen habe

und artikel über semantik, barrierefreiheit etc gibts es schon - fehlen tut glaub ich nur noch ein artikel über validität. fände es also besser dass man einen übersichtsartikel anfertigt was man alles in modernem webdesign beachten sollte.

die überschrift halte ich für problematisch. besonders aus dem grund, dass es im webdesign schliechtweg keine goldenen regeln gibt.

meggs am 23.10.2008 um 16:31
Re: Bilder
Beantworten

Ja meiner Meinung nach fände ich auch solch eine Übersicht sinnvoll, ich werde den Artikel auch noch weiter ergänzen. Um die einzelnen Themen ausführlich zu behandeln, das würde den Artikel sprengen, deshalb fände ich da dann Links sinnvoll.

Markus Stahmann am 06.11.2008 um 12:37
Re: Bilder
Beantworten

Was hat das mit meinem Kommentar zu tun? :)

Fabian Ziegler am 23.10.2008 um 20:57
Re: Bilder
Beantworten

nichts - aber so wirst auch du (als admin benachrichtigt) :)

meggs am 23.10.2008 um 21:00