Workflow (in 10 Minuten startklar)
- Brand setzen: Primär- und Akzentfarbe im Konfigurator oder direkt in
css/tokens.css. - Template wählen: entweder das komplette
templates/template-kmu.htmlverwenden oder Bausteine aus der Galerie kombinieren. - Inhalte ersetzen: Headline, Nutzen, Leistungen, Kontakt, Links.
- Qualität kurz prüfen: Mobile, Fokus (Tab), Kontrast, CTA.
- Deploy: Datei(en) ins Projekt kopieren oder als Basis fürs nächste Repo.
3 Regeln, die alles sauber halten
- Token-first: Farben/Abstände/Typografie nur über Tokens (nicht „mal schnell“ neue Pixelwerte).
- Ein Baustein = ein Zweck: Sektionen nicht mit „noch schnell“ Extras überladen. Lieber zweite Sektion.
- System wächst nur bei Wiederholung: Neue Pattern erst aufnehmen, wenn es mindestens 2× gebraucht wurde.
Auswahl-Matrix: Welcher Baustein wann?
| Baustein | Nutzen / Ziel | Wann einsetzen | Tipps für Anfänger |
|---|---|---|---|
| Header | Navigation + schneller Kontakt | Immer. Max. 4–6 Links. | „Kontakt“ als Button/Link sichtbar halten. Mobile-Menü testen. |
| Hero (Centered) | Klare Positionierung + CTA | Wenn du eine Kernbotschaft hast. | Headline: Ergebnis/Mehrwert. Subline: für wen + wo. 1 primärer CTA. |
| Leistungen | Produkt/Service verständlich machen | 3–6 Angebote, ideal als Karten. | Jede Leistung: 1 Satz Nutzen + optional 2 Bulletpoints. |
| Über uns / Vorteile | Vertrauen + Differenzierung | Wenn Entscheidung „Menschenvertrauen“ braucht (KMU, Handwerk, Beratung). | 3–6 Vorteile, konkret: Reaktionszeit, Garantie, Prozess, Region. |
| Testimonial | Social Proof | Wenn du echte Kundenstimme hast. | Kurzer Satz, Name + Rolle/Ort. Lieber 1 starkes als 4 schwache. |
| FAQ | Einwände reduzieren | Bei wiederkehrenden Fragen (Preis, Ablauf, Termine, Anfahrt). | 5–8 Fragen. Antworten kurz. Details lieber per Kontakt klären. |
| Kontakt | Lead-Conversion | Immer – mit klarer „nächster Aktion“. | Telefon + E-Mail + Formular. Formular: 3–5 Felder, nicht 12. |
| Footer | Pflichtlinks + sekundäre Navigation | Immer. | Impressum/Datenschutz, Adresse, Social Links. Kurz halten. |
Checkliste (Quick Quality Gate)
- Mobile: Hero/Buttons nicht gequetscht, keine horizontalen Scrollbars.
- A11y: Tab-Fokus sichtbar, Links haben sprechende Texte.
- Performance: Bilder mit
width/height+ sinnvolle Dateigrösse. - SEO: Title + Description gesetzt, H1 genau 1×, klare CTA.