Erscheinungsbild

Das Erscheinungsbild ist eines der wichtigsten Bestandteile zur Planung einer Website. Wir werden hier einige Grundlagen für das Erscheinungsbild festlegen und im nächsten Thema mit der konkreten Planung und Konzeption des Webdesigns weitermachen. Doch nun wollen wir erst einmal ein paar Grundlagen setzen.

Als Erscheinungsbild bezeichnet man die Erscheinung, also wie etwas angezeigt werden soll, einer Seite auf einer Website. Dabei ist vor allem darauf zu achten, dass das Erscheinungsbild auf allen Webseiten einer Website gleich ist, da die Website andernfalls unruhig und nicht professionell aussieht. Die Kunst ist es, beim Programmieren eines Webdesigns, eine Grundlage zu schaffen, die später einfach und ohne viel Aufwand angepasst werden kann.

Schrift

Die Wahl der Schriftart ist nicht immer einfach, aber man sollte sich genauestens überlegen, welche Schriftart man verwenden möchte. Die Schriftart sollte einheitlich sein und auf jeder Seite verwendet werden. Auch Überschriften und Texte sollten grundsätzlich in der gleichen Schriftart sein. Für Schriftzüge, Banner oder ähnliches ist es jedoch sogar zu empfehlen, eine andere Schriftart zu verwenden. Falls Sie bereits über Dokumente oder Briefpapiere verfügen, sollten Sie darauf achten, dass auch hier die gleiche Schriftart verwendet wird.

Ein wichtiger Punkt bei der Wahl der Schriftart ist die Kompatibilität zu verschiedenen Betriebssystemen, denn wir wollen ja, dass die Schriftarten auf allen Computern gleich dargestellt werden. Hierfür gibt es einige sogenannte web-feste Schriftarten. Hierzu zählen Arial, Verdana, Helvetica, Sans-Serif, Times und Times New Roman. Bei Times und Times New Roman handelt es sich um sogenannte Serifen-Schriften. Diese Schriftarten verfügen über feine Linien am Ende eines Buchstabenstrichs quer zur Grundrichtung. Umgangssprachlich spricht man von Schnörkeln. Bei den anderen Schriften handelt es sich um sogenannte serifenlose Schriften, welche meistens beliebter sind, da Sie einfacher zu lesen sind.

Für informelle Websites ist daher auf jeden Fall eine der oben genannten Schriften zu empfehlen. In anderen Fällen sind evtl. andere „ausgefallenere“ Schriften von Nöten. Auch für Schriftzüge und Banner sind durchaus ausgefallene Schiften notwendig. Doch wie verwendet man diese, wenn Sie nicht web-fest sind? Eine Möglichkeit wäre der Import von Schriftarten mittels CSS. Zu beachten gibt es jedoch, dass dies bei manchen Browsern nicht immer funktioniert. Ebenfalls kann es vorkommen, dass unter einem bestimmten Betriebssystem das Format für die Schriftart nicht richtig gelesen werden kann. Eine weitere Möglichkeit, die auf dem gleichen technischen Prinzip basiert, jedoch das Kompatibilitätsproblem umgeht, bietet Google mit Google Fonts an. Eine weitere Möglichkeit, welche jedoch nicht immer passend ist, ist die Verwendung von Bildern, d. h. Sie erstellen z. B. einen Banner oder Schriftzug mit Hilfe eines Grafikprogramms (in welchem die gewünschte Schrift verfügbar ist) und exportieren das Ganze im Anschluss als Grafik.

Farben

Die Auswahl der Farben spielt für eine Website ebenfalls eine große Rolle. Zu viele oder zu unterschiedliche Farbe führen zur Verwirrung. Nur zwei Farben hingegen wirken schlichtweg langweilig und einfallslos. Ein erster Schritt bei der Farbauswahl ist die Auswahl von ein bis maximal drei verschiedenen Grundfarben, welche als Basis dienen sollen. Hierbei sollte man sich aber auch über die jeweilige Bedeutung der Farben (Farbsymbolik) Gedanken machen. So steht z. B. grün für Natur, Hoffnung und Ökologie, blau für Himmel und Wasser, rot für Liebe und Gefahr und gelb für Sonne und Adel. Vielleicht haben Sie sich schon mal gefragt, warum ein Grauton gerne als Hintergrundfarbe verwendet wird. Dafür gibt es mehrere mögliche Gründe: Zum einen wäre dies, dass grau eine leichte Farbe ist und vor allem zu schwarz und weiß ganz gut passt, zum anderen könnte diese Auswahl aber auch von der Bedeutung dieser Farbe kommen, denn grau steht u. A. für Weisheit und Sachlichkeit.

Nachdem wir unsere Grundfarbe(n) ausgesucht haben, müssen wir überlegen wie wir nun die anderen Farben wählen. Dazu gibt es nun verschiedene Farbregeln: ähnliche Farben (ähnliche aneinander angrenzende Farbtöne), monochrome Farben (gleicher Farbton mit unterschiedlichen Sättigungs- und Helligkeits-Werten), Triade-Farben (drei unterschiedliche Farbtöne im gleichen Abstand mit zusätzlicher Verwendung von unterschiedlichen Sättigungs- und Helligkeits-Werten), komplementäre Farben (zwei „gegenüberliegende“ Farbtöne mit zusätzlicher Verwendung von unterschiedlichen Sättigungs- und Helligkeits-Werten) und Schattierungs-Farben (gleicher Farbton und Sättigung mit unterschiedlicher Helligkeit). Bei der Auswahl von Farben werden Sie immer wieder auf verschiedene Farbmodelle stoßen: RGB (Red, Green, Blue), HSV (Hue, Saturation, Value) und HSL (Hue, Saturation, Lightness). Die „Helligkeit“ wird beim HSV-Farbraum, welcher für die Auswahl von Farben am praktischsten ist, üblicherweise als Dunkelstufe bezeichnet. Ein Tool, welches uns beim Erstellen eines Farbschemas hilft, stellt Adobe mit Adobe Color CC kostenlos als Web-Applikation zur Verfügung. Hier werden die Farbwerte mittels RGB-Modell und HSV-Modell (Farbkreis) ausgewählt. In Websites bzw. in deren Stylesheets erfolgt die Angabe einer Farbe meistens mit dem RGB-Modell. Die gewählte Schreibweise ist hier oft die hexadezimale Angabe (#RRGGBB). Mehr zu den unterschiedlichen Farbmodellen und der Umrechnung zwischen den Modellen finden Sie im Kapitel Weiterführendes auf unserer Website.

Auch bei den Farben kann es natürlich sein, dass Sie sich die Farben nicht aussuchen können, da diese bereits durch andere Dokumente oder Richtlinien vorgeschrieben sind. Diese sollten Sie dann natürlich übernehmen, denn die Farben müssen natürlich durchaus zu anderen Dokumenten und / oder zum Logo passen.

Icons und Grafiken

Die Verwendung von Icons, Bilder und Grafiken ist für eine schöne und moderne Website unumgänglich. Denn seien wir mal ehrlich, wer liest sich schon gerne einen langen Text durch, wenn kein einziges Bild darin enthalten ist?

Gerade in der heutigen Zeit werden Sie auf immer mehr Websites treffen, bei denen viele Icons zu finden sind. Aber warum das Ganze? Es ist einfacher: Wenn wir z. B. auf einer Firmenwebsite sind und mit dieser Kontakt aufnehmen wollen, dann klicken wir einfach auf das Icon mit dem Telefon oder dem Brief. Das Icon sehen wir gleich, da es uns ins Auge fällt. Wir müssen also nicht lange nach einem Link mit der Beschriftung „Kontakt“ suchen. Ein Landkarten-Icon z. B. ersetzt den Link mit der Aufschrift „So erreichen Sie uns“ oder „Anfahrt“. Das Dateiformat für solche Icons sind zumeist PNG oder auch SVG (Vektor-Grafiken). Bei den sogenannten Favicons (das ist das Icon, welches in der Titelleiste des Browsers neben dem Webseitentitel angezeigt wird), wird auch oft auf den Microsoft Dateityp ICO zurückgegriffen.

Neben Icons gibt es noch Bilder und Grafiken. Gängige Dateiformate sind hier PNG, JPG oder GIF. GIF wird jedoch heutzutage fast nur noch für animierte Bilder und Grafiken verwendet. Vorteil von PNG im Vergleich zu JPG ist, dass PNG-Bilder über einen Alphakanal verfügen können und somit Teile des Bildes transparent sein können. Das Spektrum von möglichen Bildern und Grafiken ist groß: Zeichnungen, fotografiertes Bild, Logos, Banner, Schriftzüge, Diagramme und vieles mehr. Auch der Einsatz solcher Daten ist völlig unterschiedlich. Eine wichtige Grafik, die sich auf jeder Seite wiederfinden sollte, ist ein Logo, Banner oder Schriftzug.