Con dos sedes, una en Barcelona y otra en Nueva York, la agencia se presenta como un estudio creativo cuyo objetivo es desafiar el status quo de la publicidad moderna.
La interfaz corresponde a la página web del estudio creativo “Slaps” (traducido como Cachetada) que se dedica a la producción de material gráfico para grandes marcas, como Nike, Jordan, o artistas y músicos contemporáneos. Ofrece servicios de branding, dirección de arte, ilustración, fotografía, diseño de packaging, arte 3D, merchandising, etc.
El claro desafío al que se enfrenta esta interfaz es cómo armar un portfolio compuesto de otras interfaces con diversos lenguajes y estéticas, Lo importante parecería ser, en primera instancia, no confundir la propia página con su contenido. Y lo debe poder resolver creativa y eficazmente, porque es la misma interfaz la que funciona como el producto que la agencia ofrece a potenciales clientes.
En un contexto en el que podemos encontrar una gran cantidad de estudios creativos en el mercado, Slaps apunta a transmitir claramente la identidad de la marca usando como recurso el impacto visual. Este recurso pareciera ser tendencia, conocido como brutalismo en el diseño web actual. Originalmente, el brutalismo es un estilo de arquitectura que se caracteriza por líneas rectas, estructuras en forma de bloques y hormigón en bruto. Traducido al universo gráfico podemos encontrarlo en el espíritu simple, limpio y de alto impacto de estas piezas.
La página de Slaps es de alto contraste. Utiliza efectos sutiles y delicados que contrastan con cataratas de imágenes fuertes que ocupan toda la pantalla.
A su vez el uso del color para la tipografía, sólo en blanco o negro, ayuda a la lectura al generar contraste con toda la gama de colores de los distintos proyectos.
Lo primero que se observa al ingresar a la página es una pantalla negra de “loading”. Así ya se nos presenta un lenguaje digital que forma parte de la identidad que quiere transmitir el estudio.
Luego, al cargar la página principal, estallan distintas imágenes de sus proyectos generando un gran impacto inicial en el usuario (como una cachetada!).
En la parte superior de la pantalla podemos ver el logo de Slaps y un “scroll” que nos dice qué porcentaje de la página hemos recorrido. En el centro está fijado el menú, de esta forma podemos ingresar a él en cualquier momento y recorrer los 4 ítems que se nos presentan: about (información sobre el estudio), work (el portfolio), archive (algunos proyectos), y contact (información de contacto), lo que le proporciona al usuario la libertad de trasladarse a través de las distintas instancias de la página con facilidad.
En el borde inferior de la página nos encontramos con dos perlitas extra: a la izquierda un reloj que marca el horario en tiempo real de sus agencias, en Barcelona y en Nueva York. Y a la derecha el ítem tunes, que nos dirige a una lista de reproducción de canciones en Spotify. Muy canchero.
***
La información textual de la totalidad de la página está compuesta sólo por dos tipografías. Por un lado la Trade Gothic, una sans serif, con un trazo ancho y gran peso, que se utiliza siempre en mayúsculas, principalmente en títulos, con un cuerpo muy grande, y para los subtítulos en un tamaño mediano, en algunos casos en su variable itálica. Para textos de menor jerarquía, como descripciones o textos de lectura inmersiva, se utiliza la InputMono, una monoespaciada sans serif que también se utiliza siempre en mayúsculas pero en un cuerpo mucho menor. De trazo fino, en conjunto con los fondos plenos (negros o blancos) remite a el estilo del coding de programación dándole una fuerte identidad digital. Sólo en pequeños momentos obtiene un protagonismo mayor como en la pantalla que presenta al slogan de la agencia, o en el listado de proyectos.
Además, esta tipografía se presenta con un efecto animado que combina los símbolos “*” y “:” para ir conformando el texto a medida que el usuario va scrolleando por la página.
Aunque la cantidad de información que propone la página es alta, está ordenada y funciona muy bien. Podemos asociar por ejemplo, que el listado de proyectos está armado como un índice editorial, que lo hace de fácil lectura y uso.
La interfaz es responsive, se adapta a distintos dispositivos, computadoras, celulares, etc. En el caso del celular, al colocar la pantalla en disposición vertical los elementos se adaptan a ella componiéndose de forma distinta, más simple. Al colocar el móvil de costado la interfaz vuelve a su disposición original, y se ve tal como se muestra en la computadora, salvo por los elementos textuales que se adaptan al tamaño del dispositivo para una lectura óptima.
***