Das Layout einer Seite ist eine zentrale Aufgabe der Entwicklung von Webapplikationen. Es findet an der Schnittstelle zwischen Entwicklung und Design statt und muss umfassenden Anforderungen aus beiden Bereichen genügen. Neben einer responsiven Darstellung muss es auch die User Experience der Anwendung bestmöglich unterstützen.

In dieser Artikelserie geht es um das Layout von Webseiten bzw. Webapplikationen. Am Anfang unserer Überlegungen steht dabei stets die Entwicklung eines passenden Konzepts. Technisch wird das Layout heute meist auf der Basis von CSS, d. h. mit Hilfe des CSS-Grid-Layouts erstellt. Das kann man manuell umsetzen oder man greift auf die Hilfe einer Bibliothek zurück. Wir starten mit den Anforderungen und arbeiten uns durch die unterschiedlichen Ansätze für ein Layout (Teil 1). Danach sehen wir uns die manuelle Realisierung mit Hilfe von CSS Grid (Teil 2) detailliert an.

Diese Grundlagen sind essenziell und helfen uns in vielen Situationen weiter. Haben wir die Basics verstanden, dann wird es uns leichter fallen, auch umfangreichere Anforderungen technisch zu realisieren. Damit es in der Praxis leichter und vor allem schneller von der Hand geht, erstellen wir responsive Layouts mit Hilfe der bekannten Bibliothek Bootstrap (Teil 3). Nach der Lektüre dieser Artikelserie dürften Sie fit sein, wenn es um das Thema Weblayout geht. Das gilt unabhängig davon, ob Sie für mobile Applikationen oder für Unternehmens-Apps entwerfen, die primär auf großen Desktopbildschirmen ausgeführt werden.

Anforderungen

Die Erfahrungen zeigen, dass klar strukturierte Webseiten mit einem einfachen Layout am erfolgreichsten sind. So sollte beispielsweise bereits auf der Startseite den Nutzer:innen verdeutlicht werden, was die Webseite bietet. Daher gilt: Das Layout einer Webseite ist sorgfältig zu konzipieren und damit bewusst auszuwählen. Ganz zu Beginn gilt es, die grundsätzliche Ausrichtung der künftigen Webseite zu bestimmen. Das kann man beispielsweise anhand der folgenden Punkte machen:

1. Ziele definieren: Wie soll eine Webseite passgenau für Ihre Nutzer:innen sein, wenn Sie als Designer:innen die Ziele der Seite selbst nicht genau kennen?

2. Zielgruppe analysieren: Es ist sehr wichtig zu wissen, von welchen Personen die Webapplikation hauptsächlich genutzt wird. Hier gilt die Regel: „Durch die Brille der Nutzer:innen sehen und dabei den eigenen subjektiven Geschmack vergessen“. Nicht Ihnen muss die Webseite gefallen, sondern Ihrer Zielgruppe.

3. Inhalte strukturieren: Hier geht es um die Informationsarchitektur und Nutzerführung. Wie soll die Webseite aufgebaut sein? Wie viele Navigationsebenen gibt es? Wie sind diese Ebenen miteinander verbunden? Mit welchen anderen Medien bzw. Seiten ist sie verknüpft?

4. Wireframes erstellen: Unter Wireframes versteht man die ersten sehr frühen konzeptionellen Entwürfe einer Seite. Hauptsächlich geht es um die Anordnung und Positionierung der Elemente, jedoch noch nicht um die Funktionalität. Im Mittelpunkt steht also das Layout. Farben, Formen, Bilder und Typografie spielen dabei keine Rolle.

5. Layout konzipieren: Nach der Definition der Ziele (Warum?), der Ermittlung der Zielgruppe (Wer?), der Sichtung darzustellender Inhalte (Was?) und einem Grobentwurf braucht es Mut für ein erstes konkretes Layout.

Und damit sind wir direkt beim Thema unseres Artikels, dem Layout. Im Kern geht es um die Frage, welche Elemente an welcher Stelle und in welcher Form auf dem Bildschirm platziert werden. Bevor wir über die Anordnung sprechen, müssen wir uns klar werden, welche typischen Elemente eine Webseite enthält. Wir sprechen von der Anatomie einer Webseite.

Strukturelemente – Anatomie einer Webseite

Typischerweise können eine moderne Webseite bzw. die Einzelseiten einer zeitgemäßen Webapplikation die folgenden Elemente aufweisen. Eine mögliche Aufteilung ist in Abbildung 1 dargestellt.

Abb. 1: Typische Elemente und Anordnung auf der Webseite

• Kopfleiste (Header): Dieser Bereich umfasst üblicherweise das Logo und die Haupt- und Metanavigation der Seite. In der Regel ist dieser Bereich über alle Seiten des Webauftritts identisch. Der Header gehört mit zu den ersten Elementen, die Anwender wahrnehmen. Daher gilt: Dieser ist besonders sorgfältig zu gestalten. Eine klare und gut lesbare Schrift sind notwendig.

• Logo: Das Logo ist das Wiedererkennungsmerkmal einer Webseite. Man sagt auch, das Logo ist das Gesicht eines Unternehmens und somit das wichtigste Designelement. Um immer im Blick der Besucher:innen der Webseite zu bleiben, sollte es im oberen Bereich stehen. Meistens befindet es sich links, manchmal rechts und seltener auch in der Mitte. Um das Logo hervorzuheben, muss man einen minimalen Abstand zu anderen Gestaltungselementen belassen. Nur auf diese Weise kann man sicherstellen, dass es nicht von anderen Elementen überlagert wird.

• Titelbild (optional): Das ist ein Bild, das sich unterhalb des Headers oder im Header neben dem Logo befindet. Es kann sich um ein Bild, eine Grafik oder auch um eine Animation bzw. ein Video handeln. Der Zweck dieses Elements ist es, die Aufmerksamkeit der Besucher:innen zu erhalten. Es gehört zu den zuerst wahrgenommenen Elementen und es muss daher entsprechend akribisch ausgewählt bzw. gestaltet werden.

• Navigationsleiste: Hierbei handelt es sich um das Menü des Webauftritts. Die Hauptnavigation sorgt dafür, dass sich die Anwender schnell zurechtfinden. Bei umfassenden Webapplikationen handelt es sich um die Hauptprogrammpunkte, bei öffentlichen Webseiten um die Hauptthemen des Webportals. Die Hauptnavigation kann und soll nicht alle Elemente beinhalten. Sie wird durch eine weitere Navigationsebene ergänzt. Die Hauptnavigation kann auch am linken Rand angeordnet (vertikale Navigation) und in diesem Fall durch eine horizontale Navigation auf unterer Ebene ergänz werden.

• Inhaltsbereich: Der Inhaltsbereich einer Webseite ist ein wesentlicher Aspekt des Webdesigns und der Webentwicklung. Er bezieht sich auf den Teil der Webseite, in dem der eigentliche Inhalt präsentiert wird. Es gilt das Prinzip Content-First, d. h., der Inhalt soll den meisten Platz der Seite beanspruchen und den Fokus des Nutzers darauf konzentrieren. Der Inhaltsbereich hat seinen Platz direkt unter dem Kopfbereich. Oft wird der Inhaltsbereich in weitere Bereiche unterteilt.

• Footer: Der Footer einer Webseite enthält in der Regel wichtige Informationen und Verknüpfungen, die am unteren Rand der Webseite platziert werden, um Benutzer:innen zusätzliche Informationen und Navigationsmöglichkeiten bereitzustellen. Ebenso wie die Kopfleiste sind die Fußleisten meist für alle Seiten einer Webapplikation identisch. Die genauen Angaben im Footer können je nach Art der...