Site personnel d'expert

Site de l'expert

Le site de l'expert vend de la confiance en une personne spécifique. Une belle coque, de nos jours, n'importe quel générateur la fabrique, donc celui qui gagne est celui sur la page duquel il y a une personne vivante, une promesse claire et une qualité d'exécution tangible.

Ordre du travail

Suis les étapes. Ne saute pas l'étape 1, même s'ils demandent « juste du beau ».

1. Portrait de la personne. Rassemble à partir de toutes les sources disponibles (correspondance, site, chaîne, documents) : qui est l'expert, pour qui il travaille, quel résultat il apporte, 2-3 histoires réelles, valeurs, objectifs, ses propres photos et travaux, les mots qu'il utilise lui-même. N'invente rien : pas de fait, alors il n'est pas sur le site. Dégage une idée principale du site et une phrase-promesse : à qui, quoi il obtiendra, de quelle manière.
2. Brief. Trouve une niche dans references/nishi.md (28 niches : palette de départ, polices, quoi montrer sur les photos, blocs nécessaires, doutes du client, choses à éviter). Note en 5 lignes : type de page (service pour les gens, cabinet ou studio, produit en ligne, auteur), objectif (prendre rendez-vous, acheter, s'abonner, aller vers un bot), style (un seul, jusqu'au bout), un élément inoubliable (tableau, objet, photo avec caractère, interface vivante), choses à éviter. Choisis 2-3 techniques et ouvre leurs exemples vivants depuis references/obrazcy.md.
3. Composition. Grille basée sur le nombre d'or, densité « magazine », pas « désert ». Lis references/kompozitsiya.md.
4. Polices et couleur. Commence par la palette et la paire de polices de la niche, puis adapte à la personne selon references/shrifty.md et references/tsvet.md. Uniquement des polices avec cyrillique, sans couleurs acides ou néon, sans fond entièrement sombre par défaut. Galerie de toutes les niches en direct : assets/nishi.html.
5. Photo, volume, lumière. Lis references/foto-i-kartinki.md et references/obem-svet-ten.md. Démo vivante de toutes les techniques de volume : assets/obem-demo.html.
6. Mouvement et vidéo. Uniquement des techniques légères : references/effekty.md, references/video.md.
7. Textes. Écris selon references/teksty.md. Passe le texte russe via les règles humanizer-ru, l'anglais via humanizer. Sans tirets longs.
8. Vérification. Lance python -I scripts/proverka_saita.py <dossier_du_site> et suis la checklist references/proverka.md. Si tu as Node.js et Playwright, lance node scripts/proverka_v_brauzere.mjs <index.html> : il ouvrira la page à 375, 768, 1280 et 1440 px, trouvera les erreurs de console, les débordements, les petits boutons et sauvegardera les captures d'écran. Regarde les captures d'écran avec tes yeux.

Règles principales

• La personne est plus importante que l'effet. La photo de l'expert, ses travaux, ses objets et sa voix apportent plus que n'importe quelle animation.
• Le réalisme et le volume se créent avec la lumière, l'ombre, les cadres, les couches et la couleur, pas avec de la 3D lourde. Une seule source de lumière sur toute la page : en haut à gauche, ombres en bas à droite.
• Un mouvement fort par page. Tout le reste est discret : soulèvement de la carte de 2 px, léger rapprochement de la photo, pression sur un bouton.
• Légèreté. Le premier écran s'ouvre rapidement sur un téléphone faible. Pas de scènes WebGL, pas de défilement qui « capture » la molette, pas de lancement automatique de vidéo avec son.
• Asymétrie basée sur le nombre d'or au lieu de tout centrer : colonnes 38,2 / 61,8, marges et tailles selon l'échelle 1,618.
• Densité. L'air est nécessaire, mais le bloc ne doit pas sembler vide. L'écran contient toujours une photo, un objet ou un détail vivant.
• Blocs de couleur explicites. Ne peins pas tout le site en une seule teinte (une seule teinte sur tout le site semble plate). Les sections alternent le fond : clair, sable chaud, une bande sombre d'accent, sauge. Plus de blocs, de texte, d'images et de listes que de « magazine vide ».
• Chaque fait répond à « et alors ? » L'expérience de l'expert est présentée comme un bénéfice pour le client. Les coulisses internes (nombre de départements, résultats de tests internes) ne doivent pas être mises sur le site.
• Sans signes de template IA : Inter, Roboto et Arial comme voix du site ; dégradés violet-rose ; néon et couleurs acides ; sur-titre au-dessus de chaque titre ; numéros de sections 01/02/03 ; grille de cartes identiques « icône, titre, texte » ; emoji au lieu d'icônes ; poignées de main de stock et images IA « avec une lumière commune » ; avis, logos et chiffres inventés.
• Honnêteté. Une illustration créée par IA, signe-la. Des photos d'autres personnes uniquement avec une licence libre et le crédit de l'auteur.
• Confidentialité. L'adresse jusqu'au quartier ou à la rue, sans numéro de maison. Les détails personnels médicaux et familiaux ne doivent pas être mis sur le site.

Structure de la page de l'expert

Ordre par défaut, adapte-le selon le brief :

1. Premier écran : phrase-promesse, photo vivante de l'expert ou de son objet principal, un bouton d'action, à côté une preuve (chiffre de la pratique réelle, « on a parlé de nous », un avis).
2. À qui j'aide et avec quoi (2-4 situations dans les mots du client).
3. Comment je travaille : méthode ou produit montré en direct (photo, interface, processus).
4. Preuves : avis avec un résultat concret, travaux, cas clients.
5. Qui je suis : brièvement et seulement ce qui explique l'expertise et les valeurs.
6. Cadeau pour abonnement ou étape d'essai (guide, test, première leçon, bot).
7. Bouton final et coordonnées.

Références

• references/kompozitsiya.md : grilles, nombre d'or, densité, rythme des sections.
• references/shrifty.md : paires de polices avec cyrillique, tailles, texte en volume.
• references/tsvet.md : palettes, neutres teintés, couleur comme profondeur.
• references/foto-i-kartinki.md : prise de vue, retouche, détourages, cadres, formats, licences.
• references/obem-svet-ten.md : neuf techniques de volume avec du CSS prêt.
• references/effekty.md : quels effets prendre et lesquels ne pas prendre, avec poids.
• references/video.md : vidéo sur le site et montage de courtes vidéos.
• references/teksty.md : textes de l'expert, humaniseurs, interdits.
• references/nishi.md : base de 28 niches : palettes, polices, photos, blocs, doutes du client, choses à éviter.
• references/obrazcy.md : exemples vivants pour chaque technique, « technique → où voir ».
• references/proverka.md : checklist avant présentation.