{"id":1599,"date":"2023-08-25T18:16:09","date_gmt":"2023-08-25T21:16:09","guid":{"rendered":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/?p=1599"},"modified":"2023-08-25T23:29:40","modified_gmt":"2023-08-26T02:29:40","slug":"muchacha-una-presentacion-novedosa","status":"publish","type":"post","link":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/muchacha-una-presentacion-novedosa\/","title":{"rendered":"Muchacha: una presentaci\u00f3n novedosa"},"content":{"rendered":"\n

El dise\u00f1o de una interfaz web juega un rol fundamental en la construcci\u00f3n de la identidad de una marca. En este art\u00edculo, analizamos un caso espec\u00edfico: la p\u00e1gina web de Muchacha<\/strong>, un resto bar franc\u00e9s con tem\u00e1tica latinoamericana, en la cual la tipograf\u00eda a gran escala, la animaci\u00f3n web y la ilustraci\u00f3n operan en sinton\u00eda para resolver un men\u00fa virtual de manera din\u00e1mica y novedosa.<\/p>\n\n\n\n

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

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

Esta interfaz est\u00e1 destinada a un p\u00fablico joven-adulto, posibles clientes del bar, por lo que el tono en el que se le habla al usuario es informal y conciso. El planteo detr\u00e1s de ella es incorporar estructuras, jerarqu\u00edas y miscel\u00e1neas t\u00edpicas de un men\u00fa impreso tradicional, que son modernizadas y adaptadas al mundo web responsivo y animado. La tipograf\u00eda, el color, la ilustraci\u00f3n, las im\u00e1genes y la animaci\u00f3n son protagonistas en esta pieza, est\u00e1n en constante interacci\u00f3n y di\u00e1logo entre s\u00ed, y hay tipolog\u00edas distintas de estas variables.<\/p>\n\n\n\n

Presenta una arquitectura intuitiva, interactiva y f\u00e1cil de recorrer. La navegaci\u00f3n es clara: se lleva a cabo siempre scrolleando <\/em>hacia abajo. A medida que se avanza en el recorrido, los elementos se mueven para dar lugar a otros, aparecen y se desvanecen, se arman y desarman, pero siempre constituyen un todo. La animaci\u00f3n web es fundamental en su estructuraci\u00f3n, no s\u00f3lo por los efectos que genera, sino porque cumple una funci\u00f3n clave: gu\u00eda la mirada, ordena la lectura y genera ritmos que vuelven a la pieza sumamente interactiva. Est\u00e1 dise\u00f1ada en CSS<\/em>, lo que, a diferencia de las tradicionales animaciones web hechas con JavaScript<\/em>, hace que la interfaz sea ligera de cargar, incluso en dispositivos m\u00f3viles. Siendo una pieza en la cual se asume que la mayor\u00eda de los usuarios la ver\u00e1n a trav\u00e9s de un celular, no hay mayores diferencias entre la versi\u00f3n de escritorio y m\u00f3vil, y la tipograf\u00eda se adapta a distintos cuerpos.<\/p>\n\n\n\n

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

En cuanto al formato de los textos, principalmente se utiliza la tipograf\u00eda Cako<\/strong>, una fuente romana moderna con detalles y terminaciones puntiagudas, que le aporta much\u00edsima personalidad a la identidad de la marca que se presenta. Aparece en el logo, en t\u00edtulos, en el slogan, en animaciones, etc. Suele ser usada en cuerpos grandes, posee la mayor jerarqu\u00eda y toma mucho protagonismo. Una interacci\u00f3n interesante con esta fuente se da en la secci\u00f3n de bebidas, donde la tipograf\u00eda s\u00f3lo tiene los contornos, por lo que se pueden apreciar el trazo y la terminaci\u00f3n de los remates. Al posicionar el cursor sobre las diferentes opciones, se produce una interacci\u00f3n con la tipograf\u00eda en la cual los contornos se rellenan de color.<\/p>\n\n\n\n

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

Por otro lado, para los textos de lectura, botones y t\u00edtulos de menor jerarqu\u00eda, se utiliza la tipograf\u00eda Beatrice <\/strong>standard; una fuente sans serif redonda basada en formas geom\u00e9tricas, de f\u00e1cil recorrido en la lectura, que aporta modernidad y elegancia al dise\u00f1o de la interfaz.<\/p>\n\n\n\n

En t\u00e9rminos de legibilidad, la tipograf\u00eda funciona perfectamente en relaci\u00f3n a los tama\u00f1os y contrastes con los fondos. La misma interact\u00faa tanto con fondos de color plano como con im\u00e1genes sin generar dificultad en la lectura.<\/p>\n\n\n\n

En cuanto al dise\u00f1o, nos encontramos con que hay pocas alternativas para que el usuario conecte con la informaci\u00f3n de otra manera: toda la interfaz est\u00e1 especialmente dise\u00f1ada para ser recorrida de una \u00fanica forma, y s\u00f3lo posibilita saltear ciertas secciones del recorrido a trav\u00e9s de accesos directos al inicio. Sin embargo, como ya se ha mencionado antes, la web maneja un gran dinamismo, lo que la hace divertida y entretenida de visualizar.<\/p>\n\n\n\n

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

Al ser Muchacha <\/strong>un restaurante-bar cuyo target <\/em>principal son personas j\u00f3venes que buscan conocer gente y relajarse, la interfaz construye su identidad utilizando recursos tales como composiciones que recuerdan a aplicaciones de citas, como Tinder<\/em>. Si bien este tipo de situaciones aportan mucho a conformar la identidad de marca, la composici\u00f3n no demuestra una gran funcionalidad m\u00e1s all\u00e1 de generar un efecto novedoso, por lo que es un aspecto que podr\u00eda ser resignificado para que tenga alguna funci\u00f3n. Podr\u00eda, por ejemplo, actuar como un men\u00fa interactivo que ayude al lector a elegir qu\u00e9 va a consumir: mostrando fotos y descripciones de los productos, permitiendo que el usuario elija entre las opciones, y en base a estas preferencias armar un men\u00fa personalizado.<\/p>\n\n\n\n

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

Concluyendo, la tipograf\u00eda contribuye al \u00e9xito en el dise\u00f1o de esta interfaz, ya que le da elegancia, personalidad, legibilidad y car\u00e1cter. La p\u00e1gina web de Muchacha <\/strong>es un gran ejemplo de c\u00f3mo valerse del recurso de la animaci\u00f3n web CSS<\/em>, utiliz\u00e1ndola para construir una narrativa identitaria y manteni\u00e9ndola en un constante di\u00e1logo con la tipograf\u00eda, la fotograf\u00eda y la ilustraci\u00f3n, lo cual genera una integraci\u00f3n que hace la pieza sumamente interesante.<\/p>\n\n\n\n

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

Fuentes:<\/strong> https:\/\/www.behance.net\/gallery\/84571727\/Cako-typeface<\/a><\/p>\n\n\n\n

https:\/\/sharptype.co\/typefaces\/beatrice-\/beatrice-standard\/<\/a><\/p>\n\n\n\n

https:\/\/muchachamontpellier.fr\/<\/a><\/p>\n\n\n\n

https:\/\/fontsinuse.com\/typefaces\/81430\/beatrice<\/a><\/p>\n\n\n\n

https:\/\/fontsinuse.com\/typefaces\/109876\/cako<\/a><\/p>\n<\/div>\n\n\n\n

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

El dise\u00f1o de una interfaz web juega un rol fundamental en la construcci\u00f3n de la identidad de una marca. En este art\u00edculo, analizamos un caso espec\u00edfico: la p\u00e1gina web de Muchacha, un resto bar franc\u00e9s con tem\u00e1tica latinoamericana, en la cual la tipograf\u00eda a gran escala, la animaci\u00f3n web y la ilustraci\u00f3n operan en sinton\u00eda […]<\/p>\n","protected":false},"author":84,"featured_media":1825,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[29,33,75,17,89,88,36],"comision":[16],"eje":[3],"class_list":["post-1599","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sin-categoria","tag-experienciadelectura","tag-experienciadeuso","tag-interactivo","tag-interfaz","tag-menu-virtual","tag-muchacha","tag-tipografia-2","comision-juan-flor","eje-experiencia-lectura-uso"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/posts\/1599","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\/84"}],"replies":[{"embeddable":true,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/comments?post=1599"}],"version-history":[{"count":5,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/posts\/1599\/revisions"}],"predecessor-version":[{"id":2606,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/posts\/1599\/revisions\/2606"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/media\/1825"}],"wp:attachment":[{"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/media?parent=1599"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/categories?post=1599"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/tags?post=1599"},{"taxonomy":"comision","embeddable":true,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/comision?post=1599"},{"taxonomy":"eje","embeddable":true,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/eje?post=1599"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}