diseño-sitios-web-expositivos

Sitios Web Expositivos de Diseño

Convierte briefs escuetos y material disperso en un sitio que se sienta específico para su tema, audiencia, idioma y propósito. Soporta landing pages enfocadas, sitios web de varias páginas y productos web interactivos. Utiliza este skill como el eje del flujo de trabajo; combínalo con cualquier skill de diseño, navegador, imagen, interfaz de producto o framework que el usuario nombre explícitamente.

Reglas fundamentales

• Diseña una experiencia de conversión, no una colección de secciones atractivas.
• Deriva la identidad del negocio, la audiencia, el lugar, el producto y las imágenes reales. No reutilices el estilo visual de un proyecto anterior a menos que el usuario lo solicite.
• Separa los hechos verificados de la interpretación creativa. Nunca inventes direcciones, precios, horarios de apertura, reseñas, clientes, premios, funciones o afirmaciones de rendimiento.
• Conserva los activos originales del usuario. Optimiza las copias dentro del proyecto y documenta las imágenes generadas o temporales.
• Elige el idioma según la audiencia y el brief. Nunca asumas contenido en coreano, chino, inglés, japonés o bilingüe sin evidencia.
• Trata la tipografía localizada, la separación de líneas, la puntuación, el orden de lectura, la densidad de contenido y las acciones culturalmente familiares como parte del diseño.
• Prefiere una dirección artística fuerte sobre un collage de efectos de moda.
• Cuando el usuario conceda libertad creativa, infiere y comprométete con una dirección justificada en lugar de pedirle que diseñe el sitio por ti.
• Haz que el prototipo sea genuinamente interactivo y demostrable cuando se solicite la implementación. No te detengas en un concepto escrito a menos que el usuario solo pida estrategia.
• Mantén toda la información esencial visible sin animación y respeta las preferencias de movimiento reducido.

Elige el modo de interacción

1. Solo concepto: Produce posicionamiento, flujo de páginas, dirección visual y descripciones de pantallas clave. No modifiques archivos a menos que se te pida.
2. Prototipo: Construye un sitio web responsivo y ejecutable de una o varias páginas con interacciones principales funcionales y contenido de calidad para presentación.
3. Rediseño: Primero audita la página existente y el repositorio, preserva los requisitos funcionales y la pila actual, luego mejora la interfaz.
4. Pulido: Inspecciona la página en vivo o local, identifica las brechas de mayor impacto, implementa cambios enfocados y vuelve a verificar.
5. Producto web: Diseña flujos de tareas, estados, navegación y presentación de datos; combina este skill con un skill de interfaz de producto cuando el trabajo tenga un fuerte componente de aplicación.

Cuando no exista un repositorio, elige la pila mantenible más simple que se ajuste a las necesidades de interacción. Cuando exista un repositorio, inspecciona sus convenciones y reutilízalas.

Flujo de trabajo

1. Define el resultado

Resuelve solo las decisiones que cambien materialmente el resultado:

• audiencia e idioma;
• tipo de sitio, escala de contenido y si la experiencia es de una página, varias páginas o tipo aplicación;
• acciones de conversión primaria y secundaria;
• formato de entrega e interacciones requeridas;
• material fuente y derechos de uso;
• primera impresión deseada y direcciones inaceptables;
• restricciones de lanzamiento como pila, ruta, viewport o puerto.

Haz un máximo de tres preguntas concisas a la vez. Si el usuario concede libertad creativa y la evidencia es suficiente, establece suposiciones razonables y continúa.

Para briefs escuetos, enlaces mapeados o activos locales mixtos, lee descubrimiento-e-investigacion.md antes de recopilar contenido.

Lee tipos-de-sitio-y-localizacion.md al elegir la arquitectura de la información, trabajar en chino, inglés, japonés, coreano o construir una experiencia multilingüe.

2. Construye un libro de contabilidad de referencia

Inspecciona los enlaces proporcionados, listados de mapas, sitios existentes, archivos, imágenes y videos. Registra:

• el valor verificado;
• su fuente y fecha de verificación;
• si se puede publicar directamente;
• cualquier cosa que requiera confirmación del propietario.

Mantén los datos operativos centralizados en archivos de datos o contenido en lugar de dispersarlos por los componentes. Etiqueta los marcadores de posición explícitamente. Si la información pública entra en conflicto, prefiere la fuente propiedad del negocio o la más actualizada y señala el conflicto.

3. Define la historia de conversión

Escribe esto antes de elegir efectos visuales:

• la frase que los visitantes deben recordar después de diez segundos;
• el CTA principal y un CTA secundario opcional;
• una escalera de creencias desde la primera impresión hasta la acción;
• de tres a cinco puntos de prueba ya respaldados por evidencia;
• la información mínima necesaria para eliminar la duda.

Crea o actualiza PRODUCT.md en proyectos de implementación con audiencia, propósito, posicionamiento, conversión, prueba, tono de voz, anti-referencias y expectativas de accesibilidad.

4. Establece una dirección artística específica

Nombra un concepto que combine la verdad de la categoría con una promesa emocional y un contraste deliberado. Ejemplos de contrastes útiles incluyen enérgico pero disciplinado, local pero editorial, técnico pero humano, o premium pero acogedor.

Configura los parámetros de diseño antes de la implementación:

• variación de diseño, 1–10;
• intensidad de movimiento, 1–10;
• densidad de información, 1–10;
• estrategia de color;
• estrategia de fotografía;
• estrategia tipográfica.

Crea o actualiza DESIGN.md con el concepto, tokens, tipo, diseño, tratamiento de imagen, movimiento y comportamiento responsivo. Lee direccion-y-estructura.md al seleccionar el concepto, la arquitectura de la página o el tratamiento multimedia.

Evita los valores predeterminados visuales automáticos: estilo genérico de fitness negro-neón, estilo genérico de restaurante beige, paneles de vidrio decorativos, cuadrículas bento aleatorias, brillo sin significado, píldoras excesivas, tarjetas uniformes y secciones repetitivas de desvanecimiento ascendente.

5. Compone la página en torno a las decisiones

Elige la arquitectura de la información a partir del propósito del sitio. Para trabajos de varias páginas, define el mapa del sitio completo más pequeño, la navegación global, los objetivos específicos de cada página y la ruta de conversión entre páginas antes de estilizar secciones individuales. Para productos web, prioriza la finalización de tareas y la cobertura de estados sobre el ritmo de marketing.

Usa solo las secciones necesarias para la decisión del visitante. Un flujo común de página de conversión es:

1. hero con la promesa y la acción principal;
2. prueba inmediata;
3. oferta emblemática o valor del producto;
4. experiencia, proceso o diferenciadores;
5. detalles prácticos que eliminen objeciones;
6. ubicación, contacto, reserva, compra o consulta;
7. CTA final decisivo.

Varía la composición a través de la escala, el ritmo, el recorte, el espacio en blanco y la alineación editorial, no mediante una variedad arbitraria de componentes. En dispositivos móviles, mantén la acción más valiosa al alcance cuando sea apropiado, como llamar, navegar, reservar, comprar, registrarse, buscar, guardar o continuar.

6. Escribe el contenido como interfaz

• Escribe primero en el idioma principal de la audiencia; agrega otros idiomas solo cuando sea necesario.
• Usa encabezados cortos y directos que se ajusten al ritmo visual.
• Reemplaza afirmaciones genéricas con detalles específicos respaldados.
• Mantén las etiquetas de CTA literales y culturalmente familiares.
• Prueba los saltos de línea en el idioma de destino en anchos reales; no apruebes el diseño usando marcadores de posición en inglés.
• Prueba cada idioma compatible de forma independiente. No asumas que una traducción encaja en el componente del idioma fuente.
• Usa contenido real en lugar de lorem ipsum.

7. Construye el prototipo

• Usa estructura semántica de página y tokens reutilizables.
• Haz que los enlaces, llamadas, navegación, menús, filtros, galerías y modales funcionen al nivel que implique el prototipo.
• Optimiza las imágenes grandes a formatos y tamaños web apropiados; conserva los puntos focales de recorte significativos.
• Usa movimiento para aclarar la jerarquía, revelar relaciones espaciales o reforzar el carácter de la marca. Mantenlo escaso e interrumpible.
• Proporciona enfoque de teclado, texto alternativo significativo, contraste suficiente, objetivos táctiles de 44 px y controles móviles con conciencia de áreas seguras.
• Preserva el contenido esencial cuando el movimiento JavaScript no se ejecute.

Lee prototipo-qa.md antes de la implementación o la revisión final.

8. Verifica en un navegador real

No declares la finalización solo con una compilación exitosa. Verifica como mínimo:

• escritorio ancho alrededor de 1440px;
• ancho intermedio/tablet;
• móvil alrededor de 390px;
• móvil estrecho alrededor de 375px;
• una pasada de movimiento reducido o teclado.

Inspecciona el hero y la página completa. Verifica el ajuste de línea en el idioma de destino, recortes de imagen, desbordamiento horizontal, áreas seguras, controles fijos, errores de consola, enlaces, formularios, menús, orden de enfoque, comportamiento de carga y accesibilidad del CTA final. Corrige los problemas encontrados y repite la verificación afectada.

Entrega esperada

Para un prototipo ejecutable, entrega:

• código fuente funcional y una compilación de producción exitosa;
• una vista previa local o un comando de ejecución claro;
• PRODUCT.md y DESIGN.md cuando el proyecto lo justifique;
• una nota de fuente/marcador de posición para hechos operativos y medios;
• una lista concisa de interacciones implementadas y viewports validados;
• una lista corta de confirmaciones del propietario para hechos que puedan cambiar antes del lanzamiento.

Encabeza la respuesta final con la vista previa o el artefacto principal. Menciona solo las decisiones de diseño más importantes y los resultados de validación.

Control de calidad

No entregues hasta que todo sea cierto:

• Especificidad: El sitio no podría ser reetiquetado para un competidor aleatorio sin rediseño.
• Autenticidad: Las afirmaciones y los medios son reales, tienen fuente o están claramente marcados como provisionales.
• Conversión: La siguiente acción es obvia en segundos y sigue siendo fácil en móvil.
• Jerarquía: Una idea domina cada viewport; la tipografía y las imágenes la respaldan.
• Responsividad: Las composiciones se adaptan intencionalmente en lugar de simplemente apilarse.
• Moderación: El movimiento y los efectos tienen un propósito; el sitio no parece una demostración de efectos.
• Inclusión: Teclado, contraste, objetivos táctiles, movimiento reducido y estructura semántica están cubiertos.
• Fiabilidad: Compilación, consola, activos e interacciones críticas están verificados.