Categories

Tipografía — Experiencia de lectura y uso

Un bocado de diseño

Lucciano’s es una cadena de helados artesanales que inició en Argentina en 2011, con un local en Mar del Plata de donde son oriundos Daniel Otero y su hijo Christian, fundadores de la marca. Ellos apostaron al diseño, la imagen de marca y la innovación para que Lucciano’s brinde una experiencia única.  Esto se ve reflejado en su sitio web, el cual fue diseñado en el año 2020 por el Estudio/nk un grupo de diseñadores de  Buenos Aires, Argentina.

Esta interfaz tiene como objetivo principal presentar los productos en detalle y exponer su proceso de trabajo, invitando a los usuarios a explorar dentro de la misma. Esto se logra mediante su diseño, el cual se distingue por su enfoque en la navegación y la accesibilidad al contenido a través de una estructura diseñada para facilitar la lectura y el uso. Esto permite a los usuarios comprender fácilmente su funcionamiento.El sitio cuenta con una arquitectura de información clara, establecida por medio de una jerarquía definida por tamaños, estilos variables de los cuerpos tipográficos y textos fluidos, combinada con una estructura organizada. En términos tipográficos, prevalece un criterio estilístico funcional que equilibra la apariencia visual de la marca con la legibilidad. Las tipografías mantienen una consistencia adecuada, logrando una apariencia uniforme y  contribuyendo a la buena visualización de la información.

Estas decisiones de diseño no solo aseguran la legibilidad del contenido sino que establecen una relación muy notable entre tipografía e interactividad. El sitio responde al recorrido del usuario y la forma en que se accede al contenido varía según el dispositivo que utilicemos. La interfaz es responsive, es decir, se adapta a diferentes tamaños de pantalla y dispositivos, lo que da lugar a distintas experiencias de lectura y uso.

En el caso de los dispositivos desktop, el acceso al contenido y el desplazamiento en la interfaz se logra a través del mouse o el panel táctil. Cuando el cursor se posiciona sobre un elemento y realiza un click, se activa una interacción acompañada de una animación (como cambio de escala u opacidad). Esta interacción se desarrolla con el fin de aprovechar las ventajas que las pantallas de las computadoras ofrecen en términos de tamaño y espacio visual, lo que permite mostrar contenido más detallado y animaciones más elaboradas sin que parezca abrumador.

Por otro lado, en los dispositivos mobile, el acceso al contenido se basa en pantallas táctiles de dimensiones mucho más reducidas que las de las computadoras. Las animaciones deben ser responsivas a gestos táctiles es por eso que, en lugar de un cursor, utilizamos directamente nuestros dedos para interactuar con los elementos en pantalla. Dependiendo de dónde toquemos, se activa la acción correspondiente, como seleccionar una opción o abrir un enlace. En términos de navegación, la elección de limitar las animaciones se encuentra respaldada por las características y limitaciones de este dispositivo. Este tipo de pantallas son más estrechas, y  su naturaleza vertical de navegación repercute en la disposición de la información en la interfaz, ajustando el tamaño de fuentes a ese contexto.
Es importante mencionar que en ciertos paquetes de información, como los valores nutricionales de los helados, el texto puede volverse demasiado pequeño, lo que dificulta la legibilidad. Esta observación subraya la necesidad de encontrar un equilibrio entre la presentación de información detallada y la legibilidad en pantallas móviles.

Interactividad dentro de la interfaz
Adaptación en distintos formatos de pantallas
Adaptación en distintos formatos de pantallas
Adaptación en distintos formatos de pantallas

En conclusión, logra un diseño de interfaz centrado en la accesibilidad y la tipografía desempeña un papel esencial al establecer un equilibrio entre la estética de la marca y la legibilidad del contenido. Las elecciones de diseño también crean una relación entre la tipografía y la interactividad, con una adaptación cuidadosa a las capacidades únicas de cada dispositivo.