{"id":2344,"date":"2023-08-25T22:08:33","date_gmt":"2023-08-26T01:08:33","guid":{"rendered":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/?p=2344"},"modified":"2023-08-25T22:11:50","modified_gmt":"2023-08-26T01:11:50","slug":"un-diseno-que-te-eleva","status":"publish","type":"post","link":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/un-diseno-que-te-eleva\/","title":{"rendered":"\u00bfUn dise\u00f1o que te eleva?"},"content":{"rendered":"\n
\n

Comenzamos definiendo su propuesta sobre Flying Papers como representante de una comunidad diversa, v\u00edvida y global, unida por su inter\u00e9s en el cannabis. Esto llev\u00f3 a que Flying Papers fuera un boleto para los curiosos.<\/p>\nBuild in Amsterdam, agencia de branding.<\/cite><\/blockquote>\n\n\n\n

En este art\u00edculo vamos a analizar la interfaz de la p\u00e1gina web e-commerce de la marca \u201cFly Papers\u201d<\/strong>. Esta es una marca belga de productos para el consumo de cannabis tanto recreativo como m\u00e9dico. Si bien se encuentra en el mercado desde 1994, fue en el a\u00f1o 2015 que adoptaron el nombre de \u201cFly Papers\u201d y reci\u00e9n en 2022 crearon desde cero el dise\u00f1o completo de la misma. Por lo que en relaci\u00f3n al dise\u00f1o y composici\u00f3n que porta la marca actualmente, se encuentra muy influenciada por las tendencias de dise\u00f1o recientes como lo son el \u201cSoft Pop\u201d y la incorporaci\u00f3n de animaciones, modelos 3D y 360\u00ba de los productos.<\/p>\n\n\n\n

El primer punto a analizar de la interfaz es la legibilidad de los textos por s\u00ed mismos.<\/strong> El primer error lo detectamos al momento de pasar la p\u00e1gina de ingl\u00e9s a espa\u00f1ol. En ENG, utilizan en los textos una interl\u00ednea muy reducida que funciona, y en SPA, esta interl\u00ednea se mantiene igual, con el fin de que el dise\u00f1o no cambie y se mantenga lo m\u00e1s parecido a la original. Pero esta decisi\u00f3n no es buena<\/strong>, en relaci\u00f3n a los signos ortogr\u00e1ficos propios del idioma espa\u00f1ol, como lo son las tildes o el uso de signos de interrogaci\u00f3n al principio y al final de la pregunta realizada.<\/p>\n\n\n\n

Por ejemplo, las tildes<\/strong> con la interl\u00ednea reducida hace que estas se superpongan totalmente con la l\u00ednea de texto superior, y queden totalmente ilegibles. Adem\u00e1s de afectar la morfolog\u00eda de los caracteres donde se est\u00e1 superponiendo.<\/p>\n\n\n\n

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

El segundo punto es c\u00f3mo se relaciona el texto con los elementos presentes<\/strong>, que en este caso son im\u00e1genes ilustrativas. Nuestro primer acercamiento con la interfaz fue en desktop<\/strong>, el texto nos pareci\u00f3 legible pero no para una lectura r\u00e1pida, ya que te vas encontrando con distintas animaciones a medida que avanzas que pisan partes del texto, y te obligan a ir leyendo por debajo de las mismas. Estas animaciones, que nos acompa\u00f1an durante todo el recorrido de la interfaz, no est\u00e1n t\u00edmidas all\u00ed, sino que tienen un tama\u00f1o apropiado teniendo en cuenta tambi\u00e9n la escala de la tipograf\u00eda empleada en el texto.<\/p>\n\n\n\n

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

Que la tipograf\u00eda se encuentre grande y en variante bold ayuda a que resalte, y no sea una competencia entre el texto y las animaciones. Se encuentran ambas en punto de complementaci\u00f3n y equilibrio. <\/p>\n\n\n\n

Por ejemplo, si esta misma tipograf\u00eda se encontrara del mismo tama\u00f1o pero en variante light o regular, la relaci\u00f3n ser\u00eda muy diferente. Ya que la tipograf\u00eda se perder\u00eda y la animaci\u00f3n captar\u00eda toda la atenci\u00f3n. <\/p>\n\n\n\n

Cuando vimos la p\u00e1gina en su versi\u00f3n mobile<\/strong>, fue una experiencia totalmente diferente a la desktop. Las animaciones que en desktop ya se encontraban de un buen tama\u00f1o, en mobile se mantienen en una escala similar. El problema de que el tama\u00f1o se mantenga igual alli, radica en que el texto en relaci\u00f3n a la escala de estas animaciones parece m\u00e1s chico, y ya pasan a taparse l\u00edneas enteras de texto, y no solo un par de caracteres como suced\u00eda en desktop.<\/p>\n\n\n\n

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

Que esta situaci\u00f3n suceda en ciertos lugares donde el texto predomina sobre la ilustraci\u00f3n, como por ejemplo las preguntas que se le van haciendo al usuario a medida que navega por la interfaz, es molesta. A diferencia de la tienda, por ejemplo, donde el modelo 3D del producto tambi\u00e9n tapa un texto pero este ya se presenta en un segundo plano, lo que importa m\u00e1s es producto para acercarlo m\u00e1s al usuario y no el texto que atr\u00e1s contiene.<\/p>\n\n\n\n

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

Para concluir, creemos que el dise\u00f1o es muy llamativo y creativo, pero hay varios errores, que por m\u00e1s que la interfaz en general sea llamativa, no se pueden pasar por alto, debido a que, en cierta medida, afectan la experiencia del usuario que la est\u00e1 navegando.<\/p>\n\n\nhttps:\/\/www.flyingpapers.com\/es: \u00bfUn dise\u00f1o que te eleva?<\/span><\/a>\n\nhttps:\/\/www.buildinamsterdam.com\/case\/flying-papers: \u00bfUn dise\u00f1o que te eleva?<\/span><\/a>\n\nhttps:\/\/blog.adobe.com\/es\/publish\/2022\/03\/20\/soft-pop-una-explosion-de-monerias: \u00bfUn dise\u00f1o que te eleva?<\/span><\/a>","protected":false},"excerpt":{"rendered":"

Comenzamos definiendo su propuesta sobre Flying Papers como representante de una comunidad diversa, v\u00edvida y global, unida por su inter\u00e9s en el cannabis. Esto llev\u00f3 a que Flying Papers fuera un boleto para los curiosos. Build in Amsterdam, agencia de branding. En este art\u00edculo vamos a analizar la interfaz de la p\u00e1gina web e-commerce de […]<\/p>\n","protected":false},"author":114,"featured_media":2352,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[113,29,17,20],"comision":[15],"eje":[5],"class_list":["post-2344","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sin-categoria","tag-elementos","tag-experienciadelectura","tag-interfaz","tag-tipografia","comision-chino-cami","eje-sistema-y-recursos"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/posts\/2344","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\/114"}],"replies":[{"embeddable":true,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/comments?post=2344"}],"version-history":[{"count":55,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/posts\/2344\/revisions"}],"predecessor-version":[{"id":2514,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/posts\/2344\/revisions\/2514"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/media\/2352"}],"wp:attachment":[{"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/media?parent=2344"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/categories?post=2344"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/tags?post=2344"},{"taxonomy":"comision","embeddable":true,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/comision?post=2344"},{"taxonomy":"eje","embeddable":true,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/eje?post=2344"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}