pauldesigner.com
EN
espresso Displays

espresso Displays

Componentes responsivos con auto‑layout, iconografía y módulos de página para el sistema de diseño de una marca de monitores portátiles.

Año
2022
Rol
Diseñador UI
Herramientas
Figma, Sketch, Photoshop
Laptop y teléfono con la landing de espresso Displays, un hero oscuro con el monitor portátil y la frase "The World's Thinnest Portable Monitor", sobre fondo morado.

Contexto

espresso Displays es una empresa australiana que fabrica monitores portátiles muy delgados. En 2022 trabajé seis meses con su equipo de diseño, freelance y a medio tiempo, en los componentes y las páginas detrás del sitio web.

Mi rol

Diseñador UI, dentro del sistema de diseño que el equipo ya tenía. Mi trabajo era hacer que ese sistema aguantara en cualquier tamaño de pantalla y darle al equipo un set de módulos con los que armar páginas.

El trabajo

Componentes responsivos. Diseñé y construí los componentes del sitio con auto‑layout, para que cada uno se adapte correctamente desde el teléfono hasta pantallas anchas sin necesitar una versión por breakpoint.

La home de espresso Displays en tres anchos, uno al lado del otro: escritorio, tablet y teléfono, con el hero, la lista de especificaciones y las secciones de foto adaptándose a cada layout.
La misma home en escritorio, tablet y teléfono. Cada módulo se adapta al ancho que recibe en lugar de redibujarse por breakpoint.

Organizar el sistema. Estructuré la iconografía y los módulos de página del sistema de diseño para que una página nueva pudiera armarse a partir de un set compartido en lugar de dibujarse de cero, y para que el equipo encontrara lo que necesitaba.

La página espresso for business dividida en tres columnas, desde el hero y las citas de prensa, pasando por el muro de logos de clientes, las tarjetas de beneficios y los testimonios, hasta las FAQs, el formulario de contacto y el pie.
La página espresso for business de principio a fin, de izquierda a derecha: hero, citas de prensa, logos de clientes, tarjetas de beneficios, testimonios, FAQs y formulario de contacto, cada uno armado con los módulos compartidos.

Resultado

Una librería de componentes responsivos, un set de iconos organizado y un conjunto de módulos de página, usados por el equipo para armar las páginas del sitio en todos los breakpoints.