Guía UI: 7 principios para páginas web y landing pages
Una página puede resultar atractiva a primera vista y, aun así, ser difícil de usar. El título no destaca, los elementos parecen colocados al azar, los botones cambian de aspecto entre secciones y, en una pantalla pequeña, el orden de la información deja de estar claro. Muchas veces, el problema empieza en las decisiones básicas: estructura, tamaños, espaciado y coherencia.
Esta guía UI para páginas web y landing pages, también llamadas páginas de destino, explica siete principios para crear una interfaz clara. Los ejemplos visuales del material de referencia muestran las relaciones entre los elementos; los valores que aparecen son puntos de partida, no reglas obligatorias. Aplica los principios según el contenido, la acción que quieres facilitar y las personas que utilizarán la página.
Construye la página con secciones que tengan una función clara
Un mensaje principal para cada zona
Antes de elegir los colores o la forma de los botones, define qué debe entender el visitante. La primera zona presenta el tema y orienta la lectura. Las siguientes pueden explicar la oferta, mostrar ejemplos, resolver objeciones o ayudar a tomar una decisión.
Una buena sección tiene una función que puedes describir en una frase. «Aquí explicamos el beneficio principal» resulta más útil que «aquí ponemos tres tarjetas». Decide cuántas tarjetas necesitas y cómo deben ser cuando el mensaje esté claro.
En una página de destino, las secciones pueden conducir a una única acción principal. Una página de presentación puede ofrecer varias vías para explorar el contenido. En ambos casos, el lector necesita un orden lógico, sin saltos entre temas que no guardan relación.
Agrupa los elementos relacionados
Piensa en la estructura en tres niveles: las grandes zonas de la página, el espacio dentro del cual se alinea el contenido y los pequeños grupos de elementos relacionados. Un título, un párrafo y un botón que transmiten el mismo mensaje forman un grupo. Una imagen y su explicación forman otro.
Esta separación ayuda a conservar las relaciones visuales cuando la página se estrecha. Un botón no debería alejarse del mensaje al que hace referencia solo porque otros elementos cambien de posición.
Mantén el contenido dentro de una zona bien alineada
Anchura máxima y centrado
El fondo de una sección puede ocupar toda la anchura de la pantalla, mientras el texto y las imágenes permanecen en una zona central. Este límite compartido aporta orden e impide que el contenido se extienda demasiado en pantallas grandes.
El ejemplo del PDF muestra una anchura máxima de 1.160 píxeles. Es un valor ilustrativo. La anchura adecuada depende de la densidad de información, del tamaño del texto y de cuántos elementos aparecen uno al lado del otro. Una galería puede necesitar más espacio que un artículo.
El centrado se aprecia cuando la zona de contenido es más estrecha que el espacio disponible. En pantallas pequeñas, deja suficiente margen lateral para que el texto y los botones no toquen los bordes.
Usa las mismas referencias para el menú y el contenido
Compara la posición del logotipo, del título principal, de la primera tarjeta y de la información del pie de página. Si forman parte de la misma estructura, alínéalos siguiendo referencias comunes.
Puedes hacer excepciones para una imagen amplia o un elemento que necesite destacar. Cada excepción debe tener una razón visual clara. Cuando todas las secciones empiezan en un lugar distinto, el lector tiene que reconstruir continuamente el orden de la página.
Elige tamaños que se adapten al contenido
Límites mínimos y máximos
Definir tamaños implica algo más que elegir anchura y altura. Los límites mínimos y máximos permiten mantener el equilibrio sin encerrar los elementos en una forma rígida.
| Decisión | Qué controla | Qué debes comprobar |
|---|---|---|
| Anchura | El espacio ocupado en horizontal | ¿El elemento cabe en la zona disponible? |
| Altura | El espacio ocupado en vertical | ¿Todo el contenido sigue siendo visible? |
| Límite mínimo | Cuánto puede reducirse un elemento | ¿Sigue siendo legible y fácil de usar? |
| Límite máximo | Cuánto puede ampliarse un elemento | ¿Se mantienen las proporciones y el orden visual? |
Una tarjeta con altura fija puede verse ordenada con dos líneas de texto y cortar un título más largo. Deja que el contenido determine la altura cuando su extensión pueda variar. Para las imágenes, elige proporciones adecuadas y comprueba qué se pierde al recortarlas.
Pantallas distintas, el mismo orden lógico
Algunas dimensiones necesitan estabilidad; otras deben adaptarse al espacio disponible. Un icono puede mantener un tamaño constante, mientras la zona principal de contenido se amplía hasta un límite.
Prueba la página con varias anchuras, incluidas las intermedias entre un móvil y un ordenador. Busca títulos con saltos de línea poco naturales, imágenes demasiado pequeñas y elementos que se salen de la pantalla. Comprueba también qué ocurre cuando el usuario aumenta el tamaño del texto.
Una buena adaptación conserva el sentido y la prioridad de la información. No basta con que todos los elementos quepan.
Utiliza el espaciado para mostrar las relaciones
Espacio interior y espacio exterior
El espacio interior separa el contenido del borde de su propio elemento. Lo ves en la distancia entre el texto de un botón y su contorno, o entre la información de una tarjeta y los límites de su fondo.
El espacio exterior separa un elemento de los que lo rodean. Lo ves entre dos tarjetas, entre grupos de información o entre secciones.
La diferencia importa en la práctica. Si el texto queda demasiado cerca del contorno de una tarjeta, aumenta el espacio interior. Si dos tarjetas parecen pegadas, ajusta la distancia entre ellas. Cambiar el valor equivocado puede limitarse a desplazar el problema.
Una escala de espaciado coherente
Elige un conjunto reducido de distancias y reutilízalo. Por ejemplo, puedes empezar con 8, 16, 24, 32 y 48 píxeles, y ajustar los valores según el tamaño del texto y la densidad de la página.
Deja menos distancia entre elementos estrechamente relacionados y más espacio entre grupos distintos. El título de una tarjeta debe sentirse más cercano a su propia explicación que a la tarjeta siguiente. Así, el espacio vacío comunica una relación y no actúa únicamente como decoración.
Define estilos visuales reutilizables
Jerarquía de títulos y textos
Establece cómo serán el título principal, los títulos de sección, los subtítulos y el texto normal. Las diferencias de tamaño, peso y espaciado deben ayudar al lector a reconocer los niveles de información.
Evita destacar todos los elementos a la vez. Si el título, la etiqueta, el precio y el botón compiten con la misma intensidad, nada dirige la atención. Decide qué debe verse primero y refuerza esa prioridad mediante el contraste y la posición.
Estas relaciones también se explican en la guía sobre jerarquía visual de Nielsen Norman Group: el tamaño, el contraste y la agrupación ayudan a distinguir la importancia relativa de los elementos.
Misma función, aspecto coherente
Dos acciones principales deberían reconocerse como parte de la misma familia visual. Mantén reglas comunes para botones, tarjetas, campos y etiquetas, e introduce variantes cuando su función sea distinta.
Por ejemplo, un botón principal puede tener un fondo sólido, mientras una acción secundaria recibe un tratamiento más discreto. No cambies la forma o el color sin motivo de una sección a otra.
Cuando ajustes una regla compartida, revisa todos los lugares donde se utiliza. Un cambio adecuado para un botón con una etiqueta corta puede producir otro resultado cuando el texto es más largo.
Organiza los elementos según el recorrido de lectura
Filas, columnas y saltos a una nueva fila
Los elementos pueden colocarse uno al lado del otro o apilarse en vertical. La elección depende de su relación y del espacio disponible. Dos datos que deben compararse pueden funcionar bien en paralelo; una explicación por pasos necesita una secuencia evidente.
Decide cómo se alinean los elementos, cuánto espacio queda entre ellos y cuándo pasan a la siguiente fila. Si las tarjetas contienen textos de distinta longitud, comprueba que sus títulos y acciones mantengan una relación fácil de seguir.
El orden del contenido en el móvil
Cuando dos columnas se convierten en una, el orden de los elementos debe seguir contando la misma historia. Un beneficio y la imagen que lo explica tienen que seguir siendo fáciles de relacionar.
Agrupa los elementos por su significado antes de cambiar la dirección de la composición. Si colocas todos los títulos, imágenes y botones en el mismo nivel estructural, puedes perder sus relaciones en una pantalla estrecha.
Haz que la navegación y las interacciones sean fáciles de entender
Un menú claro y acciones previsibles
Utiliza etiquetas que describan el destino o la acción. «Ver proyectos» informa más que «Descubre», y «Enviar solicitud» aclara qué ocurrirá después de completar un formulario.
Mantén la navegación alineada con el resto de la página y deja suficiente espacio para cada opción. En pantallas pequeñas, el menú debe poder abrirse, recorrerse y cerrarse sin que los elementos superpuestos bloqueen el contenido.
Estados visibles para el cursor, la pulsación y el teclado
Un elemento interactivo necesita algo más que un aspecto inicial. Indica cuándo puede activarse, cuándo se está pulsando y qué elemento tiene el foco durante la navegación con teclado.
Un cambio al pasar el cursor no es suficiente: en una pantalla táctil no existe la misma interacción. La etiqueta, la forma y la posición también deben ofrecer pistas en el estado inicial. Para la navegación con teclado, conserva un indicador de foco claro y visible sobre el fondo de la página.
Transiciones discretas con una finalidad
Una transición breve puede facilitar la comprensión de un cambio de estado. El PDF incluye un ejemplo de 200 milisegundos. Úsalo como referencia para probar, no como una duración universal.
La animación debe explicar un cambio o confirmar una acción. Evita el movimiento continuo junto a textos que requieren atención y mantén una experiencia coherente cuando se reducen las animaciones. Un botón debe responder de inmediato, sin esperar a que termine un efecto decorativo.
Revisa la página antes de publicarla
Recorre la página como alguien que la ve por primera vez. ¿Puedes entender el tema y la acción principal sin leer todos los párrafos? Después, comprueba los detalles:
- Cada sección tiene una función clara y continúa de forma lógica el mensaje anterior.
- El menú, los títulos y el contenido utilizan referencias de alineación coherentes.
- Los textos largos y las imágenes no superan el espacio disponible.
- Las distancias muestran qué elementos pertenecen al mismo grupo.
- Los títulos, botones y tarjetas siguen reglas visuales comunes.
- La información conserva un orden lógico en pantallas estrechas.
- Las acciones se entienden al utilizar una pantalla táctil, un ratón o un teclado.
- Las transiciones facilitan la interacción y no ocultan información.
Haz las pruebas con contenido real. Una composición equilibrada con textos de ejemplo puede presentar problemas al introducir un título largo, otra imagen o una etiqueta de botón más descriptiva.
Preguntas frecuentes sobre buenas prácticas UI
¿Se aplican los mismos principios a un sitio web y a una landing page?
Sí. La estructura clara, la alineación, el espaciado y la coherencia son útiles en ambos casos. Lo que cambia es el propósito de la página y la distribución de la información. Una página de destino suele centrarse en una acción principal, mientras otras páginas pueden facilitar la exploración de varios temas.
¿Cuál es la diferencia entre una sección y su área de contenido?
Una sección delimita una parte de la página y puede tener un fondo que ocupe toda la anchura. Su área de contenido determina dónde se alinean los textos, las imágenes y las acciones. Separarlas permite utilizar fondos amplios y mantener la información fácil de recorrer.
¿Debo utilizar siempre una anchura máxima de 1.160 píxeles?
No. Es el valor del ejemplo visual. Elige la anchura según el contenido y comprueba el resultado en distintas pantallas. Un texto extenso, una lista de productos y una galería pueden tener necesidades diferentes, incluso dentro del mismo sitio web.
¿Cómo elijo entre el espacio interior y el exterior?
Observa la relación que quieres modificar. Para cambiar la distancia entre el contenido y su contorno, ajusta el espacio interior. Para separar un elemento de los que lo rodean, modifica el exterior. Después, revisa el grupo completo, no solo el elemento aislado.
¿Cómo mantengo la coherencia sin hacer todas las páginas iguales?
Reutiliza las reglas de tipografía, espaciado y elementos interactivos. Puedes variar la composición, las imágenes y el ritmo de las secciones según el mensaje. La coherencia consiste en ofrecer comportamientos y referencias familiares, no en repetir la misma página.
¿Basta con que un botón cambie de color al pasar el cursor?
No. El botón debe reconocerse en su estado inicial, comunicar la acción y tener un estado de foco visible para la navegación con teclado. Comprueba también su uso mediante una pantalla táctil, donde pasar el cursor no ofrece la misma pista.
Una página clara empieza con reglas sencillas
Una interfaz coherente se construye con decisiones que se apoyan entre sí: secciones con sentido, contenido alineado, tamaños flexibles, espaciado intencionado e interacciones previsibles. Utiliza esta guía UI al comenzar el proyecto y vuelve a ella cuando revises la página con la información real. El objetivo es que las personas entiendan lo que ven y puedan continuar sin dudar.