Professionelles Webdesign: Woran ihr es wirklich erkennt
Fast jede Agentur nennt ihre Arbeit professionelles Webdesign. Das Wort steht in jedem zweiten Pitch. Und es sagt euch fast nichts.
Die meisten prüfen nur den ersten Eindruck. Sieht hochwertig aus, wirkt aufgeräumt, Haken dran.
Der erste Eindruck ist der schlechteste Prüfstein, den es gibt.
Es gibt vier Punkte, die tatsächlich etwas aussagen. Für keinen davon braucht ihr Designwissen.
Professionelles Webdesign zeigt sich in Struktur, Designsystem, Nutzerführung und Messwerten. Nicht im ersten Eindruck.
Direkt mit uns sprechen?
Wir schauen uns euer Design an und sagen ehrlich, wo es hakt.
Was professionelles Webdesign von schönem Webdesign unterscheidet
Der Unterschied ist die Reihenfolge. Professionelles Webdesign plant, bevor es gestaltet. Schönes Webdesign gestaltet und hofft, dass die Planung sich ergibt.
Sichtbar wird das erst nach dem Launch. Ein geplantes Design lässt sich erweitern. Ein gestaltetes Design bricht bei der ersten neuen Anforderung.
Ein einfaches Szenario zeigt den Unterschied. Ihr wollt eine neue Produktkategorie ergänzen. Bei geplantem Design ist das eine neue Seite aus bestehenden Komponenten.
Bei gestaltetem Design beginnt eine Diskussion über Farben und Abstände. Der Aufwand liegt dann nicht im Inhalt. Er liegt in der Wiederholung alter Entscheidungen.
Deshalb bewerten wir Websites nicht nach Geschmack. Wir sehen auf Struktur, Designsystem, Nutzerführung und Messwerte.
Professionelles Webdesign beginnt bei der Struktur
Die Struktur legt fest, welche Inhalte zusammengehören. Und sie entscheidet, wie schnell Menschen ihr Ziel finden. Sichtbar wird sie in der Navigation.
Öffnet dazu die Navigation eurer Website. Zählt die Klicks vom Start bis zu eurem wichtigsten Angebot. Danach schaut auf die Beschriftungen.
Interne Begriffe wie „Solutions“ oder „Portfolio“ helfen niemandem. Gute Labels benennen, wonach Menschen tatsächlich suchen. Sie sind langweilig und genau deshalb gut.
Eine Ebene tiefer geht es um die Aufteilung. Jede Seite sollte genau ein Suchbedürfnis bedienen. Zwei Themen auf einer Seite bedeuten meist eine Seite zu wenig.
Eine Website mit klarer Struktur wirkt ruhig, ohne dass jemand den Grund benennen kann.
Genau hier setzt unser Webdesign für B2B-Unternehmen an. Wir bauen die Struktur, bevor wir das Layout anfassen.
Professionelles Webdesign steht auf vier Bausteinen
Das sind Struktur, Designsystem, Nutzerführung und Messwerte. Die Struktur steht oben. Die anderen drei folgen jetzt.
Designsystem statt Einzelseiten
Ein Designsystem legt Farben, Typografie, Abstände und Komponenten verbindlich fest. Jede Seite greift darauf zu. Niemand entscheidet mitten im Projekt neu.
Der Test dauert eine Minute. Vergleicht zwei beliebige Unterseiten. Sehen Buttons, Überschriften und Abstände dort identisch aus?
Wo jede Seite ihre eigene Handschrift hat, hat niemand ein System gebaut.
Wir entwerfen diese Systeme in Figma. Die Komponenten dort entsprechen später den Bausteinen im CMS. Das spart bei jeder neuen Seite Arbeit.
Nutzerführung mit einem Ziel pro Seite
Jede Seite braucht ein erkennbares Ziel. Zwei gleich starke Handlungsaufforderungen sind eine zu viel. Modernes Webdesign führt, statt Optionen zu stapeln.
Nehmt eure fünf wichtigsten Seiten und prüft sie einzeln. Was soll hier passieren? Und ist das auf dem Handy ohne Scrollen sichtbar?
Beginnt dabei mit der Handy-Ansicht. Dort entscheidet sich, was wirklich wichtig ist. Was auf dem kleinen Bildschirm nicht trägt, trägt auch am Desktop nicht.
Messwerte statt Bauchgefühl
Ladezeit und Kontrast sind Design-Entscheidungen, keine Entwicklungsdetails. Große Hintergrundvideos, Bildergalerien und fünf Schriftschnitte kosten Ladezeit. Hellgraue Schrift auf Weiß kostet Lesbarkeit.
Google nennt für die Core Web Vitals klare Schwellen. LCP unter 2,5 Sekunden, INP maximal 200 Millisekunden, CLS maximal 0,1. Gemessen wird am 75. Perzentil der Aufrufe.
Für Kontrast gilt WCAG 2.2 in Stufe AA. Normaler Text braucht ein Kontrastverhältnis von mindestens 4,5:1. Großer Text kommt mit 3:1 aus.
Wie weit dieses Thema reicht, steht in unserem Artikel zur barrierefreien Website.
Template oder eigenes Designsystem?
Beides ist legitim. Der Unterschied liegt in der Anpassbarkeit, nicht in der Qualität.
| Template | Eigenes Designsystem | |
|---|---|---|
| Startzeit | kurz | länger |
| Gestaltungsfreiheit | begrenzt auf vorgesehene Blöcke | frei, an eurer Marke entlang |
| Eigene Inhaltsformate | oft nur mit Umbau | als Komponente vorgesehen |
| Pflege | abhängig vom Anbieter | in eurer Hand |
Für viele Unternehmen ist ein gut gewähltes Template der richtige Start. Eng wird es erst, wenn eigene Inhaltsformate dazukommen.
So läuft ein Designprojekt bei uns ab
In vier Phasen. Das Layout kommt erst in der dritten.
Wir klären Zielgruppen, Angebote und die Frage, was die Website leisten soll.
Wir legen Seitenbaum und Seitenaufbau fest. Noch ohne Farben und Bilder.
Wir bauen Komponenten in Figma und leiten daraus die einzelnen Seiten ab.
Wir setzen das Design um und prüfen Kontrast, Ladezeit und Verhalten auf echten Geräten.
Der Takt entsteht selten in der Gestaltung. Er entsteht bei Freigaben und bei fehlenden Inhalten. Feste Wochenzahlen nennen wir deshalb nicht.
Wie der technische Teil danach abläuft, zeigt unser Artikel zum Thema WordPress Website erstellen.
Woran ihr einen Entwurf prüft, bevor ihr ihn abnehmt
An fünf Fragen. Sie ersetzen jede Diskussion über Geschmack.
- Steht auf jeder Seite ein Ziel, und ist es sofort erkennbar?
- Sehen gleiche Elemente auf verschiedenen Seiten wirklich gleich aus?
- Funktioniert der Entwurf auf einem echten Handy, nicht nur im Mockup?
- Erreicht jeder Text die Kontrastwerte aus WCAG 2.2?
- Gibt es einen Plan für Bildgrößen und Schriftladung?
Die vierte Frage lässt sich nicht nach Gefühl beantworten. Kontraste werden gemessen, nicht geschätzt. Ein Prüfwerkzeug im Browser klärt das in Sekunden.
Wer diese Fragen nicht beantworten kann, hat dekoriert statt entworfen.
Eine ehrliche Webdesign-Beratung geht die Liste mit euch durch. Und sie sagt euch auch, wann ihr kein neues Design braucht.
Wo professionelles Webdesign an Grenzen stößt
Design löst keine Positionierungsfrage. Wer nicht sagen kann, für wen das Angebot gedacht ist, bekommt eine schöne leere Hülle.
Dieser Teil gehört vor das Design. Wir behandeln ihn unter Positionierung und Markendesign.
Die zweite Grenze sind fehlende Inhalte. Ein Entwurf mit Platzhaltertexten sieht immer besser aus als die fertige Seite.
Die dritte Grenze ist das Budget. Welche Spannen realistisch sind, steht in unserem Artikel Website erstellen lassen.
Und manchmal braucht es gar kein neues Design. Bei bestehenden Seiten lohnt zuerst der Blick auf einen Website-Relaunch.
Für wen sich der Aufwand lohnt
Für Unternehmen mit erklärungsbedürftigem Angebot und langen Entscheidungswegen. Also für einen großen Teil des B2B-Mittelstands.
Webdesign für Unternehmen dieser Art muss Vertrauen aufbauen, nicht überraschen. Die Website ist oft der erste Kontakt mit euch. Manchmal der einzige vor dem Gespräch.
Weniger lohnt sich der Aufwand bei einer einzelnen Kampagne. Dafür reicht meist eine Landingpage.
Gute Gestaltung macht die Entscheidung leicht
Am Ende zählt eine einzige Frage. Findet die richtige Person schnell den nächsten Schritt?
Alles andere ist Ausstattung.
Professionelles Webdesign räumt Hindernisse weg. Es baut keine neuen auf. Genau daran messen wir auch unsere eigene Arbeit.
Bereit für professionelles Webdesign?
Schickt uns den Link zu eurer Website. Wir sagen euch, wo wir zuerst ansetzen.
