Wie entsteht eine Website?

Zeichnung Trichter Maschine produziert eine Website

Es gibt unterschiedliche Wege, eine Website für einen Kunden zu erstellen. Der Ablauf kann auch abhängig von Umfang und Anforderungen variieren. In diesem Artikel erkläre ich, wie ich dabei grundlegend vorgehe.

Konzeption: Was soll die Site bieten? Was soll sie können?

Das Wichtigste bevor eine neue Website entsteht: die Konzeption! Diese beginnt im besten Fall mit einem persönlichen Gespräch mit dem Auftraggeber. Jeder hat andere Vorstellungen davon, wie die eigene Website aussehen soll… mancher auch noch gar keine. Das ist aber überhaupt nicht schlimm, denn in einem Gespräch wird vieles klarer. Kein Gestalter kann seinem Kunden in den Kopf gucken, aber je mehr dieser über seine Ideen erzählt, umso besser kann der Gestalter helfen. Meist soll eine Website ja auch nicht nur den Auftraggeber, sondern vor allem eine bestimmte Zielgruppe ansprechen, die vorab klar definiert werden muss. Diese Dinge sollten möglichst vor Beginn der Umsetzung geklärt werden, da nachträgliche Änderungen sehr aufwändig und damit auch kostspielig werden können. Unter diesem Link finden Sie meinen Fragebogen, der alle wichtigen Punkte zur Konzeption einer Website enthält.

Inhalte: Was soll kommuniziert werden?

In den meisten Fällen sollten schon Inhalte für die Website vorhanden sein, denn wozu braucht man eine Plattform, wenn man nichts zu sagen hat? Falls noch keine Inhalte existieren ist dies nun ein guter Zeitpunkt sich zu überlegen, was man mit der Website eigentlich kommunizieren möchte und dieses in einem Textdokument nieder zu schreiben. Auch Bilder, Grafiken, Logos und andere Dateien sollten in geeigneter Qualität gesammelt werden. Je vollständiger die Materialsammlung ist, desto besser. Nicht zuletzt haben bei einer maßgeschneiderten Website auch die Inhalte einen Einfluss auf die Form.

Wireframe erstellen

Anhand der Antworten aus dem oben genannten Fragebogen und der erarbeiteten Seitenstruktur werden dann erste Scribbles zum groben Aufbau der Site erstellt (Wireframe). Diese „Draht-Modelle“ werden dann, zunächst ohne Design, direkt in HTML, CSS und Javascript mit allen Funktionen und responsivem Verhalten (d.h. Anpassung auf Smartphone, Tablet usw.) umgesetzt. Nun kann die Site schon im Browser über eine versteckte Adresse betrachtet werden, die Menüführung kann getestet und die unterschiedlichen responsiven Darstellungen ausprobiert werden.

Design: Wie soll die Website aussehen?

Als nächstes entstehen sogenannte „Style Tiles“, d.h. es wird ein Design entwickelt (falls nicht bereits ein Corporate Design des Kunden existiert) und dieses auf die üblicherweise auf einer Website vorkommenden Elemente (z.B. Buttons, Teaser, Infoboxen, Überschriften, Icons…) angewendet, um einen Eindruck davon zu vermitteln, wie diese später aussehen könnten und welche Optik damit die gesamte Website bekommt. Hier werden auch alle vorkommenden Farben und Schriftarten festgelegt.

Wie eine Website sich entwickelt und welche Form sie dabei annimmt, hängt von einer Vielzahl von Überlegungen, Tests, Probeläufen und Recherchen ab. Deshalb sollten wichtige Entscheidungsträger von Anfang an in den Prozess integriert werden, so weiß am Ende jeder, wie und warum es zu dem Endergebnis kam.

Gewältes Design in Wireframe integrieren

Das vom Kunden freigegebene Style Tile wird dann Element für Element in das Wireframe-Modell integriert, so kann gleich sicher gestellt werden, dass es auch in allen responsiven Ansichten funktioniert.

Das Erarbeiten des Wireframe-Modells und die Entwicklung und Integration des Designs laufen oft parallel zueinander oder wechseln sich ab. Dies ist ein wichtiger Prozess des Testens und Überarbeitens, an dem der Kunde durch Rückmeldungen aktiv mitwirken sollte.
Die Website könnte jetzt schon fertig sein. Allerdings gibt es noch keine Möglichkeit, die Inhalte einfach zu pflegen, man müsste alles in HTML-Code schreiben.

Das fertig gestaltete Modell in Typo3 integrieren

Wenn das in HTML umgesetzte Design auch im Browser wie gewünscht aussieht und funktioniert wie es soll, wird es in die zuvor Installierte Typo3-Umgebung integriert, die ebenfalls zunächst nur über eine versteckte Adresse online erreichbar ist. An allen Stellen im Modell, an denen später Inhalte wie Texte und Bilder erscheinen sollen, werden nun Platzhalter eingefügt. Im System wird dann definiert, welcher Inhalt an welchem Platzhalter angezeigt werden soll. Die Inhalte gelangen zu den Platzhaltern über eine Datenbank, die mit Hilfe verschiedener Eingabefelder gefüllt wird. Hier kann der zukünftige Redakteur bequem und ohne besondere Kenntnisse Texte, Bilder und Dateien einbinden und noch vieles mehr.

Die gewünschte Domain auf die fertige Präsenz leiten

Nun wird die Website nochmals mit allen Beteiligten durchgesehen und geprüft, auch ausgewählte externe Personen sollten unvoreingenommen die Präsenz besuchen und sich darauf gut zurecht finden können. Gibt es noch Anlass zu Verbesserungen, werden diese jetzt durchgeführt. Ist alles in Ordnung und sämtliche Bedingungen und Erwartungen sind erfüllt, kann die richtige Domain auf die Präsenz geleitet und die neue Website veröffentlicht werden!