Diseñar páginas web con un aspecto uniforme y fáciles de usar para todos

## Hacer que el mensaje principal y el siguiente paso se vean primero Usa el peso visual para que la importancia sea evidente antes de perfeccionar la decoración. Una página debe ayudar a las personas a identificar su propósito, comprender el valor principal y reconocer la siguiente acción en cuestión de segundos. - Da a cada pantalla o sección un mensaje principal. - Mantén la jerarquía central limitada al título de la página, los encabezados de sección y el texto del cuerpo; añade niveles más profundos solo cuando sean necesarios. - Refuerza el contenido más importante mediante el tamaño, el contraste, la posición y el espacio circundante. - Coloca la conclusión antes que los detalles de apoyo cuando sea importante explorar el contenido rápidamente. - Reserva el tratamiento más destacado para la acción o decisión principal. - Evita que todos los elementos sean grandes, estén en negrita, sean coloridos o tengan un contraste alto. - Realiza una prueba de cinco segundos: ¿puede una persona que ve la página por primera vez explicar su propósito y el siguiente paso previsto? ## Ordenar los elementos con una cuadrícula y espacios comunes El espaciado comunica relaciones. Usa una escala y una cuadrícula compartidas para que los elementos relacionados se perciban conectados, los grupos separados sigan siendo distintos y las disposiciones puedan cambiar sin perder el ritmo. - Comienza con una escala de espaciado de 8 píxeles; permite una subdivisión de 4 píxeles cuando sea necesario un control más preciso. - Usa una cuadrícula responsive sencilla, como una columna en teléfonos, dos en tabletas y hasta doce en pantallas anchas. - Mantén el espacio dentro de un grupo menor que el espacio entre grupos. - Alinea los componentes repetidos con columnas, bordes y líneas de base comunes. - Establece como puntos de partida un interlineado del cuerpo cercano a 1.6 y separaciones entre párrafos de alrededor de 1.5 a 2 interlineados. - Usa tokens para los valores de espaciado en lugar de inventar medidas casi duplicadas. - Inspecciona el ritmo vertical entre secciones y componentes en cada ancho compatible. ## Mantener claro el orden de lectura del móvil a las pantallas anchas Organiza el contenido en el orden en que las personas lo necesitan y deja que la disposición visual refuerce esa secuencia. El diseño responsive debe preservar el significado, no limitarse a caber en pantallas más pequeñas. - Diseña primero el orden del contenido para dispositivos móviles y después mejora la disposición para pantallas más anchas. - Mantén las líneas de texto del cuerpo en japonés cerca de 35 a 45 caracteres y las de texto latino cerca de 45 a 75 caracteres cuando sea práctico. - Separa los párrafos web con espacio en lugar de depender de la sangría de la primera línea. - Coloca el punto clave de cada sección antes de las evidencias y su acción pertinente después de ellas. - Haz que la secuencia de encabezados sea comprensible cuando se lea sin el texto del cuerpo. - Conserva el orden lógico del código fuente cuando las columnas se contraigan o los elementos se desplacen. - Prueba el zoom, el aumento del texto, los anchos estrechos, las etiquetas largas, las fechas, los precios y la combinación de sistemas de escritura. ## Elegir tamaños de letra e interlineado fáciles de leer La tipografía establece la jerarquía, la legibilidad y la confianza. Usa una escala tipográfica limitada y suficiente interlineado para que el texto siga siendo cómodo en pantallas pequeñas y estable ante variaciones del contenido. - Comienza aproximadamente con 28 a 36 píxeles para H1, 22 a 28 para H2, 18 a 20 para H3 y 16 a 18 para el texto del cuerpo. - Usa un interlineado del cuerpo cercano a 1.6 y un interlineado de encabezados de alrededor de 1.25 a 1.4. - No dependas de texto del cuerpo de 13 a 14 píxeles o menos en dispositivos móviles. - Limita las familias y los grosores tipográficos; crea distinción mediante la jerarquía antes de añadir más tipos de letra. - Mantén el espaciado normal entre letras japonesas y usa un tracking sutil para el texto latino de exhibición solo cuando sea necesario. - Limita el énfasis en negrita a las pocas frases que realmente guían la exploración rápida. - Prueba números, símbolos, cadenas multilingües, texto generado por usuarios y glifos ausentes. ## Usar pocos colores y suficiente contraste para leer el texto El color debe comunicar prioridad, estado e identidad sin convertirse en el único portador de significado. Una paleta contenida facilita reconocer la acción principal y los cambios de estado importantes. - Usa un fondo dominante, una gama complementaria para texto o superficies y una pequeña proporción de color de acento. - Comienza con unos tres colores funcionales, además de tonos neutros y un acento principal. - Asigna de forma coherente los colores de éxito, advertencia, peligro e información. - Procura un contraste mínimo de 4.5:1 para texto normal y de 3:1 para texto grande. - Da a la acción principal una combinación distintiva de color, forma, etiqueta y ubicación. - Acompaña los estados codificados por color con texto, iconos, patrones u otras señales que no dependan del color. - Comprueba cada combinación de primer plano y fondo, incluidos los estados deshabilitado, hover, focus y de superposición sobre imágenes. ## Convertir botones y piezas repetidas en componentes compartidos La coherencia reduce el costo de aprendizaje para los usuarios y el costo de mantenimiento para los equipos. Convierte las decisiones visuales recurrentes en tokens y componentes compartidos en lugar de corregir páginas aisladas. - Define tokens para color, espaciado, tipografía, radio, borde, sombra y movimiento. - Crea botones, tarjetas, navegación, formularios, diálogos, insignias y elementos de respuesta reutilizables. - Define los estados predeterminado, hover, activo, deshabilitado, de carga, de error y de focus cuando corresponda. - Nombra las variantes por su propósito o función, no por una apariencia temporal. - Mantén una misma función coherente visualmente y en su comportamiento en todo el producto. - Documenta las variantes permitidas, las reglas de contenido, los requisitos de accesibilidad y el comportamiento responsive. - Cambia el componente compartido cuando cambie el patrón; evita divergencias específicas de cada página. ## Usar imágenes e iconos para explicar, no solo para decorar Las imágenes, los iconos y los diagramas deben explicar, orientar o reforzar la confianza. Un tratamiento estandarizado de los recursos mejora la calidad percibida e impide que la decoración oculte el mensaje. - Asigna relaciones de aspecto coherentes a funciones recurrentes de los recursos, como las secciones hero y las tarjetas. - Redimensiona las imágenes a sus dimensiones de visualización y prefiere formatos modernos eficientes. - Proporciona fuentes responsive y difiere la carga de las imágenes fuera de pantalla cuando esto no oculte contenido crítico. - Escribe texto alternativo que comunique el propósito de la imagen, no solo su apariencia. - Mantén coherentes el trazo, las esquinas, el relleno y el tamaño óptico de los iconos dentro de un conjunto. - Organiza los diagramas como explicación, modelo visual y conclusión concisa, con una leyenda clara. - Verifica el contraste del texto sobre las imágenes y proporciona un tratamiento de fondo estable cuando sea necesario. ## Responder rápido y con discreción al hacer clic o escribir El diseño de interacción debe mostrar qué puede utilizarse, confirmar la entrada, mostrar el progreso y confirmar los resultados. El movimiento debe aclarar los cambios de estado sin retrasar el trabajo ni causar molestias. - Proporciona una respuesta visible a la entrada principal en unos 100 milisegundos cuando sea posible. - Usa duraciones breves de hover y transición, a menudo de alrededor de 120 a 200 milisegundos. - Define la respuesta de pulsación, carga, éxito, error, deshabilitado y focus para los controles pertinentes. - Usa indicadores de progreso o esqueletos cuando la finalización no sea inmediata. - Usa la dirección y el easing para explicar cambios espaciales o de capa, no para decorarlos. - Evita animaciones que compitan con el contenido, atrapen la atención o bloqueen la entrada. - Respeta las preferencias de movimiento reducido y no reproduzcas automáticamente contenido multimedia de fondo que distraiga. ## Permitir terminar las tareas con teclado y lector de pantalla La accesibilidad es un requisito central de la interacción, no una auditoría visual final. Las personas deben poder percibir el estado, comprender los controles, navegar, recuperarse de errores y completar el flujo principal mediante distintos modos de entrada y salida. - Conserva un indicador de focus visible y un orden de teclado lógico. - Haz que los objetivos interactivos midan al menos 44 por 44 píxeles cuando sea práctico. - Proporciona alternativas significativas para las imágenes, nombres accesibles para los controles y etiquetas explícitas para los campos de formulario. - Asegúrate de que los errores identifiquen el campo, expliquen el problema e indiquen cómo corregirlo. - Proporciona subtítulos o transcripciones para el audio y el video significativos. - Verifica todo el flujo crítico usando únicamente un teclado y la salida de un lector de pantalla. - Prueba el contraste, el zoom, el cambio de tamaño del texto, el movimiento reducido y las diferencias comunes en la percepción del color. ## Antes de publicar, comprobar la velocidad y lo básico para buscadores El rendimiento, la capacidad de descubrimiento y la mantenibilidad forman parte de la experiencia diseñada. Define comprobaciones medibles para el lanzamiento y conserva las decisiones para que las mejoras sobrevivan a los cambios rutinarios de contenido y componentes. - Usa imágenes responsive y comprimidas, y carga los recursos no críticos solo cuando sean necesarios. - Crea subconjuntos de fuentes, permite el renderizado de fallback, minimiza los estilos que bloquean y difiere los scripts no esenciales. - Da a cada página un H1 significativo, además de un título, una descripción y una vista previa social distintos. - Usa un LCP inferior a 2.5 segundos y un CLS inferior a 0.1 como objetivos iniciales; después, aplica los estándares de rendimiento vigentes. - Prueba la velocidad y el abandono en el flujo más importante de registro, compra o solicitud. - Revisa la jerarquía, el espaciado, la tipografía, el color, los estados, los recursos, la accesibilidad y el rendimiento antes del lanzamiento. - Registra las decisiones de diseño e implementa los cambios mediante componentes y tokens compartidos. - Supervisa los resultados de usuarios reales y revisa los umbrales cuando las evidencias indiquen un estándar mejor.