{"id":20911,"date":"2022-03-08T11:09:57","date_gmt":"2022-03-08T10:09:57","guid":{"rendered":"https:\/\/www.makingscience.com\/?p=20911"},"modified":"2022-03-08T11:09:57","modified_gmt":"2022-03-08T10:09:57","slug":"7-buenas-practicas-para-usar-fotografias-en-ui","status":"publish","type":"post","link":"https:\/\/www.makingscience.com\/es\/blog\/7-buenas-practicas-para-usar-fotografias-en-ui\/","title":{"rendered":"7 buenas pr\u00e1cticas para usar fotograf\u00edas en UI"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">En el dise\u00f1o de interfaz de usuario, una buena parte del apartado visual de un producto digital, como puede ser una web o una aplicaci\u00f3n m\u00f3vil, reside en los elementos gr\u00e1ficos que contiene como las ilustraciones o fotograf\u00edas.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Es en estas \u00faltimas es donde queremos hacer hincapi\u00e9 en este art\u00edculo, ya que hoy en d\u00eda tenemos acceso a una gran cantidad de recursos fotogr\u00e1ficos de manera gratuita o por medios de pago que en algunas ocasiones no sabemos gestionar correctamente.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">A continuaci\u00f3n te compartimos<strong> 7 buenas pr\u00e1cticas <\/strong>que deben seguirse en el dise\u00f1o UI para mejorar tu producto digital y <strong>evitar errores que perjudiquen la interfaz, usabilidad y accesibilidad.<\/strong><\/span><\/p>\n<p>&nbsp;<\/p>\n<h3><strong>1.No maltrates a las im\u00e1genes, dales la importancia que necesitan<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Evita deformar las im\u00e1genes al colocarlas en su placeholder. Una imagen deformada crea un rechazo casi autom\u00e1tico en la persona que la observa y ese rechazo afecta en la manera en la que el usuario interpreta la marca y c\u00f3mo ser\u00e1 su relaci\u00f3n con ella en el futuro.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h3><strong>2. La imagen apoya al mensaje, y no al rev\u00e9s<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">La informaci\u00f3n m\u00e1s relevante dentro de la web o app debe ser el contenido de texto que la forma. Las im\u00e1genes que usemos para acompa\u00f1ar a ese contenido deben \u00fanicamente reforzar ese mensaje, no ser el mensaje.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h3><strong>3. Menos es m\u00e1s<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Una fotograf\u00eda minimalista ayuda a sintetizar la carga cognitiva de la imagen mucho m\u00e1s r\u00e1pido. De esta manera enfocamos la atenci\u00f3n del usuario en un solo punto, como por ejemplo hace Apple con sus fotograf\u00edas de producto.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h3><strong>4. No dise\u00f1es en base a una fotograf\u00eda<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">El dise\u00f1o visual de la web o app no deber\u00eda basarse en la composici\u00f3n o estructura de una fotograf\u00eda. Esto nos puede acarrear problemas en un futuro hipot\u00e9tico en el cual, por ejemplo, se nos pida actualizar la imagen por una mas actual o en el caso en el que la legibilidad de los textos se vea afectada por dicha imagen.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h3><strong>5. Contenido real, no stock<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">A la hora de incorporar fotograf\u00edas a nuestra web, debemos evitar la est\u00e9tica de t\u00edpica imagen de stock (gente sonriendo sin ning\u00fan contexto, fondos blancos puros, rostros mirando directamente a c\u00e1mara, etc), esto puede afectar a la credibilidad de la totalidad de la web e incluso del producto final. El contenido que a\u00f1adamos debe ser lo m\u00e1s realista posible. Siempre que sea posible debemos utilizar contenido original hecho por un fot\u00f3grafo dedicado. <\/span><span style=\"font-weight: 400;\">Como esto no siempre es posible, se debe usar im\u00e1genes con una est\u00e9tica m\u00e1s cotidiana, con las que el usuario pueda empatizar. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">No dejes que una mala fotograf\u00eda arruine todo el dise\u00f1o de una p\u00e1gina y la experiencia del usuario que la visita.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h3><strong>6. Im\u00e1genes relevantes, la est\u00e9tica no lo es todo<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">En algunos casos se suelen a\u00f1adir im\u00e1genes por pura est\u00e9tica, para rellenar espacios vac\u00edos o sin ninguna utilidad aparente. Siempre que incluyamos una imagen debe ser porque tiene una utilidad clara.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Las im\u00e1genes meramente decorativas pocas veces aportan una experiencia positiva a los usuarios: en muchos casos \u00e9stas simplemente se ignoran y en muchos otros casos pueden distraer la atenci\u00f3n del foco principal del site.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Por ejemplo, en muchas webs corporativas se incluyen fotograf\u00edas abstractas, de arquitectura o similares. Aunque la idea es dar la sensaci\u00f3n de ser una empresa moderna, el resultado final es que estas fotograf\u00edas aportan poca informaci\u00f3n relevante a los visitantes.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h3><strong>7. A\u00f1ade t\u00edtulos alternativos para mejorar la accesibilidad<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">No debemos olvidar a los visitantes con dificultades visuales que deben utilizar herramientas complementarias para consumir el contenido que les ofrecemos. A\u00f1adir textos alternativos a las im\u00e1genes de la web o app es una pr\u00e1ctica muy recomendable para hacer nuestro sitio mucho m\u00e1s accesible.<\/span><\/p>\n<p>&nbsp;<\/p>\n<blockquote><p>\u00bfTe ha gustado este art\u00edculo? No te pierdas ninguna novedad del mundo UX\/UI en el blog Making Science. Si tienes un caso concreto, nuestro equipo de expertos podr\u00e1 ayudarte. Escr\u00edbenos a info@makingscience.com. \u00a1Te esperamos! ?<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>En el dise\u00f1o de interfaz de usuario, una buena parte del apartado visual de un producto digital, como puede ser una web o una aplicaci\u00f3n m\u00f3vil, reside en los elementos gr\u00e1ficos que contiene como las ilustraciones o fotograf\u00edas. Es en estas \u00faltimas es donde queremos hacer hincapi\u00e9 en este art\u00edculo, ya que hoy en d\u00eda [&hellip;]<\/p>\n","protected":false},"author":40,"featured_media":20932,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[910],"tags":[263,264,180],"class_list":["post-20911","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology-ai-es","tag-creatividad","tag-fotografia","tag-ui"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/posts\/20911","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/users\/40"}],"replies":[{"embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/comments?post=20911"}],"version-history":[{"count":0,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/posts\/20911\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/media\/20932"}],"wp:attachment":[{"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/media?parent=20911"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/categories?post=20911"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/tags?post=20911"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}