Sitio personal de experto

Sitio del experto

El sitio del experto vende confianza en una persona concreta. Hoy en día cualquier generador crea una bonita envoltura, por lo que gana quien tiene en su página una persona viva, una promesa clara y una calidad palpable.

Orden de trabajo

Sigue los pasos. No te saltes el paso 1, aunque te pidan «solo que sea bonito».

1. Retrato de la persona. Recopila de todas las fuentes disponibles (correspondencia, sitio web, canal, documentos): quién es el experto, para quién trabaja, qué resultado aporta, 2-3 historias reales, valores, objetivos, sus propias fotos y trabajos, las palabras con las que él mismo habla. No inventes nada: si no hay hecho, no está en el sitio. Extrae una idea principal del sitio y una frase-promesa: a quién, qué obtendrá, de qué manera.
2. Brief. Encuentra el nicho en references/nishi.md (28 nichos: paleta inicial, tipografías, qué mostrar en la foto, bloques necesarios, dudas del cliente, qué evitar). Anota en 5 líneas: tipo de página (servicio a personas, consultorio o estudio, producto online, autor), objetivo (reservar, comprar, suscribirse, ir al bot), estilo (uno, hasta el final), un elemento inolvidable (cuadro, objeto, foto con carácter, interfaz viva), qué evitar. Elige 2-3 técnicas y abre sus ejemplos reales en references/obrazcy.md.
3. Composición. Rejilla en la proporción áurea, densidad «revista», no «desierto». Lee references/kompozitsiya.md.
4. Tipografías y color. Empieza con la paleta y el par de tipografías del nicho, luego ajústalos a la persona según references/shrifty.md y references/tsvet.md. Solo tipografías con cirílico, sin colores ácidos ni neón, sin fondo completamente oscuro por defecto. Galería de todos los nichos en vivo: assets/nishi.html.
5. Fotos, volumen, luz. Lee references/foto-i-kartinki.md y references/obem-svet-ten.md. Demo en vivo de todas las técnicas de volumen: assets/obem-demo.html.
6. Movimiento y vídeo. Solo técnicas ligeras: references/effekty.md, references/video.md.
7. Textos. Escribe según references/teksty.md. El texto en ruso pásalo por las reglas de humanizer-ru, el texto en inglés por humanizer. Sin guiones largos.
8. Revisión. Ejecuta python -I scripts/proverka_saita.py <carpeta del sitio> y pasa la lista de verificación references/proverka.md. Si tienes Node.js y Playwright, ejecuta node scripts/proverka_v_brauzere.mjs <index.html>: abrirá la página en 375, 768, 1280 y 1440 px, encontrará errores de consola, desbordamientos, botones pequeños y guardará capturas de pantalla. Revisa las capturas visualmente.

Reglas principales

• La persona es más importante que el efecto. La foto del experto, sus trabajos, sus objetos y su voz aportan más que cualquier animación.
• Realismo y volumen se crean con luz, sombra, marcos, capas y color, no con 3D pesado. Una sola fuente de luz en toda la página: arriba a la izquierda, sombras hacia abajo a la derecha.
• Un movimiento fuerte por página. Todo lo demás, tranquilo: elevación de tarjeta 2 px, ligero acercamiento de foto, pulsación de botón.
• Ligereza. La primera pantalla se abre rápido en un teléfono débil. Sin escenas WebGL, sin scroll que «atrape» la rueda, sin vídeo con sonido autoplay.
• Asimetría según la proporción áurea en lugar de todo centrado: columnas 38,2 / 61,8, márgenes y tamaños según la escala 1,618.
• Densidad. El aire es necesario, pero el bloque no debe verse vacío. En la pantalla siempre hay una foto, un objeto o un detalle vivo.
• Bloques de color explícitos. No pintar todo el sitio de un solo tono (un solo tono en todo el sitio se ve plano). Las secciones alternan fondo: claro, arena cálido, una franja oscura de acento, salvia. Más bloques, texto, imágenes y listas que «revista vacía».
• Cada hecho responde al «¿y qué?» La experiencia del experto se presenta como beneficio para el cliente. La parte interna (número de departamentos, resultados de pruebas internas) no se saca al sitio.
• Sin signos de plantilla de IA: Inter, Roboto y Arial como voz del sitio; degradados violeta-rosa; neón y colores ácidos; sobreencabezado sobre cada encabezado; números de sección 01/02/03; rejilla de tarjetas idénticas «icono, encabezado, texto»; emojis en lugar de iconos; apretones de manos de stock e imágenes de IA «con luz común»; reseñas, logotipos y cifras inventadas.
• Honestidad. Una ilustración creada por IA debe firmarse. Fotos ajenas solo con licencia libre y crédito al autor.
• Privacidad. Dirección hasta el barrio o la calle, sin número de casa. No divulgar detalles médicos o familiares personales en el sitio.

Estructura de la página del experto

Orden por defecto, cámbialo según el brief:

1. Primera pantalla: frase-promesa, foto viva del experto o su objeto principal, un botón de acción, junto a una prueba (cifra de la práctica real, «han escrito sobre nosotros», reseña).
2. A quién ayudo y con qué (2-4 situaciones en palabras del cliente).
3. Cómo trabajo: método o producto mostrado en vivo (foto, interfaz, proceso).
4. Pruebas: reseñas con resultado concreto, trabajos, casos.
5. Quién soy: breve y solo lo que explica la experiencia y los valores.
6. Regalo por suscripción o paso de prueba (guía, test, primera lección, bot).
7. Botón final y contactos.

Referencias

• references/kompozitsiya.md: rejillas, proporción áurea, densidad, ritmo de secciones.
• references/shrifty.md: pares de tipografías con cirílico, tamaños, texto con volumen.
• references/tsvet.md: paletas, neutros teñidos, color como profundidad.
• references/foto-i-kartinki.md: fotografía, edición, recortes, marcos, formatos, licencias.
• references/obem-svet-ten.md: nueve técnicas de volumen con CSS listo.
• references/effekty.md: qué efectos tomar y cuáles no, con peso.
• references/video.md: vídeo en el sitio y montaje de clips cortos.
• references/teksty.md: textos del experto, humanizadores, prohibiciones.
• references/nishi.md: base de 28 nichos: paletas, tipografías, fotos, bloques, dudas del cliente, qué evitar.
• references/obrazcy.md: ejemplos reales para cada técnica, «técnica → dónde ver».
• references/proverka.md: lista de verificación antes de mostrar.