Categories

Tipografía — Experiencia de lectura y uso

Entre fuentes y efectos flasheros

Analizamos una página web muy copada: un estudio de diseño digital, principalmente enfocado en branding, ubicado en Utah (EEUU), llamado «Powell-Studio».

La web es #aesthetic: presenta un diseño moderno, minimalista y vanguardista, propio de la era digital (muy gen z). Tiene una impronta muy marcada donde la tipografía es la estrella, ya que representa casi el 100% de la estética de la página, exceptuando la galería de proyectos donde sí aparecen imágenes de los mismos. A través del diseño del sitio se transmite un poco la estética y el estilo que maneja el estudio al momento de hacer sus diseños, de esta manera el usuario cuando está navegando no solo puede ver el portfolio sino también introducirse en cómo trabajan. En cuanto a la paleta del sitio web, la misma está conformada por el blanco y el negro, el color únicamente aparece cuando uno clickea sobre alguna imagen o en la descripción de los proyectos.

Cuando encontramos el sitio web nos sorprendió la interacción que tiene porque genera efectos muy flasheros: las imágenes se ondean y colorean al posar el cursor y la tipografía del nombre del estudio se blurea; cuando el header se superpone con algún elemento cambia el color de su tipografía para no perder el contraste. También nos parece muy divertido el recurso que se utiliza cuando la página carga. Siendo sinceras, nos pasamos un ratito jugando con la web… Pero también la analizamos. Algo que nos preguntamos fue por qué las animaciones no funcionaban en algunos dispositivos, así que investigamos el motivo. El sitio web tiene 2 versiones: WebGL (predeterminado) y html normal. Dependiendo de las preferencias y del dispositivo, el sitio web responde (en tiempo real) y deshabilita WebGL y todos los efectos en general para hacer la página más fluida y rápida. Además, notamos que la página es responsive porque se adapta a distintos dispositivos de acuerdo a las medidas de la pantalla.

En cuanto al diseño nos llamó mucho la atención porque con pocos elementos logra una estética muy potente. Sólo se usan dos fuentes tipográficas: SÖHNE y NB AKADEMIE MONO. La primera se utiliza para el nombre del estudio (en un cuerpo muy grande) y para la información relevante. La segunda aparece siempre en mayúscula y en la misma escala (pequeña) tanto para los cuerpos de texto como para el resto de la información. Al investigar un poco las tipografías llegamos a la conclusión de que esta elección fue muy consciente e intencionada. La SÖHNE está inspirada en la Akzidenz-Grotesk, que es la precursora de la Helvética, tipografía que revolucionó el mundo del diseño por su calidad y que es utilizada hasta la actualidad. Helvética es sinónimo de buen diseño, pero el diseñador optó por usar una tipografía inspirada en su morfología y del 2019, eso habla de conceptos como actualidad y vanguardia. Por otro lado, también tenemos a la NB AKADEMIE MONO que es una tipografía monoespaciada. Estas tipografías permiten que cada carácter sea reconocido ópticamente con mayor precisión (por la uniformidad de espacios y las formas limpias que presenta) y por eso se las utiliza en los lenguajes de programación. La NB AKADEMIE MONO remite al mundo digital y a lo «techy» y eso coincide con la identidad del estudio y los servicios que ofrece (diseño web, programación). Podemos afirmar entonces que el criterio en la elección y combinación de familias es estilístico y conceptual, donde hay un contraste muy marcado entre las escalas y los estilos de la tipografía. 

A modo de cierre, creemos que hay una intención detrás de todas las decisiones tomadas. También consideramos que esta interfaz prioriza la forma antes que la función, ya que presenta un diseño atractivo, pero no necesariamente intuitivo. En criollo, es una página piola pero que cuesta un poco entender (al menos al principio). Por ejemplo, la información de contacto está arriba de todo y en la misma jerarquía que el resto de la información lo cual hace que sea complicado encontrar el contacto del estudio. Otro ejemplo es la existencia del colofón donde se menciona toda la información referente a las tipografías utilizadas y al estudio que diseñó el sitio web. Creemos que esto es un guiño para los diseñadores o conocedores del mundo del diseño porque no es común que aparezca en todas las páginas.