Im Hightech Journal: Webpublisher-Guide fasse ich das zusammen, was ich im Laufe der letzten Jahre im Internet über Webgestaltung gelernt bzw. recherchiert habe. Der zweite Teil behandelt die Grundsätze die ihr beim Design eurer Webseite beachten solltet.

Webpublisher-Guide

2. Design

Das Design verkörpert den Charakter eurer Webseite. Ihr könnt durch verschiedene Designs unterschiedliche Publikumsgruppen ansprechen. Über ein besonders farbenfrohes Aussehen freuen sich vor allem die jüngeren Besucher, während eine elegante Form und Farbenwahl den Geschäftspartnern und Kunden einen seriösen Eindruck vermittelt. In allen Fällen sollte jedoch für optimale Lesbarkeit und die übersichtliche Darstellung eurer Seiteninhalte gesorgt sein.

2.1. Corporate Design
Einheitlichkeit ist einer der wichtigsten Punkte für euren Webauftritt. Verwendet bei gleichen Seitenelementen auch stets dieselbe Schriftart und -form. Zum Beispiel sollten alle Überschriften in Arial, 16pt und blau sein, während der normale Text ebenfalls in Arial, jedoch 12pt und schwarz ist. Ein weiterer wichtiger Punkt: Weniger ist mehr. Variieret nicht zuviel zwischen Formen und Farben, sondern gebt euren Besuchern ein einheitliches Bild eurer Seite. Denn neben Namen und Logo steigert auch das Design den Wiedererkennungswert eurer Webpräsenz.

2.2. Farbenlehre
Das Herz des Designs sind seine Farben. Indem ihr auf die richtige Farbwahl achtet, könnt ihr eurem Publikum bestimmte Inhalte besser vermitteln. Farben erzeugen Stimmung und stehen symbolisch für verschiedene Gemütszustände. Daher sind sie nicht zu unterschätzen. Ein Besucher der auf eine schlecht lesbare und mit unpassenden Farbverläufen dargestellte Seite kommt, fragt sich dann auch erst einmal was der Regenbogen hier soll. Damit euch das nicht passiert, möchte ich euch ein paar grundlegenden Dinge der Farbenlehre etwas näher erläutern.

2.2.1. Farbsymbolik
Farben werden mit Gefühlen, Worten und Gegenständen assoziiert. Klug eingesetzt, kann dies für euch äußerst praktisch sein. Nutzt deshalb Farben, die das Thema eurer Seite unterstreichen. Zum Beispiel kann Gesundheit und Wellness mit Grün und Blau in Verbindung gebracht werden, während bei Nachrichten oftmals an Grau, Weiß oder Schwarz gedacht wird.

Dabei ist auch die Kombination der Farben von großer Bedeutung. Die Interpretation einer Hauptfarbe hängt größtenteils von ihrer Nebenfarbe ab.

Beispiel: Blau in Verbindung mit helleren Blautönen erinnert an Wasser und Meer, während es zusammen mit Schwarz auch für die Nacht stehen kann.

2.2.2. Signalsetzung:
Durch die farbliche Zusammensetzung einer Webseite können für Besucher bestimmte Signale gesetzt werden. Sie können hierdurch auf bestimmte Teile der Seite aufmerksam gemacht werden. Der Besucher soll sich so schnell auf eurer Webseite zurechtfinden können. Bestenfalls sollten informative Texte und die Seitennavigation hervorgehoben werden. Wenn euer Publikum ewig lange das Gesuchte nicht findet, verliert es womöglich das Interesse und sieht sich lieber bei der „Konkurrenz“ um. Daher gilt: Sorgt mithilfe der Farben für Übersichtlichkeit!

Als weitere Informationsquelle über die Farbenlehre kann ich euch die Seite metacolor.de empfehlen. Hier findet ihr zahlreiche Theorien und Umfragen im Bezug auf dieses Thema.

2.3. Favicon
Sicherlich habt ihr schon einmal die kleinen Webseitensymbole neben der Adressleiste des Internetbrowsers bemerkt. Diese kleinen Logos sind die sogenannten Favicons. Sie werden neben der Adressleiste, in den Favoriten und an vielen weiteren Stellen angezeigt. Dies sorgt in weiterer Folge zu einer Steigerung des Wiedererkennungswertes. Warum sollte ihr dieses kleine Symbol also nicht auch bei euch einsetzen?

Dafür erstellt ihr eine kleine Grafik mit 16×16 oder 32×32 Pixel und wandelt diese am besten über den Konverter von Webmaster-Elite.de um. Danach ladet ihr die kleine .ico-Datei auf euren Webspace hoch und verlinkt mittels

<link rel="shortcut icon" href="Euer-favicon.ico" />

darauf. Beachte dabei, dass sich der oben genannte Tag im Head-Bereich eurer Webseite befindet. Anschließend sollte das Favicon auch bereits im Browser zu sehen sein.

Teil 3 handelt von der Umsetzung eurer Ideen und die Möglichkeiten die euch hierfür zur Verfügung stehen