Categories

Tipografía — Contexto visual y tecnológico

Nostalgia moderna en interfaces digitales

Esta interfaz digital e interactiva corresponde al sitio web de un estudio creativo que combina pasado y presente en su estructura y estilo.

La web tiene un estilo contemporáneo que puede incluirse dentro del brutalismo, el cual se caracteriza por la carencia de texturas, el uso del blanco y negro y algún color para resaltar detalles, tipografías grandes que llaman la atención y elementos que recuerdan a los inicios de los sitios web. Esto se puede ver en el uso de una llamativa tipografía expandida que destaca rápidamente de lo demás por su cuerpo, peso y contraste de color con el fondo; también en las misceláneas y la tipografía monoespaciada correspondiente a los elementos de navegación, la cual da un clima tecnológico y digital que se ve reforzado por el uso del verde vibrante para resaltar elementos. Esta monotonía se rompe únicamente con las imágenes que ilustran los proyectos, las cuales ganan protagonismo cromático al momento de navegar entre ellos.

Captura tomada del sitio web studiofreight.com

La interfaz se compone principalmente de tipografía. Esta, además de ser un elemento de lectura y navegación, funciona estructurando la interfaz. Es acompañada por misceláneas que ayudan a reforzar la grilla de la web, que se organiza en módulos horizontales y verticales que sectorizan la información.

Su navegación puede compararse con una lectura tradicional de formatos impresos, debido a que el recorrido es lineal hacia abajo y de izquierda a derecha y está dividida en columnas bien delimitadas. Sin embargo, no deja de tener bastante relevancia la interacción, ya que es la que permite cambiar entre proyectos y acceder a la información de los mismos.

Esta estructuración del espacio en columnas y la posibilidad de visualizar la totalidad del sitio en una sola pantalla, recuerda a los sitios web de los años 90 y comienzos del 2000. Los primeros, desarrollados en HTML y JavaScript, utilizaban marcos, generalmente del lado izquierdo o en la parte superior, que contenían un listado de opciones de menú que al clickearlas se abrían en otro marco que abarcaba la mayor parte de la página. Más tarde, gracias a las posibilidades del Flash (desarrollado inicialmente por Macromedia) y a la velocidad mayor de internet que permitió la banda ancha, comenzaron a realizarse webs completamente en Flash, que se caracterizaban principalmente por incluir todo el contenido en un pequeño espacio central, el cual, generalmente, también estaba modulado en columnas con alguna tabla de contenido interactiva que permitía explorar las distintas secciones de la web.

Captura del sitio web de Microsoft del 2002
Captura del sitio web de Universal Pictures del 2004 en Flash

Con el avance de la tecnología, hoy en día los sitios web cuentan con el uso de lenguajes informáticos más innovadores, como el CS3 y el HTML5, que a diferencia de los anteriores, permiten una mayor rapidez a la hora de crear los sitios y más dinamismo al interactuar con ellos. Por un lado, la tecnología del CS3 permite definir la estética, mientras que el HTML5 permite gestionar y estructurar los contenidos de la interfaz.

Usualmente las webs contemporáneas dividen el contenido en diversas pantallas, generalmente de manera vertical, a las que se accede mediante un menú o haciendo scroll con el mouse. Esto permite adaptarlas fácilmente a un diseño responsive que permite la correcta visualización en cualquier tamaño de pantalla.

Capturas del sitio web scrolleable traffbraza.com

En el caso de la web de Studio Freight, sin embargo, a pesar de mostrar todo su contenido en una pantalla, es una página web responsive y completamente funcional en formatos de pantalla angostos como el de los celulares, debido a que su división en columnas desaparece en estas proporciones.

En este sitio se aprovechan las capacidades actuales del CSS para mostrar la información de una forma diferente que incorpora lo actual y moderno y al mismo tiempo recupera una tipología pasada que utiliza para mostrar toda la información del estudio en un solo pantallazo, dejando la interacción únicamente para cambiar entre proyectos y otorgando a la web una identidad llamativa y única.

Bibliografía consultada