Website-Konzeption: Fünf Schritte zum ersten Web-Layout

Was passiert eigentlich, bevor wir unseren Kunden die ersten richtigen Layouts präsentieren? Welche Schritte sind vorher nötig, damit die Website nicht nur gut aussieht, sondern auch die strategischen Ziele erfüllt und von den Usern bedienbar ist?

Die meisten Konzeptphasen von Website-Projekten laufen bei //SEIBERT/MEDIA nach einem ähnlichen Schema ab, das ich hier kurz erläutern möchte.

1. Ziele der Website definieren und priorisieren: Worum geht es eigentlich?

Ein neues Website-Projekt beginnt mit dem Kennenlernen des Status Quo, der Projektpartner, des Unternehmens bzw. des Produkts. Hier bietet sich insbesondere ein Anforderungs-Workshop an, um ein gemeinsames Verständnis zu schaffen. Zu den Fragen, die zu Beginn geklärt werden, gehören unter anderem diese:

  • Welches Produkt/Unternehmen/Thema steht im Mittelpunkt?
  • Welche Werte werden vermittelt?
  • Wer soll mit der Website erreicht werden?
  • Wie soll die grundsätzliche Wirkung der Website sein?
  • Was wird neu gemacht, was übernommen?
  • Woran wird später der Erfolg gemessen?
  • Welche Funktionen soll die Website haben?
  • Was soll die Website beim Go-live erfüllen? Was könnten Ausbaustufen sein?

All diese Fragen werden beantwortet und priorisiert. (Hierfür bieten sich z.B. das MoSCow-Prinzip oder Dot-Voting an.)

2. Personas entwickeln: Wer nutzt denn die Website wirklich?

Den eigenen subjektiven Geschmack vergessen und durch die Brille des Users blicken – das ist sehr relevant für die Konzeption einer Website und im Prinzip auch für die gesamte Entwicklung und Pflege. Wir setzen uns in diesem Schritt mit der Zielgruppe auseinander und entwickeln imaginäre, prototypische Nutzer der Website, die dadurch greifbar werden, dass sie konkrete Ziele verfolgen, einen Namen, ein Aussehen und bestimmte Eigenschaften erhalten.

Diese Personas begleiten uns durch das gesamte Projekt (zumeist als „Steckbrief“ an der Wand unseres Teambüros) und dienen dazu, immer wieder zu hinterfragen, ob die Personas die Website überhaupt bedienen könnten. Beispielsweise ist Persona X wenig internetaffin. Wie sollte die Navigation funktionieren, damit sie damit zurecht kommt? Persona Y legt wert auf persönlichen Kontakt. Findet sie schnell einen passenden Ansprechpartner?

Abb. 1.: Beispielhafte Kurzfassungen von Personas (Persona-Skelette)

3. Informationsarchitektur und Nutzerführung: Wie werden die Inhalte strukturiert und dem User zugänglich gemacht?

Wie ist die Website aufgebaut? Wie viele Navigationsebenen gibt es, wie sind diese untereinander verbunden? Welche Inhalte/Funktionen werden vermittelt? Mit welchen anderen Medien/Websites/Anwendungen ist die Website noch verknüpft und was bedeutet das für das Design und die technische Umsetzung? Gibt es geschlossene Bereiche oder verschiedene Sprachversionen?

Diese und andere Themen werden bei der Entwicklung der Informationsarchitektur hinterfragt. Ergebnis ist ein Strukturbaum, der die einzelnen Seiten der Website sowie deren Anordnung zeigt.

Eng verknüpft mit der Informationsarchitektur ist die Nutzerführung. Anhand des Strukturbaums überlegen wir mögliche Wege, die der Nutzer durch die Website gehen könnte – immer mit dem Gedanken im Hinterkopf, dass die meisten User nicht linear, sondern sehr sprunghaft durch die Websites navigieren. „Wie kommt der Nutzer mit möglichst wenigen Klicks zu den relevanten Informationen?“, lautet hier die entscheidende Frage.

Abb. 2.: Informationsarchitektur mit Farbschema, das die unterschiedlichen Interessen zweier Personas zeigt

4. Wireframing: Die Annäherung an das Layout

Erst jetzt fangen wir damit an, uns die Website bildlich vorzustellen. Bei der Erstellung von Wireframes nähern wir uns dem späteren Layout an, indem wir auf Basis der bis hierhin gewonnenen Erkenntnisse festlegen, wie viele verschiedene Seitentypen wir benötigen, welche Inhaltselemente wir brauchen und wie und wo diese platziert werden.

Wir skizzieren erste Ideen für das Design, in dem wir ein Layout-Raster entwickeln und die Flächen, die bestimmte Inhaltselemente einnehmen sollen, definieren. Wir überlegen, was der Nutzer auf welcher Seite vorfinden sollte. Ergebnis dieser Phase sind schnell gefertigte Skizzen, die bewusst abstrakt und farblos gehalten sind, um sich nicht schon in diesem Stadium zu intensiv mit der Optik auseinanderzusetzen.

Abb. 3.: Zwei alternative Skizzen für die Gestaltung einer Startseite

5. Erstellung der ersten Layouts: Wir nähern uns dem Ziel!

Alle bis hier entwickelten Konzeptideen fließen neben den optischen Grundlagen in das Layout ein. Die meisten Unternehmen, die mit uns eine Website entwickeln, haben bereits ein Corporate Design bzw. eine bestehende Website, die die grundsätzliche Design-Richtung vorgibt. Unsere Aufgabe besteht dann darin, einen Wiedererkennungswert im Hinblick auf die bestehenden Medien herzustellen und gleichzeitig die Trends im sich rasant weiterentwickelnden Webdesign-Bereich zu berücksichtigen. (Eine Broschüre, die vier Jahre alt ist, wirkt optisch weniger in die Jahre gekommen als eine Website, die vier Jahre alt ist.)

Unsere Konzeption stellt verschiedene Anforderungen an das Design, die wir mit den grafischen Anforderungen zusammenführen. Wir entwickeln auf diese Weise Layout-Varianten, die die strategischen Ziele, unsere Personas, die Informationsarchitektur, die Anforderungen an die Navigation sowie die Wireframes berücksichtigen, sodass es in diesem Schritt erlaubt ist, sich auch endlich mit optischen Details auseinanderzusetzen.

Und dann? Die Umsetzung folgt …

In der Regel erfolgt die Layout-Entwicklung in zwei bis drei Teilschritten. Nachdem die Layouts vom Kunden freigegeben sind, folgt die technische Umsetzung. Wichtig hierbei: Schritt für Schritt und in kleinen, releasefähigen „Päckchen“ zu planen. Je größer die Website, desto agiler sollte das Vorgehen sein.

Haben Sie das Gefühl, dass Ihre Corporate Website oder Ihr Online-Portal nicht mehr auf dem aktuellsten Stand ist? Planen Sie einen Relaunch oder die komplette Neuentwicklung Ihres Internet-Auftritts? Als erfahrener Full-Service-Dienstleister betreut //SEIBERT/MEDIA Ihr Web-Projekt von der strategischen Beratung über Konzeption, Design und technische Umsetzung bis hin zum systematischen Online-Marketing. Sprechen Sie uns unverbindlich an, um am besten einen initialen Website-Relaunch-Workshop zu vereinbaren.

Weiterführende Informationen

Web-Design-Trends: Was ist typisch für aktuelle Websites?
Interview: Was machen Web-Designer eigentlich genau?
Mehr als nice-to-have: In welchen Projekten Personas unverzichtbar sind
Informationszusammenspiel: Design, Informationsarchitektur und Content
Informationsarchitekturen: Fünf häufige strukturelle Fehler
Welche Vorteile bietet mir als Kunde ein Scrum-Projekt?

Kennen Sie schon Linch & Pin

Linch&Pin_Banner_gross_Schatten_lang