Zum Inhalt springen
Damit alle vom Gleichen reden

Damit alle vom Gleichen reden

· aktualisiert | Anita Fiechter | 6 Min. Lesezeit

Am Anfang sind sich alle einig. Das Problem zeigt sich erst am Schluss, wenn jede Person etwas anderes erwartet hat. Deshalb nehmen wir eine Website nie am Stück ab.

Was schiefgeht, wenn man am Stück abnimmt

Der klassische Ablauf ist bestechend einfach: Konzept, Entwurf, Programmierung, Abnahme. Jede Phase folgt der nächsten, alle wissen, wo man steht. Das funktioniert, solange am Ende genau das herauskommt, was am Anfang im Kopf aller Beteiligten war. Genau das ist nie der Fall. Eine Website passt sich heute an unzählige Bildschirmgrössen an, und ein statischer Entwurf zeigt immer nur eine davon. Was du auf dem Bildschirm freigibst, ist eine Momentaufnahme – keine Zusage darüber, wie es sich auf einem Telefon anfühlt.

Dazu kommt das eigentliche Problem: Bis zur Abnahme redet jede Person über etwas anderes. Die Geschäftsleitung stellt sich das Ergebnis anders vor als das Marketing, die Entwicklung liest die Anforderung anders als das Design. Wer erst am Schluss zusammenkommt, korrigiert am teuersten Punkt des Projekts. Deshalb arbeiten wir in Schlaufen statt in einer Linie – und deshalb siehst du unterwegs immer wieder etwas Konkretes.

Wie der Workflow Schritt für Schritt abläuft

Alles beginnt bei der Projektvision, zu der wir alle Beteiligten an einen Tisch holen – ein gemeinsames Verständnis für Zielgruppe, Bedürfnisse und übergeordnete Ziele. Danach setzen sich Patrick als Entwickler, Hanna als Designerin und Anita als Konzepterin zusammen und legen das Fundament fürs Grobkonzept. Deine Inhalte sind dabei das Wichtigste an der Website – wir lassen uns nicht von hübschen Entwürfen blenden, sondern gestalten die Interaktion mit deinen Inhalten. Dabei stimmen wir uns laufend mit dir ab, statt dich am Schluss zu überraschen.

In einem ersten gemeinsamen Workshop holen wir deine individuellen Rahmenbedingungen ab. Wir klären Rollen und Verantwortlichkeiten und decken dabei die Problemstellung auf. Wir skizzieren Lösungsansätze, indem wir über Methodik sprechen. Es ist deine Zielgruppe, die entscheidet, wie wir die User Experience und das User Interface gestalten. Hier klären wir auch, ob wir «mobile first» designen oder ob ihr eher im Businessbereich unterwegs seid. Nach diesem Workshop bekommst du eine spezifische Kostenkalkulation und eine Roadmap fürs gemeinsame Projekt.

Wer nach dem Ansatz «Content first» arbeitet, muss zuerst die vorhandenen Inhalte strukturieren. Wir führen eine Art Content-Inventar durch und büschelen neu. Dabei berücksichtigen wir die im Projektvisionsworkshop formulierten Ziele der Website und stimmen sie auf eure übergeordneten Unternehmensziele ab. In der Content-Strategie erarbeiten wir für die relevanten Zielgruppen Personas als Stereotypen, um ihr Nutzungsverhalten vorauszusagen. Gestalten wir «mobile first», beginnen wir mit den Inhalten für den kleinstmöglichen Viewport und gehen erst später auf grössere Geräte zu.

Ist das Content-Inventar neu strukturiert, gilt es die Textmenge aus dem Content-Dokument in Wireframes zu versorgen. Dann wird jeweils klar, dass «Content first» nicht immer aufgeht. Es ist ein iterativer Prozess, bei dem Hanna für die Ästhetik kämpft, Anita für die vollständigen Inhalte und damit auch für die strategische Suchmaschinenoptimierung – und Patrick für die Funktionalität.

Wireframes skizzieren die grundlegende Struktur und Funktionalität einer Seite. Sie konzentrieren sich auf Layout, Inhaltsanordnung und Navigation, ohne sich um Designdetails oder visuelle Elemente zu kümmern. Für jeden wichtigen Breakpoint entsteht ein eigener Wireframe, damit sichtbar wird, wie sich die Darstellung ändert.

Anders als früher erarbeiten wir nicht gleich ein vollständiges Design. Wir definieren Schriften, Farben, Grössen und einzelne Elemente wie Buttons und Tabellen – und setzen sie Schritt für Schritt zu Komponenten eines Baukastens zusammen. Diese Komponenten platzierst du später im Content Management System selbst. Bereits hier legen wir gemeinsam das Wording fürs spätere Backend fest, damit dein Team jederzeit weiss, wo was zu tun ist. Denn die Website wird von euch gepflegt, nicht von uns.

Auf Grundlage der Wireframes entsteht ein klickbarer Prototyp in Figma. Er zeigt die Struktur und die Flexibilität des responsiven Designs. Je nach Budget arbeiten wir nicht alle Seiten aus, sondern die Seitentypen. Da noch nichts programmiert ist, lassen sich deine Korrekturen schnell einarbeiten. Im Gegensatz zu statischen Entwürfen läuft der Prototyp im Browser und passt sich bereits an verschiedene Displaygrössen an – du erlebst deine künftige Website. Aber Achtung: Es ist ein Prototyp. Deine Website ist hier noch nicht programmiert.

Jetzt geht es in die Programmierung. Ist sie fertig, wird intern getestet – durch die geleistete Vorarbeit fällt dieser Aufwand am Schluss deutlich kleiner aus. Der Prototyp hat Korrekturschleifen durchlaufen, die Komponenten sind Schritt für Schritt entstanden, Freigaben und Besprechungen haben laufend stattgefunden. Du musst am Ende also keine gigantische Website auf einmal abnehmen. Der iterative Prozess verhindert, dass wir zu lange in eine falsche Richtung marschieren.

Der Agenturprozess dahinter

Dieser Workflow ist kein Sonderweg für Websites, sondern der Ausschnitt eines Ablaufs, der für jedes Projekt gilt – unser Agenturprozess, in über 25 Jahren gewachsen und heute das Fundament unseres Kommunikationssystems. Er führt von der Initialisierung über Strategie, Konzept, Realisation und Implementierung bis zum Controlling. Für dich übersetzt sich das in sechs Freigaben: Auftrag erteilt, Grobkonzept freigegeben, Detailkonzept freigegeben, gut zum Go-live, live, Abschluss. Dazwischen liegt nie mehr Arbeit, als du beim letzten Mal abgenommen hast.

Klassische Agenturen

KonzeptRealisation

diffrent.digital

Initialisierung
StrategieKonzeptRealisationImplementierung
Controlling

Warum der gemeinsame Austausch entscheidet

Die vier Phasen sind kein Staffellauf, bei dem an der Ziellinie übergeben wird. Sie funktionieren wie ein Fliessband: Jede Person denkt bereits für die nachfolgende mit, teilt ihr Wissen und verbessert deren Ausgangslage. Die Konzepterin schreibt so, dass die Designerin damit gestalten kann. Die Designerin gestaltet so, dass die Entwicklung es bauen kann. Und die Entwicklung baut so, dass dein Team es später pflegen kann.

Genau deshalb sitzen wir so oft zusammen – mit dir und untereinander. Ein Detailkonzept, das ohne die Entwicklung entsteht, produziert Ideen, die niemand bezahlen will. Eine Programmierung, die ohne das Konzept beginnt, produziert Seiten, in die niemand Inhalte einfüllen kann. Der Austausch ist nicht das Nette am Prozess, er ist sein Mechanismus. Und weil am Ende das Controlling steht, fliesst zurück, was gemessen wurde – in die nächste Runde.

Warum deine Inhalte in Portionen kommen

Der Teil, der Websiteprojekte am häufigsten aufhält, sind nicht Design oder Technik – es sind die Inhalte. Weil sie meist bei einer Person liegen, die den Job nebenher macht. Deshalb fragen wir sie nicht auf einmal ab. Im Content-Dokument arbeitet ihr Abschnitt für Abschnitt und wisst dabei jederzeit, wofür ein Textstück gedacht ist und wie lang es sein darf. Das erspart die Runde, in der gute Texte gekürzt werden müssen, weil sie nicht ins Layout passen.

Was du intern zusagen kannst

Dieses Vorgehen verlangt mehr Abstimmung als ein Wasserfall – dafür gibt es keinen Moment, in dem etwas Fertiges präsentiert wird, das niemand so erwartet hat. Du kannst intern drei Dinge zusagen: Es gibt zu jedem Zeitpunkt einen vorzeigbaren Stand, Korrekturen passieren dort, wo sie noch wenig kosten, und niemand muss am Schluss eine ganze Website auf einmal beurteilen. Das ist der eigentliche Grund für den Aufwand: nicht Perfektion, sondern dass am Ende alle vom Gleichen reden.

Wie läuft euer nächstes Websiteprojekt?

Erzähl uns, wo es beim letzten geklemmt hat – wir zeigen dir, an welcher Stelle wir anders vorgehen.

anita_portrait_v2.jpg
Geschrieben von Anita Fiechter Inspirationsquelle und Szenario-Denkerin Fragen zum Artikel? Schreib mir

Weitere Insights

Alle anzeigen