Was ist Webdesign? Definition, Ablauf und Kosten für KMU

Kurzantwort: Web Design (auch Webdesign oder Webgestaltung) ist die Planung und Gestaltung einer Website: Aufbau, Inhalte, Aussehen und Bedienung, abgestimmt auf die Menschen, die sie nutzen sollen. Gute Gestaltung sieht nicht nur ordentlich aus. Sie führt Besucher auf jedem Gerät schnell zu dem, was sie suchen. Am Ende steht eine Anfrage.

Das Wichtigste in Kürze:

• Es umfasst Struktur, Inhalte, visuelle Gestaltung und Bedienbarkeit. Farben und Schriften sind nur ein Teil davon.
• Webentwicklung setzt das Design technisch um, UX-Design sorgt dafür, dass die Bedienung für Nutzer einfach ist. In kleinen Projekten macht oft ein Team alles zusammen.
• Responsive Design und Barrierefreiheit gehören heute zur Grundausstattung, nicht zum Aufpreis.
• In der Schweiz kostet eine KMU-Website je nach Weg zwischen ein paar hundert Franken im Jahr (Baukasten) und CHF 8'000 bis 25'000 (Agentur, individuell).

Was ist Webdesign? Die Definition

Webdesign ist die Gestaltung der Oberfläche, der Struktur und der Inhalte einer Website mit einem klaren Ziel: Besucher sollen verstehen, was du anbietest. Danach sollen sie den nächsten Schritt machen. Der Begriff stammt aus dem Englischen (Web Design) und wird im Deutschen meist zusammengeschrieben.

Viele denken dabei zuerst an Farben, Bilder und Schriften. Das ist der sichtbare Teil. Der grössere Teil ist unsichtbar: Welche Seiten braucht die Website? In welcher Reihenfolge stehen die Inhalte? Findet ein Besucher in wenigen Sekunden die Telefonnummer? Lädt die Seite auf dem Handy schnell genug? All das gehört dazu.

Eine brauchbare Arbeitsdefinition für KMU lautet deshalb: Webdesign ist die Summe aus Struktur, Inhalt, Gestaltung und Bedienbarkeit einer Website. Fehlt eine dieser vier Ebenen, merkst du es an den Anfragen, nicht am Aussehen.

Web Design, Webentwicklung und UX-Design: der Unterschied

Die drei Begriffe werden oft vermischt. Sie beschreiben verschiedene Aufgaben im selben Projekt.

Merkmal	Webdesign	Webentwicklung	UX-Design
Kernfrage	Wie ist die Seite aufgebaut und wie sieht sie aus?	Wie funktioniert die Seite technisch?	Wie leicht erreichen Nutzer ihr Ziel?
Ergebnis	Seitenstruktur, Layouts, Gestaltung	Programmierte, lauffähige Website	Nutzerwege, Wireframes, Tests
Werkzeuge	Figma, Design-Systeme	HTML, CSS, JavaScript, Frameworks, CMS	Interviews, Prototypen, Nutzertests
Sichtbar für Besucher	Sofort	Indirekt (Tempo, Funktionen)	Indirekt (alles fühlt sich einfach an)

Webdesign legt fest, was wo steht und wie es aussieht. Webentwicklung baut daraus eine funktionierende Website: Code, Formulare, Redaktionssystem, Schnittstellen. UX-Design (User Experience) prüft, ob Menschen damit tatsächlich zurechtkommen, zum Beispiel mit Wireframes und kleinen Tests. Mehr dazu im Lexikon unter UX-Design.

Bei grossen Projekten arbeiten dafür getrennte Fachleute. Bei einer KMU-Website verschwimmen die Grenzen. Wichtig ist nur, dass niemand eine der drei Aufgaben auslässt. Eine schöne Website, die technisch langsam ist, ist genauso verschenkt wie eine schnelle, die niemand versteht.

Was gehört alles zum Webdesign? Die fünf Bausteine

Zum Webdesign gehören fünf Bausteine, die zusammenspielen: Struktur und Navigation, Inhalte, visuelle Gestaltung, Bedienbarkeit sowie Technik und Tempo.

1. Struktur und Navigation

Die Struktur entscheidet, ob Besucher finden, was sie suchen. Jede wichtige Leistung braucht eine eigene Seite, das Menü bleibt kurz, der Kontakt ist von überall erreichbar. Wie du eine Website sinnvoll gliederst, steht im Beitrag über den Aufbau einer Website und ihre sieben Bausteine.

2. Inhalte

Texte, Bilder und Belege wie Referenzen oder Kundenstimmen. Gute Inhalte beantworten die Fragen der Besucher in ihrer Sprache: Was kostet es, wie läuft es ab, warum gerade du? Gestaltung ohne Inhalt ist eine leere Hülle.

3. Visuelle Gestaltung

Typografie, Farben, Abstände, Raster und Bildsprache. Sie schaffen Ordnung und Wiedererkennung. Zwei Schriften reichen in den meisten Fällen, eine klare Hierarchie von Überschriften hilft beim Überfliegen. Ein festes Design-System sorgt dafür, dass jede neue Seite gleich aussieht wie die alten.

4. Bedienbarkeit

Knöpfe sehen aus wie Knöpfe, Formulare fragen nur das Nötigste ab, die wichtigste Handlung ist auf jeder Seite sichtbar. Ein klarer Call-to-Action gehört dazu.

5. Technik und Tempo

Ladezeit, saubere Programmierung und eine Struktur, die Suchmaschinen lesen können. Google misst die Nutzererfahrung mit den Core Web Vitals. Eine Website, die auf dem Handy lange lädt, verliert Besucher, bevor das Design überhaupt wirken kann.

Responsive Webdesign: eine Website für jedes Gerät

Responsive Webdesign heisst: Die Website passt sich automatisch an die Bildschirmgrösse an, vom Smartphone über das Tablet bis zum grossen Monitor. Inhalte werden nicht verkleinert, sondern neu angeordnet.

In der Praxis bedeutet das:

• Mobile First: Gestaltet wird zuerst für das kleinste Gerät. Was auf dem Handy keinen Platz hat, ist oft auch am Computer überflüssig.
• Flexible Raster: Spalten stapeln sich auf schmalen Bildschirmen untereinander.
• Tippbare Elemente: Knöpfe und Links sind gross genug für den Finger, Telefonnummern lassen sich direkt antippen.
• Angepasste Bilder: Jedes Gerät lädt nur die Bildgrösse, die es braucht.

Google bewertet Websites seit Jahren hauptsächlich in der Mobilversion (Mobile First Indexing). Eine Website, die nur am Computer gut aussieht, ist deshalb nicht nur unpraktisch, sie verschenkt auch Sichtbarkeit. Die Grundlagen stehen im Lexikon unter Responsive Design.

Barrierefreiheit: Webdesign für alle

Eine barrierefreie Website kann jeder nutzen, auch Menschen mit Sehschwäche, motorischen Einschränkungen oder ohne Maus. Massstab sind die internationalen Richtlinien WCAG 2.2, meist auf Stufe AA.

Die wichtigsten Punkte bei der Gestaltung:

• Kontrast: Normaler Text braucht nach WCAG ein Kontrastverhältnis von mindestens 4,5 zu 1 zum Hintergrund, grosser Text 3 zu 1. Hellgraue Schrift auf Weiss fällt fast immer durch.
• Tastatur: Jede Funktion lässt sich ohne Maus bedienen, der Fokus ist sichtbar.
• Alternativtexte: Bilder mit Inhalt bekommen eine kurze Beschreibung für Screenreader.
• Klare Struktur: Eine H1 pro Seite, logische Zwischenüberschriften, verständliche Linktexte statt "hier klicken".

In der Schweiz verpflichtet das Behindertengleichstellungsgesetz vor allem Behörden. Wer aber an Kundinnen und Kunden in der EU verkauft, fällt seit dem 28. Juni 2025 unter den European Accessibility Act. Was das für dein KMU heisst, steht im Beitrag über die barrierefreie Website für Schweizer KMU. Unabhängig vom Gesetz gilt: Was barrierefrei ist, ist für alle leichter zu bedienen und für Suchmaschinen leichter zu lesen.

So läuft ein Webdesign-Projekt ab

Ein professionelles Projekt folgt einem festen Ablauf. Die Reihenfolge ist wichtiger als jedes Werkzeug.

1. Ziel und Zielgruppe klären. Wer soll auf die Seite kommen und was soll er dort tun: anrufen, ein Formular ausfüllen, einen Termin buchen? Ohne diese Antwort ist jedes Design geraten.
2. Struktur und Inhalte planen. Welche Seiten braucht es, welche Suchbegriffe sollen sie abdecken, welche Texte und Bilder fehlen noch? Hier fällt die Entscheidung über den späteren Erfolg.
3. Gestaltung. Erst jetzt entstehen Layouts: Farben, Schriften, Bildsprache, abgestimmt auf deine Marke und darauf, was deine Kundschaft überzeugt.
4. Umsetzung. Die Website wird gebaut, schnell, responsive und mit einem Redaktionssystem, damit du Inhalte selbst pflegen kannst.
5. Test, Launch, Auswertung. Formulare, Ladezeiten und Darstellung werden auf verschiedenen Geräten geprüft. Nach dem Livegang zeigt die Auswertung, was Besucher tatsächlich tun. Danach wird die Seite nachgeschärft.

Wie das bei uns konkret aussieht, inklusive Dauer und Festpreis, steht unter Website erstellen lassen.

Was Webdesign in der Schweiz kostet

Der Preis hängt davon ab, wer die Website baut und wie viel davon individuell ist. Die Spannen sind Marktpreise in der Schweiz, ohne MWST.

Weg	Einmalig	Laufend pro Jahr
Baukasten (Wix, Squarespace, Jimdo)	CHF 0 plus eigene Zeit	CHF 200 bis 500
Freelancer mit Vorlage	CHF 2'000 bis 6'000	CHF 300 bis 1'000
Agentur, individuell	CHF 8'000 bis 25'000	CHF 1'000 bis 3'000

Ein Baukasten reicht für den Einstieg, wenn du Zeit investierst und keine grossen Ziele bei Google hast. Ein Freelancer ist ein guter Mittelweg, die Qualität schwankt aber stark. Eine Agentur lohnt sich, wenn die Website über Jahre Anfragen bringen soll und Design, Technik und SEO zusammenpassen müssen.

Die vollständige Aufschlüsselung mit Folgekosten und Rechenbeispiel steht in der Übersicht was eine Website kostet. Bei Webtree beginnen Websites bei 5'000 Franken, mit Festpreis vor Projektstart.

Woran du gutes Webdesign erkennst

Du musst kein Designer sein, um eine Website zu beurteilen. Diese sechs Fragen reichen für einen ersten Check:

• Verstehe ich in fünf Sekunden, was die Firma anbietet und für wen?
• Finde ich die Kontaktmöglichkeit, ohne zu suchen?
• Lädt die Seite auf dem Handy über mobile Daten zügig?
• Lassen sich alle Texte gut lesen, auch draussen bei Sonne?
• Gibt es Belege: Referenzen, Kundenstimmen, echte Fotos?
• Hat jede wichtige Leistung eine eigene Seite?

Ein Beispiel aus unserer Arbeit: Die alte Website der Kurtisi AG aus Gossau bestand aus einer Willkommensseite und viel Fliesstext. Wir haben sie neu gebaut, jede Leistung von Heizung bis Elektro mit eigener Seite und den Kontakt auf jeder Seite erreichbar. In 90 Tagen wurde die neue Website über 8'900 Mal bei Google angezeigt, für "heizung gossau" steht Kurtisi auf Platz 1. Nicht wegen schönerer Bilder, sondern wegen besserer Struktur.

Wenn du deine eigene Website messen willst: Die kostenlose Website-Analyse prüft Ladezeit, Technik und deine Positionen bei Google in rund einer Minute.

Webdesign heute: Was sich gerade verändert

Drei Entwicklungen prägen das Webdesign im Moment stärker als jede Farbmode.

KI-Suche: Google zeigt bei vielen Fragen eine KI-Antwort über den Suchergebnissen, dazu kommen ChatGPT und andere Assistenten. Websites mit klarer Struktur, direkten Antworten und sauberen Daten werden dort eher zitiert. Webdesign wird damit auch zur Frage, wie gut Maschinen deine Inhalte verstehen.

Tempo als Gestaltungsmittel: Schwere Effekte und riesige Bilder kosten Ladezeit. Gute Websites wirken heute ruhig, schnell und aufgeräumt.

Weniger Vorlage, mehr Eigenständigkeit: Baukästen und KI-Werkzeuge machen eine Website in Minuten. Dadurch sehen viele Seiten gleich aus. Wer auffallen will, braucht eine klare Marke und echte Inhalte statt austauschbarer Stockfotos.

Welche visuellen Trends gerade wirklich etwas bringen, steht im Beitrag über die Webdesign-Trends 2026.

Häufige Fragen

Was macht ein Webdesigner?

Ein Webdesigner plant und gestaltet Websites: Seitenstruktur, Layouts, Typografie, Farben und Bedienelemente. Je nach Profil schreibt er auch Code oder Texte. In Agenturen arbeitet er eng mit Entwicklern, Textern und SEO-Fachleuten zusammen.

Ist Webdesign dasselbe wie Programmieren?

Nein. Webdesign legt Aufbau und Aussehen fest, Programmieren (Webentwicklung) setzt es technisch um. Viele Webdesigner beherrschen HTML und CSS, für Formulare, Shops oder Schnittstellen braucht es aber Entwicklungswissen.

Was ist der Unterschied zwischen Webdesign und Grafikdesign?

Grafikdesign gestaltet feste Medien wie Logo, Flyer oder Plakat. Webdesign gestaltet etwas, das sich bewegt und bedient wird: Es muss auf jedem Bildschirm funktionieren, schnell laden und Besucher durch mehrere Seiten führen.

Kann ich meine Website nach dem Webdesign selbst pflegen?

Ja, wenn sie mit einem Redaktionssystem gebaut ist. Dann änderst du Texte, Bilder und Neuigkeiten selbst, ohne Programmierkenntnisse. Was ein Redaktionssystem ist, erklärt das Lexikon unter Content-Management-System.

Fazit: Webdesign ist mehr als Aussehen

Webdesign ist die Summe aus Struktur, Inhalt, Gestaltung und Bedienbarkeit, umgesetzt auf einer schnellen, responsive und barrierefreien Technik. Das Aussehen ist der Teil, den alle sehen. Ob die Website Kunden bringt, entscheidet der Teil darunter.

Wenn deine Website eher eine Visitenkarte als ein Verkaufskanal ist, fehlt meist eine dieser Ebenen. Lass sie dir mit der kostenlosen Analyse messen oder schau dir an, wie wir Websites für KMU erstellen.