Responsive Webdesign: Der Workflow

Im letzten Beitrag haben wir die Funktionsweisen von Responsive Webdesign erklärt. In diesem Teil unserer Blogreihe werfen wir einen Blick auf unsere Arbeitsprozesse und zeigen Ihnen, wie ein typischer Projektablauf im Responsive Webdesign aussieht.

Kunden-Workshop first

Zu Beginn einer Zusammenarbeit setzen wir uns mit Ihnen in einem Workshop zusammen, um die Anforderungen zu klären. Hierbei geht es vor allen Dingen um das gegenseitige Kennenlernen. Wir stellen Ihnen explorative Fragen wie: Wie lauten die Unternehmensziele? Wie sieht die Marken-Strategie aus? Welche technische Infrastruktur liegt vor (bei einem Relaunch)?

Hierbei ist uns wichtig, zielorientiert an die Sache heranzugehen. Vor dem ersten Kickoff-Meeting sollten daher möglichst viele Fragen geklärt werden, sodass wir uns ein konkretes Bild machen können. Gemeinsam mit Ihnen formulieren wir messbare Ziele für eine erfolgreiche Zusammenarbeit und ein hochwertiges Endergebnis.

So sieht der Workflow aus

Workflow im Responsive Webdesign
Unser Workflow im Responsive Webdesign besteht aus sechs Schritten und erfolgt iterativ.

Der Projektablauf im Responsive Design besteht für gewöhnlich aus mehreren Schritten: Beginnend mit der Entwicklung einer Content-Strategie (01) geht es über die Erstellung der Inhalte (02) und Wireframes (03) weiter in die Gestaltung von Moodboards (04). Mithilfe von „Atomic Design“ erstellen wir Templates und führen letztendlich Content und Design zusammen (05). Nach ausführlichem Testing (06) wird die Website optimiert, sodass ein qualitativ hochwertiges Ergebnis sichergestellt ist.

Dieser Workflow erfolgt in der Regel in einem iterativen Prozess. So können wir Sie als Kunden direkt in den Prozess einbinden. Sie wirken also direkt mit und haben daher die Möglichkeit die gestalterischen Entscheidungen besser zu verstehen. Während des Arbeitsprozesses ziehen wir Ihr Feedback heran und können somit in Zusammenarbeit mit Ihnen auf Design-Ebene direkt ins Schwarze treffen.

 

Die Konzeption

Step 1: Am Anfang war das Wort – die Content-Strategie

Da wir getreu dem Prinzip „Mobile First“ vom Kleinstmöglichen aus übergehen zu immer größeren Geräten, liegt der Fokus immer auf dem Content. Im ersten Schritt gehen wir also die Content-Strategie an.

Zunächst einmal sammeln wir alle Inhalte in einem Content Inventory. Ähnlich, wie bei einem Inventar schauen wir hier, welche Inhalte bereits vorhanden sind. Diese werden in einer Inventarliste festgehalten und anschließend bewertet. Es wird also nachgegangen, welche Inhalte behalten werden können und welche noch bearbeitet oder gar gelöscht werden müssen. Gemeinsam mit Ihnen erstellen dann wir eine sinnvolle Struktur der Inhalte.

In einer Tabelle werden alle Inhalte aufgenommen und strukturiert.

Step 2: Maßgeschneidert – die Content-Erstellung

Zur Erstellung der Inhalte geht es in eine besonders spannende Phase: Die Zielgruppen-Analyse. Hier tauchen wir ein in die Köpfe und die Lebenswelt Ihrer Zielgruppe. So können wir Profile ermitteln, um Kundenwünsche herauszuarbeiten. In der digitalen Welt nennen wir diese Profile Personas. Hier wollen wir genau wissen, wie die User ticken, wie sie sich verhalten und welche Erwartungen sie an eine Website haben. Danach steht eine ausführliche Marken-Analyse an. Mit diesem Wissen kann der Content exakt auf Ihre Marke und Ihre Zielgruppe ausgerichtet werden.

Step 3: Architektur der Seite mit Content Wireframes

Mit den Ergebnissen aus dem Content Inventory und der Zielgruppen-Analyse können nun Content Wireframes erstellt werden. Wireframes dienen dazu, die Seitenstruktur einer Website übersichtlich herauszuarbeiten. Sie zeigen an, welche Position die Inhalte auf einer Website einnehmen. Hier geht es noch nicht um Farben oder Schriftarten, sondern rein um die Architektur der Seite (Mobile First), weswegen in der Regel schwarz-weiße Wireframes erstellt werden.

Mit Content Wireframes formen wir die Architektur der Website.

Ein Wireframe wird für jeden Major-Breakpoint erstellt – der Punkt, an dem die Seite an ein Ausgabegerät angepasst wird. In der Regel sind es drei Versionen: eine für Smartphones, eine für Tablets und eine Version für Desktops.

 

Die Umsetzung

Step 4: In der Kreationsphase mit Moodboards und Atomic Design

Im nächsten Schritt nutzen wir Moodboards, um einen allgemeinen Stil zu finden. Auf den Moodboards stellen wir eine allgemeine Selektion an Inspirationen dar, sodass ein erster Look & Feel der Website entsteht. Elemente wie Farben, Überschriften und Textblöcke werden zusammengestellt, allerdings noch kein Layout.

Daraufhin folgt die Erstellung verschiedener konkreter Moodboards – der Style Tiles. Style Tiles sind erste „Skizzen“ mit Schriftproben und Farbauswahlen zur ersten Festlegung einer Stilrichtung. Mithilfe der Style Tiles wird die Designsprache entschieden.

Weiter geht es in die tatsächliche Gestaltung. Hierbei zerlegen wir gemäß dem Atomic Design das Web-Projekt in kleinstmögliche Komponenten und stellen einzelne Bausteine zunächst fertig, die nach und nach größer werden. Hierzu unterscheiden wir fünf verschiedene „Bausteingrößen“:

  1. Atome: Die kleinste Einheit im Atomic Design sind die Atome. Sie stellen die Grundbausteine der Website dar, wie Farbe & Labels oder Fonts, Buttons oder Eingabefelder.
  2. Moleküle: Moleküle setzen sich aus mehreren Atomen zusammen. Diese können schon komplexere Aufgaben übernehmen. Ein Molekül ist beispielsweise ein Suchformular.
  3. Organismen: Gruppen von Molekülen bilden Organismen. Dies sind eigenständige und funktionierende Abschnitte einer Seite, wie Header oder Navigation.
  4. Templates: Eine Gruppe von Organismen bilden Templates, die eine Website erst greifbar machen. In ein Template kann der Content eingepflegt werden, sodass die Seite komplett ist.
  5. Seite: Auf den Seiten wird nicht mehr mit Platzhaltertexten gearbeitet, sondern mit den „echten“ Inhalten. Die Seite sieht nun so aus, wie sie tatsächlich auf der Website aussehen wird.

Atomic Design
Die fünf verschiedenen Bausteingrößen im Atomic Design am Beispiel einer Instagram-Seite.

Step 5: Die Hochzeit von Content und Design

Wir führen die Content Wireframes und das Atomic Design zusammen. Hier gestalten wir also die Module und befüllen die Seiten – und fertig ist die Website im Responsive Design.

Step 6: General Checkup – das Testing

In einem abschließenden Schritt geht die Website nochmal von Kopf bis Fuß durch ein komplettes Checkup: Funktioniert alles auf jedem Endgerät? Stimmt die Ansicht auf jedem Browser? Hier und da wird dann nochmal kräftig glatt gebügelt und angepasst, solange bis alles sitzt.

Fazit

Bei unseren Responsive Webdesign Projekten folgen wir einem modernen Arbeitsprozess, der uns ein Ergebnis auf hohem technischem und konzeptionellem Niveau ermöglicht. Dieser iterative und teils agile Prozess bietet sowohl uns als auch Ihnen beachtliche Vorteile.

Er ermöglicht einen zügigen Projektablauf in engem Dialog mit Ihnen als Kunden – kurze Wege und effektiver Weg zum Konsens. Dem Kunden bieten sich außerdem mehr Entscheidungsfreiheiten und Möglichkeiten sich einzubringen, da wir Veränderungen zügig vornehmen können. Wir können also offen sein für Ihr Feedback und die Website ganz nach Ihren Wünschen gestalten.

Facebook

Newsletter

Hinterlasse eine Antwort