Webdesign-Tools Webdesign für Gründer: Werkzeuge, Kosten und Ablauf im Überblick

Webdesign für Gründer: Werkzeuge, Kosten und Ablauf im Überblick

Webdesign für Gründer: welches CMS passt, wie ein Webprojekt abläuft und wie Sie einmalige und laufende Kosten in Angeboten sauber vergleichen.

webdesign
Rubrik
Webdesign
Veröffentlicht
Aktualisiert
Lesezeit
9 Min. · 1.813 Wörter

Webdesign entscheidet bei einer Gründung über mehr als die Farbe des Logos: Es legt fest, wie schnell Ihre Website lädt, wie viel Pflege sie jeden Monat verlangt und was Sie im ersten Jahr dafür ausgeben. Dieser Beitrag ordnet Werkzeuge, Kostenblöcke und Ablauf so, dass Sie vor dem ersten Angebot wissen, welche Fragen Sie stellen müssen — und welcher Weg zu Ihrem Unternehmen passt.

Die strategische Basis: Warum Webdesign mehr als nur Optik ist

Webdesign umfasst drei Ebenen, die im Gespräch mit Agenturen oft zusammengeworfen werden. Die erste ist die Gestaltung: Layout, Typografie, Farben und Bildsprache. Die zweite ist die Struktur: welche Seiten es gibt, wie die Navigation aufgebaut ist und welchen Weg ein Besucher vom Einstieg bis zur Anfrage nimmt. Die dritte ist die Technik: Quelltext, Ladezeit, Barrierefreiheit und die Frage, wer die Seite nach dem Start pflegt.

Ein Entwurf, der nur die erste Ebene bedient, sieht im Präsentationstermin gut aus und scheitert im Alltag. Typische Folgen sind ein Kontaktformular, das auf dem Smartphone nicht bedienbar ist, ein Startbild, das mehrere Megabyte wiegt, oder eine Navigation, die beim dritten neuen Angebot keinen Platz mehr hat. Gutes Webdesign beginnt deshalb mit der Frage, was die Website für das Unternehmen leisten soll: Anfragen sammeln, Termine verkaufen, Vertrauen vor einem Erstgespräch aufbauen oder Produkte direkt verkaufen.

Corporate Design als Vorgabe, nicht als Ergebnis

Das Corporate Design ist das visuelle Regelwerk eines Unternehmens: Logo, Hausfarben, Schriften, Bildstil und Abstände. Es gilt für Visitenkarte, Rechnung, Messestand und Website gleichermaßen. Webdesign übersetzt dieses Regelwerk auf den Bildschirm und ergänzt, was auf Papier keine Rolle spielt — Zustände von Schaltflächen, Fokus-Markierungen für die Tastaturbedienung, ausreichende Kontraste nach WCAG und das Verhalten auf schmalen Displays.

Für Gründer folgt daraus eine klare Reihenfolge. Zuerst steht das Corporate Design, zumindest als Grundversion mit Logo, einer kleinen Farbpalette und einer Schriftfamilie. Danach beginnt das Webdesign. Wer beides gleichzeitig entwickeln lässt, bezahlt Abstimmungsschleifen doppelt, weil jede Logoänderung den Seitenentwurf mitzieht. Wie ein einheitliches Erscheinungsbild über alle Kanäle wirkt, beschreibt der Beitrag zum Corporate Design als Grundlage der Markenwirkung.

Design-Ideen prüfen statt sammeln

Moodboards mit Design-Ideen sind ein brauchbarer Anfang, solange jede Referenz eine Begründung trägt. Notieren Sie zu jedem gespeicherten Beispiel einen Satz: Was genau überzeugt Sie — die klare Preistabelle, die kurze Kontaktstrecke, die gut lesbare Schriftgröße? Fällt Ihnen kein solcher Satz ein, fliegt die Referenz raus. Übrig bleibt eine kurze Liste, die einer Designerin mehr sagt als ein Ordner voller Screenshots. Für das Briefing reicht das.

Technische Umsetzung: Content Management Systeme im Vergleich

Ein Content Management System (CMS) trennt Inhalt und Darstellung: Sie schreiben Texte und laden Bilder in einer Verwaltungsoberfläche hoch, das System setzt sie in vorbereitete Vorlagen ein. Für eine erste Firmenwebsite kommen im Kern vier Wege in Frage. Sie unterscheiden sich weniger im Aussehen des Ergebnisses als im Pflegeaufwand und in der Abhängigkeit von einem einzelnen Anbieter.

WegBeispieleStärkeGrenze
BaukastenWix, Squarespace, JimdoStart ohne Technikkenntnisse, Hosting inklusiveUmzug zu einem anderen Anbieter heißt in der Regel Neubau
WordPressWordPress.org mit Themegroße Auswahl an Themes und Plugins, freie Wahl des HostersUpdates von Kern, Theme und Plugins liegen bei Ihnen
Statischer GeneratorHugo, Eleventy, Astroschnelle Auslieferung, kleine AngriffsflächePflege setzt Grundkenntnisse in Markdown und Git voraus
Headless-CMSStoryblok, Contentful, Strapiein Inhaltsbestand für Website, App und weitere Kanälehoher Entwicklungsaufwand, für eine erste Website meist überdimensioniert

Der Baukasten ist der kürzeste Weg zu einer sichtbaren Seite. Sie zahlen eine Monatsgebühr und bekommen dafür Hosting, Sicherheitsupdates und Vorlagen aus einer Hand. Die Grenze zeigt sich später: Exportfunktionen sind bei den meisten Anbietern eingeschränkt, Design und Struktur lassen sich nicht einfach mitnehmen.

WordPress selbst ist Open-Source-Software und kostet keine Lizenzgebühr. Die Kosten entstehen bei Hosting, Premium-Themes, kostenpflichtigen Plugins und vor allem bei der Wartung. Viele Vorurteile über das System halten sich trotzdem hartnäckig — einige davon räumt der Beitrag zu verbreiteten WordPress-Mythen aus.

Ein statischer Generator erzeugt fertige HTML-Dateien, bevor ein Besucher die Seite aufruft. Es gibt keine Datenbank, die angegriffen werden kann, und kaum etwas, das ein Update braucht. Dafür ändern Sie Inhalte nicht in einer bunten Oberfläche, sondern in Textdateien — oder Sie ergänzen ein Git-basiertes Redaktionswerkzeug wie Decap CMS.

Ein praktischer Prüfstein: Schauen Sie sich die eigene Homepage eines Webdesigners an, bevor Sie ihn beauftragen. Wer für sich selbst ein System nutzt, empfiehlt es meist auch Kunden, und Sie sehen sofort, wie es sich im Alltag schlägt. Für eine Visitenkarten-Website mit wenigen Unterseiten reicht ein Baukasten. Planen Sie einen Blog oder einen wachsenden Bestand an Unterseiten, sind WordPress oder ein statischer Generator die bessere Wahl. Einen breiteren Überblick über Disziplinen und Begriffe bietet der vollständige Guide zum Webdesign.

Der Ablauf: Von der ersten Skizze zum Go-Live

Ein Webprojekt läuft in klar trennbaren Phasen. Wer sie kennt, kann ein Angebot lesen, Abnahmen terminieren und erkennt früh, wo ein Projekt ins Stocken gerät. Erfahrungsgemäß verzögern fehlende Texte und Bilder den Start häufiger als die Technik.

Planung und Entwurf

  1. Ziel und Zielgruppe festlegen. Ein Satz pro Punkt: Wer soll die Seite besuchen, und was soll diese Person danach tun?
  2. Sitemap erstellen. Eine Liste aller Seiten mit ihrer Hierarchie. Sie ist die Grundlage für Navigation, Kalkulation und spätere Suchmaschinenoptimierung.
  3. Inhalte sammeln. Texte, Fotos, Referenzen, Preise, Rechtstexte. Ohne Inhalte entsteht ein Entwurf mit Platzhaltern, der beim Einfügen echter Texte erneut angepasst werden muss.
  4. Wireframes skizzieren. Graue Kästen statt Farben: Hier wird entschieden, welche Information wo steht.
  5. Visuellen Entwurf erstellen. Erst jetzt kommen Farben, Schriften und Bilder ins Spiel, meist in einem Design-Programm wie Figma oder Penpot.

Wer im Netz nach „Website Layout Ideas“ oder „Creative Website Design“ sucht, findet in Galerien vor allem Startseiten großer Marken. Für die Wireframe-Phase taugen sie nur bedingt, weil sie selten zeigen, wie Unterseiten, Formulare und Fehlermeldungen aussehen. Wählen Sie Referenzen deshalb aus Ihrer eigenen Branche und schauen Sie sich dort gezielt die Kontaktseite an.

Umsetzung, Test und Start

Nach der Freigabe des Entwurfs folgt die Umsetzung im gewählten System. Danach kommt die Testphase, die in Angeboten gern zu knapp kalkuliert wird. Prüfen Sie mindestens: Darstellung auf einem aktuellen Smartphone und einem Desktop-Browser, Bedienbarkeit ausschließlich per Tastatur, Funktion jedes Formulars mit echter Zustellung, Ladezeit mit Lighthouse in den Chrome-Entwicklerwerkzeugen sowie Impressum und Datenschutzerklärung.

Moderne Website-Designs setzen außerdem auf wenige, klar erkennbare Handlungsaufforderungen statt auf Animationen an jeder Ecke. Bewegung kostet Ladezeit und kann Menschen mit Gleichgewichtsstörungen belasten; die CSS-Abfrage prefers-reduced-motion erlaubt es, Animationen für diese Nutzer abzuschalten. Wie Sie die einzelnen Phasen zeitlich und organisatorisch vorbereiten, zeigt die Schritt-für-Schritt-Anleitung zur Website-Planung.

Die Kostenfalle vermeiden: Was Webdesign für Gründer wirklich kostet

Die Frage nach dem Preis einer Website lässt sich ohne Umfang nicht seriös beantworten. Sie lässt sich aber zerlegen — und erst diese Zerlegung macht Angebote vergleichbar. Trennen Sie grundsätzlich zwischen einmaligen und laufenden Kosten.

Einmalige Kosten entstehen für Konzept und Sitemap, visuellen Entwurf, technische Umsetzung, Texte, Fotos sowie die Einrichtung von Formularen und Statistik. Laufende Kosten fallen für Domain, Hosting oder Baukasten-Abo, kostenpflichtige Themes und Plugins, Wartung und Updates, Rechtstext-Generatoren und gelegentliche inhaltliche Änderungen an.

Agenturen kalkulieren meist nach Stunden oder als Paketpreis, der intern ebenfalls auf einer Stundenschätzung beruht. Ein Rechenbeispiel mit angenommenen Werten: Ein Angebot nennt 40 Stunden für Entwurf und Umsetzung bei einem Stundensatz von 80 Euro netto. Das ergibt 3.200 Euro netto. Kommen fünf Stunden Korrekturen hinzu, die nicht im Angebot enthalten waren, steigt die Summe um 400 Euro. Fragen Sie deshalb immer nach der Stundenzahl hinter einem Pauschalpreis und nach dem Satz für Zusatzaufwand.

Wo Budgets typischerweise kippen

Online-Webdesign-Angebote mit Festpreis wirken auf den ersten Blick günstig. Prüfen Sie, was enthalten ist: Oft umfasst der Preis eine feste Seitenzahl, eine Vorlage ohne individuelle Anpassung und keine Texte. Jede zusätzliche Unterseite, jedes eigene Web-Page-Design und jede Sprachversion wird extra berechnet.

Interaktive Elemente sind der zweite Kostentreiber. Ein Terminbuchungssystem, ein Preisrechner oder ein Produktkonfigurator bringt eigene Lizenz-, Datenschutz- und Pflegefragen mit. Bevor Sie ein solches Element beauftragen, sollte klar sein, ob es Anfragen oder Umsätze tatsächlich steigert. Wie man das misst, erklärt der Beitrag mit vier Grundlagen der Conversion-Rate-Optimierung.

Der dritte Punkt sind rechtliche Anforderungen, die nachträglich teuer werden. Das Impressum richtet sich nach § 5 Digitale-Dienste-Gesetz (DDG), die Einwilligung für nicht notwendige Cookies nach § 25 TDDDG. Seit dem 28. Juni 2025 gilt außerdem das Barrierefreiheitsstärkungsgesetz für viele Online-Shops und digitale Dienstleistungen gegenüber Verbrauchern; Kleinstunternehmen mit weniger als zehn Beschäftigten und höchstens zwei Millionen Euro Jahresumsatz oder Bilanzsumme sind bei Dienstleistungen ausgenommen. Ob Ihr Angebot darunter fällt, gehört in die Rechtsberatung. Barrierefreiheit von Anfang an einzuplanen, ist in jedem Fall günstiger als ein späterer Umbau.

Checkliste für den Start: Tools und nächste Schritte

Modernes Website-Design braucht keinen großen Werkzeugkasten. Für eine Gründerwebsite reichen wenige Programme, die jeweils eine klar umrissene Aufgabe erfüllen.

AufgabeWerkzeugKosten
Entwurf und PrototypFigma, PenpotFigma mit kostenlosem Einstiegstarif, Penpot als Open-Source-Software
Ladezeit und Technik prüfenLighthouse (in Chrome integriert), PageSpeed Insightskostenlos
Barrierefreiheit prüfenWAVE von WebAIM, axe DevToolsBasisversionen kostenlos
Sichtbarkeit in GoogleGoogle Search Consolekostenlos
Bilder komprimierenSquooshkostenlos

Automatische Prüfwerkzeuge finden nur einen Teil der Barrieren. Fehlende Alternativtexte und zu schwache Kontraste erkennen sie zuverlässig, ob eine Bildbeschreibung sinnvoll ist oder eine Tastaturnavigation logisch verläuft, dagegen nicht. Testen Sie deshalb jede neue Seite einmal selbst nur mit der Tastatur.

Selbst bauen oder Agentur beauftragen

Die Entscheidung hängt weniger vom Budget als von Ihrer verfügbaren Zeit ab. Wer abends noch Buchhaltung und Kundenprojekte erledigt, unterschätzt den Aufwand für eine selbst gebaute Seite regelmäßig. Eine Internet-Design-Agentur nimmt Ihnen Umsetzung und Technik ab, nicht aber die Inhalte und die Entscheidungen.

Der Standort spielt dabei eine geringere Rolle, als Suchanfragen nach einer Webdesign-Agentur in München, einem Büro für Webdesign in Göttingen oder einem Anbieter für Webdesign in Hardheim vermuten lassen. Wichtiger sind Referenzen aus Ihrer Branche, ein nachvollziehbares Angebot mit Stundenzahlen und eine klare Regelung, wer nach dem Start Updates einspielt. Ein persönliches Erstgespräch vor Ort kann trotzdem sinnvoll sein, wenn Sie Fotos und Texte gemeinsam erarbeiten wollen.

Die nächsten Schritte in Reihenfolge

  1. Corporate Design in einer Grundversion festlegen.
  2. Ziel der Website und Sitemap aufschreiben.
  3. System wählen: Baukasten, WordPress oder statischer Generator.
  4. Inhalte vollständig vorbereiten, bevor der Entwurf beginnt.
  5. Angebote einholen und nach Stunden, Korrekturschleifen und Wartung vergleichen.
  6. Vor dem Start Ladezeit, Tastaturbedienung und Pflichtseiten prüfen.
  7. Nach dem Start die Seite in der Google Search Console anmelden.

Sobald die Seite online ist, beginnt die Arbeit an der Auffindbarkeit. Erste Ansatzpunkte dafür liefern die Tipps zur SEO-Optimierung Ihrer Website.

Häufige Fragen (FAQ)

Häufige Fragen

Verfasst von

Henrike Vossberg

Henrike Vossberg

Webdesign & Barrierefreiheit

Frontend-Entwicklerin, die Werkzeuge erst empfiehlt, wenn sie damit eine echte Kundenseite gebaut hat. Seit 2014 selbstständig, Schwerpunkt barrierefreie Websites für kleine Betriebe.

Alle Beiträge ansehen →