Cada pantalla que utilizas fue diseñada por alguien: la pantalla de inicio de una aplicación bancaria, un cuadro de búsqueda, una página de configuración. El diseño de UI es la disciplina que decide cómo se organizan esas pantallas, cómo se ve cada control y cómo responde cuando lo tocas.
Un diseñador de UI trabaja con algunos componentes básicos. El diseño y el espaciado agrupan elementos relacionados. La jerarquía visual hace que la acción más importante destaque. La tipografía y el color conllevan significado y marca. Los componentes como botones, entradas, tarjetas y menús se diseñan una vez y se reutilizan, para que el producto parezca consistente.
Cada componente también tiene estados. Un botón tiene estados predeterminado, flotante, presionado, enfocado, deshabilitado y de carga, y cada uno necesita un diseño. Dejar de lado los estados es una de las razones más comunes por las que un diseño parece terminado en una maqueta pero se siente roto en el producto real.
La interacción y el movimiento también son parte de la interfaz de usuario. Las pequeñas respuestas, a menudo llamadas microinteracciones, confirman que un grifo funcionó, muestran el progreso o explican dónde fue algo. Deben ser rápidos y decididos, y respetar la configuración del sistema para el movimiento reducido.
La mayor parte del diseño de UI actual se realiza en Figma, con Penpot, Sketch y Lunacy como alternativas comunes. Para las interfaces que necesitan reaccionar a datos reales y a entradas en la aplicación terminada, los diseñadores también utilizan herramientas interactivas. ExodeUI, que creamos, es uno: almacena estados, física de resortes y eventos en un archivo abierto que se ejecuta en React, Vue, Svelte, Angular, Solid, React Native, SwiftUI y Flutter.