conference.awwwards.com es un sitio web digital para promover el evento The Amsterdam Conference que se lleva a cabo todos los años, cuyo diseño es actualizado anualmente para adaptarse a cada edición. Este evento está destinado para la gente interesada en el diseño y en el desarrollo web, y su intención es introducirnos al evento y a sus presentadores para persuadirnos en la venta de entradas.
Tanto la web como el evento están destinados a jóvenes estudiantes o recibidos de carreras afines al diseño que buscan perfeccionarse con los más prestigiosos del área del diseño. Se enmarca en un estilo muy actual que busca dar cuenta de las enorme exploración que nos permite la tecnología hoy con el fin de persuadir por medio de la novedad y del impacto a las personas dedicadas al rubro.
La tipografía, la protagonista estrella
Lo que resulta atractivo de esta interfaz es que la propia tipografía es protagonista, creando la identidad del sitio y un lenguaje que permite al usuario introducirse en un universo tecnológico muy particular sostenido por las decisiones tipográficas tratadas tanto como imágen o de manera funcional.
Las familias que componen la interfaz son Chakra Petch y Fk Raster Grotesk. Por un lado, Chakra (Webfont), utilizada para títulos y paquetes de texto, se caracteriza por ser limpia, legible y versátil más allá de que esté ornamentada. Sus signos están diseñados en forma de cuadrados sans serif con esquinas cónicas. Esta tipografía se usa para titulares de gran tamaño para acompañar a la tipografía display en su dosificación, para los hipervínculos, o para los pequeños paquetes de carácter informativo y funcionales con cuerpo de lectura, que no tienen un justificado tipográfico, están compuestos por tres o cuatro líneas cada uno y están perfectamente alineados en una grilla evidente. Por otro lado, Fk Raster Grotesk (Variable font) empleada como tipografía display para los títulos, está inspirada en las fuentes pixelares más primitivas. Transiciona de carácteres duros y cuadrados a formas redondeadas. Otorga al diseño un aspecto más visual que funcional, por lo que es necesario que esté dosificado. Es interesante cómo ambas tipografías están combinadas de forma tal que, por su morfología, el ajuste del kerning, tracking e interlineado, generan una sensación de unidad en la que los saltos entre una fuente y otra resulta casi imperceptible a la lectura.
Arquitectura de la información
La estructura de información es clara, dinámica e intuitiva por el uso del espacio. Es una web que utiliza el aire compositivo a su favor. Los elementos se organizan espacialmente sobre una grilla responsiva, que se adapta al tamaño y orientación de la pantalla, asegurando consistencia a través de cualquier dispositivo.
Diseño responsivo – img 1. web en desktop; img 2. web en celular
Su arquitectura de información propone una experiencia de navegación que nos permite explorar las secciones de la web, estableciendo un diálogo cercano con el usuario, acompañado por la jerarquía de la información: los textos display son utilizados para títulos e hipervínculos importantes, seguido por componentes web como menúes de navegación, botones y textos de carácter interactivo con operaciones cinéticas que se activan con movimientos del cursor.
Diseño cinético – img. 3. interacciones del cursor y de navegación
Dentro de las páginas siguientes al landing page, a las que se llegan a través de los hipertextos, encontramos bloques informativos de mayor densidad, que, al no estar justificados, generan un color de texto parejo.
Texto más denso – img. 4. sección más informativa y funcional
Se utiliza una paleta de color reducida (rojo, blanco y negro); los textos están en plenos de color que permiten una lectura clara y fluida. Si bien la tipografía adquiere gran preponderancia, constituye un 80% de la web, dejando lugar a imágenes fotográficas e iconográficas, junto a sonidos que acompañan en la navegación que refuerzan el contenido y nos ayudan a estar inmersos en el universo propuesto.
Podemos decir…
Es una interfaz impactante e interesante que fácilmente se convierte en una obra de diseño en sí misma. Combina la eficacia en la difusión de información con la exploración visual y explotación de recursos tipográficos.
FUENTES
https://fonts.google.com/specimen/Chakra+Petch
https://fonts.floriankarsten.com/fk-raster-grotesk