{"id":748,"date":"2023-08-25T20:54:35","date_gmt":"2023-08-25T23:54:35","guid":{"rendered":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/?p=748"},"modified":"2023-08-25T21:45:44","modified_gmt":"2023-08-26T00:45:44","slug":"una-buena-cachetada-slaps-un-bruto-estudio-creativo","status":"publish","type":"post","link":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/una-buena-cachetada-slaps-un-bruto-estudio-creativo\/","title":{"rendered":"UNA BUENA CACHETADA! Slaps, un bruto estudio creativo."},"content":{"rendered":"\n

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<\/em>.<\/h3>\n\n\n\n
\n
\n

La interfaz corresponde a la p\u00e1gina web del estudio creativo \u201cSlaps\u201d (traducido como Cachetada<\/em><\/strong>) que se dedica a la producci\u00f3n de material gr\u00e1fico para grandes marcas, como Nike, Jordan, o artistas y m\u00fasicos contempor\u00e1neos. Ofrece servicios de branding, direcci\u00f3n de arte, ilustraci\u00f3n, fotograf\u00eda, dise\u00f1o de packaging, arte 3D, merchandising, etc.<\/p>\n\n\n\n

     El claro desaf\u00edo al que se enfrenta esta interfaz es c\u00f3mo armar un portfolio compuesto de otras interfaces<\/strong> con diversos lenguajes y est\u00e9ticas, Lo importante parecer\u00eda ser, en primera instancia, no confundir<\/strong> la propia p\u00e1gina con su contenido. Y lo debe poder resolver creativa y eficazmente, porque es la misma interfaz la que funciona como el<\/em> producto<\/em> que la agencia ofrece a potenciales clientes. <\/p>\n<\/div>\n<\/div>\n\n\n\n

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<\/em><\/strong> en el dise\u00f1o web actual. Originalmente, el brutalismo es un estilo de arquitectura que se caracteriza por l\u00edneas rectas, estructuras en forma de bloques y hormig\u00f3n en bruto. Traducido al universo gr\u00e1fico podemos encontrarlo en el esp\u00edritu simple, limpio y de alto impacto de estas piezas. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

La p\u00e1gina de Slaps es de alto contraste. Utiliza efectos sutiles y delicados que contrastan con cataratas de im\u00e1genes fuertes que ocupan toda la pantalla. <\/p>\n\n\n\n

A su vez el uso del color para la tipograf\u00eda, s\u00f3lo en blanco o negro, ayuda a la lectura al generar contraste con toda la gama de colores de los distintos proyectos. <\/p>\n\n\n\n

\n
\"\"
La pantalla de carga con peque\u00f1os elementos bien identitarios de la p\u00e1gina.<\/figcaption><\/figure>\n\n\n\n

 Lo primero que se observa al ingresar a la p\u00e1gina es una pantalla negra de \u201cloading\u201d. As\u00ed ya se nos presenta un lenguaje digital que forma parte de la identidad que quiere transmitir el estudio.<\/p>\n<\/div>\n\n\n\n

\n
\"\"
Al terminar de cargar impactan las im\u00e1genes en movimiento de la diversidad de proyectos de la agencia.<\/figcaption><\/figure>\n\n\n\n

Luego, al cargar la p\u00e1gina principal, estallan distintas im\u00e1genes de sus proyectos generando un gran impacto inicial en el usuario (como una cachetada!). <\/p>\n<\/div>\n\n\n\n

En la parte superior de la pantalla podemos ver el logo de Slaps y un \u201cscroll\u201d que nos dice qu\u00e9 porcentaje de la p\u00e1gina hemos recorrido. En el centro est\u00e1 fijado el men\u00fa<\/em>, de esta forma podemos ingresar a \u00e9l en cualquier momento y recorrer los 4 \u00edtems que se nos presentan: about<\/em> (informaci\u00f3n sobre el estudio), work<\/em> (el portfolio), archive<\/em> (algunos proyectos), y contact<\/em> (informaci\u00f3n de contacto), lo que le proporciona al usuario la libertad de trasladarse a trav\u00e9s de las distintas instancias de la p\u00e1gina con facilidad. <\/p>\n\n\n\n

\"\"
Depliegue del men\u00fa.<\/figcaption><\/figure>\n\n\n\n

En el borde inferior de la p\u00e1gina 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 \u00edtem tunes<\/em>, que nos dirige a una lista de reproducci\u00f3n de canciones en Spotify. Muy canchero.<\/p>\n\n\n\n

***<\/p>\n\n\n\n

  La informaci\u00f3n textual de la totalidad de la p\u00e1gina est\u00e1 compuesta s\u00f3lo por dos tipograf\u00edas. Por un lado la Trade Gothic<\/em><\/strong>, una sans serif, con un trazo ancho y gran peso, que se utiliza siempre en may\u00fasculas, principalmente en t\u00edtulos, con un cuerpo muy grande, y para los subt\u00edtulos en un tama\u00f1o mediano, en algunos casos en su variable it\u00e1lica. Para textos de menor jerarqu\u00eda, como descripciones o textos de lectura inmersiva, se utiliza la InputMono<\/em><\/strong>, una monoespaciada sans serif que tambi\u00e9n se utiliza siempre en may\u00fasculas pero en un cuerpo mucho menor. De trazo fino, en conjunto con los fondos plenos (negros o blancos) remite a el estilo del coding<\/em><\/strong> de programaci\u00f3n d\u00e1ndole una fuerte identidad digital. S\u00f3lo en peque\u00f1os momentos obtiene un protagonismo mayor como en la pantalla que presenta al slogan de la agencia, o en el listado de proyectos. <\/p>\n\n\n\n

\"\"
Trade Gothic + Input Mono, las dos tipograf\u00edas que componen la web.<\/figcaption><\/figure>\n\n\n\n

Adem\u00e1s, esta tipograf\u00eda se presenta con un efecto animado que combina los s\u00edmbolos \u201c*<\/strong>\u201d y \u201c:<\/strong>\u201d para ir conformando el texto a medida que el usuario va scrolleando por la p\u00e1gina. <\/p>\n\n\n\n

   Aunque la cantidad de informaci\u00f3n que propone la p\u00e1gina es alta, est\u00e1 ordenada y funciona muy bien. Podemos asociar por ejemplo, que el listado de proyectos est\u00e1 armado como un \u00edndice editorial, que lo hace de f\u00e1cil lectura y uso. <\/p>\n\n\n\n

\"\"
Despliegue de la pagina de works<\/em><\/figcaption><\/figure>\n\n\n\n
\"\"
Distintos \u00edndices editoriales impresos.<\/figcaption><\/figure>\n\n\n\n

La interfaz es responsive, se adapta a distintos dispositivos, computadoras, celulares, etc. En el caso del celular, al colocar la pantalla en disposici\u00f3n vertical los elementos se adaptan a ella componi\u00e9ndose de forma distinta, m\u00e1s simple. Al colocar el m\u00f3vil de costado la interfaz vuelve a su disposici\u00f3n original, y se ve tal como se muestra en la computadora, salvo por los elementos textuales que se adaptan al tama\u00f1o del dispositivo para una lectura \u00f3ptima.<\/p>\n\n\n\n

\"\"
Distintas pantallas adaptadas al formato del celular.<\/figcaption><\/figure>\n\n\n\n

*** <\/p>\n","protected":false},"excerpt":{"rendered":"

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\u00e1gina web del estudio creativo \u201cSlaps\u201d (traducido como Cachetada) que se dedica a la producci\u00f3n de material gr\u00e1fico para grandes […]<\/p>\n","protected":false},"author":42,"featured_media":1278,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[56,55,57,17,20,37],"comision":[12],"eje":[3],"class_list":["post-748","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sin-categoria","tag-agencia","tag-brutalismo","tag-estudioscreativos","tag-interfaz","tag-tipografia","tag-web","comision-juan-juli","eje-experiencia-lectura-uso"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/posts\/748","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/users\/42"}],"replies":[{"embeddable":true,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/comments?post=748"}],"version-history":[{"count":55,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/posts\/748\/revisions"}],"predecessor-version":[{"id":2471,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/posts\/748\/revisions\/2471"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/media\/1278"}],"wp:attachment":[{"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/media?parent=748"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/categories?post=748"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/tags?post=748"},{"taxonomy":"comision","embeddable":true,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/comision?post=748"},{"taxonomy":"eje","embeddable":true,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/eje?post=748"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}