In 5 Schritten zur neuen Website – the Sergeant Way

Ob eine Website von Grund auf neu entwickelt oder eine bestehende Website überarbeitet wird - ohne einen strukturierten Prozess geht nichts. Bei uns läuft das Ganze in fünf Schritten ab. Spoiler: Anstossen gehört dazu. 

Kreativprojekte folgen nicht immer einer genauen Struktur: Man sucht an ungewöhnlichen Orten nach Inspiration, testet neue Tools, macht manchmal drei Schritte rückwärts, um den entscheidenden nach vorne zu machen. Aber wenn es eine Art von Projekten in unserem Beruf gibt, die systematisches und strukturiertes Vorgehen belohnt, dann sind es Websites. Wie wir das bei Sergeant machen - ein Einblick.

1. Konzept & UX: Die W-Fragen klären

Wir starten Projekte mit einem Kick-off-Meeting. Dort besprechen wir Ziele und Zielgruppen, klären Bedürfnisse und Erwartungen und klären zwei wichtige Zahlen: die Deadline und das Budget. Unsere Erfahrung zeigt, dass es sich lohnt, diese Zeit in ein erstes Treffen und dessen Vorbereitung zu investieren. So stellen wir sicher, dass alle Beteiligten mit dem Endprodukt - der Website - zufrieden sind.

Danach geht es auch schon in Richtung Design. Mit Tools wie Miro oder Figma erstellen wir Wireframes, d.h. wir skizzieren die Informationsarchitektur, die Navigationsstruktur und prototypische Seiten. Designelemente wie Farben, Schriften oder Bilder spielen in diesem Schritt explizit noch keine Rolle. Wir wollen uns hier auf die Struktur konzentrieren. Zusammen mit den Kund*innen bestimmen wir so den Seitenaufbau der wichtigsten Seitentypen wie beispielsweise Homepage oder Produktseite. In diesem Schritt stehen die User und ihre Bedürfnisse im Mittelpunkt. Dabei kann es auch etwas kreativer zugehen. Beispielsweise helfen Moodboards und Collagen mit ersten visuellen Ideen und Ansätzen für die Entwicklung des User Interface Designs im nächsten Schritt.

Unsere UX-Designerin Natascha hat ihren UX-Prozess in ihrem letzten Blogpost erklärt.

2. User Interface Design: Es wird bunt

Sobald Seitenstruktur, Navigation und Seitenaufbau definiert sind, kommt buchstäblich Farbe ins Spiel. Unsere UI-Expertinnen erstellen Entwürfe von Seiten mit realen Inhalten. In dieser Phase nutzen wir gerne das «Atomic-Design»-Konzept. Das bedeutet, dass zuerst die kleinsten Elemente wie zum Beispiel Buttons oder Überschriften erstellt werden. Man arbeitet sich also vom Kleinen zum Grossen vor. Mit anderen Worten: Wir bauen uns selbst einen Baukasten, mit dem wir das Design in Zukunft ganz einfach und flexibel weiterbauen können. Bei der Entwicklung des User Interface Designs achten wir darauf, dass die Website auf allen Screengrössen funktioniert. 

3. Content Creation: Die Seite zum Leben erwecken

Ohne aussagekräftige Inhalte bleibt das schönste Design eine leere Hülle. Erst Worte, Bilder und Videos füllen die Website mit Leben und machen die Marke erlebbar. Die Erstellung der Inhalte sollte frühzeitig im Projekt beginnen, idealerweise nach der Konzeptionsphase und parallel zur Entwicklung des Designs. Content und Design sollten aufeinander abgestimmt sein, um ein stimmiges Gesamtergebnis und -erlebnis zu schaffen. Um auch in diesem Schritt strukturiert vorzugehen, hilft ein Content-Plan, also welche Inhalte in welcher Form wo auf der Website Platz finden. Dabei ist es wichtig, immer das Ziel der Website und die Zielgruppen im Auge zu behalten.

Die Erstellung von hochwertigen Inhalten wie Texten, Bildern, Videos, Grafiken und Animationen nimmt viel Zeit in Anspruch. Meist mehr, als man zunächst denkt. Und was auch gerne unterschätzt wird: Eventuelle Übersetzungen in verschiedene Sprachen und das Einpflegen in die Website nehmen zusätzlich Zeit in Anspruch.

SEO: Ein kleiner Exkurs

Wenn wir über Inhalte sprechen, ist SEO nicht weit. Bei der Suchmaschinenoptimierung geht es darum, Websites so zu optimieren, dass sie in den Suchergebnissen so weit oben wie möglich angezeigt werden, damit mehr User auf die Website gelangen.  Es gibt viele Massnahmen, um Websites für Suchmaschinen zu optimieren. Dafür reicht der Platz in diesem Blogpost leider nicht aus 😉. Aber ganz kurz: Wichtig ist, dass die Website technisch und inhaltlich gut strukturiert ist - und dass die Inhalte für die Zielgruppen relevant sind.

4. Development: Die Website entsteht

Nun geht es darum, das Design und die Inhalte funktional umzusetzen. Nach der Freigabe des UI-Designs programmieren wir die Website genau nach dessen Vorgaben. Am liebsten programmieren wir mit Drupal.

Bei der Programmierung einer Website stösst man immer wieder auf die Begriffe Frontend und Backend. Die Entwicklung des Frontends bezieht sich auf alle Elemente, die die Besucher*innen einer Website sehen, also Bilder, Videos und Texte sowie auch das Design. Bei der Entwicklung des Frontends achten wir unter anderem auf Responsive Design, das heisst, dass die Website für jede Bildschirmgrösse optimal dargestellt wird. Das Backend bezieht sich auf alles, was hinter den Kulissen und für die User unsichtbar abläuft. Dazu gehören beispielsweise die Prozesse also was passiert, wenn man auf einen Button klickt), Schnittstellen zu anderen Anwendungen wie CRM etc.

5. Testing & Go Live: Hoch die Tassen

Es ist soweit, die Website ist programmiert. Die Aufregung ist gross und am liebsten würde man gleich loslegen. Aber nicht so schnell! Zuerst muss die neue Website getestet werden. Projektmanager*in, Designer*in und Programmier*in testen die Website während der Qualitätsprüfung auf Herz und Nieren. Das ist für uns ein sehr wichtiger Schritt, um sicherzustellen, dass die Website allen Anforderungen entspricht. Danach prüfen unsere Kund*innen die Website ein allerletztes Mal und erteilen die Freigabe.

Und dann ist es soweit! Wir empfehlen, das Go Live auf den Wochenanfang zu legen, damit wir bei Problemen schnell reagieren können. Im Live-Modus testen wir die Website noch einmal auf Herz und Nieren

Nach dem Launch ist vor dem Launch

Die Website ist live und der Champagner leer getrunken. Das heisst aber nicht, dass der Job erledigt ist. Eine wichtige Aufgabe nach dem Go Live sind regelmässige Updates. Damit stellen wir sicher, dass die Website immer auf dem neuesten Stand und vor Angriffen geschützt ist.

Das Schöne an Websites ist, dass sie nicht statisch, sondern dynamisch und wandelbar sind. Regelmässig neue Inhalte sorgen dafür, dass die Website sowohl für die Zielgruppe als auch für Suchmaschinen relevant bleibt.

So strukturiert unsere Arbeit in Sachen Website also inzwischen auch ist - der Prozess ist und bleibt kreativ.