Webentwicklung oder Webdesign: was ist der Unterschied und was brauchen Sie?

Was ist der Unterschied zwischen Webentwicklung und Webdesign?

Der Unterschied zwischen Webdesign und Webentwicklung passt in einen Satz: Design entscheidet, wie eine Website aussieht und sich bedienen lässt, Entwicklung entscheidet, wie sie funktioniert. Der Designer liefert eine Vorlage in Figma, der Entwickler baut daraus mit HTML, CSS, JavaScript und Serverlogik eine laufende Anwendung.

In der Praxis ist die Grenze weicher, als diese Definition klingt. Ein Rebranding ohne neue Funktionen ist fast reines Design. Eine ERP-Anbindung hinter einer unveränderten Oberfläche ist fast reine Entwicklung. Die meisten Projekte liegen dazwischen, und die relevante Frage lautet deshalb selten „Design oder Entwicklung“, sondern: in welchem Verhältnis, und in welcher Reihenfolge.

Dieser Beitrag ordnet beide Rollen ein, vergleicht sie Punkt für Punkt, nennt Preisspannen in Euro und beschreibt, welche Anforderungen der deutsche Markt an beide Seiten stellt. Wo uns belastbare Zahlen fehlen, steht das ausdrücklich dabei.

Was macht ein Webdesigner, und mit welchen Werkzeugen?

Ein Webdesigner plant die sichtbare Seite und den Ablauf der Benutzung. Dazu gehören Seitenaufbau und Informationshierarchie, Farbwerte und Typografie, Bedienelemente wie Formulare und Navigation, Wireframes und klickbare Prototypen sowie das Verhalten über alle Bildschirmbreiten hinweg. Das Ergebnis ist keine Website, sondern eine prüfbare Vorlage.

Gute Designarbeit beantwortet vor allem eine Frage: Erreicht der Nutzer sein Ziel ohne Umweg? Alles Weitere, Farbwahl und Bildsprache eingeschlossen, folgt daraus. Wer zuerst über Farben spricht, hat meistens noch nicht über die Aufgabe gesprochen.

Fachlich stützt sich die Rolle auf Farbenlehre und Typografie, Nutzerforschung mit Interviews und Personas, Prototyping, Barrierefreiheit nach WCAG sowie ein Gespür dafür, welche Muster Nutzer bereits kennen. Der letzte Punkt wird unterschätzt: Eine Navigation, die sich neu erklären muss, kostet Conversion.

Was macht ein Webentwickler, und wo verläuft die Grenze zum Design?

Ein Webentwickler übersetzt die Vorlage in ausführbaren Code und verantwortet danach alles, was sich messen lässt: Ladezeit, Fehlerverhalten, Datensicherheit, Wartbarkeit. Die Grenze zum Design verläuft dort, wo aus einer Absicht eine technische Entscheidung wird, etwa wenn ein Karussell im Entwurf zu drei Sekunden Ladezeit auf dem Mobilgerät führt.

Frontend

Das Frontend ist alles, was im Browser läuft: semantisches HTML, CSS oder Tailwind für Darstellung und Verhalten über Bildschirmbreiten hinweg, JavaScript und TypeScript für Interaktion und Zustand, dazu Frameworks wie React, Vue, Svelte, Astro oder Next.js. Ein häufiger Irrtum: Frontend ist nicht „der einfache Teil“. Zustände, Formularvalidierung und Barrierefreiheit machen den größten Teil der Arbeit aus.

Backend

Das Backend ist die Schicht, die niemand sieht: Serversprachen wie Node.js, Python, PHP oder Go, Datenbanken wie PostgreSQL, MongoDB oder Redis, Schnittstellen als REST oder GraphQL, Authentifizierung über OAuth oder JWT, Betrieb bei AWS, Google Cloud oder Cloudflare. Hier entstehen die Kosten, die man im Entwurf nicht sieht, und die Risiken, die ein Datenschutzbeauftragter prüft.

Full-Stack

Full-Stack bedeutet, dass eine Person beide Schichten verantwortet. Durch Frameworks wie Next.js, Nuxt oder Astro ist das heute realistisch, weil Server- und Browsercode im selben Projekt liegen. Bei kleinen Vorhaben spart das die Abstimmung zwischen zwei Spezialisten. Bei großen Systemen holt die Spezialisierung die Vorteile zurück.

Worin unterscheiden sich beide Disziplinen Punkt für Punkt?

Beide Rollen arbeiten an derselben Website, aber mit unterschiedlichem Material, unterschiedlichen Werkzeugen und unterschiedlichen Qualitätskriterien. Design wird an Verständlichkeit gemessen, Entwicklung an Messwerten. Die folgende Übersicht fasst zusammen, was sich in Projekten regelmäßig als relevant erweist.

Was kostet Webdesign, was kostet Webentwicklung?

Wir trennen die beiden Posten nicht, weil eine getrennte Rechnung die Abstimmung zwischen ihnen unsichtbar machen würde. Deshalb enthalten unsere Spannen den Entwurf und die Umsetzung: 800 bis 2.100 EUR für eine Broschüren-Website, 2.100 bis 3.900 EUR für eine Unternehmenswebsite, 3.900 bis 13.000 EUR für eine Webanwendung.

Zur Einordnung, weil die Zahlen sonst schwer zu greifen sind: Der Freelancer-Kompass 2026 weist für IT-Freelancer im DACH-Raum einen Stundensatz-Median von 95 EUR aus, für Software- und Webentwicklung 90 EUR. Eine Broschüren-Website an der oberen Grenze unserer Spanne entspricht damit rund 23 Stunden eines deutschen Freelancers. Das ist der Nearshore-Effekt in nüchternen Zahlen, ohne das Wort „günstig“, das in diesem Markt ohnehin die falschen Assoziationen weckt.

Einen belastbaren Marktpreis für reine Designleistung in Deutschland können wir nicht nennen. Eine öffentliche Erhebung, die Agenturhonorare für Webdesign getrennt ausweist, ist uns nicht bekannt. Wer Ihnen eine solche Zahl präsentiert, sollte die Quelle mitliefern. Mehr zur Kostenlogik steht in unserem Beitrag zu den Website-Kosten 2026 und im Vergleich der Entwicklungskosten zwischen DACH und Nearshore.

Brauchen Sie zuerst einen Designer oder einen Entwickler?

Die Reihenfolge hängt davon ab, wo das Problem sitzt. Fehlt die Nutzerführung, beginnt das Projekt beim Design. Fehlt eine Funktion oder eine Schnittstelle, beginnt es bei der Entwicklung. Steht ein Neubau an, ist die Frage falsch gestellt, weil beide Rollen dann von Anfang an zusammenarbeiten sollten.

Eher ein Designer

• Die Marke ändert sich, und die Website soll das abbilden.
• Die Conversion ist niedrig und der Grund liegt erkennbar in der Bedienung.
• Ein neues Produkt braucht ein prüfbares Konzept, bevor jemand Code schreibt.
• Kampagnenseiten sollen visuell tragen, was die Anzeige verspricht.
• Mehrere Produkte brauchen eine gemeinsame Oberflächensprache.

Eher ein Entwickler

• Eine fertige Figma-Datei liegt vor und soll umgesetzt werden.
• Zahlungsanbindung, Benutzerkonten oder eine Schnittstelle fehlen.
• Die Seite ist langsam, und die Ursache liegt in Bildern, Skripten oder Serverantworten.
• Eine Migration steht an, etwa von WordPress auf einen modernen Stack.
• ERP, CRM oder Warenwirtschaft sollen angebunden werden.

Beides, und zwar gleichzeitig

• Eine neue Website entsteht von Grund auf.
• Ein Onlineshop verbindet Kaufstrecke und Warenwirtschaft.
• Eine Webanwendung braucht Oberfläche und Geschäftslogik zugleich.
• Ein Relaunch scheitert bisher an beidem, an Optik wie an Technik.

Frontend, Backend oder Full-Stack: welchen Entwickler brauchen Sie?

Steht fest, dass Entwicklung nötig ist, folgt die Frage nach dem Profil. Sie lässt sich am Datenfluss entscheiden: Bleibt alles im Browser, genügt Frontend. Werden Daten dauerhaft gespeichert, verarbeitet oder mit Fremdsystemen ausgetauscht, brauchen Sie Backend-Kompetenz.

Eine ehrliche Einschränkung: Full-Stack ist eine Rollenbeschreibung, kein Qualitätssiegel. Fast jede Person mit diesem Titel ist auf einer der beiden Seiten deutlich stärker. Fragen Sie im Erstgespräch, welche Seite das ist.

Warum arbeiten Design und Entwicklung besser parallel als nacheinander?

Weil die Übergabe der teuerste Moment im Projekt ist. Im klassischen Wasserfall zeichnet das Design alles fertig und reicht es weiter. Was dabei verloren geht, ist der technische Realitätsabgleich, und der fehlt genau dort, wo die Korrektur später am meisten kostet.

Im parallelen Modell ändern sich vier Dinge:

• Entwurf und Umsetzung laufen in denselben Sprints von ein bis zwei Wochen.
• Die Entwicklung bewertet Machbarkeit, solange der Entwurf noch beweglich ist.
• Das Design prüft die gebaute Oberfläche gegen die Datei, nicht erst kurz vor dem Livegang.
• Beide Seiten arbeiten auf denselben Design-Tokens, sodass Abstände und Farbwerte nur an einer Stelle definiert sind.

Bei uns ist das die Voreinstellung, nicht die Ausnahme. Unsere Webentwicklung umfasst Entwurf und Umsetzung in einem Team mit einem Ansprechpartner. Das ist auch der Grund, warum wir Design nicht separat in Rechnung stellen.

Was ändern Figma Dev Mode und KI-Werkzeuge an der Arbeitsteilung?

Sie verschieben die Grenze, sie löschen sie nicht. Der Dev Mode in Figma liefert CSS und Tailwind-Klassen, Abstände, Größen und Design-Tokens als JSON direkt aus der Datei. Damit entfällt das manuelle Übertragen von Werten, also der Teil der Arbeit, der ohnehin mechanisch war.

Werkzeuge wie Locofy oder Anima erzeugen aus Figma-Dateien Code. Das Ergebnis ist ein Gerüst, keine fertige Anwendung: Zustände, Fehlerbehandlung, Ladeverhalten und Barrierefreiheit bleiben Handarbeit. Zum Zeitgewinn kursieren Prozentzahlen im zweistelligen Bereich, sie stammen aber überwiegend aus dem Marketing der Anbieter. Eine unabhängige Messung ist uns nicht bekannt, deshalb nennen wir hier keine Zahl.

Unsere Einschätzung nach zwei Jahren mit diesen Werkzeugen: Der Gewinn ist im statischen Teil groß und im zustandsbehafteten Teil klein. Wer das umgekehrt kalkuliert, plant zu knapp.

Was verlangen BFSG, WCAG und Core Web Vitals von beiden Rollen?

Diese drei Punkte lassen sich weder allein im Design noch allein in der Entwicklung erfüllen. Barrierefreiheit entsteht im Entwurf und wird im Code umgesetzt. Ladezeit entsteht durch Designentscheidungen und wird im Code gemessen. Genau hier zahlt sich das parallele Arbeiten betriebswirtschaftlich aus.

Das Barrierefreiheitsstärkungsgesetz gilt seit dem 28. Juni 2025 und erfasst Dienstleistungen im elektronischen Geschäftsverkehr gegenüber Verbrauchern. Kleinstunternehmen mit weniger als 10 Beschäftigten und höchstens 2 Millionen Euro Umsatz oder Bilanzsumme sind bei Dienstleistungen ausgenommen. Ob Ihr Angebot erfasst ist, klärt Ihre Rechtsberatung; wir setzen die technischen Anforderungen um und dokumentieren sie.

Technisch führt der Weg über die WCAG. Aus dem Design kommen Kontrastwerte von mindestens 4,5:1 bei normalem Text und 3:1 bei großer Schrift, sichtbare Fokuszustände und eine Bedienung, die ohne Maus funktioniert. Aus der Entwicklung kommen semantische Struktur, beschriftete Formularfelder und eine sinnvolle Reihenfolge beim Durchtabben.

Bei der Ladezeit setzen die Core Web Vitals die Schwellen: LCP unter 2,5 Sekunden, INP höchstens 200 Millisekunden, CLS höchstens 0,1, jeweils am 75. Perzentil der echten Nutzer. Ein Hero-Video mit 8 Megabyte ist damit keine Geschmacksfrage, sondern eine Ranking-Entscheidung. Und weil Statcounter für Deutschland im Juli 2026 einen Traffic-Anteil von 49,41 Prozent mobil gegenüber 48,97 Prozent Desktop misst, müssen beide Ansichten fertig sein, nicht nur eine davon.

Freelancer, Agentur oder eigenes Team: was passt zu Ihrem Projekt?

Die Antwort hängt weniger am Stundensatz als an der Frage, wer die Abstimmung zwischen Design und Entwicklung verantwortet. Bei Freelancern liegt sie bei Ihnen, bei einer Agentur im Vertrag, bei einem eigenen Team in der Linie. Danach entscheidet sich, ob der günstigere Stundensatz am Ende auch das günstigere Projekt ergibt.

Einzelne Freelancer sind flexibel und schnell verfügbar, brauchen aber eine Person auf Ihrer Seite, die Design und Entwicklung zusammenhält. Für abgegrenzte Aufgaben ist das effizient, für einen Relaunch selten. Eine Agentur kostet mehr pro Stunde und liefert dafür eine eingespielte Abstimmung, dokumentierte Abläufe und einen Verantwortlichen. Ein eigenes Team lohnt sich, wenn dauerhaft entwickelt wird, denn die Fixkosten laufen unabhängig von der Auslastung weiter.

Zwei Punkte, die im deutschen Markt regelmäßig über den Projekterfolg entscheiden und in Angeboten trotzdem oft fehlen: Klären Sie vorab, ob Design und Entwicklung als Werkvertrag mit definiertem Ergebnis oder als Dienstvertrag nach Aufwand laufen, und lassen Sie sich die Übergabe des Quellcodes samt Design-Dateien schriftlich zusagen. Worauf Sie bei der Auswahl sonst achten sollten, steht in unserem Beitrag zur Auswahl einer Webagentur.

Welche Annahmen führen am häufigsten in die Irre?

1. „Der Designer kann die Entwicklung mitmachen.“ Das war vor zehn Jahren häufiger richtig als heute. Beide Seiten haben sich fachlich so weit auseinanderentwickelt, dass Doppelbesetzungen zwar existieren, aber fast immer eine schwächere Seite haben.
2. „Einen Designer brauchen wir nicht, das macht der Entwickler mit.“ Eine funktionierende Oberfläche bekommen Sie so durchaus. Nutzerforschung, Informationsarchitektur und eine konsistente Oberflächensprache sind eine andere Kompetenz, und der Unterschied ist am Ergebnis sichtbar.
3. „KI übernimmt bald beides.“ 2026 ist KI ein Assistent. Sie beschleunigt operative Arbeit spürbar und trifft keine der Entscheidungen, für die jemand haftet.
4. „Für WordPress braucht man weder das eine noch das andere.“ Mit einem Template steht eine Seite schnell. Sobald Sie eigene Funktionen, gute Ladezeiten und eine Oberfläche brauchen, die zur Marke passt, sind beide Rollen wieder im Spiel. Die Abwägung haben wir im Vergleich Individualentwicklung gegen WordPress aufgeschrieben.
5. „Einmal designen reicht, danach wird nur noch entwickelt.“ Nutzungsgewohnheiten, Geschäftsziele und rechtliche Anforderungen ändern sich. Produkte, die funktionieren, überarbeiten ihre Oberfläche regelmäßig, meist in kleinen Schritten.

Was Sie aus diesem Vergleich mitnehmen

Wenn Sie unsicher sind, welchen Anteil Ihr Vorhaben an Design und an Entwicklung braucht: Schildern Sie uns den Fall in ein paar Sätzen. Wir sehen uns die bestehende Seite an und melden uns innerhalb von 24 Stunden mit einer Einschätzung und einer Spanne. Angebot anfordern.

Quellen

• Freelancer-Kompass 2026, Stundensätze von IT-Freelancern im DACH-Raum, Median 95 EUR, Software und Webentwicklung 90 EUR, veröffentlicht am 02.07.2026: freelancermap.at
• Barrierefreiheitsstärkungsgesetz, Geltung ab 28.06.2025, Ausnahme für Kleinstunternehmen in § 3 Absatz 3: gesetze-im-internet.de
• § 19 BFSGV, zusätzliche Anforderungen an Dienstleistungen im elektronischen Geschäftsverkehr: gesetze-im-internet.de
• WCAG 2.2, W3C Recommendation vom 12.12.2024, Kontrastkriterium 1.4.3: w3.org
• Core Web Vitals und ihre Schwellenwerte für LCP, INP und CLS: web.dev
• Statcounter Global Stats, Plattformanteile Deutschland, Juli 2026: gs.statcounter.com
• Figma Dev Mode, Funktionsumfang laut Anbieter: figma.com
• Preisgrundlage: die veröffentlichte AppForge-Preisliste in HUF, umgerechnet mit 385 HUF je Euro, Abrechnung nach dem MNB-Mittelkurs am Rechnungsdatum: appforge.hu/pricing.json