Grundlagen Webdesign

Die Unternehmenshomepage mit einem guten Webdesign ist ein zentraler Bestandteil der Online-Kommunikation. Auf der Homepage kann ein Unternehmen vielfältige Informationen und Dokumente zur Verfügung stellen. Der Nutzer besucht eine Webseite aus eigenem Bestreben (Kommunikationspull). Es ist deshalb von hoher Bedeutung, dass die Inhalte auf der Webseite für den Nutzer von subjektiver Bedeutung und Wertigkeit sind. Dazu zählen Inhalt, Layout und Struktur der Webseite.

Für die Webseite müssen besondere und hohe Anforderung gelten. Diese zu erfüllen, beginnt bei der Konzeption, geht über die Umsetzung bis hin zur Pflege der Webseite.
Früher oder später kommt jeder Kunde über eine Suchmaschine oder direkte Eingabe der Adresse auf die Webseite. Sie hat dadurch nicht nur einen funktionalen Charakter, zum Beispiel zur Bereitstellung von Produktinformationen oder dem Betreiben eines E-Shops, sondern prägt das Erscheinungsbild und Image des Unternehmens. Wie eine Webseite wahrgenommen wird, entscheidet daher auch über einen möglichen Kauf oder Kontakt seitens des Kunden/ Nutzers. Der erste Eindruck zählt und zahlt sich in einigen Fällen für das Unternehmen aus.

Um die Wahrnehmung einer Webseite positiv zu beeinflussen und eine Webseite benutzerfreundlich zu gestalten, müssen folgende Aspekte im Mittelpunkt stehen: Nutzerfokussierung, leserfreundliche Texte, Navigationsarchitektur sowie Layout und Design.

Nutzerfokussierung im Webdesign

Im Folgenden wird zunächst auf die Nutzerfokussierung eingegangen. Das wichtigste für diesen Punkt ist der Gesamteindruck der Webseite.
Das Vertrauen der Nutzer in ein Unternehmen ist besonders für kleinere Unternehmen sehr wichtig. Das kommt daher, dass die Top-100-Unternehmen in Deutschland soweit vielen Menschen in Deutschland geläufig sind, unbekanntere Unternehmen hingegen erklären müssen, worin ihr Geschäft besteht, welchen Markt sie bedienen und wie Kunden von Produkten und Services profitieren können. Diese Informationen sollten dem Kunden auf einer Webseite mitgeteilt werden. Weiterhin sollten Merkmale verdeutlicht werden, welche das Unternehmen von den Mitbewerbern unterscheiden, so genannte Unique Selling Points (USP). Wenn die Kunden alle wichtigen Informationen dargeboten bekommen und nicht lange nach diesen suchen müssen, steigert das das Vertrauen in das Unternehmen.

Große Unternehmen investieren oft sehr viel Geld, um ihre Marke adäquat im Internet präsentieren zu können. Dies ist notwendig, da sie durch ihre Größe den persönlichen Kontakt zum Kunden nicht mehr halten können. Kleinere Unternehmen besitzen oft nicht die erforderlichen finanziellen Mittel und müssen sich dem Kunden anders  präsentieren. Die persönliche Komponente spielt hier für dessen Vertrauen eine wesentlich größere Rolle. Deshalb werden oft Bilder vom Geschäftsführer und Mitarbeitern auf der Webseite eingebunden. Oft gibt es zusätzlich ein Statement. Der Kunde soll dadurch das Gefühl bekommen, dass er weiß, mit wem er Geschäfte macht.

Kommt ein Kunde zum ersten Mal auf eine Webseite, kann er sich oft nicht nur über Produkte oder Services informieren, sondern erhält oft auch Informationen über das Unternehmen. Die Rubrik „Über Uns“ oder „Unternehmen“ gehört zu jeder Webseite. Hier steht etwas zur Geschichte des Unternehmens, Bilder der Zentrale und wichtige Kennzahlen, wie Umsatz und Gewinn.

Die Zugänglichkeit der Webseite ist ein weiterer wichtiger Punkt. Dabei rückt die Domain in den Mittelpunkt. Sie sollte aussagekräftig und leicht zu merken sein. Oft ist der Name der Firma enthalten oder das Thema der Webseite.

Für die richtige Wahl der Domain ist zunächst die Top-Level-Domain wichtig. Sie bezeichnet die Endung der Domain mittels.de oder .com. Im Allgemeinen wird empfohlen, bei deutschen Webseiten die Top-Level-Domain .de zu wählen. Die Webseite ist so eindeutig ihrem Ursprungsland zuzuordnen, die Kunden können sich die Domain leichter einprägen und über Suchmaschinen ist die Webseite leichter aufzufinden.Eine unpassende Top-Level-Domain ist die Endung .ag. Es gab bereits Unternehmen, die als Aktiengesellschaft firmieren, welche diese Domain nutzen wollten. Allerdings ist .ag die Länderdomain von Antigua und Barbuda. Der Kunde könnte nun also davon ausgehen, dass der Hauptsitz des Unternehmens sich in diesem Land befindet.

Eine schlechte Second-Level-Domain kann sich ebenfalls sehr negativ auf den Erfolg einer Webseite auswirken. Eine schlechte Domain können zum einen komplizierte oder sehr lange Namen sein. Als besonders schlechtes Beispiel ist hier diese Domain aufgeführt: http://www.dieseverdammtlangeurlkannsichjasowiesokeinschweinmerken.de/.
Diese Domain ist viel zu lang, um sie sich zu merken. Weiterhin sollte man auf komplizierte Domains verzichten, da sich diese auch negativ auf die Mundpropaganda auswirken und es schwierig für die Kunden ist, diese Domain fehlerfrei im Browser einzutippen.
Man sollte auch auf Second-Level-Domains verzichten, welche sich als vermeintlich optimal für die Suchmaschinenoptimierung erweisen könnten. Die Adresse www.software.de wäre eventuell gut geeignet für einen Softwarelizenzhändler, allerdings würden die Kunden die Webseite weniger mit dem Unternehmen in Verbindung bringen. Daher sollte man sich am besten für den Namen des Unternehmens entscheiden, auch wenn man hier vielleicht höhere Anstrengungen in Kauf nehmen muss, um die Webseite erfolgreich zu platzieren.

Erstellt man selbst eine Webseite, kennt man diese oft bis ins kleinste Detail. Um Nutzern den Einstieg zu erleichtern, sollte man diese im Rahmen eines Tests beim Besuch auf der Webseite beobachten. Auf diese Art und Weise kann man oft Fehler und Probleme schnell erkennen und beheben. Ist eine Webseite „live“ im Internet, sollte man sich regelmäßig eine Auswertung der Webseite erstellen lassen. So kann man das Nutzerverhalten genau analysieren und die Webseite dahingehend optimieren. Besonders interessant ist es dabei, wie lange User auf einer Webseite bleiben und wo die Absprungpunkte liegen. Eine Heatmap erlaubt es, genau zu verfolgen wo, die Nutzerin welcher Anzahl auf der Webseite klicken.

Texte für das Internet

Immer mehr Menschen lesen Texte online am Bildschirm und drucken diese nicht mehr aus. Das Leseverhalten von Menschen unterscheidet sich zwischen gedruckten Texten und Bildschirmtexten. Darüber sind sich die Forscher einig. Zu der Frage, wie genau sich die Verarbeitung unterscheidet, gibt es eine Vielzahl an Studien mit verschiedenen Ergebnissen.
In westlichen Ländern wird von links oben nach rechts unten gelesen. Dieses Verhalten hat sich tief eingeprägt und wir „scannen“ Dokumente oder Webseiten immer von links oben. Betrachtet man Webseiten, so stellt man fest, dass viele wichtige Informationen oben auf der linken Seite stehen.

Werden gedruckte Texte gelesen, beginnt der Leser links oben, springt dann aber kurz nach unten. Die Augen fangen dabei etwas an zu tränen. Die Tränenflüssigkeit sorgt dafür, dass die Augen feucht bleiben. Bei langen Texten im Web ist dies dem Nutzer nicht möglich, da er nur einen bestimmten Ausschnitt auf dem Bildschirm sehen kann. Die Augen tränen weniger und der Mensch blinzelt weniger. Daher wird teilweise empfohlen, Texte zu kürzen oder bei längeren Texten mit mehreren Seiten zu arbeiten. Andere Stimmen halten dagegen, dass die Anpassungen sehr umfangreich sind und der Mensch sich an diese Art zu lesen gewöhnt und daran anpasst. Kritiker behaupten zusätzlich, dass die Aufteilung auf mehrere Seiten nur dazu dient, die Zahl der Seitenabrufe in die Höhe zu treiben und mehr Werbung verkaufen zu können. Nutzer mit einer hohen Affinität zum Internet haben sich bereits daran gewöhnt, bei längeren Texten zu scrollen. Bei längeren Textpassagen auf einer Seite ist es leichter den Text zu scannen und zu drucken. Allerdings sollte man die Texte trotz allem nicht zu lang werden lassen und gewisse Grundregeln für Texte im Web anwenden.
Dazu zählt es, dass sich die Texte weniger auf die Leistung eines Produktes beziehen, sondern mehr auf den Nutzen für den Kunden. Der Nutzen kann als Grad der Bedürfnisbefriedigung definiert werden. Je mehr die Bedürfnisse des Kunden erfüllt sind, desto zufriedener ist er. Diesen Nutzen gilt es in einer Produktbeschreibung auf einer Webseite voranzustellen, damit sich der Kunde am Ende für das Produkt und das Unternehmen entscheidet.

Informationsarchitektur und Navigationsstruktur

Eine kleine Webseite ist oft sehr übersichtlich, denn es gibt nur wenige Seiten. Hier kann man eine einfache Navigation mit wenigen Ebenen wählen. Bei komplexen Webseiten benötigt man eine logische Navigationsstruktur. Sie sollte für die Webmaster und vor allem für die Kunden nachvollziehbar sein. Grundsätzlich gibt es verschiedene Arten einer Navigation. Häufig befindet sie sich über dem Inhalt oder auf der linken Seite, seltener auf der rechten Seite, da in Ländern mit lateinischer Schrift von links nach rechts gelesen wird.

Eine Studie hat gezeigt, dass die Nutzer eine Navigation bevorzugen, welche eher breit und flach ist. Das bedeutet, dass die Navigation weniger in die Tiefe geht. Enge und tiefe Menüs machen es für den Nutzer unangenehmer, sich durch die Seite zu navigieren, da er immer wieder zwischen den Navigationsebenen springen muss. Eine tiefe Struktur ist ebenfalls für eine Indizierung auf Suchmaschinen sehr hinderlich. Eine Faustregel besagt, dass eine Webseite ab dem sechsten Klick von der Startseite aus nicht mehr indiziert wird. Seiten die tiefer liegen können bei Google nicht gefunden werden. Weiterhin sollte es dem Nutzer immer kenntlich gemacht werden, wo er sich befindet. Andernfalls fühlen sich Nutzer schnell verloren auf der Webseite.

Zusätzlich zur Hauptnavigation gibt es weitere sogenannte Interaktionselemente, welche das Navigieren auf der Webseite ermöglichen. Beispielsweise sind solche das Unternehmenslogo (als Link auf die Startseite), die Metanavigation über die Fußzeile, Textlinks und Pfadnavigation (Breadcrumbs).Psychologischen Erkenntnissen zufolge sollten nicht mehr als neun und nicht weniger als fünf dieser Interaktionselemente eingesetzt werden. Nutzt man weniger Elemente, wirkt die Seite minderwertig und der Nutzer vermisst die Auswahlmöglichkeiten. Nutzt man hingegen mehr als neun dieser Elemente, wird der Nutzer „erschlagen“ und die Seite wirkt unübersichtlich. An dieser Stelle besteht die Gefahr, dass er die Seite verlässt.
Um den Einstieg in eine Webseite zu vereinfachen, verfügen Webseiten über eine Vorseitennavigation, was eine Erleichterung für die Orientierung des Nutzers bedeutet. Bestimmte Themen oder ein Navigationszweig werden ihm dabei meist anhand von Grafiken oder Bildern präsentiert. Diese Vorseitennavigation wird oft auf der Startseite platziert.
Dieser sollte man daher bei der Konzeption der Webseite besondere Aufmerksamkeit zukommen lassen, denn sie entscheidet, ob ein neuer Nutzer auf der Webseite des Unternehmens bleibt oder sie gleich wieder verlässt. Diese wichtige Seite sollte kurz das Angebot des Unternehmens oder die Fokusthemen präsentieren und den Nutzer auf diese Seiten führen. Mit einer guten Startseite erleichtert man den Zugang  in die Webseite und kann den Nutzer so an die Seite binden.

Webdesign und Layout

Bezüglich Design und Layout sind einer Webseite fast keine Grenzen gesetzt. Es muss allerdings immer gewährleistet werden, dass man den Geschmack der Zielgruppe trifft, denn diese soll die Webseite möglichst oft besuchen, um Verkäufe zu generieren. Bei einer Webseite für ein Unternehmen existiert oft ein Corporate Design. Diesem muss die Webseite selbstverständlich folgen, da die Kunden die Webseite sehr schnell mit dem Unternehmen assoziieren sollen.
Dafür gibt es im Normalfall einem Corporate-Design-Guide.
Bei einer Webseite gibt es neben der ästhetischen und anmutsbezogenen Gestaltung auch die Ergonomie. Ersteres spricht eher die emotionale Seite (Screendesign) an, während die Ergonomie eher die rationale Seite anspricht (Interfacedesign).
Die Gewichtung von Screen- und Interfacedesign hängt stark vom Thema der Webseite ab. Bei einer  Unternehmenswebseite sollten beide in einem ausgeglichenen Verhältnis stehen. Wird eine Webseite für eine Kampagne entwickelt, kann hier auch eine Verschiebung zum Screendesign stattfinden, da man den Kunden eher auf der emotionalen Ebene abholen will.
Um dies zu erreichen, benötigt man ein gutes Bildkonzept. Das bezieht sich im Besonderen auf sogenannte Headerbilder. Bilder werden im Gehirn schneller verarbeitet und erzeugen eine tiefere emotionale Wirkung als ein einfacher Text. Das Bildkonzept muss dabei konsequent umgesetzt werden und sollte sich ebenfalls am Corporate Design des Unternehmens orientieren.
Zusätzlich zu den Headerbildern sollte das Bildkonzept grafische Elemente in Form von Icons enthalten. Diese Icons dienen dazu, Inhalte für den Kunden schnell erfassbar zu machen und Text sollte überflüssig sein. Um eine einheitliche Darstellung zu realisieren, sollte man hierfür ein einheitliches Icon-Set entwerfen oder über eine Microstock-Agentur einkaufen. Nutzt man Icons für die Webseite, ist auch hier zu beachten, dass sie ins Corporate Design passen müssen.
Grafische Elemente müssen auf einer Webseite klar geordnet sein und sie darf nicht durch jene überfrachtet wirken.

Bei der Verwendung von Farben gilt es für das Layout ein paar Punkte zu beachten. Verwendet man leuchtende Farben direkt nebeneinander, können sich diese überstrahlen. Besonders farbige Schriften auf einem farbigen Hintergrund erschweren die Lesbarkeit, ebenso wie starke Kontraste. Einen schwarzen Text auf weißem Hintergrund sollte man demnach vermeiden und den Kontrast abschwächen, statt schwarzer Schrift beispielsweise eine dunkelgraue Schrift verwenden.
Ein Mensch nimmt nahe beieinander liegende Objekte auf einer Webseite als eine Gruppe wahr. Diesen Effekt kann man nutzen, um Objekte auf einer Webseite untereinander abzugrenzen. Dies kann beispielsweise durch die Verwendung von Weißraum, Boxen und Trennliniengeleistet werden.
Durch eine Formatierung können Objekte ebenfalls untereinander abgegrenzt werden. Elemente mit Grafiken nimmt das Gehirn automatisch als wichtiger wahr, als reine Textelemente. Häufig werden Teaser deshalb mit Grafiken versehen, um eine höhere Aufmerksamkeit zu erreichen.
Um Objekte zu gruppieren, kann man sie überdies einrahmen. Dadurch treten sie stärker hervor und der Blick des Betrachters wird darauf gelenkt.
Eine Webseite kann symmetrisch oder asymmetrisch gestaltet werden. Eine symmetrische Darstellung erzeugt eine harmonische Balance. Dabei müssen die Elemente gleichmäßig auf beiden Seiten der Mittelachse angeordnet sein. Dagegen steht die asymmetrische Darstellung, wo ein Spannungsfeld aufgebaut wird und der Nutzer sich aktiv mit dem Layout der Webseite auseinandersetzt. Da dieser Effekt gewünscht ist, werden viele Webseiten mit einem asymmetrischen Layout erstellt.

Um die gerade beschriebenen Faktoren des Layouts umsetzen zu können, muss eine Webseite in einem Raster gelayoutet werden. Dieses Raster dient dann für die Webseite als Layout-Vorlage und sollte auf allen Seiten angewendet werden. Dadurch entsteht ein Ordnungsgefüge, an das sich der Nutzer gewöhnen und sich schneller auf der Webseite orientieren kann.
Betrachtet man die Faktoren zusammen, muss sich ein visuelles Gleichgewicht ergeben. Dieses ist abhängig von Größe, Farbe, Helligkeit, Form und Lage. Es trägt maßgeblich dazu bei, ob die Webseite dem Nutzer gefällt.