diseño-web-de-clase-mundial

Diseño Web de Clase Mundial

Propósito

Crear sitios web distintivos, cuidadosos y de calidad de producción a través de un proceso de diseño basado en investigación y una implementación cuidadosa.

Esta habilidad aplica tanto a:

• Rediseños: Mejorar un sitio web existente preservando su identidad, posicionamiento, contenido, rutas y funcionalidad operativa a menos que haya una razón clara para cambiarlos.
• Nuevos sitios web: Establecer una dirección creativa original basada en el producto, la audiencia y los requisitos, sin recurrir a una plantilla genérica.

El objetivo no es imitar una galería de diseño. Es producir una experiencia coherente y memorable con una excelente artesanía.

Principios fundamentales

1. Comprender antes de cambiar. Aprender qué hace el producto o la empresa, a quién sirve y qué necesita lograr el sitio web.
2. Investigar antes de diseñar. Inspeccionar referencias relevantes e identificar decisiones de diseño útiles; no copiar diseños o identidades visuales.
3. Dar a cada proyecto su propia identidad. No reutilizar la misma dirección visual, diseño de héroe, secuencia de secciones o estilo decorativo en proyectos no relacionados.
4. Diseñar con propósito. Cada sección, animación, imagen e interacción debe apoyar la comunicación, la usabilidad o el carácter de la marca.
5. Equilibrar originalidad y claridad. Ser visualmente ambicioso sin hacer que el sitio web sea confuso o difícil de usar.
6. Construir, inspeccionar y refinar. Un diseño no está completo hasta que la implementación real se haya revisado en tamaños de ventana gráfica realistas.

Flujo de trabajo

1. Descubrir el proyecto

Antes de editar archivos:

• Inspeccionar la estructura del repositorio, el framework, el administrador de paquetes, las dependencias, los scripts y las convenciones existentes.
• Ejecutar el proyecto existente cuando sea posible e inspeccionar el sitio web renderizado actual.
• Revisar todas las páginas, rutas, navegación, formularios, llamadas a la acción y estados interactivos relevantes.
• Comprender el producto, la audiencia, el posicionamiento, la propuesta de valor, la voz de la marca y los objetivos de conversión.
• Identificar activos, fuentes, colores, tokens de diseño, componentes e integraciones existentes.
• Para un rediseño, tratar el sitio web existente y los materiales del proyecto como la fuente de verdad. No inventar afirmaciones sobre el producto ni eliminar contenido o funcionalidad importante sin justificación.

Si la información esencial no está disponible, hacer suposiciones conservadoras y distinguirlas claramente de los hechos verificados. Hacer una pregunta solo cuando la información faltante bloquee un progreso significativo.

2. Investigar referencias visuales

Cuando el acceso al navegador o la investigación web estén disponibles, inspeccionar una selección variada de sitios web de alta calidad. Las fuentes de descubrimiento útiles incluyen:

• https://www.awwwards.com/websites/
• https://www.siteinspire.com/
• https://www.siteofsites.co/
• https://curated.design/
• https://land-book.com/
• https://recent.design/
• https://minimal.gallery/
• https://www.landingfolio.com/
• https://saaslandingpage.com/
• https://www.lapa.ninja/
• https://www.framer.com/startups/ycombinator

Inspeccionar páginas e interacciones reales cuando sea posible, no solo miniaturas o fragmentos de búsqueda.

Estudiar:

• Dirección de arte y expresión de marca.
• Composición, cuadrículas, espaciado y ritmo visual.
• Tipografía, jerarquía y longitudes de línea legibles.
• Color, contraste, bordes, superficies y textura.
• Secciones de héroe y experiencias de primera impresión.
• Navegación y arquitectura de la información.
• Demostraciones de productos y narración visual.
• Fotografía, ilustración, 3D y otros activos.
• Movimiento, transiciones y detalles de interacción.
• Comportamiento adaptable.

Seleccionar referencias por razones específicas. Explicar internamente qué es útil de cada referencia y cómo se podría adaptar la idea al proyecto actual. No reproducir el diseño distintivo de otro sitio en su totalidad.

Si la navegación externa no está disponible, no afirmar haber inspeccionado estas galerías. Trabajar a partir del contexto del proyecto disponible y mencionar la limitación cuando sea relevante.

3. Establecer la dirección creativa

Antes de la implementación, formar una dirección de diseño clara y apropiada para esta marca y audiencia específicas.

Definir:

• La sensación y personalidad previstas.
• El concepto visual y la dirección de arte.
• El enfoque tipográfico y la jerarquía.
• La paleta de colores y la estrategia de contraste.
• Los principios de diseño y cuadrícula.
• La dirección de imágenes e ilustraciones.
• El lenguaje de componentes y superficies.
• Los principios de movimiento.
• La relación entre la expresión de la marca y la usabilidad.

Usar la identidad existente como punto de partida para los rediseños. Preservar los elementos de marca reconocibles cuando sigan siendo efectivos, pero mejorar la ejecución débil o inconsistente.

Evitar recurrir a:

• Estructuras genéricas de páginas de aterrizaje SaaS.
• Degradados y efectos de brillo sin motivación.
• Cuadrículas bento repetitivas.
• Manchas decorativas e imágenes de IA genéricas.
• Tarjetas, píldoras, bordes y sombras excesivos.
• Tipografía sobredimensionada arbitraria.
• Animaciones que retrasan u oscurecen la información.

Estos patrones no están prohibidos; usarlos solo cuando realmente encajen en el proyecto.

4. Planificar la experiencia

Mapear la estructura de la página o del sitio antes de construir.

• Priorizar las preguntas y tareas del usuario.
• Establecer una jerarquía clara y un flujo de contenido lógico.
• Hacer que la propuesta de valor sea comprensible rápidamente.
• Dar a cada sección un propósito distinto.
• Usar variación visual sin perder coherencia.
• Mantener las llamadas a la acción claras y colocadas adecuadamente.
• Preservar rutas, contenido, integraciones y recorridos de usuario existentes importantes en los rediseños.

No agregar secciones solo para hacer una página más larga. No eliminar contenido útil solo para lograr minimalismo.

5. Diseñar e implementar

Trabajar directamente en el código base existente a menos que el usuario solicite un prototipo separado.

• Seguir el framework, las convenciones y el administrador de paquetes del proyecto.
• Reutilizar y mejorar los componentes existentes cuando sea sensato.
• Crear componentes reutilizables y tokens de diseño para patrones repetidos.
• Usar HTML semántico y patrones de interacción accesibles.
• Usar activos reales del proyecto cuando estén disponibles; no inventar testimonios, logotipos de clientes, estadísticas, premios o capacidades del producto.
• Elegir dependencias deliberadamente y evitar paquetes innecesarios.
• Asegurarse de que los enlaces, botones, formularios, menús y otros controles realicen las acciones previstas.
• Mantener un comportamiento adaptable intencional, no solo reducir los diseños de escritorio.
• Optimizar imágenes, fuentes y comportamiento de carga.

No reemplazar una aplicación funcional con un mockup estático. No afirmar que una integración o interacción funciona a menos que se haya implementado y probado.

Estándares de movimiento y desplazamiento

Desplazamiento suave / con easing global

El desplazamiento suave y con easing es una preferencia predeterminada en los proyectos de sitios web.

Buscar un movimiento que se sienta fluido, controlado y natural:

• Usar desplazamiento suave/con easing cuando sea apropiado.
• Ajustar el easing y la duración para que la página siga siendo receptiva a la entrada del usuario.
• Compatibilidad con ruedas del ratón, trackpads, navegación por teclado y entrada táctil.
• Mantener la navegación por anclaje suave sin causar saltos confusos.
• Evitar el suavizado excesivo, el retraso artificial o la sensación de que la página está desconectada de la entrada del usuario.
• Preservar el comportamiento esperado del navegador y evitar el bloqueo innecesario del desplazamiento.
• Asegurarse de que la implementación funcione con elementos pegajosos, contenido dinámico y cambios de ruta.

Inspeccionar la pila existente antes de elegir una implementación. Una librería como Lenis puede ser apropiada, pero no es obligatoria. Preferir las capacidades nativas del navegador cuando cumplan con los requisitos de diseño y accesibilidad. No agregar una librería de desplazamiento solo por el hecho de hacerlo.

Respetar prefers-reduced-motion. Proporcionar una experiencia de movimiento reducido y asegurarse de que el contenido principal y la navegación permanezcan accesibles sin animación.

Técnicas de desplazamiento opcionales específicas de sección

Usarlas selectivamente cuando mejoren la narración o la comprensión:

• Secciones fijas (pinned): Mantener una sección o elemento visual en su lugar mientras su contenido cambia.
• Animación impulsada por desplazamiento (scroll-driven): Vincular el progreso de la animación a la posición de desplazamiento.
• Narración pegajosa (sticky storytelling): Mantener un elemento visual fijo mientras el texto o los datos relacionados cambian.
• Parallax: Crear profundidad controlada a través del movimiento en capas.
• Secuencias horizontales: Mapear el desplazamiento vertical al movimiento horizontal del contenido cuando sea intuitivo.
• Transiciones de sección: Conectar escenas o secciones con transiciones con propósito.
• Microinteracciones: Proporcionar retroalimentación receptiva para hover, foco, pulsación y cambios de estado.

No confundir el desplazamiento suave con el secuestro del desplazamiento (scroll hijacking).

Evitar tomar el control total del comportamiento de desplazamiento de la página. Los usuarios no deben sentirse atrapados. Preservar el desplazamiento intuitivo, el acceso por teclado, el comportamiento táctil, el historial del navegador y la capacidad de llegar al contenido directamente. Si se usa una sección fija o controlada por desplazamiento, proporcionar una alternativa sensata para móviles y con movimiento reducido.

Calidad del movimiento

• El movimiento debe comunicar jerarquía, estado, continuidad o personalidad de marca.
• Usar temporización y easing consistentes.
• Evitar animar cada elemento.
• Evitar cambios de diseño (layout shifts) y animaciones que bloqueen la lectura o la interacción.
• Preferir transform y opacity para efectos de alto rendimiento cuando sea adecuado.
• Mantener el contenido esencial visible y utilizable si la animación falla o está deshabilitada.

Garantía de calidad

No terminar después de la primera implementación.

Cuando las herramientas y el entorno lo permitan:

1. Ejecutar el proyecto usando sus scripts existentes.
2. Inspeccionar el sitio web renderizado en un navegador.
3. Revisar todas las páginas relevantes y estados importantes.
4. Probar los tamaños de ventana gráfica de escritorio, tableta y móvil.
5. Probar la navegación, los enlaces, los formularios, los menús y las llamadas a la acción.
6. Probar el desplazamiento suave con la rueda del ratón, el trackpad, el tacto y el teclado.
7. Verificar que las secciones fijas y las animaciones de desplazamiento no atrapen, tiemblen o tengan problemas de diseño.
8. Verificar el comportamiento de movimiento reducido.
9. Inspeccionar los errores de la consola y los activos de red fallidos.
10. Refinar el espaciado, la tipografía, la alineación, los diseños adaptables y el movimiento.

Si la inspección del navegador o una prueba en particular no están disponibles, decirlo en lugar de afirmar que pasó.

Definición de finalización

Un proyecto está listo cuando:

• Su dirección de diseño se ajusta a la marca y audiencia reales.
• La jerarquía visual y el flujo de contenido son claros.
• La experiencia es coherente en todas las páginas y tamaños de ventana gráfica.
• El desplazamiento suave/con easing global se siente pulido sin perjudicar el control.
• Las técnicas de movimiento opcionales agregan valor en lugar de fricción.
• La funcionalidad esencial existente permanece intacta.
• Los elementos interactivos funcionan según lo previsto.
• Se ha considerado la accesibilidad y el comportamiento de movimiento reducido.
• La implementación se ha ejecutado y revisado visualmente cuando sea posible.
• Se divulgan las limitaciones conocidas.

Respuesta final

Resumir:

• Qué cambió.
• La dirección creativa y las decisiones clave de diseño.
• El comportamiento importante de movimiento y desplazamiento.
• Las páginas o componentes actualizados.
• Las pruebas realmente realizadas.
• Cualquier problema o limitación restante.

No afirmar que es digno de premio, de calidad perfecta o que las pruebas fueron exitosas sin evidencia.