Webdesign and Development: Was hinter dem Begriff steckt und worauf es bei einer Website wirklich ankommt
Was Design, Entwicklung und Betrieb einer Website umfassen, wie ein Projekt in acht Phasen abläuft und woran Sie gute Arbeit vor der Auftragsvergabe erkennen.
Wer nach “Webdesign and Development” sucht, sucht meist nicht nach zwei getrennten Dienstleistungen, sondern nach der Antwort auf eine sehr praktische Frage: Wer baut mir eine Website, die gut aussieht, zuverlässig funktioniert und am Ende Anfragen bringt? Der englische Begriff fasst genau diese beiden Seiten zusammen. Webdesign steht für die Gestaltung und die Benutzerführung, Development für die technische Umsetzung dahinter. Dieser Ratgeber erklärt, was beide Disziplinen leisten, wie ein Projekt typischerweise abläuft und woran Sie Qualität erkennen, bevor Sie einen Auftrag vergeben.
Was “Webdesign and Development” bedeutet
Im deutschsprachigen Raum wird oft nur von “Webdesign” gesprochen, gemeint ist aber fast immer das Gesamtpaket. Der englische Doppelbegriff macht die Arbeitsteilung sichtbar, die in der Praxis dahintersteckt:
- Webdesign beantwortet die Frage: Wie erlebt ein Besucher diese Seite? Aufbau, Navigation, Typografie, Farben, Bildsprache und das Verhalten auf dem Smartphone fallen in diesen Bereich.
- Development beantwortet die Frage: Wie wird daraus funktionierende Software? Code, Datenbanken, Schnittstellen, Redaktionssystem, Hosting und Sicherheit sind hier das Thema.
Beide Bereiche lassen sich trennen, aber selten sinnvoll isolieren. Ein Entwurf, der technisch nicht umsetzbar ist, bleibt ein Bild. Eine technisch saubere Seite ohne Gestaltungskonzept wirkt beliebig und führt niemanden zum Ziel.
Die Design-Seite: Mehr als nur Optik
UX: Die Reise des Nutzers
User Experience beschreibt, wie leicht jemand auf Ihrer Website das findet, weswegen er gekommen ist. Das entscheidet sich vor der ersten Farbwahl: Welche Zielgruppen kommen auf die Seite, mit welcher Absicht, und was soll am Ende passieren? Aus diesen Antworten entstehen die Seitenstruktur, die Navigation und die Platzierung der Kontaktmöglichkeiten.
UI: Die sichtbare Oberfläche
Das User Interface ist die konkrete Gestaltung: Raster, Abstände, Schriftgrößen, Buttons, Formulare und Zustände wie aktiv, deaktiviert oder Fehler. Gute UI-Arbeit ist unauffällig. Sie führt den Blick, statt ihn zu beschäftigen.
Das Designsystem
Statt jede Seite einzeln zu gestalten, definieren erfahrene Teams wiederverwendbare Bausteine wie Teaser, Bildergalerien, Zitatblöcke, Kontaktabschnitte oder Preistabellen. Dieses Baukastenprinzip hat drei Vorteile. Neue Seiten entstehen schneller, das Erscheinungsbild bleibt einheitlich, und die spätere Pflege durch Ihr eigenes Team wird deutlich einfacher.
Die Development-Seite: Was unter der Oberfläche passiert
Frontend ist alles, was im Browser des Besuchers läuft: HTML, CSS und JavaScript. Hier entscheidet sich, ob das Design auf allen Bildschirmgrößen hält, wie schnell die Seite sichtbar wird und ob sie sich auch mit Tastatur oder Screenreader bedienen lässt.
Backend ist alles, was auf dem Server passiert. Das umfasst das Redaktionssystem, in dem Ihre Inhalte liegen, die Formularverarbeitung und Anbindungen an CRM, Warenwirtschaft, Terminbuchung oder Newsletter-Tools. Dazu kommen Rechteverwaltung und Datensicherung.
Infrastruktur ist der oft übersehene dritte Teil: Hosting, Domains, Zertifikate, Backups, Monitoring und Updates. Eine Website ist kein Projekt mit Enddatum, sondern ein System, das kontinuierlich betrieben werden muss.
Der typische Ablauf eines Website-Projekts
- Zieldefinition und Analyse. Was soll die Website leisten, welche Zielgruppen gibt es, welche Suchbegriffe sind relevant, wer ist der Wettbewerb und welche Inhalte sind bereits vorhanden?
- Struktur und Konzept. Seitenarchitektur, Navigation und Wireframes. In dieser Phase wird über Anordnung gesprochen, noch nicht über Farben.
- Design. Gestaltung der zentralen Seitentypen und Ableitung des Designsystems, inklusive mobiler Ansichten.
- Entwicklung. Umsetzung der Templates, Anbindung des Redaktionssystems sowie Integration von Formularen und Schnittstellen.
- Inhalte. Texte, Bilder, Videos und Metadaten. Dieser Schritt wird regelmäßig unterschätzt und ist in der Praxis der häufigste Grund für Verzögerungen.
- Tests und Abnahme. Prüfung von Browsern und Geräten, Formularwegen, Ladezeiten, Rechtschreibung und rechtlichen Pflichtangaben.
- Launch. Umzug auf die Livedomain, Weiterleitungen der alten Adressen, Freigabe für Suchmaschinen und Kontrolle des Trackings.
- Betrieb und Weiterentwicklung. Updates, Sicherheitspatches, neue Inhalte sowie Auswertung und Optimierung.
Wer beim Angebot vergleicht, sollte prüfen, welche dieser Phasen enthalten sind. Preisunterschiede erklären sich häufig weniger über den Stundensatz als über den Umfang der Schritte 1, 5 und 8.
Welche technische Basis passt?
| Ansatz | Passt gut, wenn | Grenzen |
|---|---|---|
| Baukastensystem | Schneller Start, kleiner Auftritt, wenig Sonderwünsche | Begrenzte Gestaltungsfreiheit, Abhängigkeit vom Anbieter, Umzug schwierig |
| Standard-CMS mit individuellem Theme | Inhalte sollen selbst gepflegt werden, mittlerer bis großer Umfang | Pflegeaufwand für Updates und Erweiterungen |
| Individuelle Entwicklung | Besondere Funktionen, Schnittstellen, hohe Anforderungen an Performance | Höherer Aufwand, längere Projektlaufzeit |
| Statisch generierte Website | Viele Inhaltsseiten, hohe Geschwindigkeit, geringe Angriffsfläche | Dynamische Funktionen brauchen zusätzliche Dienste |
Es gibt hier keine allgemein beste Wahl. Entscheidend ist, wer die Seite später pflegt, wie oft sich Inhalte ändern und ob Fremdsysteme angebunden werden müssen.
Qualitätsmerkmale, die Sie prüfen können
- Geschwindigkeit. Ladezeiten lassen sich messen, auch von außen und ohne Zugriff auf den Code. Fragen Sie nach Werten, nicht nach Adjektiven.
- Mobile Nutzung. Nicht nur “sieht auf dem Handy okay aus”, sondern: Sind Buttons gut treffbar, sind Formulare kurz, ist die Telefonnummer direkt wählbar?
- Barrierefreiheit. Kontraste, Alternativtexte für Bilder, Bedienbarkeit per Tastatur und eine sinnvolle Überschriftenhierarchie. Für viele Anbieter ist das inzwischen auch eine rechtliche Frage.
- Technisches SEO. Saubere Adressen, eindeutige Überschriftenstruktur, Sitemap, sinnvolle Seitentitel und Weiterleitungen beim Relaunch.
- Sicherheit und Datenschutz. Verschlüsselte Verbindung, aktuelle Software, dokumentierte Backups sowie ein Cookie- und Einwilligungskonzept, das zu den tatsächlich eingesetzten Diensten passt.
- Übergabe. Bekommen Sie Zugänge, Quellcode und Dokumentation? Können Sie mit einem anderen Dienstleister weiterarbeiten, ohne bei null zu beginnen?
Was ein Projekt teuer oder günstig macht
Seriöse Preise entstehen aus Aufwand, nicht aus Pauschalen. Die größten Kostentreiber sind in der Regel:
- die Anzahl unterschiedlicher Seitentypen, nicht die Anzahl der Seiten,
- individuelle Funktionen wie Konfiguratoren, Buchungen, Kundenbereiche oder Shop-Logik,
- Schnittstellen zu bestehenden Systemen,
- die Inhaltserstellung, wenn Texte und Bilder nicht vorliegen,
- Migration und Weiterleitungen bei einem Relaunch mit gewachsenem Altbestand,
- der laufende Betrieb nach dem Launch.
Ein Angebot, das nur eine Zahl nennt, ist schwer zu bewerten. Ein Angebot, das diese Posten einzeln ausweist, ist vergleichbar.
Woran Sie einen passenden Dienstleister erkennen
Ein gutes Erstgespräch dreht sich zuerst um Ihr Geschäft und erst danach um Technik. Achten Sie darauf, ob Ziele und Zielgruppen erfragt werden, ob nach vorhandenen Inhalten und Systemen gefragt wird und ob jemand Ihnen widerspricht, wenn ein Wunsch dem Ziel im Weg steht. Lassen Sie sich Referenzen zeigen, die Ihrer Aufgabe ähneln, nicht nur die optisch schönsten. Klären Sie früh, wer nach dem Launch zuständig ist und was passiert, wenn die Zusammenarbeit endet.
Häufige Fragen
Brauche ich Design und Entwicklung aus einer Hand? Notwendig ist es nicht, aber es reduziert Reibung. Wenn Sie trennen, sollte früh geklärt sein, in welcher Form das Design übergeben wird und wer für die Umsetzungsdetails entscheidet.
Wie lange dauert eine neue Website? Das hängt vor allem an Umfang und Inhalten. Der technische Teil ist selten der Engpass, die Freigaben und die Texte sind es häufiger.
Kann ich meine Inhalte später selbst pflegen? Ja, wenn das von Anfang an Ziel ist. Der Unterschied liegt im Aufbau: Eine Seite aus klar definierten Bausteinen lässt sich pflegen, eine handgebaute Sonderseite meist nicht.
Was passiert bei einem Relaunch mit meinen Google-Rankings? Entscheidend sind vollständige Weiterleitungen der alten Adressen, der Erhalt guter Inhalte und eine saubere technische Basis. Ohne Weiterleitungskonzept ist ein Sichtbarkeitsverlust der Normalfall, nicht die Ausnahme.
Reicht ein Baukasten für den Anfang? Für einen kleinen, klar umrissenen Auftritt kann das ein vernünftiger Start sein. Planen Sie nur ein, dass ein späterer Umzug in der Regel ein neues Projekt ist und kein einfacher Export.
Fazit
Webdesign and Development bezeichnet zwei Disziplinen, die dasselbe Ziel verfolgen: eine Website, die Besucher versteht und im Alltag funktioniert. Die Qualität entscheidet sich weniger an der Startseite als an den Dingen dahinter, an Struktur, Geschwindigkeit, Pflegbarkeit und daran, was nach dem Launch passiert. Wer ein Projekt entlang dieser Punkte plant und Angebote danach vergleicht, trifft eine Entscheidung, die auch in einigen Jahren noch trägt.
