Mein Webdesign-Ablauf

gepostet in:, von Sebastian Hartmann

Wie kommt man zu einer guten – also sinnvollen, zielführenden – Gestaltung einer Website?

Der folgende Ablauf hat sich bewährt. Ich liste hier sämtliche möglichen Schritte zur Gestaltung einer Website auf. Der eine oder andere Schritt mag mitunter überflüssig sein. Es gibt zwar eine Reihe Fachbegriffe, aber ich denke die Folgeabsätze klären die Bedeutung umgehend.

Bei den Abstimmungen ist es am besten der Auftraggeber umreisst das Problem, die Aufgabe, das Ziel bevor mögliche Lösungen nahegelegt werden.

⟐⟐⟐

Gespräch

  • Zielsetzung und Umfang der Site klären
  • Zusammensetzung und Vorlieben der Zielgruppe eingrenzen

Moodboard und Sitemap

  • beispielhafte Sammlungen betreffend Farben, Schriften, Seitenaufbau und Bilder
  • ein Schema der Seiten und Funktionen basierend auf den Anforderungen und Zielen
  • Gliederung der Navigation
  • Abstimmung per Mail

Style Tiles

  • auf Basis des abgestimmten Looks erfolgt die Gestaltung der wichtigsten Elemente und die Anordnung in sogenannten „Kacheln“

Wireframes

  • Skizzierung der Bedienung – Menüs, Buttons, Textlinks und Formulare
  • Variationen des Seitenaufbaus gemäß der Zielsetzung
  • Abstimmung per Mail

Mock-Ups

  • auf Basis der Abstimmung genaue Darstellung beispielhafter Einzelseiten
  • Darstellungsvarianten für Smartphone, Tablet und Bildschirm
  • sieht schon aus wie eine Website, ist aber noch ein Bild

⟡⟡⟡

Umsetzung der Designentwürfe in HTML-Seiten

  • statisch oder für WordPress
  • auf meiner lokalen Serverumgebung
  • Abgleich der Darstellung in verschiedenen Browsern

Icons

  • Umsetzung oder Einbindung der Site- und Social-Icons für die Benutzerschnittstelle, den Browser und mobile Betriebssysteme

Übersetzung

  • bei mehrsprachigen Sites übersetze ich die Bedienelemente in die betreffenden Sprachen

✳✳✳

Prototyp

  • der rohe Code wird auf einem provisorischen Server installiert
  • spätestens jetzt sollten die wichtigsten Inhalte eingepflegt werden, ansonsten notgedrungen lebensnahe Platzhalter
  • angesichts des Zusammenspiels von Inhalt und Form erfolgt ein Finetuning
  • Abstimmung per Mail oder im Gespräch

◊◊◊

Umzug auf den Server

  • ist die Abstimmung der Gestaltung abgeschlossen wird die Site auf den Webspace des Auftraggebers übertragen
  • da Serverkonfigrationen variieren können, ist danach unter Umständen noch einmal etwas Arbeit an den Site-Einstellungen nötig

Anleitungen und Zugangsdaten

  • die Auftraggeberin erhält PDFs die speziell für ihre Verwendung von mir verfasst wurden
  • bei WordPress auch Online-Hilfedateien
  • da alle Inhalte vorliegen kann die Reise jetzt losgehen!

Ähnliche Beiträge:

Websites für Musiker
Liste meiner aktuellen Website Features