UI case study: Variables y diseño responsive

UI iOS case study

Este caso de estudio se centra en el diseño de la landing page de una aplicación nativa para iOS dedicada a la presentación y comercialización de granolas saludables. El objetivo principal fue crear una interfaz atractiva y funcional que combinara estética, consistencia visual y accesibilidad, dentro de un marco de diseño flexible y escalable.

El trabajo se desarrolló en Figma, implementando un sistema de variables que permitió gestionar de manera eficiente los modos Day y Night. Gracias a ello, se logró mantener la coherencia visual en ambas versiones de la interfaz.

Se diseñaron y documentaron componentes responsives aplicando Auto Layouts, con el fin de asegurar que la interfaz se adaptara de manera fluida a distintas resoluciones y dispositivos.

Además, todo el diseño se desarrolló siguiendo las Human Interface Guidelines de Apple, asegurando que la experiencia de usuario estuviera alineada con los principios de usabilidad propios de iOS. Esto permitió generar una interfaz intuitiva y familiar, reduciendo la fricción en la navegación.

Un aspecto especialmente relevante de este caso de estudio fue la atención dedicada a la accesibilidad. Se analizaron cuidadosamente los contrastes de color y combinaciones tipográficas para cumplir con los estándares de la normativa WCAG (Web Content Accessibility Guidelines), garantizando que la landing resultara inclusiva y accesible para usuarios con diferentes capacidades visuales.

En conjunto, este caso de estudio refleja un proceso de diseño donde la estética, la funcionalidad, la accesibilidad y la coherencia con el ecosistema iOS se integran para ofrecer una experiencia digital sólida, clara y adaptable a las necesidades del usuario.

Link a figma

Tokens

Tokens base, semantics y usables

Tokens Base
Colores puros, no tienen ningún significado ni asociación. Sirven para relacionarlos con los semantics tokens que ya tendrán una funcionalidad en el sistema. Distribuirlo de este modo como base semantics y usable también sirve para tener 3 niveles de afectación. De más grande a más específico.

Tokens semantic
Definen un propósito de elementos base del sistema. (text icons, backgrounds, buttons, cta, dividers) Aquí los colores ya tienen una funcionalidad y es donde se definen los modos light y dark que afectarán a todo el sistema.

Tokens usable
Aquí se asignan los tokens semánticos en cada componente y heredan el comportamiento dark y light de semantics. Tienen un uso específico. De este modo se puede modificar el color de un componente en concreto sin tener afectaciones en todo el sistema si se detecta la necesidad.