Webdesign Schritt für Schritt – Entstehungsprozess einer Website

Wie entsteht ein Website? Welche Schritte folgen auf einander? Wo passieren Fehler und wie kann man diese vermeiden? Natürlich führen viele Wege zur fertigen Website, meinen persönlichen möchte ich hier erläutern. Dieser hat sich aus den Erfahrungen der letzten Jahre als Webdesigner ergeben und hilft anderen vielleicht weiter.

Mein Prozess ist nicht in Stein gemeißelt, eher mit Kreide aufgemalt, damit er laufend optimiert werden kann. In den kommenden Beiträgen werde ich auf die einzelnen Schritte im Detail eingehen. Doch zuerst einmal ein Überblick:

Drei Phasen

Ich gliedere die Geburt einer Website in drei große Phasen, die wiederum jeweils in drei Einzelschritte unterteilt sind:

1. Vorbereitung – Analyse, Briefing und Konzept
2. Gestaltung – Contenterstellung, grafische und technische Gestaltung
3. Umsetzung – Zusammenführen, testen, Launch

Wichtig ist, dass diese Phasen und Schritte nicht in sich abgeschlossen sind. Auf dem Weg zur fertigen Website bewege ich mich vor und zurück. Es werden manche Schritte übersprungen, andere kommen hinzu oder werden genauer gemacht. Auch die Reihenfolge kann sich ändern. Dieses Modell zeigt eine Idealsituation, die es so nur selten gibt. Es wichtig für jedes Projekt ein individuell passendes Vorgehen zu finden.

Vorbereitung

Hier wird der Grundstein von allem gelegt. Diese Phase ist wohl noch am ehesten in sich abgeschlossen, wobei es natürlich möglich ist, das im Zuge der Umsetzung auch das Konzept etwas angepasst wird.

1. Analyse

Nicht immer ist die Analyse notwendig, doch wenn es sich um das Redesign einer bestehenden Website handelt oder es um das Beurteilen der Websites der Konkurrenz geht, ist diese sehr praktisch.

2. Briefing

Das Briefing bildet den Ausgangspunkt von allem. Hier lernt man das Projekt kennen, Ziele und Zielpublikum werden definiert. Je genauer man es macht desto mehr Ärger und Fragen erspart man sich später im Prozess.

3. Konzept

Nach einem ausführlichen Briefing mit klarer Zieldefinition kann man sich an die Konzeption der Seite machen. Hier werden der Aufbau der Website mittels einer Sitemap, die Navigationsstruktur, Seitenelemente und Contentarten definiert. Das ganze wird mittels Mockups schematisch skizziert.

Gestaltung

Sobald Ziele und Konzept stehen geht es an die Gestaltung, womit nicht nur die grafische gemeint ist. Es geht um das Erstellen von Inhalten, Design und Code, den Bausteinen einer jeden Website.

4. Contenterstellung

Auch ohne das fertige Design kann und sollte mit der Erstellung des Inhalts angefangen werden. Der Inhalt ist das Wichtigste einer Website, denn wegen diesem wird sie besucht. Der Content sollte qualitativ hochwertig, sinnvoll, auf den Punkt gebracht und für Suchmaschinen optimal sein. Mit Content sind nicht nur Texte gemeint, auch Fotos, Grafiken, Videos, Audiofiles, etc..

5. Grafische Gestaltung

Anstatt gleich das Aussehen der fertige Website zu designen arbeite ich oft noch vor einem konkreten Entwurf Moodboards oder Style Tiles aus. Auf Basis dieser erstelle ich das Design der Website anhand von zwei bis drei Beispielseiten noch in Photoshop oder Fireworks. Wenn das Design freigegeben wurde wird das Grunddesign in HTML und CSS umgesetzt. Die weiteren Schritte des Designs erfolgen dann im Browser.

6. Technische Gestaltung

Schon vor der Fertigstellung des grafischen Designs kann das Content Management System (CMS) aufgesetzt werden um früh die Eingabe der Inhalte zu ermöglichen. Auf Basis des Konzepts lassen sich auch die wesentlichen Funktionen der Website programmieren. Ziel ist es bald einen klickbaren Prototyp zu haben. Das Design und die Inhalte müssen hier noch nicht vollständig vorhanden oder intergriert sein.

Umsetzung

Content, Code und Design werden vereint, getestet und die Website geht an die Öffentlichkeit. Diese Phase ist eine eigene Herausforderung, da alles auf einmal konkret wird. Vor allem den Atem zu behalten ist hier manchmal schwierig.

7. Zusammenführen

Spätestens jetzt sollten Inhalte in das CMS eingegeben und das Design optmiert werden. Fehlende Inhalte, Templates und Designelemente werden erstellt und umgesetzt. Die Website kann dabei mit dem echten Content beurteilt werden.

8. Testphase

Qualitätssicherung von Content, Code und Design. Hier werden technische Fehler (Bugs) behoben und der Text lektoriert. Im Idealfall wird die Seite von Testpersonen mit bestimmten Aufgabenstellungen durchgeklickt (Usability Testing). So wird alles so lange optimiert, bis man zufrieden ist.

9. Launch

Die Website ist bereit veröffentlicht zu werden. Vorher sollte alles noch ein letzte Mal durchgecheckt werden. Falls möglich startet man nicht vor großer Öffentlichkeit, sondern eher im Hintergrund, denn Fehler können auch hier noch passieren. Sobald die Seite online ist sollte man nach ein paar Wochen mit gesammelten Erfahrungen und Feedback schauen, was man noch verbessern sollte. Dieser Schritt ist fortlaufend. Außerdem kommen oft neue Inhalte dazu, die vielleicht wieder Anpassungen benötigen. Das Spiel spielt man so lange, bis die Website den gegeben Anforderungen nicht mehr entspricht oder schlicht visuell bzw. technisch angepasst werden muss. Dann sehen uns wieder bei Schritt 1.

Wie geht ihr vor?

Wie ist euer Prozess zur Erstellung einer Website? Welche Phase ist für euch am herausfordernsten und wo würdet ihr noch etwas ergänzen? Ich bin auf eure Kommentare gespannt!