Qué es el diseño UI: la capa visible que convierte una idea en interfaz

Hace unos meses una empresa de alquiler de barcos de Estepona nos enseñó dos propuestas para su nueva web. Las dos tenían exactamente las mismas secciones, los mismos textos y las mismas fotos. Una parecía un folleto de 2012; la otra daba ganas de reservar ese mismo fin de semana. Nadie había tocado la estructura. La diferencia estaba entera en la interfaz: cómo se ordenaba el peso de cada elemento, qué aire había entre los bloques, qué tamaño tenía el precio, cómo reaccionaba el botón al pasar el dedo.

Eso es el diseño UI. Es la capa que ves y tocas, la que convierte una lista de contenidos y un esquema de navegación en algo que una persona entiende de un vistazo y quiere usar. Es también la parte del diseño digital que más se da por supuesta, porque cuando está bien hecha pasa desapercibida.

En esta guía lo bajamos a tierra: de qué piezas está hecha una interfaz, cómo se trabaja en un proyecto real y qué criterios te ayudan a saber si una UI está resuelta o solo decorada.

01Diseño UI: una definición útil

UI son las siglas de User Interface, interfaz de usuario. El diseño UI se ocupa de la forma concreta que toma cada pantalla: la disposición de los elementos, la tipografía, el color, el espaciado, los iconos, los componentes y la manera en que todo ello responde a las acciones de quien lo usa.

Si quieres la comparación detallada con el UX, la tienes en nuestra guía sobre qué es el diseño UX/UI. Aquí basta con una idea: el UX decide qué tiene que pasar y en qué orden; la UI decide cómo se ve y cómo se siente que pase. Un buen flujo de reserva es UX. Que el calendario se lea sin esfuerzo, que el día seleccionado destaque y que el botón de confirmar se reconozca al instante es UI.

Una definición que usamos en el estudio para explicárselo a clientes: la UI es la conversación visual entre el producto y la persona. Cada pantalla le dice a quien la mira qué es importante, qué puede hacer y qué acaba de pasar. Cuando esa conversación es clara, la gente avanza con confianza.

Clave: una interfaz bien diseñada responde en silencio a tres preguntas en cada pantalla: dónde estoy, qué puedo hacer aquí y qué ha pasado después de lo que acabo de hacer.

02Las piezas de las que está hecha una interfaz

Una interfaz se parece más a un idioma que a un cuadro. Tiene un vocabulario (los componentes), una gramática (las reglas de espacio, jerarquía y color) y un tono (la personalidad de la marca). Estas son las piezas que trabajamos siempre.

Jerarquía visual

Es el orden en que el ojo recorre la pantalla. Se construye con tamaño, peso tipográfico, color, contraste, posición y espacio. En una ficha de producto, el nombre y el precio van primero; la referencia interna, al final y discreta. Un recurso sencillo para comprobarla es la prueba del desenfoque: aplicas un desenfoque gaussiano fuerte a la captura de pantalla y miras qué manchas siguen destacando. Si lo que destaca no es lo importante, hay que reordenar pesos. Lo contamos con más ejemplos en la guía de jerarquía visual en diseño web.

Tipografía

En una interfaz la tipografía hace casi todo el trabajo: la mayoría de lo que se ve en pantalla es texto. Las decisiones básicas son pocas pero determinantes: una familia para textos (a veces dos), una escala de tamaños limitada, interlineados cómodos y una medida de línea de entre 45 y 75 caracteres para los párrafos. En móvil, un cuerpo de texto de 16 px es un buen punto de partida; por debajo, la lectura se resiente y además iOS hace zoom automático al enfocar campos de formulario con texto menor de 16 px.

Color

El color en UI tiene funciones antes que adornos: señalar lo interactivo, indicar estados (éxito, aviso, error), separar zonas y reforzar la marca. Una paleta de interfaz suele tener un color de marca con sus variaciones de tono, una escala de neutros (grises con algo de temperatura, que dan más calidez que el gris puro) y tres o cuatro colores semánticos. Todo combinado con el contraste mínimo de WCAG 2.2: 4,5:1 para texto normal y 3:1 para texto grande y para los bordes o iconos que hay que distinguir.

Espacio

El espacio es la herramienta más infravalorada. Agrupa lo que va junto, separa lo que es distinto y marca el ritmo de lectura. La mayoría de equipos trabajan con una escala basada en múltiplos de 4 u 8 píxeles, que da coherencia y facilita la relación con el código; le dedicamos una guía entera al sistema de espaciado de 8 puntos.

Componentes

Botones, campos, tarjetas, menús, pestañas, modales, avisos. Son las piezas reutilizables con las que se construyen todas las pantallas. Diseñar un componente es definir su anatomía (qué partes tiene), sus variantes (primario, secundario, con icono), sus tamaños y, sobre todo, sus estados.

Estados y respuesta

Una pantalla estática es solo una foto de la interfaz. La interfaz real cambia: un botón tiene estado normal, hover (al pasar el ratón), foco (al llegar con el teclado), pulsado, cargando y desactivado. Un campo tiene vacío, relleno, con error y validado. Una lista tiene cargando, vacía y con datos. Gran parte de la calidad de una UI se juega en estos estados que nadie ve en la presentación inicial y todo el mundo ve al usarla.

Iconografía, imagen y movimiento

Los iconos aceleran el reconocimiento cuando son claros y coherentes entre sí. Las fotografías e ilustraciones aportan contexto y emoción. Y el movimiento (transiciones de 150 a 300 ms, cambios suaves de estado) ayuda a entender qué ha pasado y de dónde viene cada cosa. Usados con medida, los tres hacen que la interfaz se sienta viva.

03Cómo se diseña una UI paso a paso

Cada estudio tiene su método, pero el esqueleto suele parecerse bastante. Este es el que seguimos en SIMA en una web o una aplicación de tamaño medio.

1. 01Partir de la estructura. Wireframes o esquemas de las pantallas clave, con el contenido real o muy aproximado. La UI no empieza en blanco: empieza sobre una arquitectura ya pensada.
2. 02Explorar la dirección visual. Dos o tres pantallas representativas (la home, una pantalla de detalle, un formulario) resueltas con distintas aproximaciones de tipografía, color y densidad. Aquí se discute la personalidad, no los píxeles.
3. 03Fijar los fundamentos. Una vez elegida la dirección, se definen la escala tipográfica, la paleta con sus usos, la escala de espaciado, los radios de las esquinas, las sombras y la rejilla.
4. 04Diseñar los componentes. Con los fundamentos cerrados, se dibujan los componentes con todas sus variantes y estados. Es más rápido de lo que parece, porque las decisiones de base ya están tomadas.
5. 05Componer las pantallas. Ahora sí, todas las plantillas en móvil y escritorio, montadas con los componentes. Si una pantalla pide un componente nuevo, se añade al sistema, no a la pantalla suelta.
6. 06Prototipar y probar. Se enlazan las pantallas en un prototipo navegable y se prueba con personas reales, aunque sean cinco. Lo que cuesta entender en el prototipo cuesta más entender en producción.
7. 07Documentar y entregar. Especificaciones, variables y comportamiento de cada componente para que desarrollo los construya con fidelidad. Después, una revisión en el navegador real, que siempre trae ajustes finos.

04Cómo reconocer una UI bien resuelta

No hace falta ser diseñador para evaluar una interfaz. Estos criterios sirven para revisar una web propia o una propuesta que te presentan.

Affordance es un término que popularizó Don Norman y se refiere a las pistas visuales que indican cómo se usa algo: un botón con relieve o un color sólido «pide» ser pulsado, igual que un tirador pide que tires de él.

05Lo que hace que una interfaz funcione

Hay cosas que repetimos en casi todos los proyectos y que marcan la diferencia entre una interfaz agradable y una que, además, funciona día tras día.

Diseñar con contenido real

Los textos de relleno siempre caben. Los reales, no. Un nombre de producto de 60 caracteres, una dirección con piso y escalera, un precio con descuento y otro tachado: eso es lo que rompe un diseño bonito. Lo que funciona es pedir el contenido real lo antes posible o, al menos, diseñar con los casos extremos a mano: el texto más largo, el más corto, la lista vacía y la lista con 200 elementos.

Elegir pocas opciones y repetirlas

Una interfaz coherente suele usar dos o tres pesos tipográficos, cinco o seis tamaños de texto, una escala de espaciado cerrada y dos estilos de botón principales. La consistencia transmite cuidado y reduce el esfuerzo de quien la usa, porque aprende una vez cómo funciona cada cosa y lo reconoce en todas partes.

Hacer visible el foco

Muchas personas navegan con teclado, con lectores de pantalla o con otros dispositivos de apoyo. Un estado de foco claro (un contorno de 2 px con buen contraste, por ejemplo) es imprescindible para ellas y útil para todos. WCAG 2.2 incluye criterios específicos sobre la visibilidad del foco; conviene diseñarlo con el mismo cariño que el hover.

Pensar en móvil sin olvidar el escritorio

La mayoría del tráfico de muchas webs llega desde el móvil, y diseñar primero para la pantalla pequeña obliga a priorizar. Pero en escritorio hay que aprovechar el espacio con intención: más columnas, información contextual al lado, navegación a la vista. Son dos composiciones del mismo sistema, cada una con sus decisiones.

Dar personalidad sin estorbar

La marca vive en la interfaz: en la elección tipográfica, en el color, en el tono de los textos, en un detalle de animación. Lo que funciona es concentrar la personalidad en los momentos con más carga emocional (la portada, la confirmación de una compra, un estado vacío) y mantener las zonas de trabajo limpias y previsibles.

06Del diseño a la pantalla: la UI como sistema

Una interfaz de verdad no se entrega como un conjunto de imágenes bonitas. Se entrega como un sistema que alguien va a construir y mantener. Eso significa, en la práctica, tres cosas.

La primera, que las decisiones visuales se nombran y se guardan como variables: colores, tamaños, espacios, radios. Son los design tokens, el puente entre Figma y el código, y los explicamos en design tokens explicados. Cuando el azul de marca cambia en un sitio, cambia en todos.

La segunda, que los componentes se construyen una vez y se reutilizan. Un buen botón, con sus variantes y sus estados, ahorra horas en cada pantalla nueva y evita que acaben conviviendo doce botones ligeramente distintos.

La tercera, que diseño y desarrollo trabajan juntos hasta el final. Hay cosas que solo se ven en el navegador: cómo se renderiza una fuente en Windows, cómo se comporta una animación en un móvil de gama media, cómo queda un texto traducido al alemán. Reservar tiempo para revisar la interfaz ya construida es parte del diseño, no un extra.

07Por dónde empezar si tu interfaz necesita un repaso

Si tienes una web o una aplicación y sientes que «algo no termina de funcionar», una revisión de UI suele ser un buen primer paso. Algunas preguntas para empezar tú mismo:

• →¿Cuántos estilos de botón distintos hay en tu web? Si son más de tres, hay margen de mejora.
• →¿Se lee bien el texto en tu móvil, en exterior y con el brillo bajo?
• →¿Puedes recorrer la página principal solo con el tabulador y ver siempre dónde estás?
• →¿Qué pasa cuando envías un formulario con un campo mal? ¿Queda claro qué corregir?
• →¿El elemento más importante de cada pantalla es el que más destaca?

Con esas respuestas tendrás una idea bastante precisa de dónde está el trabajo.

El diseño UI es la parte del proyecto donde la estrategia y la marca se vuelven tangibles, pantalla a pantalla. En SIMA lo trabajamos dentro de cada proyecto de diseño web y experiencia digital, siempre unido a la estructura y al código, porque una interfaz solo está terminada cuando funciona en las manos de quien la usa. Si quieres que miremos juntos la tuya, escríbenos y lo hablamos con calma.