Wie sieht der Webdesign Prozess für die Erstellung einer Webseite aus?

Heutzutage kann man eine Webseite mit einem Theme von WordPress und ein paar Klicks erstellen. Auch WIX, Joomla, Drupal und TYPO3 sind andere Beispiele.

Die meisten wollen jedoch keine Standard 08/15 Website sondern einen Ort Online, wo man das Corporate Design und die Corporate Identity, dass heisst, die Marke, erleben kann.

Hierfür braucht es jedoch einen Webdesign Prozess. Dieser ist hier beschrieben. Zudem gibt es auch einen Einblick in den Aufwand solch einer Umsetzung.

Webdesign Prozess für eine grosse Website

Im Idealfall gibt es eines oder alle der folgenden Punkte:

  1. Initiales Briefing: Hier wird beschrieben welche Fonts/ Zeichen, Farben, etc. verwendet werden
  2. Whiteboard Meeting: Hier wird gemeinsam mit dem Kunden besprochen welche Seiten es gibt. Es kann auch in Form eines Brainstormings geschehen, mit Sticky Notes und allem drum herum. An einer Tafel werden alle Punkte festgehalten
  3. Skizzen: Ein Designer wird sich nun daran setzen, die ersten Skizzen, zum Beispiel mit einem Bleistift auf ein Blatt Papier zu zeichnen. Diese können dann gescannt an den Kunden gesendet werden.
  4. Design in Photoshop: Gefallen die Skizzen, können diese als Photoshop Dateien umgesetzt werden. Dort kann man dann bereits sehen, wie die Website aussehen wird (ohne die interaktiven Elemente wie Buttons, etc.)
  5. Adobe XD: Einige machen auch eine Demoversion mit Adobe XD. Somit kann man sich durch die Website klicken, ohne dass man die technische Umsetzung dafür machen muss. Änderungen sind in dieser Phase dann einfacher.
  6. HTML und CSS Erstellung: Ein Webdesigner kommt nun in das Spiel. Er oder sie wird die HTML und CSS Dateien erstellen. Das ist das Design in der technischen Umsetzung für die Website.
  7. Bootstrap und Zurb: Manche Entwickler nutzen HTML/ CSS Frameworks wie Bootstrap oder Zurb, um das HTML/ CSS Design zu erstellen. Dort sind Themen wie Responsive Design, für den Aufruf über unterschiedliche Geräte wie Smartphones, Tablets, Desktops, etc. bereits abgedeckt.
  8. Einbau in WordPress/ TYPO3/ Drupal/ Website: Nun müssen die HTML/ CSS Dateien in das jeweilige Content Management System (CMS) wie zum Beispiel WordPress oder TYPO3 eingebaut werden. Das übernimmt dann ein Web Entwickler und kann meistens nicht vom Webdesigner gemacht werden.
  9. Zwischenhinweis: Wie man sieht, der Aufwand ist bis hierher bereits gross. Der Projektleiter muss die Anforderungen aufnehmen. Der Designer muss die Designs erstellen. Der Web Designer erstellt die HTML/ CSS Dateien. Und der Webentwickler baut es in die Website oder ein CMS ein. Das heisst, hier sind zirka 3 bis 4 Personen involviert, um das Design und die Website umzusetzen.

Gesamtaufwand: zirka 200 Stunden

Zu alledem kommen dann noch Extrapunkte wie:

  • Photoshooting: Ein Fotograf erstellt professionelle Bilder
  • Erklärvideo: Eine Agentur erstellt ein Erklärvideo, welches auf der Website genutzt wird
  • Corporate Video: Es wird ein Unternehmensfilm erstellt
  • Frontend Entwicklungen: Zum Beispiel werden Effekte im Frontend programmiert mit JavaScript und ähnlichen Technologien
  • Backend Entwicklung/ Zusatzfunktionalitäten: In einigen Webseiten gibt es Online Kalkulatoren (um Preise zu berechnen oder zu vergleichen) oder Produktkonfiguratoren und ähnliches. Hierfür braucht es eine aufwendige Programmierung mit Technologien wie PHP.

Gesamtaufwand: hoch/ unterschiedliche nach Projekt

Besonders die Extrapunkte können einen grossen Mehraufwand verursachen. Lohnen tut sich die Investition in den meisten Fällen jedoch schon. Ein Erklärvideo, zum Beispiel, kann die Dienstleistung in wenigen Minuten erklären.

Weitere Punkte die in einem weiteren Projekt folgen:

  • Onlineshop: Immer mehr Webseiten haben einen kleinen Onlineshop, wo man Produkte und Dienstleistungen einkaufen kann.
  • Warenwirtschaft Anbindung: Bei vielen Transaktionen macht eine Anbindung an das eigene Warenwirtschaftssystem Sinn. Der Aufwand lohnt sich jedoch erst, bei entsprechenden Volumen an Transaktionen. Bei wenigen Bestellungen kann man auch manuell arbeiten.

Gesamtaufwand: hoch/ unterschiedliche nach Projekt

Mittlere Website versus Erstellung grosser Website

Wie man im ersten Teil des Beitrages bereits ersehen kann: Der Aufwand bereits für die Webdesign Phase is hoch.

Bei kleineren Webseiten, zum Beispiel für Berater, Freelancer, kleine Praxen und ähnliche Kleinunternehmer, wird der Aufwand zu hoch, d.h. die Kosten werden zu hoch sein.

Hier wird dann meistens ein einfacherer Weg genommen.

Diese können wie folgt aussehen:

  1. Beispielwebseiten: Der Kunde wird gefragt, welche Beispielwebseiten dieser interessant findet.
  2. Photoshop Design: Auf Grundlage dieser Beispiele wird ein Photoshop Design erstellt.
  3. Drei Änderungswünsche: Daraufhin kann der Kunde dreimal nach Änderungswünschen fragen.
  4. Einfache Bootstrap Website: Das Design wird dann mit Bootstrap umgesetzt, um die Arbeit für HTML und CSS zu vereinfachen und die Website für alle Endgeräte (Mobile, Web, Desktop) verfügbar zu machen.
  5. Einbau in ein CMS wie WordPress: Dieses Bootstrap Design wird dann in WordPress implementiert. So dass der Kunde auch selbst Blogbeiträge und ähnliches hinzufügen kann. Und auch Updates via dem Backend vornehmen kann (einfach möglich, durch wenige Klicks).

Gesamtaufwand: zirka 120 Stunden

Kleine Website

Manchen sind auch die mittleren Webseiten bereits zu viel Aufwand/ Kosten.

Hier kann man folgenden Weg gehen. Die 40 Stunden Implementierung.

  1. WordPress Template von Themeforest: Es gibt eine Plattform namens Themeforest. Dort gibt es WordPress Templates, welche zwischen 40 und 80 Euro kosten. Der Kunde kann sich dort ein interessantes auswählen. Am besten sind die populären Templates wie Avada oder Enfold.
  2. Demo Seite importieren: Es gibt viele Demo’s in den populären Templates (auch Themes genannt). Diese Demo Seiten lassen sich einfach einspielen.
  3. Inhalte hinzufügen: Der nächste Schritt ist dann das Hinzufügen von Bildern und Texten.
  4. Plugin Installierung: Es gibt zirka 7 bis 9 Plugins die man installieren und konfigurieren muss. Einige Beispiele:
    1. WPForms: Um die Kontaktformulare zu erstellen
    2. iThemes Security: Um die Website sicherer zu machen
    3. Cache Plugin: Um die Webseite schneller laden zu lassen
    4. etc.
  5. DSGVO/ Impressum, etc.: Besonders wichtig sind in Deutschland die Umsetzung von Impressum, DSGVO und ähnlichem. Hierfür gibt es unter anderem passende Plugins.
  6. SSL: In vielen Fällen ist das Grüne Schloss noch nicht implementiert (das Zeichen im Browser, dass dem Webseitenbesucher anzeigt, dass die Seite sicher ist). Dies muss vom Webentwickler übernommen werden, auch wenn es zum Teil eine einfache Aufgabe ist.

Gesamtaufwand: zirka 40 Stunden

Klar ist in dieser Methode auch, dass die Website einen eher etwas Standard-Look haben wird. Dies wird für die meisten kleinen Onlinepräsenzen jedoch oftmals ausreichen. Zudem wird der Preis in einem bestimmten Rahmen sein.

Welche Erfahrungen haben Sie mit dem Webdesign Prozess?

Andere Texte:
Phasen im Webdesign von pixteltuner
Eine weniger technische Sichtweise bei Zeichenschatz, Schritt für Schritt

Bilder: Canva

Der Autor: Sascha Thattil arbeitet bei YUHIRO und hilft Unternehmern und Unternehmen beim einfachen Aufbau von Programmier-Teams in Indien. YUHIRO ist ein deutsch-indisches Unternehmen welches IT Firmen, Agenturen und IT Abteilungen Softwareentwickler bereitstellt.

Von am Juni 6, 2019   /   Webdesign   /   Einen Kommentar abgeben

Schreibe einen Kommentar