molveau/vitrine

Vitrine-Playbook

Eine Vitrine ist eine Unternehmens-Showcase (Broschüren-) Website für ein lokales Unternehmen: ein paar Seiten, die beantworten "Was machst du, für wen, wie viel, kann ich dir vertrauen, wie erreiche ich dich". Besucher kommen von Google oder einer Empfehlung, entscheiden in Sekunden und gehen, wenn sie suchen müssen. Dieses Playbook sagt, was man bauen soll und in welcher Reihenfolge; die Domänen-Skills enthalten die detaillierten Regeln.

Richtungs-Tor

Führen Sie dies vor jedem Code für eine neue Seite, einen neuen Bildschirm oder ein neues Restyling durch, selbst wenn die Anfrage eine Zeile lang ist. Der Rest dieses Skills entfernt Fehler; er gibt keinen Bildschirmcharakter vor. Wird es übersprungen, ist das Ergebnis die mittelmäßige Seite, die jedes Modell macht: korrekt im Detail, aber von niemandem besessen.

1. Fünf Zeilen. Produkt: was es tut, für wen. Charakter: zwei oder drei konkrete Wörter (ruhig, exakt, ein wenig warm), niemals sauber, modern, elegant, minimalistisch oder Premium. Welt: der Ort oder das Material, zu dem das Produkt gehört; es färbt die Neutraltöne und setzt den Akzent. Momente: die ein oder zwei Stellen, die reichhaltige Farbe und Details erhalten: bei einem lokalen Unternehmen meist ein echtes Foto der Arbeit oder der Personen oder eine Preisliste, die wie das gedruckte Dokument des Handwerks gestaltet ist. Signatur: ein kleines Detail, das nur dieses Produkt hat und konsequent verwendet wird. Ein Moment wird mit Sorgfalt gezeichnet, nicht nur bereinigt: ein Diagramm, das für das neu gezeichnet wird, was es aussagen soll (glatte Linien, ein gespiegelter Vergleich, ein echter Maßstab) oder das eigene Objekt des Produkts, dargestellt mit Gewicht und Licht.
2. Inventar, dann die Idee. Listen Sie 8 bis 12 Dinge auf, die kein Konkurrent teilt (Name, Straße, Zahlen im Briefing, Materialien, Werkzeuge, Rituale, Dokumente, die das Gewerbe druckt). Schreiben Sie: "Auf dieser Seite wird [ein Gegenstand] zu [dem Device]". Dieses Device ist der Moment.
3. Verweigern Sie die Second-Order-Standards, es sei denn, die Marke besitzt sie bereits. Sie sind das, was ein Modell erreicht, sobald die offensichtlichen Hinweise verboten sind:
   • eine creme-, stein- oder warmweiße Seite mit einem Akzent in verbranntem Orange, Terrakotta, Salbei oder Waldgrün, mit oder ohne Serifen-Überschrift (der "Papier und Tinte"-Look ist der neue Standard, keine Richtung);
   • Fraunces, Instrument Serif, Playfair oder Georgia als reflexive Schrift für Überschriften; system-ui als einzige Schrift;
   • Inter oder Geist auf Weiß mit einem Indigo- oder Blau-Akzent;
   • Hero, Dienstleistungen, Bewertungen, Servicebereich, Kontakt, in dieser Reihenfolge, ohne Begründung;
   • eine zentrierte Eyebrow, Überschrift und zwei Buttons als gesamter erster Bildschirm.
4. Austauschtest. Ersetzen Sie den Namen und das Gewerbe durch die eines Konkurrenten. Wenn die Seite noch passt, ändern Sie das Angebot, den Moment und die Signatur und testen Sie erneut.
5. Zeigen und warten. Zeigen Sie die fünf Zeilen und die Idee und warten Sie auf den Eigentümer. Wenn Sie nicht fragen können (der Benutzer hat gesagt, bauen Sie es einfach, oder Sie arbeiten ohne Person), schreiben Sie sie als Kommentar am Anfang der Hauptdatei und bauen Sie genau das.

Tiefe: anti-slop-Playbook §2 (Richtung) und §12 (App-Bildschirme); der design-inspiration-index-Skill für echte Referenzen.

Was eine Vitrine braucht

1. Ein klares Angebot pro Seite. Der erste Bildschirm sagt, was verkauft wird, an wen und wo, in klaren Worten, mit einer primären Handlungsaufforderung. Ein Leser, der alles andere überspringt, weiß es trotzdem. Separate Seiten für separate Dienstleistungen sind besser als eine Seite, die alles verkauft.
2. Preise oder einen "ab"-Preis. Käufer vergleichen. Ein Startpreis und was er beinhaltet, filtert schlechte Interessenten heraus und schafft Vertrauen; "Kontaktieren Sie uns für ein Angebot" allein verliert Leute an Konkurrenten, die eine Zahl nennen. Geben Sie an, was den Preis ändert. Halten Sie Beträge in einer Datendatei, damit jede Seite und die strukturierten Daten übereinstimmen.
3. Buchung oder Kontakt in einem Schritt. Ein sichtbarer Telefonlink und ein kurzes Formular oder ein Buchungslink auf jeder Seite. Fragen Sie nur nach dem, was Sie für die Antwort benötigen (Name, Kontakt, was sie wollen). Sagen Sie, wann sie eine Rückmeldung erhalten. Bestätigen Sie klar nach dem Absenden. Tippen zum Anrufen auf Mobilgeräten.
4. Beweise. Echte Projekte mit einem Ergebnis, echte Bewertungen mit Namen und Daten (oder Links dazu), Logos nur mit Genehmigung. Wenige konkrete Beweise sind besser als viele vage. Kein Stockphoto-Team, keine erfundenen Testimonials.
5. Lokale SEO-Grundlagen.
   • Eine Seite pro Servicebereich, die es wert ist, ranken zu können, jede mit echt lokalem Inhalt (nicht der gleiche Text mit ausgetauschter Stadt).
   • LocalBusiness (oder ein spezifischerer Subtyp) JSON-LD mit Name, Adresse oder Servicebereich, Telefon, Öffnungszeiten und Preisklasse, die den veröffentlichten Preisen entspricht. Fügen Sie FAQPage nur auf einer kanonischen Seite hinzu.
   • Ein vollständiger Google-Unternehmenseintrag: gleicher Name, gleiche Adresse und Telefonnummer wie die Website, Kategorien, Öffnungszeiten, Fotos, ein Link zur richtigen Seite und die Gewohnheit, Bewertungen zu beantworten.
   • Eine h1 pro Seite, beschreibende Titel und Meta-Beschreibungen, hreflang für beide Sprachen, eine Sitemap, lesbare URLs.
6. Ein Geschwindigkeitsbudget. Lokale Besucher sind auf Telefonen mit durchschnittlichen Verbindungen. Laden Sie das LCP-Bild vor und dimensionieren Sie es korrekt (modernes Format, explizite Breite und Höhe); Schriften selbst gehostet, ein oder zwei Familien, font-display gesetzt, Subset; keine schweren 3D-, Video-Hintergründe oder großen JS-Bibliotheken für die Dekoration; Skripte von Drittanbietern nur, wenn sie ihren Platz verdienen. Inhalt ist beim Laden vorhanden. Zielen Sie auf LCP unter 2,5 s auf Mobilgeräten ab und testen Sie mit echtem Throttling.
7. Zweisprachig FR/EN, wenn der Markt es erfordert. Eine Nachrichtenquelle pro Sprache mit der gleichen Struktur und inhaltlichen Gleichwertigkeit, ein sichtbarer Sprachwechsel, der die aktuelle Seite beibehält, lokalisierte URLs und hreflang. Französische Texte sind etwa 20 % länger, daher dürfen Layouts nicht brechen. Wenden Sie den french-typography-Skill auf jeden französischen String an und fügen Sie dessen CI-Guard hinzu.
8. Québec: Gesetz 25. Eine Website, die in Québec personenbezogene Daten sammelt (ein Kontaktformular reicht aus), führt den loi-25-website-Skill aus: Datenschutzerklärung, verantwortliche Person angezeigt, Hinweis bei Erhebung, Tracking standardmäßig deaktiviert, Überprüfung von Tools außerhalb Québecs. Behandeln Sie es als Teil des Builds, nicht als nachträglichen Einfall; wählen Sie Analyse- und Formulartools mit Blick darauf aus.
9. Bewegung: maximal ein signifikanter Moment. Eine einprägsame, zweckgerichtete Interaktion (ein Projektwechsler mit Überblendung, ein Vorher/Nachher) plus einfaches Drücken- und Hover-Feedback. Keine Scroll-Enthüllungen, Smooth-Scroll-Bibliotheken oder sich wiederholende Verzierungen. Verwenden Sie den motion-Skill; reduzierte Bewegung zeigt den Endzustand.

Vorgeschlagene Seiten

Startseite, Dienstleistungen (oder eine Seite pro Dienstleistung), Projekte mit Fallstudien, Preise, Kontakt. Fügen Sie Bereichsseiten und ein paar Ratgeber nur hinzu, wenn Sie sie ehrlich und aktuell halten. Überspringen Sie eine "Über uns"-Seite, es sei denn, sie enthält Beweise; integrieren Sie eine kurze menschliche Vorstellung in die Startseite oder den Kontakt.

Arbeitsreihenfolge

1. Angebot und Beweise. Schreiben Sie den Ein-Satz-Angebot, die Preiszeilen, drei Beweise und den Kontaktweg vor jedem Design. Verwenden Sie den ux-Skill für klaren Text.
2. Richtung und Token. Führen Sie das Richtungs-Tor oben aus, dann Palette, ein oder zwei selbst gehostete Schriften, Abstände, Radien mit dem ui-Skill (geschmackvolle Standardwerte, wenn das Projekt keine hat).
3. Mockup, Desktop und 390 px. Zuerst die Startseite, dann eine innere Seite. Der Eigentümer beurteilt es; iterieren Sie vor dem Bauen (ui-Skill, zuerst Mockup).
4. Seiten mit echten Inhalten bauen. Echte Fotos und Texte, kein Lorem Ipsum. Prüfen Sie lange französische Zeichenfolgen.
5. SEO und Schema. Titel, Meta, JSON-LD, Sitemap, hreflang, Bereichsseiten, Google-Unternehmenseintrag an die Website angepasst.
6. Sprache und Recht. Führen Sie french-typography auf allen französischen Texten aus, dann loi-25-website für den Auditbericht.
7. Geschwindigkeitsdurchlauf. Messen Sie LCP, CLS und Gesamtübertragung auf einem gedrosselten mobilen Profil und beheben Sie den größten Punkt zuerst.
8. Bewegung, dann Slop-Durchlauf. Fügen Sie den einen signifikanten Moment hinzu, dann führen Sie anti-slop und dessen Detektor aus.

Häufige Fehler

• Ein Hero, der "Willkommen" oder einen Slogan sagt, anstatt das Angebot.
• Preise, die hinter einem Formular versteckt sind, oder alte Preise, die im Schema und auf Stadtseiten nach einer Änderung zurückbleiben.
• Fünf Kontaktmöglichkeiten ohne eine offensichtliche primäre.
• Stadtseiten, die die gleiche Seite mit ausgetauschtem Ortsnamen sind.
• Cookie-Banner, die nur zur Dekoration hinzugefügt werden, während Tracking immer noch standardmäßig lädt.
• Ein Sprachwechsel, der Besucher zurück zur Startseite schickt.

Erledigt-Checkliste

• Erster Bildschirm gibt Angebot, Zielgruppe, Ort und eine primäre Handlungsaufforderung an.
• Ein Startpreis und sein Umfang erscheinen auf der Preisseite und stimmen mit JSON-LD überein.
• Telefon und Kontaktformular funktionieren in einem Schritt auf Mobilgeräten; die Bestätigung sagt, was als nächstes passiert.
• Mindestens drei echte, konkrete Beweise.
• LocalBusiness JSON-LD gültig; Google-Unternehmenseintrag stimmt mit Name, Adresse, Telefon überein.
• Bereichsseiten haben unterschiedlichen lokalen Inhalt; Sitemap und hreflang korrekt.
• LCP-Bild vorgeladen; Schriften selbst gehostet; LCP unter 2,5 s auf gedrosseltem Mobilgerät; keine schweren 3D.
• FR und EN haben den gleichen Inhalt; french-typography-Prüfung bestanden.
• loi-25-website-Bericht hat keinen offenen Fehlerbehebungspunkt (Québec-Seiten).
• Höchstens eine signifikante Bewegung; reduzierte Bewegung berücksichtigt.
• anti-slop-Detektor sauber; 390 px und Desktop geprüft; tsc, Lint und Tests grün.