Wie wir arbeiten

Der Startschuss findet in der Regel mit dem Briefing bzw. einem Pflichtenheft statt, das wir zur Verfügung gestellt bekommen. Für werkraum teilt sich das in unterschiedliche Bereiche auf, die daraus entstehen:

• Ideen und Vorstellungen zur Gestaltung der neuen Webseite

• Funktionen der geplanten Webseite

Aus beiden Bereichen resultiert daraus eine Aufwandsschätzung, idealerweise im ersten Schritt nur für die Umsetzung der Gestaltung. Da initial in der meisten Fälle bereits ein Kostenplan für das gesamte Projekt gefordert wird, wird zusätzlich die technische Umsetzung kalkuliert. Ist dies nicht notwendig, wird die technische Kalkulation erst mit der Abnahme des Klickdummys erstellt, was zu einer wesentlich genauer Kostenschätzung führt, da wir genau wissen, welche Inhaltselemente und Erweiterungen tatsächlich benötigt werden. Dies wird oft erst im Gestaltungsprozess finale entschieden.

Für die Kalkulation der Gestaltung sind folgende Elemente maßgebend:

• Kickoff-Workshop

• Grafische Konzeption und Wireframes

• Gestaltung auf Basis von Konzept, Wireframes und den Design-Vorgaben

• Styleguide

• Moodboard

• Auswahl der Keyvisuals (Stockfotos)

Für die technische Kalkulation werden folgende Elemente definiert:

• Anzahl Seitenlayouts

• Menüs

• genaue Aufstellung der geplanten Inhaltselemente und Formulare

• TYPO3-Erweiterungen (selbst entwickelte und öffentlich verfügbare)

• TYPO3-Update inkl. Migration der Inhalte

• Externe Services wie Suchserver, Tracking, Marketing-Automation, etc.

• Anbindung an HR-Tool wie Softgarden, Produktdatenbanken (PIM), etc.

Ist bereits eine TYPO3-Installation im Einsatz, muss im Zuge des Projektes ein Upgrade auf die neuste LTS-Version durchgeführt werden. Ist ein sehr großer Versionssprung in Kombination mit einer umfangreichen Installation geplant, sollte in einem Vorprojekt der genaue Umfang geprüft werden.

Parallel zum Gestaltungsprozess kann das Upgrade der TYPO3-Installation unabhängig davon begonnen werden. Das Update wird komplett durchgeführt und möglichst komplett in Form einer Automatisierung abgebildet. Dabei entsteht ein Drehbuch, das idealerweise vollautomatisch eingespielt werden kann. Diese wird am Ende des Projektes mit den neusten Inhalten eingespielt.

In einem Kickoff-Workshop lernen wir unsere Kunden richtig kennen. Wir wollen die Hintergründe verstehen, um das Projekt gemeinsam zum Erfolg zu führen. Die Inhalte können je nach vorherigem Briefing und Ansprüchen variieren und angepasst werden. Grundsätzlich geht es aber um folgende Themen:

• Genaues Ziel der Website

• Zielgruppe

• Inhalte und deren Struktur

• Wichtige Informationen und Details, die wir wissen sollten

So schaffen wir eine positive Umgebung und starten alle auf dem gleichen Level ins Projekt.

Auf der Grundlage der uns übergebenen Briefings gestalten unsere Designer das Layout der Webseite oder Applikation in Adobe XD. Dieses Programm stellt sich für uns so spannend dar, da wir über bereitgestellte Links mit Kommentarfunktion in einen direkten Austausch mit unserem Kunden gehen können und das kontextsensitiv, also immer in Bezug auf ein Element oder eine Seite.

Das Layout untergliedert sich in mehrere, aufeinander aufbauende Abschnitte. Ist ein Teil vom Kunden freigegeben, kann mit dem nächsten begonnen werden.

1. Konzept/Wireframes

Anhand der bereit gestellten Unterlagen und des durchgeführten Workshops zum Kennenlernen und Definieren der Ziele erarbeiten wir das Konzept der Website mithilfe von Wireframes. Es wird festgelegt, welche Elemente es für die Website braucht, in welcher Reihenfolge oder an welcher Position sie dargestellt werden sollen und welche Priorität sie haben. Zu diesem Zeitpunkt werden zudem wichtige Klickwege definiert und der Aufbau von Header, Menü und Footer bestimmt. Die Wireframes sind rein in Graustufen aufgebaut und bilden das Fundament für die Ausarbeitung des Designs.

2. Design

Nach der Pflicht kommt nun die Kür und wir können uns an das Aussehen der Webseite machen. Gibt es Vorgaben zum Corporate Design, lassen wir diese mit einfließen. Ansonsten wählen wir passende Schriften, Schriftgrößen, Farben und Gestaltungselemente. Wie sieht ein Button aus? Wie ein Formular? Was passiert bei einem Mouseover? Gibt es kleine Animationen? Im besten Falle haben wir zu diesem Zeitpunkt für die wichtigsten Seiten ein paar reale Inhalte, Fotos oder Grafiken, um die Gestaltung bestmöglich an die Bedürfnisse anzupassen. Daraus entsteht Templates, die schon sehr nahe an der späteren Umsetzung sind. Ist die Freigabe des Designs erfolgt, geht es mit dem nächsten Schritt weiter.

3. Styleguide

Jetzt sieht alles hübsch, aber wie weiß der Entwickler was zu tun ist? Im Styleguide listen wir alles, was irgendwie für die technische Umsetzung von Gestaltungsseite aus wichtig ist, auf. Raster, Farben, Menüs, Schriften, Teaser, Call-to-Actions, Buttons, etc. werden nun genau beschrieben. Welche Zustände gibt es? Wie verhalten sich die Elemente responsiv? Den Styleguide und die Templates geben wir dann in einem internen Meeting in die Hände der Entwickler weiter.

Grundsätzlich gilt: je mehr von Anfang an festgelegt wird, desto weniger Unstimmigkeiten, Fragen und Change Requests gibt es im Laufe des gesamten Projekts.
 

Umsetzung des HTML-Prototyps

Nach der Abnahme der Gestaltung auf Basis des Adobe XD-Layouts beginnen wir mit der Umsetzung des HTML-Prototyps. Dieser Schritt ist notwendig, da mit XD freigegebene Screens zwar auch im Browser abgebildet werden, sich allerdings noch nicht wie eine echte Webseite „anfühlen“. Für eine richtige Abnahme reicht das aus unserer Sicht nicht. Bevor wir mit der aufwändigen Integration in das CMS beginnen, muss also ein belastbarer Prototyp entwickelt werden.

Abnahme des Prototyps durch den Kunden

Der Klickdummy auf HTML-Basis ist die ideale Abnahme für eine Webseite, da das Endprodukt nach der CMS-Integration genau dieser Seite entsprechen wird. Idealerweise wird jetzt die technische Umsetzung bzw. Übertragung in TYPO3 erst kalkuliert, sollte es aus den oben genannten Gründen nicht bereits zu Beginn des Projektes notwendig gewesen sein. So können wir sehr akkurat die Aufwände kalkulieren.

• In diesem Teil zerlegen wir den Klickdummy und integrieren die Einzelteile in TYPO3. Primär werden die Inhaltselemente umgesetzt und mit bearbeitbaren Attributen für Redakteure angereichert, neben Seitentemplates.

• Zudem werden sämtliche Extensions programmiert und integriert und mit den HTML-Komponenten aus dem Kickdummys versehen.

• Externe Systeme wie der Solr-Suchserver werden konfiguriert und an das CMS angebunden.

• Das Rechtesystem wird umgesetzt nach den Vorgaben des Kunden.

• Zum Abschluss findet die finale Qualitätssicherung statt, worauf die Abnahme der Seite durch den Kunden erfolgt. Getestet wird die Seite mit diversen Endgeräten, teils von Haus, teils vollautomatisch.

Da wir hauptsächlich auf den Inhaltselementen aus dem Kern von TYPO3 aufsetzen, kann schon vor dem Ende der kompletten Umsetzung der Elemente mit der Redaktion der Inhalte begonnen werden. Dies findet in der Regel auf einem Staging-Server statt, der nach der finalen Abnahme zum Live-System gemacht wird.

Oft findet in diesem Zuge auch die Schulung der Redakteure durch unsere erfahrenen TYPO3-Entwickler oder -Projektleiter statt.