Exit

Das Thema Webdesign ist sehr umfangreich und kann hier nur angerissen werden (vgl. Rohles, 2013).

Wichtige Aspekte für das Webdesign – hierarchisch geordnet

Auf Basis der Bedürfnis-Pyramide nach Maslow hat Aaron Walter (Rohles, 2013, S. 29 f.) die wichtigen Aspekte eines guten Webdesigns dargestellt.

  • Funktionalität:
    Eine Website muss vor allem funktional sein hinsichtlich Lesbarkeit (Typografie, Farben), der Hauptfunktionen und evtl. der Barrierefreiheit.
  • Zuverlässigkeit:
    Dies meint, dass sie stets erreichbar, verlässlich und vertrauenserweckend sein soll. Hierzu gehören die Server-Geschwindigkeit und die Ladezeit der Website.
  • Benutzbarkeit/Usability (siehe Abschnitt „Usability“)
  • Emotionalität:
    Emotionen (siehe Kapitel „Aufbau guter Gefühle“, S. 67) können durch gutes Design und gute Bilder verstärkt transportiert werden. Beim Logo der Franz-Fischer-Hütte sollte B. die durch das Holz erzeugte Wärme und das Wohlbefinden vermittelt werden, dementsprechend wurden die Farben des Logos und der Homepage gewählt.
  • Engagement:
    der User möchte sich interaktiv einbringen, er möchte selbst Content erstellen, teilen, in Dialog treten.

1. Elemente im Header

  • Website-Kennung:
    Das Logo befindet sich fast immer oben links.
  • Navigation:
    Dies meint die verschiedenen Sektionen/Themencluster einer Website. Die Anzahl der Navigationspunkte richtet sich nach der Miller’schen Zahl, wonach der Mensch maximal sieben (plus/minus zwei) Informationen gleichzeitig im Kurzzeitgedächtnis verarbeiten kann. (vgl. Rohles, 2013, S. 90)
  • Suchmöglichkeit:
    Hier ist eine Volltextsuche gemeint, die es dem User erleichtert, Inhalte zu finden. Nur sehr kleine Websites können auf die Suchmöglichkeit verzichten.
  • Struktur:
    Die Struktur soll möglichst flach gehalten werden, d. dass man nicht unendlich viele Unterstrukturen/Subnavigationspunkte schaffen, im Idealfall nicht mehr als drei Gliederungsebenen verwenden soll. (vgl. Rohles, 2013, S. 89) Konkret bedeutet das, dass der User mit 3 Klicks bei der gesuchten Seite sein soll.

2. Responsive Webdesign

Immer mehr User greifen über mobile Endgeräte auf die Websites zu. Das erfordert aber auch, dass die Websites für mobile Endgeräte adaptiert sind. Die meisten Content Management Systeme (CMS) bieten schon automatisch Lösungen für responsive Webdesigns mit an.

Responsive Webdesign meint eine flexible Anpassung der Inhalte (Menü) an spezifische Gegebenheiten (verschiedene Endgeräte). (vgl. Rohles, 2013, S. 99 ff.), meint aber nicht eine eigens erstellte Website für mobile Endgeräte.

3. Typografie/Schrift

  • Schrifttypen:
    Man tendiert dazu, serifenlose, einfache, gut lesbare Schriften zu verwenden. Für Überschriften kann man kreative/ungewöhnlichere Schriften verwenden, um Aufmerksamkeit zu erzeugen.
  • Schriftgröße:
    Prinzipiell sollen die Überschriften größer sein als der Fließtext. Derzeit ist ein Trend hin zu größeren Schriftgrößen zu bemerken – ab 14 bis 16px im Fließtext.
  • Zeilenlänge:
    „Eine optimale Zeile fasst zwischen 50 und 80 Zeichen.“ (Rohles, 2013, S. 224) Das bedeutet, dass man nie die ganze Breite eines Bildschirms mit Text füllen soll.
  • Zeilenabstand:
    Den Zeilenabstand definiert man über die aktuelle Schriftgröße. Ein guter Richtwert ist 1.4em.

4. Bilder

Bilder sind für Websites wichtig, da der User in Suchmaschinen vieles nach Bildern auswählt und auf der gewünschten Website mehr scannt als liest und demnach bei guten, großen Bildern „hängen“ bleibt. Man muss aber auch bedenken, dass Websites immer häufiger über mobile Endgeräte betrachtet werden, das bedeutet, dass große Bilder die Seite dann oft unübersichtlich und unnötig langsam machen. Daher ist die Verwendung von großen Bildern auf der Startseite oder in einer eigenen Kategorie „Galerien“ sinnvoll, hingegen sollte bei reinen Inhaltsseiten mit Bildern sparsam umgegangen werden.

  • ACHTUNG: Urheber- und Nutzungsrechte müssen immer geprüft werden!
  • Dateiformate: Es gibt verschiedene Formate mit verschiedenen Vor- und Nachteilen. Die gängigsten Formate fürs Web sind gif, jpg oder png.
  • Auflösung: Lang galt der Mythos, dass Bilder im Web eine Auflösung von 72 dpi (dots per inch) haben sollten. Das stimmt nicht und solche Bilder sind im Web oft sehr unscharf (vgl. Rohles, 2013, S. 315). Allerdings spielt die Bildabmessung eine Rolle. 72 dpi ist in diesem Zusammenhang durchaus ein guter Richtwert, damit die Bilder nicht eine zu große Datenmenge haben.
  • Bilder sollen mit einem ALT-Text versehen sein, das ist der Text, der ausgespielt wird, wenn das Bild nicht angezeigt wird. Das ist für SEO wichtig.

5. Farben

Farben im Web sind ein wichtiges Gestaltungsmittel. Das Thema der Farbenlehre und des richtigen Einsatzes von Farben ist wiederum sehr umfangreich. (vgl. Rohles, 2013, S. 244 ff.)

Prinzipiell unterscheidet man auf einer Website zwischen folgenden Farbtypen, die miteinander und mit dem Logo der Website harmonieren sollen.

  • Grundfarben sind die Hintergrund- und die Textfarbe. Meist Schwarz (oder ein dunkler Grauton) auf weißem Hintergrund.
  • Primärfarbe ist die erste Farbe, um bestimmte Inhalte oder Elemente hervorzuheben. Meist ist dies eine Farbe aus dem Logo.
  • Akzentfarbe: Hyperlinks und andere Elemente sollen für den User optisch hervorgehoben sein, das passiert meist durch die Verwendung einer Akzentfarbe, die oft die Primärfarbe ist.

Literatur:

Rohles, B. (2013). Grundkurs Gutes Webdesign (1. Ausg.). Bonn: Galileo Design.

Close
Go top