Struktur & Seitenplan
Welche Seiten es gibt, welche Frage jede beantwortet, wie jemand zur Anfrage kommt. Grundlage für Design und SEO gleichzeitig.
Ergebnis: Seitenplan mit ZielenWeb & Digital Products
Gutes Design ist nicht, was gefällt. Es ist, was gefunden wird.
Wir gestalten Reihenfolge, Lesbarkeit und Bedienbarkeit — und erst danach die Oberfläche. Am Ende steht ein Design-System, das Ihr Team weiterverwenden kann, statt einzelner schöner Bildschirme.
- Struktur zuerstWireframe vor Farbe und Bild.
- Am Handy geprüftAuf echten Geräten, nicht im Simulator.
- ÜbergabefertigDateien und System gehören Ihnen.
Leistungsseite · Beispiel
StartÜber unsLeistungenGalerieBlogKarriereKontakt
Herzlich willkommen bei Ihrem kompetenten Partner rund um Haus und Garten
Seit vielen Jahren stehen wir für Qualität, Zuverlässigkeit und Kundenzufriedenheit. Unser Team aus erfahrenen Fachkräften realisiert Ihre individuellen Wünsche zu attraktiven Konditionen. Überzeugen Sie sich selbst von unserem umfangreichen Leistungsspektrum und nehmen Sie gerne unverbindlich Kontakt mit uns auf.
Mehr erfahren
✕Worum es geht, steht nirgends — kein Ort, keine Leistung
✕Kein Weg zur Anfrage über der Falz
✕Sieben Menüpunkte, alle gleich wichtig
Terrassenüberdachung Stuttgart — Festpreis in 24 Stunden
Aufmaß kostenlos · Montage in 4–6 Wochen · eigene Monteure
- Preis schriftlich nach Aufmaß
- Alu und Glas aus der Region
- Ein Ansprechpartner bis zur Abnahme
Aufmaßkostenlos
4–6 WochenMontage
Stuttgart+ 40 km
✓Erste Zeile nennt Leistung, Ort und Zusage
✓Formular sichtbar, drei Felder
✓Beweise statt Adjektive
Beispieldarstellung derselben Seite. Umschalten, um den Unterschied zu sehen.
Sechs Ergebnisse, die Sie am Ende in der Hand haben
Kein „Design-Paket", sondern benennbare Lieferungen. Was Sie nicht brauchen, streichen wir aus dem Angebot.
Wireframes
Reihenfolge der Argumente in Grau — ohne Farbe, ohne Bilder. Hier entscheidet sich, ob die Seite funktioniert.
Ergebnis: Wireframes je SeitentypVisuelle Entwürfe
Zwei Richtungen für die Schlüsselseite, danach eine ausgearbeitet — mobil und am Desktop, mit echten Texten.
Ergebnis: Entwürfe zur FreigabeDesign-System
Farben, Schriftgrößen, Abstände, Zustände und Bausteine — dokumentiert, damit neue Seiten aussehen wie die alten.
Ergebnis: System in Figma + DokuKlickbarer Prototyp
Zum Durchklicken auf dem eigenen Handy — für interne Abstimmung und für Tests mit echten Nutzern.
Ergebnis: Prototyp-LinkÜbergabe an die Entwicklung
Abstände, Zustände, Fehlermeldungen, Grenzfälle. Egal ob wir umsetzen oder Ihr Team — es gibt keine Rätsel.
Ergebnis: Handoff-DokumentWomit wir arbeiten
Figma
Miro
Google Fonts
Figma ist die Arbeitsdatei und der Prototyp; Adobe für Bild- und Vektorarbeiten; Canva, wenn Ihr Team später selbst Social-Vorlagen füllen soll. Die Wahl des Werkzeugs ändert nichts am Ergebnis — die Dateien gehören in jedem Fall Ihnen.
Umsetzung gleich mit? Siehe WordPress, Online-Shops und Web-Apps.
Fünf Schritte, vier Freigaben, keine Geschmacksrunden
Design wird nicht besser, wenn mehr Leute mitreden — sondern wenn die Kriterien vorher feststehen. Deshalb steht am Anfang, woran wir den Entwurf messen.
- 01
Ziele und Kriterien
Wer soll etwas tun, was genau, und woran erkennen wir Erfolg? Ein Satz je Seitentyp — das ist später der Maßstab statt „gefällt mir".
Ergebnis: Kriterienliste - 02
Struktur und Wireframes
Seitenplan, dann Reihenfolge der Inhalte in Grau. Wir schreiben Beispieltexte hinein — Blindtext verdeckt jede inhaltliche Lücke.
Freigabe 1 - 03
Zwei visuelle Richtungen
Dieselbe Struktur, zwei Handschriften. Sie entscheiden anhand der Kriterien, nicht anhand von Vorlieben — danach wird eine Richtung ausgebaut.
Freigabe 2 - 04
Prototyp und Test
Klickbar auf dem Handy. Fünf Personen aus der Zielgruppe finden die groben Stolpersteine — das ersetzt zehn Meinungen im Meeting.
Freigabe 3 - 05
System und Übergabe
Bausteine, Zustände und Abstände werden zum Design-System, dazu das Handoff-Dokument. Dann geht es in die Umsetzung — bei uns oder bei Ihrem Team.
Freigabe 4
Ein System statt schöner Einzelbilder — und Bedienbarkeit für alle
Zwei Dinge entscheiden, ob ein Design zwei Jahre später noch trägt: dokumentierte Bausteine und die Frage, ob man sie auch mit dicken Fingern, schlechten Augen oder Tastatur bedienen kann.
Design-SystemBeispielausschnitt
Farben
Grund
Fläche
Akzent
Akzent hell
Erfolg
Fehler
Schrift
Überschrift 34 / 1.15
Zwischentitel 17 / 1.3
Grundtext 15 / 1.5 — nie unter 15 px im Fließtext
Inter 400 und 500, zwei Schnitte genügen
Bausteine mit Zuständen
PrimärSekundärInaktiv
ChipFeldKarte
Abstände (4-Punkt-Raster)
8
12
16
24
32
48
Dokumentiert in Figma und als Kurzdoku. Neue Seiten entstehen daraus, ohne dass Design nötig ist.
Barrierearm gestaltetim Handoff dokumentiert
LesbarKontrast ausreichend
Zu schwachfällt bei Sonne aus
Kontraste geprüft
Fließtext mindestens 4,5:1, große Überschriften 3:1 — gemessen, nicht geschätzt.
PflichtTasten ab 44 px
Bedienbar mit Handschuhen und auf der Baustelle, nicht nur mit Mauszeiger.
PflichtTastatur und Fokus
Jedes Element erreichbar, Fokus sichtbar — Grundlage für Screenreader.
PflichtFormularfehler in Klartext
„Telefonnummer fehlt" statt roter Rahmen ohne Erklärung.
PflichtBewegung reduzierbar
Animationen respektieren die Systemeinstellung „weniger Bewegung".
PflichtWir prüfen handwerklich und dokumentieren, was geprüft wurde. Ein formales Barrierefreiheits-Zertifikat stellen wir nicht aus.
Fragen, die vor jedem Design-Projekt kommen
Etwas anderes offen? Schreiben Sie an [EMAIL] oder buchen Sie direkt ein Erstgespräch.
Was ist der Unterschied zwischen UX und UI?+
UX ist Reihenfolge und Logik: welche Frage wird wann beantwortet, wie kommt jemand zum Ziel. UI ist die sichtbare Oberfläche: Typografie, Farbe, Abstände, Zustände. Ein schönes UI auf falscher Struktur verkauft nicht — deshalb kommt bei uns die Struktur zuerst.
Bekomme ich mehrere Design-Vorschläge?+
Zwei Richtungen für die Schlüsselseite, nicht fünf Varianten derselben Idee. Danach wird eine Richtung ausgearbeitet. Auswahlrunden ohne Kriterien kosten Zeit und enden in Kompromissdesign.
Arbeiten Sie mit Figma?+
Ja. Sie erhalten Zugriff auf die Dateien, das Design-System und einen klickbaren Prototyp. Alles gehört Ihnen und ist von jedem anderen Team weiterverwendbar.
Können Sie ein bestehendes Design überarbeiten?+
Ja. Wir prüfen Struktur, Lesbarkeit, Bedienbarkeit am Handy und Kontraste und sagen offen, ob eine Überarbeitung reicht oder eine neue Struktur nötig ist. Oft helfen wenige gezielte Eingriffe mehr als ein Relaunch.
Wie testen Sie, ob das Design funktioniert?+
Mit einem klickbaren Prototyp und echten Menschen aus der Zielgruppe — fünf Personen finden die groben Stolpersteine. Nach dem Livegang zählt, welche Seite Anfragen bringt.
Ist barrierearmes Design Pflicht?+
Für viele Unternehmen wird Barrierefreiheit rechtlich relevant, handwerklich sinnvoll ist sie immer: ausreichende Kontraste, große Tasten, Tastaturbedienung. Wir gestalten so und dokumentieren, was geprüft wurde — ein formales Zertifikat stellen wir nicht aus.
Übernehmen Sie auch die Umsetzung?+
Ja, in WordPress, im Shop oder in einer Web-App. Setzt Ihr eigenes Team um, bekommt es Design-System, Abstände, Zustände und Beispieltexte dokumentiert — ohne Rückfragen zu jedem Pixel.
Schicken Sie uns Ihre Seite. Wir sagen, wo Besucher hängen bleiben.
30 Minuten: wir gehen Struktur, erste Bildschirmhöhe, Formular und Kontraste am Handy durch und nennen die drei Eingriffe mit der größten Wirkung — auch wenn Sie sie selbst umsetzen.
- Erstgespräch kostenlos
- Festpreis je Lieferung
- Dateien und System gehören Ihnen
