Mein kompletter Webdesign-Workflow – von der Planung bis zur Übergabe
Wie ich als selbstständiger Webdesigner ohne große Tools strukturiert, effizient und professionell arbeite
Einleitung
Effizientes Webdesign braucht nicht zwingend ein Dutzend Tools, Automatisierungen und komplexe Plattformen. Was es wirklich braucht: eine klare Struktur, sinnvolle Abläufe – und Werkzeuge, die zur eigenen Arbeitsweise passen.
In diesem Beitrag zeige ich dir, wie ich meine Website-Projekte von der ersten Idee bis zur finalen Übergabe umsetze. Dabei arbeite ich bewusst ohne Projektmanagement-Tools wie Notion oder Trello, sondern mit einem minimalistischen Setup, das mir maximale Kontrolle und Konzentration ermöglicht. Mein Workflow ist einfach, aber durchdacht – und genau deshalb funktioniert er.
Planung und Struktur
Ordnung ohne Overhead – meine einfache Projektstruktur
Für jedes neue Kundenprojekt lege ich eine klar strukturierte Ordnerhierarchie an. Diese enthält standardmäßig folgende Verzeichnisse:
- 01 Briefing & Inhalte
- 02 Design & Layout
- 03 Entwicklung & Technik
- 04 Übergabe & Dokumentation
Ich arbeite bewusst ohne spezialisierte Projektsoftware – stattdessen mit Apple Notizen, TXT-Dateien im Windows Editor und einer soliden Ablagestruktur. Alle Dateien sichere ich getrennt auf OneDrive und iCloud, was mir plattformübergreifend Flexibilität und Sicherheit gibt.
Design und Gestaltung
Affinity Designer und Affinity Photo – mein Design-Duo
Statt auf Adobe-Software zu setzen, arbeite ich mit der Affinity-Reihe. Affinity Designer und Affinity Photo bieten mir alles, was ich zur Gestaltung von Webgrafiken, Mockups oder Icons benötige – ganz ohne Abo-Modell. Die Programme sind stabil, performant und lassen sich flexibel in meinen Workflow integrieren.
Inkscape – präzises Arbeiten mit Vektoren
Wenn es um SVGs, skalierbare Icons oder komplexe Vektorgrafiken geht, ist Inkscape mein bevorzugtes Tool. Die Open-Source-Lösung ermöglicht mir exaktes Arbeiten – besonders dann, wenn Elemente pixelgenau und responsiv eingesetzt werden sollen.
Code und Entwicklung
Pulsar – fokussiertes Arbeiten am Code
Für die technische Umsetzung nutze ich den Editor Pulsar. Er läuft sowohl auf Windows als auch auf dem Mac reibungslos und bietet genau das, was ich brauche: Syntax-Highlighting, Split-View, saubere Dateiverwaltung – ohne Schnickschnack. So bleibt der Fokus beim Wesentlichen: dem Code.
Übergabe und Abschluss
Bildoptimierung mit Squoosh und TinyPNG
Bevor eine Website live geht, optimiere ich alle Bilder – für maximale Ladegeschwindigkeit und beste Performance. Dafür verwende ich Squoosh (lokal) und TinyPNG (online), um Dateigrößen deutlich zu reduzieren, ohne sichtbaren Qualitätsverlust.
Dokumentation für Kunden – verständlich und klar
Ich übergebe keine Website ohne eine einfache, verständliche Dokumentation. Diese enthält Zugangsdaten, Hinweise zur Pflege und eine Einführung ins CMS. Zusätzlich biete ich optional kurze Videotutorials an, in denen ich die wichtigsten Funktionen erkläre – individuell und effizient.
Fazit
Gutes Webdesign entsteht nicht durch Tools, sondern durch durchdachte Abläufe. Mein Workflow kombiniert einfache Mittel mit klarer Struktur – von der ersten Notiz bis zur sauberen Übergabe. Es braucht nicht viel, um professionell zu arbeiten – nur eine bewusste Entscheidung für das, was wirklich funktioniert.