{"id":1315,"date":"2023-08-25T17:35:57","date_gmt":"2023-08-25T20:35:57","guid":{"rendered":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/?p=1315"},"modified":"2023-08-25T17:35:57","modified_gmt":"2023-08-25T20:35:57","slug":"entre-compases-y-caracteres","status":"publish","type":"post","link":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/entre-compases-y-caracteres\/","title":{"rendered":"Entre compases y caracteres"},"content":{"rendered":"\n

<\/h2>\n\n\n\n

Analizamos los recursos gr\u00e1ficos y tipogr\u00e1ficos del sitio web de SIRUP, un cantante japon\u00e9s de R&B\/Soul.<\/h2>\n\n\n\n

La interfaz elegida para nuestro an\u00e1lisis est\u00e1 destinada a promocionar un concierto que se realiz\u00f3 en Noviembre de 2022, con motivo de la celebraci\u00f3n del 5to aniversario del lanzamiento del primer EP del cantante. <\/p>\n\n\n\n

A medida que navegamos a trav\u00e9s de la interfaz podemos encontrar toda la informaci\u00f3n correspondiente al evento, as\u00ed como im\u00e1genes y links que nos llevan a la compra de tickets o de su merchandising oficial, entre otros. Cuenta tambi\u00e9n con un bot\u00f3n de audio que al cliquearlo nos permite escuchar una canci\u00f3n del cantante mientras recorremos la web.  Podr\u00edamos decir entonces que la web est\u00e1 destinada a los usuarios que consumen la m\u00fasica de SIRUP (en su mayor\u00eda un p\u00fablico joven) y que se encuentren en Jap\u00f3n, ya que es all\u00ed donde se realizar\u00e1 el concierto.<\/p>\n\n\n\n

Las tipograf\u00edas utilizadas en esta interfaz son 3:<\/p>\n\n\n\n

En primer lugar tenemos Glodok, una fuente display que resulta muy atractiva por las formas y terminaciones de sus signos. Esta tipograf\u00eda se utiliza principalmente para t\u00edtulos y para algunos destacados.<\/p>\n\n\n\n

Por otro lado, tenemos una segunda tipograf\u00eda, la Source Han Sans Japanese. Es una tipograf\u00eda Sans Serif que destaca su uso por su funcionalidad, ya que es una fuente que incluye glifos que son necesarios para el japon\u00e9s, y como dijimos anteriormente, esta web est\u00e1 dirigida a un p\u00fablico local. Esta tipograf\u00eda se utiliza en distintas variables para todos los paquetes de texto de la web, y para ciertos t\u00edtulos o destacados, en donde se var\u00eda el idioma seg\u00fan sea necesario. <\/p>\n\n\n\n

Por \u00faltimo tenemos la fuente Termina, una Sans Serif moderna, sencilla y de f\u00e1cil lectura. Cuenta con distintas variables de peso que se utilizan en la interfaz para algunos botones, subt\u00edtulos, textos cortos que complementan a los t\u00edtulos o informaci\u00f3n adicional.<\/p>\n\n\n\n

Decidimos enfocar nuestro an\u00e1lisis en c\u00f3mo las distintas familias tipogr\u00e1ficas funcionan y se complementan con los dem\u00e1s recursos gr\u00e1ficos de la interfaz, como im\u00e1genes, texturas y colores, ya que creemos que es ah\u00ed donde se encuentra su mayor atractivo.<\/strong><\/p>\n\n\n\n

Para empezar, la interfaz tiene una paleta de colores muy definida. El blanco y el naranja son los colores principales, y se utilizan para todos los textos, botones y recuadros. Tenemos colores secundarios como el rojo, verde, azul, violeta y amarillo, que podemos ver en el fondo del sitio, en un gradiente junto con el blanco y el naranja. Estos colores aparecen tambi\u00e9n en todas las im\u00e1genes, lo que nos hace dar cuenta de que hay una decisi\u00f3n crom\u00e1tica y no son fotograf\u00edas seleccionadas de manera arbitraria. Podemos ver tambi\u00e9n que todo el sitio, a excepci\u00f3n de la tipograf\u00eda, est\u00e1 intervenido con una textura granulada, lo cual ayuda a reforzar la identidad.<\/p>\n\n\n\n

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

Esta intencionalidad en cuanto a lo est\u00e9tico se evidencia bastante en la primera \u201cpantalla\u201d que vemos apenas ingresamos. Nos encontramos con una fotograf\u00eda del cantante que ocupa gran parte del espacio, junto con otras m\u00e1s peque\u00f1as, donde ya podemos notar que los colores de su ropa responden a la paleta mencionada antes. Adem\u00e1s, su pose y el dise\u00f1o de la camisa, remiten a lo retro, algo que se refuerza con la textura granulada, el logo de \u201cRoll&Bounce\u201d y con la tipograf\u00eda \u201cGlodok\u201d, cuyo dise\u00f1o est\u00e1 inspirado en ese estilo. Tenemos un t\u00edtulo bastante grande que pasa por detr\u00e1s de la imagen, y en contraste con esto tenemos en una menor escala peque\u00f1os bloques de texto y destacados que nos brindan informaci\u00f3n. Debajo encontramos tambi\u00e9n un bot\u00f3n que al clickear nos muestra el video de presentaci\u00f3n del Evento.<\/p>\n\n\n\n

Todos estos elementos est\u00e1n de cierta forma contenidos por un \u00f3valo blanco que sirve como recuadro, lo que ayuda a que toda esta informaci\u00f3n se visualice como un todo. La relaci\u00f3n que se establece entre los textos y las im\u00e1genes generan un buen contraste que ayudan a jerarquizar y ordenar para poder seguir un orden de lectura.<\/p>\n\n\n\n

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

Si bajamos, podemos notar c\u00f3mo se va organizando el resto de la interfaz. La p\u00e1gina se divide en distintas secciones, las cuales identificamos r\u00e1pidamente ya que casi siempre se sigue una estructura de TITULO – BAJADA – IMAGEN, con sus variantes correspondientes seg\u00fan el contenido de cada una. Tambi\u00e9n vemos el uso de l\u00edneas horizontales como miscel\u00e1neas que ayudan a organizar y separar \u00edtems.<\/p>\n\n\n\n

Adem\u00e1s, muchos de los elementos se mueven, aparecen\/desaparecen, cambian de color, etc. a medida que scrolleamos o cuando pasamos el cursor por encima, lo que hace que la navegaci\u00f3n se sienta m\u00e1s fluida.<\/p>\n\n\n\n

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

En este an\u00e1lisis, concluimos que la interfaz elegida hace un buen uso de todos los recursos que elige, y logra captar la atenci\u00f3n del usuario a trav\u00e9s de ellos. La p\u00e1gina tiene dinamismo, y si bien sigue una estructura sencilla no deja de resultar atractiva, ya que la manera en la que se complementan los colores, im\u00e1genes, textos y dem\u00e1s elementos permite captar la atenci\u00f3n de los usuarios, sin dejar de lado el objetivo del sitio, que en este caso es promocionar el recital de SIRUP, as\u00ed como tambi\u00e9n su m\u00fasica y productos relacionados.<\/p>\n","protected":false},"excerpt":{"rendered":"

Analizamos los recursos gr\u00e1ficos y tipogr\u00e1ficos del sitio web de SIRUP, un cantante japon\u00e9s de R&B\/Soul. La interfaz elegida para nuestro an\u00e1lisis est\u00e1 destinada a promocionar un concierto que se realiz\u00f3 en Noviembre de 2022, con motivo de la celebraci\u00f3n del 5to aniversario del lanzamiento del primer EP del cantante. A medida que navegamos a […]<\/p>\n","protected":false},"author":70,"featured_media":1383,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[77,17,65,20],"comision":[14],"eje":[5],"class_list":["post-1315","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sin-categoria","tag-diseno","tag-interfaz","tag-musica","tag-tipografia","comision-aku-nika","eje-sistema-y-recursos"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/posts\/1315","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\/70"}],"replies":[{"embeddable":true,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/comments?post=1315"}],"version-history":[{"count":7,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/posts\/1315\/revisions"}],"predecessor-version":[{"id":1756,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/posts\/1315\/revisions\/1756"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/media\/1383"}],"wp:attachment":[{"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/media?parent=1315"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/categories?post=1315"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/tags?post=1315"},{"taxonomy":"comision","embeddable":true,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/comision?post=1315"},{"taxonomy":"eje","embeddable":true,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/eje?post=1315"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}