Persönliche Experten-Website

Seite des Experten

Die Seite des Experten verkauft Vertrauen in eine bestimmte Person. Eine schöne Hülle macht heute jeder Generator, daher gewinnt derjenige, bei dem auf der Seite ein lebendiger Mensch, ein klares Versprechen und eine spürbare Qualität der Umsetzung zu finden sind.

Arbeitsablauf

Gehe die Schritte der Reihe nach. Überspringe Schritt 1 nicht, selbst wenn „einfach schön“ verlangt wird.

1. Porträt der Person. Sammle aus allen verfügbaren Quellen (Korrespondenz, Website, Kanal, Dokumente): Wer ist der Experte, für wen arbeitet er, welches Ergebnis liefert er, 2-3 echte Geschichten, Werte, Ziele, eigene Fotos und Arbeiten, Worte, mit denen er selbst spricht. Erfinde nichts: Gibt es keine Tatsache, dann gibt es sie nicht auf der Website. Leite einen Hauptgedanken der Website und einen Satz als Versprechen ab: für wen, was er erhält, auf welche Weise.
2. Briefing. Finde die Nische in references/nishi.md (28 Nischen: Startpalette, Schriftarten, was auf Fotos zu zeigen ist, benötigte Blöcke, Kundenbedenken, was vermieden werden sollte). Notiere in 5 Zeilen: Seitentyp (Dienstleistung für Menschen, Praxis oder Studio, Online-Produkt, Autor), Aufgabe (buchen, kaufen, abonnieren, zum Bot wechseln), Stil (einer, durchgängig), ein unvergessliches Element (Bild, Gegenstand, Foto mit Charakter, lebendige Benutzeroberfläche), was zu vermeiden ist. Wähle 2-3 Techniken aus und öffne deren lebendige Beispiele aus references/obrazcy.md.
3. Komposition. Raster nach dem Goldenen Schnitt, Dichte „Magazin“, nicht „Wüste“. Lies references/kompozitsiya.md.
4. Schriftarten und Farbe. Beginne mit der Palette und einem Paar Schriftarten der Nische, passe sie dann an die Person an gemäß references/shrifty.md und references/tsvet.md. Nur Schriftarten mit Kyrillisch, keine grellen oder Neonfarben, kein vollständig dunkler Hintergrund als Standard. Galerie aller Nischen live: assets/nishi.html.
5. Fotos, Volumen, Licht. Lies references/foto-i-kartinki.md und references/obem-svet-ten.md. Live-Demo aller Volumentechniken: assets/obem-demo.html.
6. Bewegung und Video. Nur leichte Techniken: references/effekty.md, references/video.md.
7. Texte. Schreibe nach references/teksty.md. Russischen Text nach den Regeln von humanizer-ru durchlaufen lassen, englischen Text mit humanizer. Keine langen Gedankenstriche.
8. Überprüfung. Führe python -I scripts/proverka_saita.py <Website-Ordner> aus und gehe die Checkliste references/proverka.md durch. Falls Node.js und Playwright vorhanden sind, führe node scripts/proverka_v_brauzere.mjs <index.html> aus: Es öffnet die Seite bei 375, 768, 1280 und 1440 px, findet Konsolenfehler, Überlappungen, zu kleine Schaltflächen und speichert Screenshots. Betrachte die Screenshots mit eigenen Augen.

Hauptregeln

• Der Mensch ist wichtiger als der Effekt. Das Foto des Experten, seine Arbeiten, seine Gegenstände und seine Stimme bringen mehr als jede Animation.
• Realismus und Volumen erzeugst du mit Licht, Schatten, Rahmen, Schichten und Farbe, nicht mit schwerem 3D. Eine einzige Lichtquelle auf der gesamten Seite: oben links, Schatten nach unten rechts.
• Eine starke Bewegung pro Seite. Alles andere ist ruhig: Anheben der Karte um 2 px, leichtes Heranzoomen des Fotos, Drücken der Schaltfläche.
• Leichtigkeit. Der erste Bildschirm öffnet sich schnell auf einem schwachen Telefon. Keine WebGL-Szenen, kein Scrollen, das das Rad „einfängt“, kein automatischer Start von Videos mit Ton.
• Asymmetrie nach dem Goldenen Schnitt statt alles zentriert: Spalten 38,2 / 61,8, Abstände und Größen nach der Skala 1,618.
• Dichte. Luft ist nötig, aber ein Block sollte nicht leer wirken. Auf dem Bildschirm gibt es immer ein Foto, einen Gegenstand oder ein lebendiges Detail.
• Explizite farbige Blöcke. Die gesamte Website nicht in einem einzigen Farbton einfärben (ein Farbton für die ganze Website wirkt flach). Abschnitte wechseln den Hintergrund: hell, warm sandfarben, ein dunkler Akzentstreifen, salbeigrün. Mehr Blöcke, Text, Bilder und Listen als „leeres Magazin“.
• Jede Tatsache beantwortet „und was dann?“ Die Erfahrung des Experten wird als Nutzen für den Kunden dargestellt. Interne Abläufe (Anzahl der Abteilungen, Ergebnisse interner Tests) nicht auf die Website setzen.
• Keine Anzeichen von KI-Vorlagen: Inter, Roboto und Arial als Stimme der Website; lila-rosa Farbverläufe; Neon- und grelle Farben; Überschrift über jeder Überschrift; Abschnittsnummern 01/02/03; Raster aus identischen Karten „Symbol, Überschrift, Text“; Emojis statt Symbole; Stock-Händeschütteln und KI-Bilder „mit durchgängigem Licht“; erfundene Bewertungen, Logos und Zahlen.
• Ehrlichkeit. Eine von KI erstellte Abbildung kennzeichnen. Fremde Fotos nur mit freier Lizenz und Namensnennung des Autors.
• Privatsphäre. Adresse bis zum Stadtteil oder zur Straße, ohne Hausnummer. Persönliche medizinische und familiäre Details nicht auf die Website setzen.

Seitenstruktur des Experten

Standardreihenfolge, anpassbar je nach Briefing:

1. Erster Bildschirm: Versprechenssatz, lebendiges Foto des Experten oder seines Hauptgegenstands, eine Handlungsschaltfläche, daneben Beweis (Zahl aus der Praxis, „über uns wurde geschrieben“, Bewertung).
2. Wem ich helfe und wobei (2-4 Situationen in den Worten des Kunden).
3. Wie ich arbeite: Methode oder Produkt, live gezeigt (Foto, Benutzeroberfläche, Prozess).
4. Nachweise: Bewertungen mit konkretem Ergebnis, Arbeiten, Fallbeispiele.
5. Wer ich bin: kurz und nur das, was die Expertise und Werte erklärt.
6. Geschenk für das Abonnement oder Probeschritt (Leitfaden, Test, erste Lektion, Bot).
7. Abschließende Schaltfläche und Kontaktdaten.

Referenzen

• references/kompozitsiya.md: Raster, Goldener Schnitt, Dichte, Rhythmus der Abschnitte.
• references/shrifty.md: Schriftpaare mit Kyrillisch, Größen, voluminöser Text.
• references/tsvet.md: Paletten, getönte Neutralfarben, Farbe als Tiefe.
• references/foto-i-kartinki.md: Aufnahme, Nachbearbeitung, Ausschnitte, Rahmen, Formate, Lizenzen.
• references/obem-svet-ten.md: Neun Volumentechniken mit fertigem CSS.
• references/effekty.md: Welche Effekte verwendet werden sollten und welche nicht, mit Gewichtung.
• references/video.md: Video auf der Website und Schnitt kurzer Clips.
• references/teksty.md: Texte des Experten, Humanizer, Verbote.
• references/nishi.md: Basis von 28 Nischen: Paletten, Schriftarten, Fotos, Blöcke, Kundenbedenken, was vermieden werden sollte.
• references/obrazcy.md: Lebendige Beispiele zu jeder Technik, „Technik → wo ansehen“.
• references/proverka.md: Checkliste vor der Präsentation.