Den besten Web-Design-Workflow ?

Den gibt es natürlich nicht. Für jeden Webdesigner funktionieren verschiedene Herangehensweisen unterschiedlich gut. Dennoch gibt es sinnvolle Arbeitsschritte und vieles, das es zu beachten gilt.

 

Ganz nach Trial-and-Error-Manier habe ich für mich eine bestimmte Abfolge festgelegt, die von Projekt zu Projekt zwar variiert, aber im Kern immer gleich bleibt und somit den Weg zum perfekten Workflow erleichtert. Im ersten Teil starten wir zunächst mit der Planung und der Konzeption.

 

Ein iterativer Ansatz hilft dabei, Konzeption und Designentscheidungen immer wieder zu hinterfragen und das Projekt stetig Schritt für Schritt zu verbessern und abzuschließen.

Im diesem ersten Teil des Workflows beschäftigen wir uns mit dem Auftrag und der Konzeption.

Das Briefing durch die Kunden

Ohne Kunden gibt’s kein Projekt. Beim ersten Briefing durch die Kunden sollte man direkt alle Informationen einholen, die man zur Planung und zur Konzeption benötigt. Am besten habt ihr vor dem Termin bereits die jetzige Website der Kunden angeschaut und ein paar Notizen gemacht.

  • Um welches Thema geht es?
  • Welches Ziel wird verfolgt?
  • Gibt es eine alte Website? Wenn ja: Was soll inhaltlich und funktional weitergeführt werden und was nicht?
  • Gibt es bereits Daten über die Zielgruppe und deren Verhalten?
  • Werden bestimmte Features benötigt/gewünscht (Interaktion mit Nutzern, Anbindung an bestimmte Schnittstellen, Newsportal, Loginbereich etc.)?
  • Welche Designvorgaben gibt es (Corporate Identity / Corporate Design etc.)?
  • Wie hoch ist das Budget?
  • Wie wird die Website nach der Fertigstellung gepflegt (wird eine Schulung benötigt, usw.)?
Kundenbriefing

Die Kunden verstehen

Gut, wir haben die Informationen von den Kunden erhalten und könnten doch direkt loslegen, richtig? Lieber erstmal ausgiebige Recherche betreiben. Ich schaue mir an dieser Stelle zunächst noch einmal alles an, was es über das Unternehmen zu sehen und zu erfahren gibt. So kann ich, sofern sie Neukunden sind, noch mehr über Kommunikationsstil, den Einsatz des Corporate Designs und vor allem über die Probleme des bisherigen Webauftritts in Erfahrung bringen und auf mich wirken lassen.

 

Dementsprechend hilft ein gründlicher Blick in die Styleguides des Corporate Designs, um vielleicht vorhandene Design-Elemente aufzugreifen und im Webdesign weiter auszubauen.

Die Zielgruppe definieren

Die Zielgruppendefinition findet hauptsächlich für das Unternehmen statt und hat eher auf sekundärer Ebene mit dem Webdesign zu tun. Im Normalfall gibt es hier bereits Vorgaben von den Kunden, auf denen man aufbauen kann. Zentral ist die Frage, welche Kunden das Unternehmen ansprechen will. Das leite ich von den gebotenen Leistungen und der bevorzugten Personengruppe des Unternehmens ab.

 

Hier einige Denkanstöße, um die Zielgruppe einzugrenzen, falls das vor dem Webprojekt noch nicht geschehen ist:

  • Leistung: Welchen Nutzen liefern wir? Was haben die Kunden von uns?
  • Segmente: Welche Branche, welche Größenordnungen, Regionen, Preissegmente wollen wir fokussieren?
  • Eingrenzung: Wen wollen wir nicht?
  • Demographie: Geschlecht, Alter, Region, Familienstand, Bildungsniveau, Beruf, Position etc.
  • Psychographie: Interessen, Einstellungen, Kaufverhalten, Bedürfnisse etc.

Wie gesagt, im Idealfall sind zumindest diese Fragen schon beantwortet. Für das Webdesign selbst gilt es jetzt noch einzuschätzen, wie die Affinität der Zielgruppen in Hinblick auf Technik, Webseitennutzung und Soziale Medien aussieht.

Personas

Kulminiert werden alle unsere Informationen über die Zielgruppe(n) in Personas. Man arbeitet eine Art Visitenkarte für fiktive Personen heraus, die der Zielgruppe angehören. So entsteht für jede angepeilte Zielgruppe eine Persona und deren Visitenkarten beantworten diese Fragen:

  • Wer ist die Person (demographische Merkmale mit ausgedachtem Namen und einem Bild)?
  • Was macht sie beruflich? Welchen Abschluss hat sie?
  • Single? Verheiratet? Kinder?
  • Lebensstil und Einstellungen?
  • Welche Hobbys und Interessen hat sie?
  • Wo und zu welchen Themen informiert sich die Person?
  • Wie werden Kaufentscheidungen getroffen?
  • Soziale Einflüsse bei Kaufentscheidungen?
  • Wie nutzt die Person Online-Medien?
  • Was nutzt unser Produkt dieser Person?

Dasselbe funktioniert natürlich auch für Personen im B2B-Bereich, wobei hier weitere Unternehmensmerkmale hinzukommen.

Beispiele von Personas der ZIelgruppen

Ich gestehe, ich halte diesen Schritt oftmals kurz und knapp. Dabei ist es aber eine geniale Methode, um niemals zu vergessen, für wen man gerade eigentlich etwas gestaltet. Es macht das Ganze auch etwas persönlicher, da man keine anonyme Gruppe verwendet, sondern eine fiktive Person. Die Hauptsache ist, dass man die Target Audience im Blick hat. Wenn die Persona Gertrud K. (65) bei der Nutzung unserer Website stark an die Hand genommen werden muss, dann muss ich auch durch Gertruds Augen das Projekt angehen. Bei mehreren Personas muss ein optimaler Kompromiss gefunden werden, um alle Bedürfnisse zu befriedigen oder man versucht, unterschiedliche Zugänge zu schaffen.

Web-Kernfeatures herausarbeiten

Welche Funktionen und Module brauchen wir auf der Webseite?

 

Um das zu beantworten, kommt die Recherche über das Unternehmen und dessen eventuell bereits vorhandene Website zum Tragen. Welche Funktionen gibt es bereits, die sinnvoll sind? Diese führen wir dann weiter und ergänzen das Angebot durch weitere modulare Features, die dem Nutzer das Leben einfacher machen sollen.

 

Hierbei kann es helfen, erste Wireframes anzufertigen und ganz grob Funktionen zu skizzieren, die sich aus dem möglichen Inhalt bereits ergeben, wie z.B. Ansprechpartner oder News.

Wireframe Skizzen für mögliche Features im Webdesign

Beispiele für mögliche Funktionen:

  • Slider für neueste News-Artikel
  • Liste für News-Artikel (mit Filter und Suche oder ohne)
  • Große Header-Slider
  • Individualisierte Google-Maps-Sektionen mit eigenen Icons und Info-Overlays
  • Verzeichnis für Ansprechpartner zu bestimmten Themen (Themen bedeuten dann die Einbindung von Schlagwörtern…)
  • Social-Media-Einbindung wie Twitter-Feeds
  • ...

Nachdem solch eine Liste fertig ist und keine weiteren Funktionen mehr benötigt werden, grenze ich die Liste ein: Welche Funktionen können modular zusammengefasst werden? Ein Beispiel hierfür sind die Listen von News-Artikeln und Ansprechpartnern. Die Funktion einer Liste sollte hierbei gleich bleiben, nur der Inhalt ändert sich. So kann der Nutzer beide Listen auf die gleiche Art bedienen und versteht, dass die Funktion immer auf dieselbe Weise funktioniert. Solche Überlegungen tragen dazu bei, dass die User-Experience (UX) im Fokus bleibt und diese Nutzererfahrung positiv gestaltet wird.

Noch mehr Recherche betreiben

Wenn technische Anforderungen an Kernfeatures über gängige Funktionen wie Carousels, Slider oder Filter hinausgehen, muss natürlich die Umsetzbarkeit recherchiert werden. Sind z.B. bestimmte Schnittstellen, die ein Unternehmen bereits verwendet und auch in Zukunft weiternutzen wird, kompatibel? Vielleicht haben unsere Kunden auch eine bestimmte Vorstellung und Vision davon, wie eine Funktion auf der neuen Webseite aussehen soll, die aber nicht üblich ist. Hier gilt: nicht gleich als Unmöglich abtun (je nach Budget natürlich), sondern erst einmal nachforschen. Dabei muss man aber bedenken, dass nicht gängige Features vielleicht aus guten Gründen nicht gängig sind.

Seitenstruktur aufbauen

Ein weiteres wichtiges Thema ist die Seitenstruktur. Ich erstelle hier ein großes, mehrseitiges A3-Diagramm, das alle Seiten und Unterseiten auflistet. Dieses drucke ich mir aus und hänge es prominent an meinen Arbeitsplatz.

 

Bei der alten Website der Kunden lassen sich hierzu viele Denkanstöße finden, meist sind bei alten Websites aber viel zu viele Unterseiten definiert. Das ist meiner Meinung nach nicht gut, weil der Nutzer deutlich mehr Klicks braucht, um zu seinem Ziel zu gelangen. SEO-technisch lässt sich hierüber vermutlich streiten. Gleichzeitig muss der Nutzer der neuen Webseite natürlich auch Infos zu bestimmten Themen finden. Ich bleibe hierbei meist bei zwei Navigationsebenen, in Ausnahmefällen kommt eine dritte hinzu, wenn es wirklich nicht anders gehen sollte.

 

Es ist also ein Balance-Akt, bei dem ich mir folgende Fragen stelle und die Ergebnisse in eine Seitenstruktur bringe:

  • Was kommt auf die Startseite?
  • Welche Hauptthemen brauchen wir unbedingt?
  • Welche Unterthemen (Bereiche) haben wir und in welche Hauptthemen werden diese eingeordnet?
  • Welche Themen können stärker zusammengefasst werden, um die Seitenzahl zu reduzieren?

Steht die zentrale Seitenstruktur, füge ich allen Seiten die jeweiligen Sektionen (Themenabschnitte) hinzu. Diese stellen die Inhalte auf unterster Ebene dar – sozusagen alle Unter-Unter-Themen. So kann man leicht erkennen, ob auf einer Seite zu viele Sektionen entstehen und diese Seite weiter aufgeteilt werden muss. Gegenteilig kann so auch zu wenig Inhalt auf einer Seite aufgezeigt werden, wodurch diese Seite vielleicht mit einer anderen zusammengefasst werden kann.

User-Flows simulieren und die Struktur anpassen

Jetzt ziehen wir die zuvor definierten Zielgruppen bzw. deren Personas hinzu und überdenken, auf welche Weise sie auf der gegenwärtigen Seitenstruktur navigieren würden. Zudem kann jetzt die Seitenstruktur ausgebaut werden, indem Hilfestellungen für die Zielgruppen eingesetzt werden, wie eindeutige Teaser oder prominente Buttons an den richtigen Stellen.

 

Habe ich z.B. bei einem Webprojekt für einen neuen Stadt-Auftritt eine Persona für die Zielgruppe „Touristen“, überlege ich, wie ich die „Touristen“ auf die für sie relevanten Infoseiten lenken kann. Beispielsweise setze ich direkt auf die Startseite der Stadt ganz prominent eine Call-To-Action-Box zur Rubrik „Tourismus“, um das mal ganz simpel zu halten. Das gleiche kann ich, je nach Zielgruppe, dann auch mit den anderen Target Audiences machen.

 

Diese Mittel zur Lenkung der Zielgruppen verwende ich:

  • Zielgruppe von der Startseite hin zu relevanten Infos führen (z.B. auffällige Call-To-Action-Bereiche).
  • Auf der Startseite sowie auf den übergeordneten Themenbereichsseiten Teaser für die Unterthemen anlegen und dorthin verlinken. So können auch Nutzer „eingefangen“ werden, die direkt wegscrollen etc.
  • Immer wieder sinnvolle Querverlinkungen auf den Unterseiten zu anderen relevanten Themen einbauen, damit die Zielgruppe sich direkt weiterhangeln kann.
  • Auf der untersten Navigationsebene setze ich ganz unten auf der Seite eine Quick-Link-Sektion ein, um alle Unterseiten des gegenwärtigen Hauptthemas anzuzeigen. So muss der Nutzer nicht von ganz unten wieder hochscrollen.

Die Seitenstruktur wird dann um die Teaser-Sektionen und CTAs erweitert und die wichtigsten User-Flows werden ebenfalls mit eingezeichnet.

Erstes Feedback einholen

Das ist meistens der Punkt, an dem die Kunden wieder herangezogen werden sollten. Alle Überlegungen, die bis hierhin angestellt wurden, werden ihnen kommuniziert und Feedback wird eingeholt. Es kann ja mal vorkommen – vor allem bei Projekten mit vielen inhaltlichen Bereichen – dass einzelne Unterthemen fehlen oder an der falschen Stelle stehen würden. Die Rückmeldung bewirkt natürlich auch, dass die Kunden sehen, dass es voran geht. Webprojekte können schließlich vom Briefing bis zum Launch, je nach Größe des Projekts, etwas dauern.

 

Hier kommen auch die ersten Korrekturen rein und das ist ganz normal. Diese gilt es dann in die vorhandenen Überlegungen einzuarbeiten und zu übernehmen.

Text- und SEO-Konzept herausarbeiten

Textarbeit und Suchmaschinenoptimierung im Webdesign. Nahaufnahme einerTastatur.

Jetzt steht also die Seitenstruktur und ist mit den Kunden abgesprochen. Die ersten SEO-Überlegungen (Suchmaschinenoptmierung) sind natürlich schon bei der Erstellung der Seitenstruktur mit eingeflossen, allein durch die Definition von Haupt- und Unterthemen etc.. Jetzt gilt es aber die zentralen Keywords zu recherchieren und diese in eine Content-Struktur der bereits definierten Sektionen einzubinden. Schließlich werden alle Headlines und Texte der kompletten Website durchgearbeitet. Diese Textarbeit beinhaltet Folgendes:

  • Headline-Konzept: Hier wird eine Struktur definiert, die den Headlines ein gleichbleibendes Prinzip gibt, z.B. Hauptthemen-Headlines sind immer zweizeilig o.ä.
  • Genaue Definition der Seitentitel aufgrund der Keyword-Recherche
  • Ausformulierung aller Web-Texte in allen Inhaltsbereichen inklusive Headlines
  • Ausformulierung aller Call-To-Action-Buttons und Teaser-Texte
  • Formulierung der Meta-Descriptions aller Unterseiten (dieser Punkt kann auch später erfolgen)

Die guten Texter haben hier sehr viel zu tun, also habt an dieser Stelle Geduld und ein offenes Ohr für eventuelle Diskrepanzen zu der Seitenstruktur, die ihr euch überlegt habt. Hier ist Teamwork gefragt! Am besten beginnt ihr die gemeinsame Arbeit mit einem Texter direkt beim Erstellen der Seitenstruktur.

 

Wenn ihr mehr über Keywords und SEO erfahren wollt, schaut euch doch mal den Artikel von Stephan Jorda zum Thema Keyword-Recherche an!

Zeit für eine Kaffeepause

Das wäre der erste Teil des Workflows für Webdesign-Projekte. Die Planung und die Konzeption sind jetzt abgeschlossen. An manchen Stellen in zukünftigen Arbeitsschritten werden wir wahrscheinlich nochmal zurück, z.B. zur Seitenstruktur, kommen müssen um etwas anzupassen. Das ist nicht schlimm, sondern vorteilhaft, denn es ist wichtig, die eigene Arbeit immer wieder zu hinterfragen und zu verbessern. Dieser iterative Ansatz macht Webdesigns besser.

Kaffe am Arbeitsplatz des Webdesigners

Im nächsten Teil des Workflows für Webdesign-Projekte wird es dann um das konkrete Design und die Umsetzung gehen! Bis dahin bleibt gesund und schlürft genüsslich das Heißgetränk eurer Wahl.

Neueste Artikel
Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.