3. Aufbau und Layout


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 die 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. Gerade frisch gebackene Webseitenbetreiber tendieren dazu, 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.


Sicher braucht man solche Effekte und visuellen Reize, um die Website auch ästhetisch ansprechend zu gestalten. In diesem Schritt allerdings sollte man sich 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. 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.


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 eine konkrete Gliederung erstellen. Sie können die Mindmap weiterentwickeln.


Mit 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 in den nächsten Schritten die Seitennavigation.


Nun kann es sein, dass Ihre 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.


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 hier als Konventionen nennen.


Weiter zu: