Wie entsteht eine Website?

An dieser Stelle möchte ich einmal den Entstehungsprozess einer Website vorstellen um dem geneigten Leser einen kleinen Überblick über den Prozess der Websiteerstellung zu geben und warum nur ein kleiner Teil dieses Prozesses tatsächlich von der Programmierung der Website eingenommen wird.

Das Brainstorming

Im ersten Schritt muss man sich vor der Erstellung einer Website überhaupt erstmal die Ausgangslage klar machen und sich am besten einmal mit dem Kunden zu einer Brainstorming Session zusammen setzen und die Rahmenbedingungen des Projekts abstecken. Hierbei ist es wichtig ganz grundsätzliche Fragen zu stellen die aber entscheidend die Richtung des Projekts vorgeben. Wer ist der Auftraggeber? Was soll mit der Website erreicht werden? Was soll die Website leisten bzw. bewerben (Produkt, Person oder Dienstleistung?). Wer ist die Zielgruppe der Website? Was erwartet diese Zielgruppe?

Diese Fragen erscheinen erstmal sehr einfach, sind am Ende aber wichtig um ein klares Ziel für das Projekt zu definieren an dem man sich dann bei Funktion und Design orientieren kann.

Um das ganze etwas beispielhafter zu machen spielen wir das ganze einmal anhand eines Beispiels durch. Der Kunde ist in diesem Fall ein Restaurant der gehobenen Gastronomie. Der Inhaber möchte seine alte, nicht mehr zeitgemäße Seite komplett überarbeiten lassen. Da das Restaurant zur gehobenen Kategorie gehört besteht die Kundschaft eher aus Besserverdienern im Alter 40+. Entsprechend dem Ambiente des Restaurants möchte unser Gastronom die Seite gerne modern, aber elegant gestaltet haben und im Design passend zur Einrichtung des Restaurants.

Damit wäre geklärt was unser Kunde erwartet und welche Ziele er mit der Seite verfolgt. Die zweite große Frage die sich stellt ist nun die nach der Zielgruppe und was diese von unserer Seite erwartet.

Hier kann es, abhängig von der Nische in der man sich bewegt, sehr komplex werden und man kann einiges an Zeit und Energie in die Zielgruppenforschung investieren. Nicht umsonst gibt es in größeren Firmen ganze Teams die sich mit nichts anderem als Zielgruppenforschung beschäftigen.

Für unsere Zwecke und um die Kosten erstmal nicht künstlich aufzublähen gehen wir einfach mal davon aus dass die Zielgruppe unseres Gatronom wie oben bereits angegeben Personen im Alter über 40 Jahren sind. Hier ist es manchmal hilfreich sogenannte Personas zu erstellen. Dabei legt man (fiktive) Steckbriefe für Personen aus der Zielgruppe an. Dieses Vorgehen hilft einem dabei sich die stärker in seine Zielgruppe hinein zu versetzen und ein besseres Verständnis für die Wünsche der Kunden zu entwickeln.

Haben wir nun unsere Ziele für die Website und unsere Zielgruppe definiert können wir konkret werden und anhand der angenommenen Wünsche unserer Zielgruppe die Eigenschaften unserer Website definieren.

Inhalte und Funktionen planen

Super, wir kennen nun also unsere Zielgruppe und haben ein Verständnis dafür was unser Firmenkunde mit seiner Website erreichen will. Im nächsten Schritt müssen wir uns nun überlegen wie unsere Website eigentlich aussehen soll und was sie für Inhalte und Funktionen bieten muss um unsere Kunden anzusprechen.

Hier müssen wir uns wieder in unsere Zielgruppe hinein versetzen. Was möchte jemand der unsere Restaurant-Website besucht? Sicherlich die Adresse des Restaurants, am besten mit Wegbeschreibung oder noch besser direkt mit Anbindung an einen Kartenservice mit Routenplaner wie Google Maps. Natürlich möchte der Kunde auch wissen was es zu essen gibt. Also muss die Speisekarte eingebunden werden. Natürlich wäre das auch als PDF möglich, nutzerfreundlicher wäre es aber die Speisekarte direkt auf der Website einzubinden weil dies der Usererfahrung nützt und besser für Mobilgeräte ist. Wie sieht es mit Sitzplätzen aus? Möchten wir vielleicht noch ein online System einbauen dass es ermöglicht Sitzplätze zu reservieren oder reicht uns die Angabe der Telefonnummer? Bietet das Restaurant auch einen Lieferservice oder Mittagstisch? Dann wäre vielleicht noch ein online-Shop sinnvoll oder sogar eine Mobil-App, vielleicht noch ein Blog um Kunden über aktuelle saisonale Angebote zu informieren…

Sie sehen sicherlich dass man sich an diesem Punkt sehr schnell verlieren kann und statt einer einfachen Website auf einmal die Erstellung einer ganzen Web-Plattform geplant hat. Aber die Wahrheit ist auch dass nicht jedes kleine Dorfrestaurant eine 10.000€ Webseite nebst Mobile-App benötigt. Deshalb ist auch die vorangegangene Planungsphase so wichtig gewesen um hier einen klaren Rahmen vorzugeben.

Gehen wir zurück zu unserem Beispiel. Sinnvoll ist sicherlich die Adresse und Anfahrtsbeschreibung einzufügen. Der Kunde möchte außerdem dass die neue, moderne Einrichtung des Lokals werbewirksam zur Schau gestellt wird. Es ist also geplant eine Bildergalerie mit Impressionen aus dem Restaurant einzubauen. Zusätzlich entscheidet sich der Kunde ebenfalls dafür die Speisekarte nochmals als eigenständige Unterseite einpflegen zu lassen. Dadurch müssen Kunden nicht erst eine Datei herunterladen oder anzeigen lassen was je nach Endgerät unberrechenbar ist und gegebenenfalls technisch nicht versierte Nutzer überfordern könnte. Zusätzlich entscheidet sich der Kunde dazu für Reservierungen ein kostengünstiges Kontaktformular einbauen zu lassen, dass Anfragen per eMail an die sowieso schon vorhandene Mailadresse des Restaurants weiterleitet.

Die Screendesigns erstellen

Mit diesem Aufgabenpaket begeben wir uns nun ans Screendesign. Darunter versteht man einen oder mehrere sehr grobe Prototypen für die Seite. Ziel ist es in diesem Schritt nur mehrere Szenarien zu entwickeln wie man die geplanten Elemente auf der Website einbaut. Möchten wir gerne ein one-page Design mit Sektionen statt Einzelseiten? Möchten wir einen großen ausladenden Header? Wo soll die Navigation sitzen? Bei einem Screendesign werden alle diese Elemente nur grob skizziert und in Blöcken dargestellt, um Details wie Farben, Schriftarten oder Grafiken kümmert man sich erst später.

Für diesen Prozessschritt nutzen viele Webdesigner immer noch Papier und ich kenne auch Leute die sehr gerne basteln und mit ausgeschnittenen Elementen arbeiten. Der Kreativität sind in diesem Bereich keine Grenzen gesetzt.

Ein erster Prototyp

Hat man sich nun mit dem Kunden auf ein Screendesign geeinigt geht es daran einen ersten Prototyp zu entwickeln. Häufig wird hierzu erstmal aus dem Screendesign mithilfe von Software ein erster klickbarer Prototyp erstellt mit dessen Hilfe sich der Kunde schonmal durch einen ersten interaktiven Prototypen klicken kann. Bekannte Vertreter dieser Softwarekategorie wären beispielsweise Balsamiq, MarvelApp oder beispielsweise auch inVision. Ob man diesen Aufwand allerdings betreibt ist natürlich auch eine Frage des Projektumfangs. Ein alternativer Ansatz wäre es zum Beispiel von Anfang an iterativ zu arbeiten, basierend auf dem Screendesign direkt einen Prototyp-Website zu programmieren und von hier aus dann gemeinsam mit dem Kunden die Website in kleinen Schritten weiter zu entwickeln.

Die Wahl des richtigen Frameworks

Nach all unserer bisherigen Arbeit (die übrigens noch komplett ohne Programmierung auskommen kann) kommen wir nun zur konkreten Umsetzung der Website. Hier fängt also erst die eigentliche Programmierarbeit an. Doch halt! Zuerst müssen wir uns einmal für das technische Gerüst der Website entscheiden, denn es gibt nun mehrere Möglichkeiten. Wir können unsere Seite und eventuelle angegliederte Systeme wie einen online Shop, ein Bestellsystem o.ä. komplett selber programmieren was natürlich am teuersten ist aber auch die beste Kontrolle bietet und man erhält ein maßgeschneidertes Produkt. 

Es gibt allerdings auch Alternativen, beispielsweise so genannte static-site generators wie zum Beispiel Jekyll. Bei Jekyll handelt es sich um ein Programm dass, basierend auf einer Vorlage (die man frei erstellen kann) automatisch eine Website erstellt. Diese muss man dann nur noch auf seinen Hostingdienst hochladen.

Der Vorteil von Jekyll besteht darin dass Jekyll in der Lage ist beispielsweise einen Blog zu erstellen ohne dass auf dem Webserver eine Datenbank laufen muss. Dadurch ist unsere Seite im laufenden Betrieb pflegeleichter, schneller, billiger (weniger Aufwand und keine Datenbank), hat weniger bewegliche Teile die kaputt gehen könnten und ist auch sicherer weil man nur die einfache Webseite hochlädt und keine angreifbare Datenbank im Hintergrund hat. Systeme wie Jekyll haben aber auch Nachteile, zum Beispiel sind dynamische Inhalte wie Kommentare nur schwierig umzusetzen.

Die andere offensichtliche Alternative wäre eine WordPress Seite. WordPress wurde ursprünglich als open-source Blogging Plattform entwickelt. Heute läuft auf WordPress aber alles von Firmenwebseiten bis hin zur Wahlkampf-Website eines ehemaligen amerikanischen Präsidenten. Dabei bietet WordPress diverse Vorteile wie zum Beispiel fertig verfügbare Themes (Vorlagen die die Optik der Website bestimmten) die es teilweise sogar kostenlos gibt und die man seinen persönlichen Wünschen anpassen kann. Daneben kann man WordPress auch funktional über Plugins erweitern. Es gibt beispielsweise Plugins für alles vom eShop bis hin zum Kundenmanagementsystem. Nachteile ergeben sich bei WordPress beispielsweise dadurch dass zwingend eine Datenbank erforderlich ist und man aufgrund der vielen Funktionen ggf. auch schnell mal den Überblick verlieren kann. Außerdem muss man bei WordPress insbesondere auf den Datenschutz seiner Kunden achten, beispielsweise wenn man die Kommentarfunktion unter Blogbeiträgen aktiviert lässt.

Fazit

Wir haben nun also unsere Website inhaltlich abgesteckt, haben einen inhaltlichen und technischen Rahmen wie die Seite aussehen soll und haben uns idealerweise entschieden ob wir die Website komplett in Handarbeit oder mithilfe eines Frameworks entwickeln möchte. Um hier nicht viel zu sehr ins Detail zu gehen mache ich hier erstmal einen Schnitt und werde die Erstellung einer Beispielseite sowohl per Hand, mittels Jekyll auch per WordPress exemplarisch in einer eigenen Artikelserie behandeln. Ich hoffe sie bleiben mir treu.

Als take-home message hoffe ich dass sie einen Eindruck darüber bekommen haben was die Entwicklung einer professionellen Webanwendung eigentlich ausmacht und dass erstaunlich wenig Programmierarbeit in den Gesamtprozess einfließt. In diesem Zusammenhang sollte man auch Websitegeneratoren wie beispielsweise Wix sehen, da man hier natürlich trotzdem den Designprozess durchlaufen muss und sich letztlich nur die Programmierarbeit spart.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.