Der Webdesign-Guide.

Was eine gute Website leisten muss

Eine Website ist kein digitaler Prospekt, sondern dein wichtigster Mitarbeiter im Vertrieb. Sie arbeitet rund um die Uhr, beantwortet Fragen, schafft Vertrauen und bringt im besten Fall Anfragen oder Verkäufe. Gutes Webdesign bedeutet deshalb nicht in erster Linie «schön», sondern wirksam: Es führt die richtigen Besucher zum richtigen Ziel.

Dieser Guide begleitet dich durch den gesamten Prozess, von der Zieldefinition über Struktur, Texte, Gestaltung und Technik bis zum Launch und zur Weiterentwicklung. Du kannst ihn nutzen, um dein Projekt selbst zu planen, ein Briefing für eine Agentur zu schreiben oder Angebote zu vergleichen.

Die fünf Eigenschaften einer starken Website

1. Klar: Besucher verstehen in fünf Sekunden, wer du bist, was du anbietest und für wen.
2. Vertrauenswürdig: Referenzen, Bewertungen, Personen, Zertifikate und ein sauberes Impressum zeigen, dass du real und seriös bist.
3. Einfach bedienbar: Navigation, Formulare und Inhalte funktionieren auf jedem Gerät ohne Nachdenken.
4. Schnell und sicher: Ladezeit, Verschlüsselung und Wartung sind in Ordnung.
5. Auffindbar: Die Seite ist technisch und inhaltlich so gebaut, dass Google und KI-Assistenten sie verstehen.

Schritt 1: Ziele, Zielgruppe und Positionierung klären

Bevor du an Farben und Bilder denkst, brauchst du Antworten auf drei Fragen. Wer diesen Schritt überspringt, bekommt meist eine hübsche, aber wirkungslose Website.

1. Das Ziel: Was soll die Website erreichen?

Formuliere ein Hauptziel und maximal zwei Nebenziele, messbar und mit Zeitbezug. Beispiele: «20 qualifizierte Anfragen pro Monat über das Kontaktformular», «Onlineumsatz von CHF 10'000 pro Monat», «Terminbuchungen für die Praxis rund um die Uhr». Jede Seite und jedes Element sollte später auf dieses Ziel einzahlen.

2. Die Zielgruppe: Für wen ist die Website?

Beschreibe deine zwei bis drei wichtigsten Kundengruppen: Wer sind sie, was brauchen sie, welche Probleme haben sie, welche Einwände, wie entscheiden sie, wo recherchieren sie? Sprich mit Kunden und Mitarbeitenden im Verkauf. Aus diesen Gesprächen entstehen oft die besten Texte, weil du die Sprache deiner Kunden übernimmst.

3. Die Positionierung: Warum du?

Was unterscheidet dich vom Wettbewerb? Preis, Spezialisierung, Region, Geschwindigkeit, Qualität, Service? Formuliere es in einem Satz nach dem Muster: «Wir helfen [Zielgruppe] dabei, [Ergebnis] zu erreichen, mit [Besonderheit].»

Ein kurzes Briefing

• Hauptziel und Nebenziele mit Zahlen
• Zielgruppen und ihre wichtigsten Fragen
• Positionierung in einem Satz
• Drei Websites, die dir gefallen, und warum (auch aus anderen Branchen)
• Drei Wettbewerber und was sie gut oder schlecht machen
• Vorhandenes Material: Logo, Farben, Fotos, Texte, Referenzen
• Technische Anforderungen: Shop, Terminbuchung, Mehrsprachigkeit, Anbindung an CRM oder Buchhaltung
• Budget und Zeitrahmen
• Wer entscheidet und wer gibt Feedback?

Praxis: Briefing, Wettbewerbsanalyse und Moodboard

Viele Websites scheitern nicht an der Technik, sondern am fehlenden Briefing. Wer ohne Plan startet, ändert später ständig die Richtung, und jede Änderung kostet Zeit und Geld. Investiere deshalb einen halben Tag in diese drei Arbeitsschritte, bevor die Gestaltung beginnt.

Schritt 1: Wettbewerber analysieren

Suche bei Google nach den Begriffen, unter denen du gefunden werden willst, und öffne die ersten fünf bis zehn Treffer. Erstelle eine Tabelle und bewerte jede Website nach denselben Kriterien.

Ziel ist nicht, Mitbewerber zu kopieren. Du suchst Lücken: Was zeigt niemand? Was erklärt niemand verständlich? Genau dort liegt deine Chance, dich abzuheben.

Schritt 2: Das Moodboard

Sammle zehn bis zwanzig Beispiele, die dir gefallen, und zwar nicht nur aus deiner Branche. Du kannst Websites, Verpackungen, Plakate oder Fotos verwenden. In Figma oder in einer einfachen Präsentation fügst du alles auf einer Seite zusammen. Markiere zu jedem Beispiel, was dir gefällt: die Farben, die Schrift, die Bildsprache, der Weissraum oder die Tonalität. Aus dem Moodboard leitest du später die Gestaltungsrichtung ab.

Schritt 3: Seitenziele in Zahlen fassen

Formuliere für die Website ein bis drei messbare Ziele. Statt «mehr Kunden» schreibst du: «Zehn Anfragen pro Monat über das Kontaktformular bis Ende des zweiten Quartals». Mit einem solchen Ziel kannst du später beurteilen, ob sich die Investition gelohnt hat, und du erkennst, welche Seiten und Inhalte besonders wichtig sind.

Schritt 2: Struktur und Navigation planen

Die Informationsarchitektur legt fest, welche Seiten es gibt und wie sie zusammenhängen. Sie ist das Gerüst, an dem sich alles andere ausrichtet.

Typische Seitenstruktur eines KMU

Regeln für eine gute Navigation

• Maximal sieben Hauptpunkte im Menü, mit klaren, verständlichen Bezeichnungen.
• Sprich in den Worten deiner Kunden: «Preise» statt «Investition», «Kontakt» statt «Dialog».
• Jede wichtige Seite ist von jeder anderen mit maximal drei Klicks erreichbar.
• Ein sichtbarer Button für die wichtigste Aktion (zum Beispiel «Offerte anfragen») bleibt im Kopfbereich sichtbar.
• Der Footer enthält Kontakt, Rechtliches und wichtige Links.
• Pro Leistung eine eigene Seite, statt alles auf einer Seite zu bündeln.

Skizziere die Struktur als einfachen Baum, am besten mit FigJam, Miro oder auf Papier. Danach entwirfst du für jede Schlüsselseite ein Wireframe: eine grobe Skizze der Elemente und ihrer Reihenfolge, ohne Farben und Bilder. So diskutierst du über Inhalt und Aufbau, bevor Design Aufmerksamkeit abzieht.

Schritt 3: Texte und Inhalte zuerst

Der häufigste Fehler im Webdesign: Das Design wird fertiggestellt, und danach versucht man, Texte hineinzupressen. Besser ist der umgekehrte Weg. Texte und Inhalte bestimmen, wie viel Platz ein Element braucht und was betont werden muss.

Die Anatomie einer überzeugenden Seite

1. Kopfbereich (Hero): Eine klare Überschrift mit dem Nutzen, ein Untertitel und ein Button.
2. Problem und Lösung: Zeige, dass du das Anliegen deiner Kunden verstehst.
3. Leistungen oder Vorteile: Drei bis sechs konkrete Punkte, kurz und nutzenorientiert.
4. Beweise: Logos von Kunden, Zahlen, Bewertungen, Fallstudien.
5. Ablauf: So läuft die Zusammenarbeit in drei bis fünf Schritten. Das nimmt Unsicherheit.
6. Preise oder Preisrahmen: Transparenz schafft Vertrauen und filtert unpassende Anfragen.
7. FAQ: Beantworte Einwände vorab.
8. Abschluss mit Handlungsaufforderung: Ein klarer nächster Schritt.

Schreibregeln für Webtexte

• Schreibe aus Sicht des Kunden: «Du erhältst» statt «Wir bieten».
• Nutze kurze Sätze und Absätze, Zwischenüberschriften, Listen.
• Beginne mit dem Wichtigsten.
• Vermeide leere Floskeln («innovativ», «ganzheitlich», «massgeschneidert»), wenn du sie nicht belegst.
• Verwende konkrete Zahlen, Beispiele und Namen.
• Jede Seite hat genau ein Hauptziel und einen Haupt-Button.

Bilder und Videos

Echte Fotos von Team, Räumen, Produkten und Projekten wirken glaubwürdiger als Stockbilder. Wenn du Stockfotos nutzt, wähle authentische Motive von Plattformen wie Unsplash oder Pexels und prüfe die Lizenz. Investiere in ein professionelles Porträtshooting für das Team, es zahlt sich aus. Komprimiere Bilder vor dem Hochladen (zum Beispiel mit Squoosh).

Schritt 4: Gestaltung, die wirkt

Gutes Design unterstützt die Botschaft und führt den Blick. Es folgt wenigen, klaren Regeln.

Typografie

• Maximal zwei Schriftfamilien: eine für Überschriften, eine für Fliesstext (oder nur eine in verschiedenen Schnitten).
• Fliesstext mindestens 16 Pixel gross, Zeilenhöhe etwa 1,5 bis 1,7, Zeilenlänge 50 bis 75 Zeichen.
• Klare Hierarchie: H1 deutlich grösser als H2, H2 grösser als H3.
• Schriften von Google Fonts sind gratis. Aus Datenschutzgründen lohnt es sich, sie lokal von deinem Server auszuliefern.

Farben

• Eine Hauptfarbe für Aktionen, eine oder zwei neutrale Grundfarben, optional eine Akzentfarbe.
• Halte die Aktionsfarbe für Buttons und Links reserviert, damit sie auffällt.
• Prüfe Kontraste: Normaler Text braucht mindestens 4,5:1, grosser Text mindestens 3:1. Prüfe das mit dem WebAIM Contrast Checker.
• Mit Coolors kannst du Paletten entwickeln.

Layout und Weissraum

• Nutze ein Raster mit konsistenten Abständen.
• Lass Inhalte atmen: Weissraum erhöht Lesbarkeit und wirkt hochwertig.
• Gruppiere zusammengehörige Elemente und trenne Abschnitte klar.
• Platziere das Wichtigste oben und links, wo der Blick beginnt (F- oder Z-Muster).
• Ein Abschnitt, ein Gedanke, ein Ziel.

Buttons und Formulare

• Buttons sind als solche erkennbar, mit einer Beschriftung, die sagt, was passiert («Offerte anfragen» statt «Absenden»).
• Mindestgrösse für Touch-Ziele etwa 44 mal 44 Pixel.
• Formulare fragen nur das Nötigste ab. Jedes zusätzliche Feld senkt in der Regel die Abschlussrate.
• Fehlermeldungen sind verständlich und stehen beim jeweiligen Feld.

Design-System und Konsistenz

Definiere Farben, Schriften, Abstände und Komponenten (Buttons, Karten, Formulare) einmal und verwende sie konsequent. Mit Figma lässt sich das als Bibliothek aufbauen. Das spart bei Erweiterungen Zeit und sorgt für einen professionellen Auftritt.

Schritt 5: Mobile-First denken

In der Schweiz wird ein grosser Teil der Website-Besuche auf dem Smartphone ausgelöst. Google bewertet ausserdem primär die mobile Version. Entwirf deshalb zuerst für das Handy und erweitere danach für Tablet und Desktop.

• Alle Inhalte sind auf dem Smartphone vorhanden und lesbar, ohne Zoomen und ohne horizontales Scrollen.
• Das Menü ist einfach, die wichtigsten Aktionen sind in Daumenreichweite.
• Telefonnummer und Adresse sind direkt antippbar.
• Formulare nutzen passende Tastaturen (E-Mail, Telefon, Zahlen).
• Pop-ups verdecken den Inhalt nicht.
• Bilder und Schriften sind für mobile Datenverbindungen optimiert.
• Teste auf echten Geräten (iPhone, Android, iPad) und mit Hilfsmitteln wie dem Gerätemodus im Browser oder BrowserStack.

Schritt 6: Nutzerführung und Conversion

Conversion heisst: Besucher werden zu Anfragen, Terminen oder Käufen. Die wichtigsten Hebel sind einfach, werden aber oft vergessen.

Der klare Weg

• Pro Seite eine Hauptaktion, wiederholt an passenden Stellen.
• Der Button steht oben (ohne Scrollen), nach dem Nutzenbeweis und am Ende.
• Der nächste Schritt ist klein und risikoarm: «Kostenlose Erstberatung» statt «Jetzt Vertrag abschliessen».
• Alternativen für verschiedene Typen: Formular, Telefon, WhatsApp, Terminbuchung.

Vertrauen aufbauen

• Kundenlogos und Referenzen mit Namen.
• Bewertungen und Kundenstimmen, wenn möglich mit Foto und Firma.
• Gesichter und Namen des Teams.
• Zertifikate, Partnerschaften, Mitgliedschaften.
• Klare Angaben zu Preis, Ablauf, Garantien oder Rückgabe.
• Sicherheitssignale bei Zahlungen (TWINT, Kreditkarten, bekannte Anbieter).

Reibung reduzieren

• Weniger Formularfelder und klare Hinweise.
• Keine Pflicht zur Registrierung für Anfragen oder Käufe.
• Gute Fehlermeldungen und Bestätigungsseiten, die erklären, wie es weitergeht.
• Schnelle Ladezeiten, besonders auf Mobilgeräten.

Messen und testen

Richte Ziele in Google Analytics 4 ein und beobachte mit Microsoft Clarity oder Hotjar, wo Besucher klicken und abspringen. Teste Änderungen einzeln, zum Beispiel einen neuen Button-Text oder eine neue Überschrift, und halte die Ergebnisse fest. Wir erklären das im Ratgeber zu E-Commerce-Umsatzhebeln ausführlicher.

Schritt 7: Barrierefreiheit und Inklusion

Eine barrierefreie Website kann von möglichst allen Menschen genutzt werden, auch mit Seh-, Hör-, Motorik- oder Konzentrationseinschränkungen. Sie verbessert zudem die Nutzbarkeit für alle: Gute Kontraste und klare Strukturen helfen auch bei Sonnenlicht und mit müden Augen. Für Bundesstellen und öffentliche Auftraggeber gelten verbindliche Anforderungen, für private KMU ist sie eine Empfehlung und ein Qualitätsmerkmal.

Als Massstab dienen die Web Content Accessibility Guidelines (WCAG). Diese Punkte decken viel ab:

• Texte haben ausreichende Kontraste und lassen sich auf 200 Prozent vergrössern.
• Alle Bilder mit Inhalt haben einen aussagekräftigen Alt-Text.
• Die Seite ist komplett per Tastatur bedienbar, und der Fokus ist sichtbar.
• Überschriften sind korrekt strukturiert, Links sind aussagekräftig.
• Formularfelder haben Beschriftungen.
• Videos haben Untertitel, Audio hat Transkripte.
• Animationen lassen sich reduzieren (prefers-reduced-motion).
• Farbe ist nicht das einzige Mittel, um Informationen zu vermitteln.

Prüfe deine Seite mit WAVE, dem Lighthouse-Bericht in Chrome oder axe DevTools. Automatische Tests finden nur einen Teil der Probleme, teste daher zusätzlich manuell.

Schritt 8: Technik und System wählen

Die Wahl des Systems beeinflusst Kosten, Flexibilität, Geschwindigkeit und Pflegeaufwand. Es gibt kein bestes System, sondern das passende für dein Vorhaben.

Entscheidungshilfe

• Du willst Inhalte selbst pflegen und brauchst viel Flexibilität? WordPress oder ein Headless-CMS wie Sanity.
• Du verkaufst Produkte und willst schnell starten? Shopify.
• Du brauchst maximale Individualität bei Shop und Inhalten? WooCommerce.
• Design und Animation stehen im Vordergrund? Webflow.
• Performance, Skalierbarkeit und individuelle Funktionen sind entscheidend? Astro oder Next.js mit Sanity.

Wir beraten dich vor der Wahl und empfehlen das System, das zu deinen Zielen, deinem Team und deinem Budget passt. Mehr zu unserem Vorgehen findest du auf der Seite Webentwicklung.

Schritt 9: Performance, SEO und Sicherheit von Anfang an

Diese drei Themen sind keine Zusatzaufgaben am Schluss, sondern gehören in die Planung.

Performance

• Bilder in modernen Formaten (WebP oder AVIF) und passenden Grössen
• Schlanke Skripte, wenige Plugins, kein unnötiges Tracking
• Schriften lokal und in wenigen Schnitten
• Caching und gutes Hosting, nach Bedarf ein CDN
• Ziel: gute Werte bei Largest Contentful Paint, Interaction to Next Paint und Cumulative Layout Shift. Teste mit PageSpeed Insights.

SEO-Grundlagen

• Saubere URL-Struktur und Überschriften
• Einzigartige Titel und Beschreibungen
• Alt-Texte, interne Links, Sitemap, robots.txt
• Strukturierte Daten (Schema.org)
• Weiterleitungen von alten auf neue Adressen beim Relaunch
• Search Console und Analytics eingerichtet

Alle Details findest du in unserem Ratgeber SEO-Checkliste für KMU.

Sicherheit und Wartung

• SSL-Zertifikat und automatische Erneuerung
• Regelmässige Updates von System, Themes und Plugins
• Starke Passwörter, Zwei-Faktor-Authentifizierung, minimale Benutzerrechte
• Tägliche Backups, getestete Wiederherstellung
• Schutz vor Spam und Angriffen (Firewall, Captcha, Rate-Limiting)
• Überwachung der Erreichbarkeit

Core Web Vitals konkret: Zielwerte und Massnahmen

Google misst die Nutzererfahrung mit drei Kennzahlen, den Core Web Vitals. Sie beeinflussen das Ranking in der Suche leicht, vor allem aber beeinflussen sie, ob Besucher bleiben. Eine Seite, die springt oder zäh reagiert, verliert Anfragen.

Prüfe deine Werte mit PageSpeed Insights und in der Search Console im Bericht «Core Web Vitals». Beachte den Unterschied: Der obere Teil von PageSpeed Insights zeigt Felddaten echter Besucher, der untere Teil Labordaten aus einem Test. Für das Ranking zählen die Felddaten.

Der Performance-Plan in sieben Schritten

1. Messe den Ausgangszustand auf Smartphone und Desktop und halte die Werte fest.
2. Komprimiere alle Bilder und liefere sie in WebP oder AVIF in der angezeigten Grösse aus. Ein Werkzeug dafür ist Squoosh.
3. Binde Schriften lokal ein, beschränke dich auf zwei Schriftfamilien und wenige Schnitte.
4. Entferne Plugins, Skripte und Tracker, die niemand mehr braucht.
5. Aktiviere Caching und ein CDN. Gutes Hosting spart oft mehr als jede Einzelmassnahme.
6. Lade Videos und Bilder unterhalb des sichtbaren Bereichs verzögert, das Hauptbild jedoch sofort.
7. Messe nach vier Wochen erneut und vergleiche.

Schritt 10: Rechtliches in der Schweiz

Eine professionelle Website erfüllt die rechtlichen Mindestanforderungen. Die folgenden Hinweise sind eine Orientierung und keine Rechtsberatung.

• Impressum: Wer im Online-Handel tätig ist, muss laut Lauterkeitsrecht (UWG) klar und vollständig über seine Identität und Kontaktangaben informieren, inklusive Adresse und E-Mail. Auch für andere Unternehmen ist ein Impressum guter Stil und schafft Vertrauen.
• Datenschutzerklärung: Das revidierte Datenschutzgesetz (revDSG) verlangt Transparenz über die Bearbeitung von Personendaten. Nenne Verantwortliche, Zwecke, eingesetzte Dienste, Datenübermittlungen ins Ausland und die Rechte der Betroffenen.
• Cookies und Tracking: Hole bei Bedarf Einwilligungen ein, zum Beispiel für Marketing-Cookies, besonders bei Besuchern aus der EU (DSGVO).
• AGB: Bei Shops und wiederkehrenden Leistungen sind klare Allgemeine Geschäftsbedingungen empfehlenswert.
• Preisangaben: Preise an Konsumenten müssen in der Schweiz grundsätzlich in Franken und inklusive Mehrwertsteuer angegeben werden, in der Regel auch Versandkosten (Preisbekanntgabeverordnung).
• Urheberrechte: Verwende nur Bilder, Schriften und Texte, für die du Nutzungsrechte besitzt.
• Bewertungen und Werbung: Keine erfundenen Bewertungen und keine irreführenden Aussagen (UWG).

Auf unserer Website findest du Muster für Impressum, Datenschutz und AGB als Orientierung. Lass deine Texte rechtlich prüfen.

Werkzeug-Übersicht für Webdesign-Projekte

Mit den richtigen Werkzeugen sparst du Zeit und vermeidest Fehler. Die folgende Auswahl deckt Planung, Gestaltung, Bildbearbeitung, Test und Analyse ab. Die meisten Werkzeuge sind kostenlos oder bieten eine kostenlose Stufe.

Wichtiger als die Anzahl der Werkzeuge ist, dass du sie regelmässig nutzt. Plane nach dem Launch einen festen Termin pro Quartal ein, an dem du Ladezeit, Suchbegriffe, Anfragen und Barrierefreiheit prüfst.

Schritt 11: Launch-Checkliste

Gehe diese Liste kurz vor dem Livegang durch. Sie verhindert die typischen Pannen.

Inhalt und Design

• Alle Texte korrekt, Rechtschreibung geprüft
• Keine Platzhaltertexte und Testbilder
• Alle Links und Buttons funktionieren
• Formulare senden an die richtige Adresse, Bestätigungs-E-Mails kommen an
• Favicon, Social-Preview-Bild und Seitentitel gesetzt
• Fehlerseite (404) gestaltet
• Mobile, Tablet und Desktop in den wichtigsten Browsern getestet

Technik und SEO

• Die Website läuft über https
• Kein noindex mehr aktiv (häufiger Fehler nach der Testphase!)
• XML-Sitemap und robots.txt vorhanden
• 301-Weiterleitungen von alten URLs eingerichtet
• Search Console und Analytics aktiv, Ziele definiert
• Ladezeit und Core Web Vitals geprüft
• Backups und Überwachung eingerichtet

Rechtliches

• Impressum, Datenschutzerklärung und gegebenenfalls AGB online
• Cookie-Banner und Einwilligungen funktionieren
• Verträge mit Hosting und Dienstleistern geklärt

Nach dem Launch

• Search Console: Sitemap einreichen und Indexierung beobachten
• Google Unternehmensprofil mit der neuen Website verknüpfen
• Newsletter, Social Media und Partner informieren
• Nach zwei bis vier Wochen Zahlen prüfen und erste Verbesserungen umsetzen

Kosten, Budget und die richtige Agentur

Was eine Website kostet, hängt von Umfang, Individualität und Funktionen ab. Eine einfache Seite lässt sich schon zu einem monatlichen Betrag realisieren, während Shops, Web-Apps und komplexe Portale entsprechend mehr Aufwand bedeuten. Bei GROWTHŸ starten die Pakete ab CHF 69 pro Monat (OnePager) und reichen bis zum Paket Rocket mit bis zu 20 Seiten. Alle Details findest du auf der Seite Preise und Pakete.

Woran du ein gutes Angebot erkennst

• Es nennt klar, was enthalten ist (Seiten, Funktionen, Anzahl Korrekturschleifen, Hosting, Support).
• Es erklärt Ablauf und Zeitplan.
• Es enthält transparente Preise, auch für laufende Kosten.
• Es regelt Rechte: Wem gehören Design, Code und Inhalte? Wie kommst du an die Zugänge?
• Es beschreibt, was nach dem Launch passiert (Wartung, Support, Weiterentwicklung).

Fragen an eine Agentur

• Kann ich echte Referenzen ansehen und mit Kunden sprechen?
• Wer arbeitet an meinem Projekt, und wer ist mein Ansprechpartner?
• Gestaltet ihr individuell oder arbeitet ihr mit Templates?
• Wie sorgt ihr für Geschwindigkeit, SEO und Sicherheit?
• Wie sieht die Betreuung nach dem Launch aus?
• Wem gehört die Website, und kann ich sie mitnehmen?

Warnsignale

• Preise erst nach mehreren Terminen
• Nur Templates, kein eigenes Design
• Keine Angaben zu Ladezeit und SEO
• Code und Zugänge bleiben bei der Agentur
• Keine Referenzen, die du selbst öffnen kannst

Wenn du dir Unterstützung wünschst, schau dir unsere Seite zu Webdesign an. Eine Person plant, gestaltet und entwickelt, mit einem Ansprechpartner, einem Plan und einem System.