Übersicht > Die eigene Website > Aufbau und Layout

Phase 3: Aufbau und Layout

Grundsätzliches Design der Website

An diesem Punkt, nachdem hinreichend Klarheit herrscht, welche inhaltlichen Elemente auf der Website abgebildet werden sollen, sollte die Frage nach dem grundsätzlichen Aussehen gestellt werden. Oft ergibt sich eine Anordnung bereits aus den Überschriften und der Materialsammlung, die Sie vorbereitend erstellt haben.

Viele Webseiten-Ersteller beginnen, von der Farbgebung und Seiteneinteilung ausgehend sich die Seite vorzustellen und dann gedanklich die Elemente anzuordnen. Dieses Vorgehen ist durchaus empfehlenswert.

In diesem Planungsschritt iost es angebracht, sich sehr auf die Inhalte zu konzentrieren und weniger auf das endgültige Erscheinungsbild.

Es besteht die Gefahr, sich an konkreten Darstellungen festzubeißen, etwa am Aussehen von Menüs oder dynamischen Aktionen, die durch einen Mausklick ausgeführt werden, wie etwa das Aufklappen eines Menüs.

Priorisierung

Sicher braucht man Effekte und visuelle Reize, um die Website auch ästhetisch ansprechend zu gestalten. Es gibt jedoch andere Faktoren, die empfundene Attraktivität und Ästhetik der Website ebenfalls stark beeinflussen, nämlich die Klarheit und Nützlichkeit.

In diesem Schritt sollte man sich also noch stark auf die Inhalte konzentrieren und darauf achten, dass das Informationsbedürfnis des Seitenbesuchers erfüllt wird. Die Informationen sollten also in sinnvoller Anordnung und entsprechend der Materie dargeboten werden.

Hinzu kommt, dass man bedenken muss, dass Webseiten nicht nur auf einem großen PC-Bildschirm gut dargestellt werden müssen, sondern auch auf einem kleinen Smartphonescreen. Gerade diese Geräte werden als Endgeräte immer wichtiger.

Responsive Webseiten

Immer weniger Konsumenten nutzen den PC oder das Notebook für Onlineshopping oder Informationsbeschaffung. Visuell komplexe Seiten lassen sich auf kleinen Bildschirmen sehr viel schwerer darstellen. Möglicherweise ist das ein ganz pragmatischer Grund für die Tendenz, dass Webseiten zwar gefällig, aber zunehmend eher schlicht angelegt werden.

Wenn Sie mit WordPress oder einem anderen CMS arbeiten, um eine Website zu erstellen, gehen Sie dem Problem der Optimierung auf große wie auch kleine Bildschirme fast schon aus dem Weg. Dies leisten die neueren Themes für WordPress ganz gut, genauso wie die zeitgemäßen Templates für Joomla oder Drupal.

Sie müssen nur darauf achten, dass das Theme beziehungsweise Template Ihrer Wahl als responsiv bezeichnet wird. Darunter versteht man die Fähigkeit zur Anpassung auf unterschiedliche Endgeräte.

Skizze erstellen

Skizzieren Sie die Webseite, wie Sie sie sich vorstellen ruhig auf Papier. Wenn hier übrigens von Webseite gesprochen wird, ist eine einzelne HTML-Seite gemeint, während Website den gesamten Internetauftritt meint.

Wenn Sie eine Vorstellung des Aussehens der Webseite entwickelt haben, sollten Sie die Gliederung aus Phase 1 wieder heranziehen und das Mindmap weiterentwickeln, um es zu finalisieren.

Mit der Gliederung ist eine hierarchische Sortierung der Inhalte gemeint, wobei es wie in einem Text Überschriften und Unterüberschriften geben kann, allerdings sollten Sie diese auf ein oder zwei Worte reduzieren. Aus dieser geordneten Inhaltsliste entsteht die Seitennavigation.

Seitennavigationsmenü

Nun kann es sein, dass die Gliederung zu "flach "ist und zu viele Hauptpunkte nebeneinander stehen. Versuchen Sie 4 bis 5 Hauptpunkte zu finden, unter die Sie die anderen Gliederungspunkte sinnvoll und logisch nachvollziehbar unterordnen können.

Leiten Sie aus dieser Gliederung die Hauptnavigation ab. Die Hauptnavigation ist grundsätzlich auf allen Unterwebseiten an gleicher Stelle vorhanden. Es kann sinnvoll sein, weitere Unterpunkte in Form eines dynamischen Menüs abzubilden, das sich „ausklappt”, wenn der Hauptpunkt per Klick oder Mouseover aktiviert wird.

Der erste Punkt sollte immer „Home” bzw. „Startseite” lauten und steht oben bzw. ganz link, wenn die Navigation horizontal angeordnet wird. Oft wird der Menüpunkt Kontakt in der horizontalen Navigationsanordnung ganz rechts platziert.

Freiheit beim Design versus Gewohnheiten bzw. Erwartungen der Webseitenbesucher

Grundsätzlich sind Sie in der Gestaltung der Webseiten völlig frei. Es haben sich aber einige Gewohnheiten für die Anatomie einer Webseite eingebürgert, die wir Konventionen nennen. Dies bezieht sich besonders auf die Anatomie einer Website sowie auf die AspekteNavigation, Ergonomie und Usability

Mehr Know How - Inhalt

Webhosting

Ziele einer Website

Technologie

Eigene Website

Website entwickeln: Phase 1: Ziele festlegen | Phase 2: Inhalte gliedern | Phase 3: Layout entwicklen