{"id":355,"date":"2023-08-24T14:17:56","date_gmt":"2023-08-24T17:17:56","guid":{"rendered":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/?p=355"},"modified":"2023-08-24T14:17:56","modified_gmt":"2023-08-24T17:17:56","slug":"entre-fuentes-y-efectos-flasheros","status":"publish","type":"post","link":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/entre-fuentes-y-efectos-flasheros\/","title":{"rendered":"Entre fuentes y efectos flasheros"},"content":{"rendered":"\n

Analizamos una p\u00e1gina web muy copada: un estudio de dise\u00f1o digital, principalmente enfocado en branding, ubicado en Utah (EEUU), llamado \u00abPowell-Studio\u00bb.<\/p>\n\n\n\n

La web es #aesthetic<\/em>: presenta un dise\u00f1o moderno, minimalista y vanguardista, propio de la era digital (muy gen z<\/em>). Tiene una impronta muy marcada donde la tipograf\u00eda es la estrella, ya que representa casi el 100% de la est\u00e9tica de la p\u00e1gina, exceptuando la galer\u00eda de proyectos donde s\u00ed aparecen im\u00e1genes de los mismos. A trav\u00e9s del dise\u00f1o del sitio se transmite un poco la est\u00e9tica y el estilo que maneja el estudio al momento de hacer sus dise\u00f1os, de esta manera el usuario cuando est\u00e1 navegando no solo puede ver el portfolio sino tambi\u00e9n introducirse en c\u00f3mo trabajan. En cuanto a la paleta del sitio web, la misma est\u00e1 conformada por el blanco y el negro, el color \u00fanicamente aparece cuando uno clickea sobre alguna imagen o en la descripci\u00f3n de los proyectos.<\/p>\n\n\n\n

Cuando encontramos el sitio web nos sorprendi\u00f3 la interacci\u00f3n que tiene porque genera efectos muy flasheros: las im\u00e1genes se ondean y colorean al posar el cursor y la tipograf\u00eda del nombre del estudio se blurea; cuando el header se superpone con alg\u00fan elemento cambia el color de su tipograf\u00eda para no perder el contraste. Tambi\u00e9n nos parece muy divertido el recurso que se utiliza cuando la p\u00e1gina carga. Siendo sinceras, nos pasamos un ratito jugando con la web\u2026 Pero tambi\u00e9n la analizamos. Algo que nos preguntamos fue por qu\u00e9 las animaciones no funcionaban en algunos dispositivos, as\u00ed 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\u00e1gina m\u00e1s fluida y r\u00e1pida. Adem\u00e1s, notamos que la p\u00e1gina es responsive porque se adapta a distintos dispositivos de acuerdo a las medidas de la pantalla.<\/p>\n\n\n\n

En cuanto al dise\u00f1o nos llam\u00f3 mucho la atenci\u00f3n porque con pocos elementos logra una est\u00e9tica muy potente. S\u00f3lo se usan dos fuentes tipogr\u00e1ficas: S\u00d6HNE y NB AKADEMIE MONO. La primera se utiliza para el nombre del estudio (en un cuerpo muy grande) y para la informaci\u00f3n relevante. La segunda aparece siempre en may\u00fascula y en la misma escala (peque\u00f1a) tanto para los cuerpos de texto como para el resto de la informaci\u00f3n. Al investigar un poco las tipograf\u00edas llegamos a la conclusi\u00f3n de que esta elecci\u00f3n fue muy consciente e intencionada. La S\u00d6HNE est\u00e1 inspirada en la Akzidenz-Grotesk, que es la precursora de la Helv\u00e9tica, tipograf\u00eda que revolucion\u00f3 el mundo del dise\u00f1o por su calidad y que es utilizada hasta la actualidad. Helv\u00e9tica es sin\u00f3nimo de buen dise\u00f1o, pero el dise\u00f1ador opt\u00f3 por usar una tipograf\u00eda inspirada en su morfolog\u00eda y del 2019, eso habla de conceptos como actualidad y vanguardia. Por otro lado, tambi\u00e9n tenemos a la NB AKADEMIE MONO que es una tipograf\u00eda monoespaciada. Estas tipograf\u00edas permiten que cada car\u00e1cter sea reconocido \u00f3pticamente con mayor precisi\u00f3n (por la uniformidad de espacios y las formas limpias que presenta) y por eso se las utiliza en los lenguajes de programaci\u00f3n. La NB AKADEMIE MONO remite al mundo digital y a lo \u00abtechy\u00bb<\/em> y eso coincide con la identidad del estudio y los servicios que ofrece (dise\u00f1o web, programaci\u00f3n). Podemos afirmar entonces que el criterio en la elecci\u00f3n y combinaci\u00f3n de familias es estil\u00edstico y conceptual, donde hay un contraste muy marcado entre las escalas y los estilos de la tipograf\u00eda. <\/p>\n\n\n\n

A modo de cierre, creemos que hay una intenci\u00f3n detr\u00e1s de todas las decisiones tomadas. Tambi\u00e9n consideramos que esta interfaz prioriza la forma antes que la funci\u00f3n, ya que presenta un dise\u00f1o atractivo, pero no necesariamente intuitivo. En criollo, es una p\u00e1gina piola pero que cuesta un poco entender (al menos al principio). Por ejemplo, la informaci\u00f3n de contacto est\u00e1 arriba de todo y en la misma jerarqu\u00eda que el resto de la informaci\u00f3n lo cual hace que sea complicado encontrar el contacto del estudio. Otro ejemplo es la existencia del colof\u00f3n donde se menciona toda la informaci\u00f3n referente a las tipograf\u00edas utilizadas y al estudio que dise\u00f1\u00f3 el sitio web. Creemos que esto es un gui\u00f1o para los dise\u00f1adores o conocedores del mundo del dise\u00f1o porque no es com\u00fan que aparezca en todas las p\u00e1ginas.<\/p>\n\n\n\n

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

Analizamos una p\u00e1gina web muy copada: un estudio de dise\u00f1o digital, principalmente enfocado en branding, ubicado en Utah (EEUU), llamado \u00abPowell-Studio\u00bb. La web es #aesthetic: presenta un dise\u00f1o moderno, minimalista y vanguardista, propio de la era digital (muy gen z). Tiene una impronta muy marcada donde la tipograf\u00eda es la estrella, ya que representa casi […]<\/p>\n","protected":false},"author":15,"featured_media":589,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"comision":[16],"eje":[3],"class_list":["post-355","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sin-categoria","comision-juan-flor","eje-experiencia-lectura-uso"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/posts\/355","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\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/comments?post=355"}],"version-history":[{"count":7,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/posts\/355\/revisions"}],"predecessor-version":[{"id":603,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/posts\/355\/revisions\/603"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/media\/589"}],"wp:attachment":[{"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/media?parent=355"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/categories?post=355"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/tags?post=355"},{"taxonomy":"comision","embeddable":true,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/comision?post=355"},{"taxonomy":"eje","embeddable":true,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/eje?post=355"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}