Was ist Webdesign? Wie Gestaltung, Aufbau und Code eine Website ergeben

Webdesign ist die Gestaltung einer Website. Dazu gehören das Aussehen mit Layout, Schrift und Farben, der Aufbau mit Seiten und Navigation und die Umsetzung, die aus dem Entwurf eine funktionierende Website macht. Gut ist Webdesign, wenn Besucher auf jedem Gerät schnell finden, was sie suchen, und die Seite ohne Hürden bedienen können.

Der Duden erklärt Webdesign knapp als „Gestaltung einer Website“. Genauer wird die Bundesagentur für Arbeit in ihrer Berufsbeschreibung: Webdesignerinnen und Webdesigner „gestalten Bildschirmseiten, die benutzerfreundlich sind und durch ein ansprechendes Design die Inhalte unterstützen“. Als grundlegende Techniken im Webdesign nennt sie Navigation, Layout, Farben und Schriften.

Das Layout legt fest, wo auf einer Seite was steht: Logo, Navigation, Überschrift, Text, Bilder und Schaltflächen. Schrift und Farben entscheiden, was zuerst ins Auge fällt und wie gut sich Texte lesen lassen. Das Bild oben zeigt eine Aufnahme der Startseite der Lindener Ratsstuben, deren Website Coday gebaut hat: ein abgedunkeltes Bild eines Gastraums, darauf groß der Name des Restaurants und zwei Schaltflächen, die zur Speisekarte und zur Reservierung führen.

Für Farben gibt es eine messbare Untergrenze. Nach den Richtlinien für barrierefreie Webinhalte des W3C (WCAG 2.2) braucht normaler Text ein Kontrastverhältnis von mindestens 4,5:1 zum Hintergrund, großer Text mindestens 3:1 (Erfolgskriterium 1.4.3, Stufe AA).

Zum Aufbau gehört, welche Seiten es gibt und wie Besucher zwischen ihnen wechseln. Die Bundesagentur für Arbeit zählt es ausdrücklich zu den Aufgaben im Webdesign, „eine klare Navigationsstruktur“ zu entwickeln. Die Website der Lindener Ratsstuben führt in ihrer Navigation sieben Punkte, darunter Speisekarte, Kegelbahn, Reservierung und Kontakt (Stand 21.10.2026). Wer einen Tisch sucht, kommt so mit einem Klick zur Reservierung.

Manche Angaben schreibt das Gesetz vor. Für „geschäftsmäßige, in der Regel gegen Entgelt angebotene digitale Dienste“ verlangt § 5 des Digitale-Dienste-Gesetzes (DDG) unter anderem Name, Anschrift und eine Adresse für die elektronische Post, „leicht erkennbar und unmittelbar erreichbar“. Batherm und die Lindener Ratsstuben verlinken dafür im Fußbereich ihrer Seiten ein Impressum.

Auch Barrierefreiheit beginnt im Aufbau. Die WCAG 2.2 sehen eine Möglichkeit vor, Inhalte zu überspringen, die sich auf mehreren Seiten wiederholen, etwa die Navigation (Erfolgskriterium 2.4.1). Auf der Website der Lindener Ratsstuben ist das ein Link „Zum Hauptinhalt springen“ am Seitenanfang.

Damit ein Entwurf im Browser erscheint, muss er in Code umgesetzt werden. Drei Sprachen teilen sich die Arbeit, so beschreibt es die Entwicklerdokumentation MDN von Mozilla: HTML legt Bedeutung und Struktur der Inhalte fest, CSS das Aussehen und JavaScript das Verhalten. Auch die Bundesagentur für Arbeit zählt die Umsetzung zum Webdesign: Am Ende setzen Webdesigner das Design „mit spezieller Software um“.

Coday baut Websites mit Next.js, auch codayweb.de selbst. Next.js ist nach seiner eigenen Dokumentation ein React-Framework zum Bau von Webanwendungen. Bei Coday entwirft und programmiert der Inhaber selbst; Entwurf und Code kommen aus einer Hand.

Ob eine Website gefällt, ist Geschmackssache. Ob sie gut gemacht ist, lässt sich an Merkmalen prüfen, für die es öffentliche Maßstäbe gibt.

Google verwendet für die Indexierung und das Ranking die mobile Version einer Website und nennt das Mobile-First-Indexierung. Responsives Webdesign zielt darauf, dass eine Website auf allen Geräten vom Desktop bis zum Mobilgerät optimal aussieht und funktioniert. Schaltflächen sollten dafür groß genug zum Antippen sein: Die WCAG 2.2 setzen als Mindestmaß für Klickziele 24 mal 24 CSS-Pixel an, mit Ausnahmen etwa für Links im Fließtext (Erfolgskriterium 2.5.8, Stufe AA).

Für Ladezeit, Reaktion und Stabilität nennt Google drei Kennzahlen, die Core Web Vitals. Als gut gilt eine Seite, wenn ihr Hauptinhalt innerhalb von 2,5 Sekunden geladen ist (Largest Contentful Paint, LCP), sie auf Eingaben in höchstens 200 Millisekunden reagiert (Interaction to Next Paint, INP) und ihr Layout kaum verrutscht (Cumulative Layout Shift, CLS, höchstens 0,1). Maßstab ist jeweils das 75. Perzentil der Seitenaufrufe, getrennt nach Mobilgeräten und Desktop: Mindestens drei von vier Aufrufen sollen die Werte erreichen.

Barrierefrei sind Produkte und Dienstleistungen nach § 3 des Barrierefreiheitsstärkungsgesetzes (BFSG), wenn sie für Menschen mit Behinderungen „in der allgemein üblichen Weise, ohne besondere Erschwernis und grundsätzlich ohne fremde Hilfe auffindbar, zugänglich und nutzbar“ sind. Konkrete Prüfpunkte für Websites nennen die WCAG 2.2: Nicht-Text-Inhalte wie Bilder brauchen eine Textalternative (1.1.1), Eingabefelder eine Beschriftung oder Anleitung (3.3.2), Texte genug Kontrast (1.4.3).

Für manche Websites ist Barrierefreiheit Pflicht. Das BFSG gilt unter anderem für Dienstleistungen im elektronischen Geschäftsverkehr, die nach dem 28. Juni 2025 für Verbraucher erbracht werden (§ 1 Abs. 3 Nr. 5). Gemeint sind digitale Dienste, die „über Webseiten und über Anwendungen auf Mobilgeräten angeboten werden und elektronisch und auf individuelle Anfrage eines Verbrauchers im Hinblick auf den Abschluss eines Verbrauchervertrags erbracht werden“ (§ 2 Nr. 26). Kleinstunternehmen, die Dienstleistungen anbieten, sind von dieser Pflicht ausgenommen (§ 3 Abs. 3). Das sind Unternehmen mit weniger als zehn Beschäftigten und höchstens 2 Millionen Euro Jahresumsatz oder Jahresbilanzsumme (§ 2 Nr. 17). Ob Ihre Website darunterfällt, ist eine Rechtsfrage; dieser Beitrag ersetzt keine Rechtsberatung.

Ein Teil davon lässt sich mit dem Prüfwerkzeug Lighthouse messen, das auch in PageSpeed Insights von Google läuft. Für die Leistung vergibt es 0 bis 100 Punkte; 90 bis 100 gelten als gut. Für codayweb.de ergab ein mobiler PageSpeed-Labortest am 17.07.2026 94 Punkte für die Leistung, 100 für die Barrierefreiheit und eine Layoutverschiebung (CLS) von 0. Die Startseiten der Referenzen Rêve Pur und Fliesenverlegung Tezgel kamen in Messungen von Coday am 16.10.2026 mit Lighthouse mobil auf je 98 Punkte für die Leistung.

Zwei Grenzen gehören dazu. Laborwerte entstehen in einer simulierten Umgebung und zeigen nicht unbedingt, was echte Besucher erleben. Und manuelle Prüfungen zählen in der Barrierefreiheitswertung von Lighthouse nicht mit; 100 Punkte heißen also nicht, dass eine Seite für alle barrierefrei ist.

Batherm Haustechnik ist ein Meisterbetrieb für Sanitär, Heizung und Klima in Wetzlar. Drei Beispiele von der Website, die Coday für den Betrieb gebaut hat (Stand 21.10.2026): Auf der Seite zur kostenlosen Erstberatung buchen Kunden ihren Termin direkt in einem eingebetteten Kalender. Das Anfrageformular fragt nach der gewünschten Leistung, etwa Sanitärtechnik, Heizungstechnik oder Wartung. Und eine eigene Seite erklärt, was bei Heizungsausfall oder Rohrbruch sofort zu tun ist.

Die Lindener Ratsstuben sind ein Restaurant mit deutsch-italienischer Küche in Linden (Landkreis Gießen). Auf ihrer Website stehen bei jedem Gericht der Speisekarte der Preis und die Allergene, dazu gibt es einen Allergiefilter. Einen Tisch fragen Gäste online an: Personenzahl, Datum und Uhrzeit wählen, die Bestätigung kommt per E-Mail.

Beide Websites laufen mit Next.js.

Beauftragen Sie Webdesign, gehört mehr dazu als der Entwurf. Die Bundesagentur für Arbeit beschreibt die Arbeit so: Webdesigner besprechen mit ihren Kunden deren Wünsche, legen die Aufgaben fest und klären finanzielle und technische Rahmenbedingungen. Sie entwickeln Lösungswege, stimmen Gestaltungskonzepte mit den Kunden ab und setzen das Design schließlich um.

Bei Coday liegt das alles bei einer Person: Der Inhaber plant, gestaltet und programmiert Ihre Website selbst. Was die Leistung Webdesign im Einzelnen umfasst, zeigt die Leistungsseite.

Kurze Antworten auf vier Fragen rund um Webdesign.

Im engen Sinn meint Webdesign die Gestaltung: Der Duden beschreibt einen Webdesigner als „Designer, der Websites grafisch gestaltet“. Mit Webentwicklung ist in diesem Beitrag die Programmierung gemeint, die eine Website zum Laufen bringt. Scharf trennen lässt sich das nicht; die Bundesagentur für Arbeit nennt auch „Serverseitige Technologien zur Erstellung dynamischer Webseiten“ als Inhalt der Weiterbildung zum Webdesigner. Bei Coday entwirft und programmiert der Inhaber beides selbst.

Responsives Webdesign heißt, dass eine Website auf allen Geräten vom Desktop bis zum Mobilgerät optimal aussieht und funktioniert; so beschreibt es die Entwicklerdokumentation MDN. Für die Suche zählt das, weil Google für die Indexierung und das Ranking die mobile Version einer Website verwendet.

Barrierefreies Webdesign gestaltet eine Website so, dass sie für Menschen mit Behinderungen „in der allgemein üblichen Weise, ohne besondere Erschwernis und grundsätzlich ohne fremde Hilfe auffindbar, zugänglich und nutzbar“ ist; so umschreibt § 3 BFSG Barrierefreiheit. Konkrete Prüfpunkte nennen die WCAG 2.2 des W3C, etwa Textalternativen für Bilder und genug Kontrast. Pflicht ist Barrierefreiheit nach dem BFSG unter anderem für Dienstleistungen im elektronischen Geschäftsverkehr mit Verbrauchern; Kleinstunternehmen, die Dienstleistungen anbieten, sind ausgenommen.

Einen Einheitspreis gibt es nicht. Der Preis hängt vor allem vom Umfang, von den Funktionen und von der Technik ab; dazu kommen laufende Kosten für Domain, Hosting und Pflege. Bei Coday erhalten Sie nach einem kostenlosen Erstgespräch ein Angebot mit verbindlichem Festpreis. Mehr dazu steht im Ratgeber „Was kostet eine Website?“ in diesem Blog.

Im kostenlosen Erstgespräch besprechen Sie mit dem Inhaber, was Ihre Website leisten soll. Auf dieser Grundlage erhalten Sie ein Angebot mit verbindlichem Festpreis. Den Quellcode bekommen Sie bei Projektabschluss.

Abgerufen am 21.10.2026, wenn nicht anders angegeben.

• Duden online, „Webdesign“ (öffnet in neuem Tab)
• Duden online, „Webdesigner“ (öffnet in neuem Tab)
• Bundesagentur für Arbeit, BERUFENET, Steckbrief Webdesigner/in, Stand 04.05.2026 (öffnet in neuem Tab)
• W3C, Web Content Accessibility Guidelines (WCAG) 2.2, Erfolgskriterien 1.1.1, 1.4.3, 2.4.1, 2.5.8 und 3.3.2 (öffnet in neuem Tab)
• Barrierefreiheitsstärkungsgesetz (BFSG), §§ 1 bis 3 (öffnet in neuem Tab)
• Digitale-Dienste-Gesetz (DDG), § 5 (öffnet in neuem Tab)
• MDN Web Docs (Mozilla), HTML (öffnet in neuem Tab)
• MDN Web Docs (Mozilla), CSS (öffnet in neuem Tab)
• MDN Web Docs (Mozilla), JavaScript (öffnet in neuem Tab)
• MDN Web Docs (Mozilla), Responsive Web Design (öffnet in neuem Tab)
• Next.js, Dokumentation (öffnet in neuem Tab)
• Google Search Central, Best Practices für die Mobile-First-Indexierung (öffnet in neuem Tab)
• web.dev, Web Vitals (öffnet in neuem Tab)
• web.dev, Largest Contentful Paint (öffnet in neuem Tab)
• Google, About PageSpeed Insights (öffnet in neuem Tab)
• Chrome for Developers, Lighthouse performance scoring (öffnet in neuem Tab)
• Chrome for Developers, Lighthouse accessibility score (öffnet in neuem Tab)
• Websites der Referenzen: batherm.de (öffnet in neuem Tab) (Seiten /beratung, /kontakt und /notdienst) und lindener-ratsstuben.de (öffnet in neuem Tab) (Startseite, /de/menu und /de/reservation)
• Eigene Messungen: PageSpeed-Bericht für codayweb.de, mobil, 17.07.2026 (auf der Startseite verlinkt); Lighthouse mobil für Rêve Pur und Fliesenverlegung Tezgel, 16.10.2026 (auf den Referenzseiten)