Kreativ umgesetzte und ansprechend gestaltete Websites sorgen im Idealfall für ein tolles Nutzerlebnis. Der Besucher findet die gewünschte Information innerhalb weniger Klicks. Die Erstellung einer Website ist in der heutigen Zeit allerdings umfangreicher denn je, denn hinter den Kulissen laufen viele kleinteilige Prozesse ab. Um bei der Vielzahl von Arbeitspaketen nicht den Überblick zu verlieren, lohnt es sich, einem Workflow zu folgen. Was ist ein Workflow? Wie könnte dieser Workflow im Webdesign aussehen?

Um wirtschaftlich zu agieren, Arbeitsroutinen zu etablieren und sich die Qualitätssicherung zu erleichtern, empfiehlt es sich, in der digitalen Medienproduktion einen Workflow zu etablieren. Workflow meint die „Beschreibung eines arbeitsteiligen, meist wiederkehrenden Geschäftsprozesses. Durch den Workflow werden die Aufgaben, Verarbeitungseinheiten sowie deren Beziehungsgeflecht innerhalb des Prozesses (z.B. Arbeitsablauf und Datenfluss) festgelegt.“ (Gapler Wirtschaftslexikon).

Ein „standardisierter“ Arbeitsablauf hilft, die heute so umfangreichen Arbeitspakete strukturiert abzuarbeiten und dabei nicht den Überblick über das große Ganze zu verlieren. Eine gute Vorlage für einen sinnvollen Workflow in der Website-Erstellung bietet frontendchecklist.io. Diese Checkliste lässt sich personalisieren und für den nächsten Auftrag nutzen – ein Report steht anschließend als PDF zum Download bereit.

 

PROZESS DER DIGITALEN VERÖFFENTLICHUNG

 

Briefing

Im Briefing werden alle relevanten Fragen zwischen Auftraggeber und Auftragnehmer geklärt, mit dem Ziel, die Produktentwicklung in die richtige Richtung zu lenken.

  • Projektdefinition – Wozu dient das Projekt? Was soll erreicht werden?
  • Ziele sind zum Beispiel: Unternehmensdarstellung, Verkaufsförderung, Präsentation, Information, Unterhaltung oder E-Commerce.
  • Zielgruppe? Bestimmung anhand von Marktsegmentierung.
  • Geografische Merkmale: Einzugsgebiet, Land, Region, Stadt
  • Soziodemografische Merkmale: Alter, Geschlecht, Bildung, Beruf, Einkommen
  • Psychografische Merkmale: Lebensstil, Einstellung, Werte, Motive
  • Hilfreich ist die Erstellung von Personas, also ein möglichst exakt definierter Prototyp einer Zielgruppe.
  • Welche Ziele hat die Person? Was ist der Person wichtig?
  • Welche Wünsche, Bedürfnisse oder Probleme hat die Person?
  • Wie sehen das Umfeld und der Alltag der Person aus?
  • Technische Spezifikation (Browser, Auflösung, Server, Sprache)
  • Content (Erstellung oder Anlieferung? Was soll kommuniziert werden?)
  • Ressourcen (Fonts, Bilder, Texte)
  • Magisches Dreieck (Termin-, Sach- und Kostenziel) im Projektmanagement beachten!
  • Zeitplan (Gantt / Projektmanagement-Tools)
  • Budget (Paketpreis oder Stundensatz?)
  • Kosten- und Angebotserstellung
  • Vermarktung?

Beispielhafte Fragestellungen für ein Briefing:

  • Wie soll die Internetadresse der neuen Webseite lauten? Gibt es vielleicht schon eine Domain?
  • Welche Zielgruppe soll angesprochen werden? Gibt es eine Webseite, die dem Kunden besonders gefällt? Und wenn ja: Welche Elemente gefallen ihm?
  • Kann der Kunde den gewünschten Stil definieren? (wie zum Beispiel seriös, modern, trendy)
  • Gibt es bereits ein Corporate Design?
  • Welchen Schwerpunkt soll der Internetauftritt abdecken? (Beispiel: Promotion und Verkaufsförderung, Unternehmensdarstellung)
  • Welche Aspekte des Unternehmens sollen dargestellt werden? Was ist der USP (Unique Selling Proposition = Alleinstellungsmerkmal)?
  • Welches Bildmaterial, welche Texte sollen verwendet werden?
  • Welche Funktionen sollen auf der Website platziert sein? (Beispiel: ein Shop-System, Downloads, Forum, geschützter Login-Bereich)
  • Braucht der Kunde ein Content-Management-System (CMS), damit er die Inhalte selber pflegen kann oder soll der Auftragnehmer die Pflege übernehmen? Wenn ja – wird ein bestimmtes CMS gewünscht?
  • Gibt es bestimmte Wünsche bezüglich der Technik? (Beispiel: Soll die Webseite barrierefrei sein? Soll eine Datenbank integriert werden?)

 

Planung

Die Vorbereitung und Planung stellen aufwändige Arbeitsschritte dar. Auf dieser Grundlage fußen letztlich Design & Development des Projektes.

  • Research (Konkurrenzanalyse, Was ist state-of-the-art in der Branche?)
    Kreativtechniken zur Ideenfindung: Brainstorming, Mindmapping, 6-5-3-Methode.
  • Architektur (Struktur/Navigation): Zur Planung empfehlen sich eine Sitemap oder ein Flussdiagramm.
  • Layout
  • Medienrechtliche Aspekte
  • Marketingstrategie
  • Wireframe: Schematischer Aufbau der Seiten und Elemente, gute Grundlage für Abstimmungsmeetings.
  • Mockup: Detaillierter als Wireframe, enthält Farbschema und Typo. Erstellung dauert länger und soll das finale Produkt möglichst exakt veranschaulichen.
  • Usability = Benutzerfreundlichkeit -> Gebrauchstauglichkeit von Produkten mit einer Mensch-Maschine-Schnittstelle. Eine gute Usability wird nicht wahrgenommen, eine schlechte hingegen schon.
  • User Experience: Erweiterung der Usability um ästhetische und emotionale Faktoren.

Tools für die Erstellung von Wireframes und Mock-ups:

 

Design

Jetzt entsteht der Look der Website: In dieser Phase kann sich der Designer austoben und sich mit kreativem Artwork an die Vorstellungen und Wünsche des Kunden annähern.

  • Farbschema
  • Logo
  • Artwork (Slider, Header)
  • Visuelle Elemente (Buttons)
  • Typografie
  • Rich Media (Video/Animationen)
  • Test der Benutzerfreundlichkeit (Probanden)
  • Cross-Device-Kompatibilität (Responsive Design)
  • Prototyping Templates

 

Development

In dieser Phase wird aus der kreativen Vision Realität. Der Developer entwickelt die Funktionalität der Website basierend auf der Zielsetzung des Projektes und den Wünschen des Kunden.

  • Accessibility
  • Entwicklungsframework? Zum Beispiel Bootstrap oder Foundation?
  • Content-Management-System (CMS) – zum Beispiel WordPress, Contao, Typo3?
  • Datenbank
  • Funktionalität
  • Content
  • Performance
  • Security
  • Marketing-Kampagne (z.B. SEA, SEO, Content Marketing, Social Media, E-Mail, Display)
  • Markup (Rich Snippets, Json-Ld)

 

Launch

Vor der Veröffentlichung (Launch) gilt es, umfangreiche Testszenarien durchzuführen, ehe die Website auf den Live-Server des Kunden übertragen wird. Im Zuge dessen wird eine Projektdokumentation angelegt. Im Falle der Verwendung eines CM-Systems bietet sich eine Schulung / ein Training beim Kunden an, damit er zukünftige Aktualisierungen inhaltlicher Art (Content) selbst vornehmen kann.

 

Maintenance

Die Aktualisierung und Wartung der Website ist ein wichtiger Prozess, der eigentlich niemals endet. Auf der einen Seite geht es darum, dem Kunden technischen Support bereitzustellen, auf der anderen Seite sollte die Website stets aktuell (technisch und inhaltlich) gehalten und im Hinblick auf Besucherzahlen, SEO und Performance optimiert werden.

  • Support und Problembehebung
  • A-/B-Testing
  • Statistik und Web Analytics
  • Design-Updates
  • Funktions-Updates (PHP, MySQL, Plugins)
  • Content-Updates

Quellen:

https://www.webdesignerdepot.com/2014/09/the-periodic-table-of-web-design/

https://wirtschaftslexikon.gabler.de/definition/workflow-48807/version-272054

https://www.e-recht24.de/artikel/datenschutz/6843-google-analytics-datenschutz-rechtskonform-nutzen.html

 

Categories: Design & Development, Digital Marketing

Autor: 48fps

Schreibe einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Pflichtfelder sind mit * markiert.

Beitragskommentare