<?xml version="1.0" encoding="UTF-8"?><rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/" > <channel> <title>Artículos de Miguel Escamilla González en el Canal Diseño y Arquitectura</title> <atom:link href="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/autores/miguel-escamilla/feed/" rel="self" type="application/rss+xml" /> <link>https://www.inesem.es/revistadigital/diseno-y-artes-graficas</link> <description>En los artículos de Diseño y Arquitectura de Revista Digital INESEM encontrarás información actualizada e innovadora sobre tu sector. Nuestros artículos están elaborados y contrastados por profesionales de diferentes especialidades del sector. Si estás buscando información sobre Arquitectura y Edificación, Decoración e Interiorismo, Diseño Gráfico, Diseño Web o Edición y Posproducción Digital, estás en el sitio indicado.</description> <lastBuildDate>Mon, 15 Nov 2021 10:49:30 +0000</lastBuildDate> <language>es</language> <sy:updatePeriod> hourly </sy:updatePeriod> <sy:updateFrequency> 1 </sy:updateFrequency> <generator>https://wordpress.org/?v=5.9.3</generator> <item> <title>Experiencia de usuario en aplicaciones móviles: diseña para y por tu target</title> <link>https://www.inesem.es/revistadigital/diseno-y-artes-graficas/experiencia-de-usuario-en-aplicaciones-moviles/</link> <comments>https://www.inesem.es/revistadigital/diseno-y-artes-graficas/experiencia-de-usuario-en-aplicaciones-moviles/#respond</comments> <dc:creator><![CDATA[Miguel Escamilla González]]></dc:creator> <pubDate>Mon, 15 Nov 2021 10:49:27 +0000</pubDate> <category><![CDATA[Diseño Web]]></category> <guid isPermaLink="false">https://www.inesem.es/revistadigital/diseno-y-artes-graficas/?p=2903</guid> <description><![CDATA[<p><img width="345" height="180" src="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2021/10/Experiencia-de-usuario-en-aplicaciones-móviles-345x180.jpg?x92914" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" style="float:left; margin:0 15px 15px 0;" />Consigue mejorar la experiencia de tus usuarios en aplicaciones móviles a través de un diseño innovador y funcional.</p> <p>El artículo <a rel="nofollow" href="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/experiencia-de-usuario-en-aplicaciones-moviles/">Experiencia de usuario en aplicaciones móviles: diseña para y por tu target</a> aparece primero en <a rel="nofollow" href="http://www.inesem.es/revistadigital/">Revista Digital INESEM</a></p> ]]></description> <content:encoded><![CDATA[<img width="345" height="180" src="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2021/10/Experiencia-de-usuario-en-aplicaciones-móviles-345x180.jpg?x92914" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" loading="lazy" style="float:left; margin:0 15px 15px 0;" /> <p style="text-align: justify;"><span style="font-weight: 400;">¿Sabías que </span><b>casi el 40%</b><span style="font-weight: 400;"> de las personas abandonan un sitio web o se desinstala una app si el contenido o el diseño no son atractivos? </span></p> <p style="text-align: justify;"><span style="font-weight: 400;">En un mundo en el que cada vez es más habitual acceder a Internet a través de un móvil, una tablet e incluso un smartwatch es de vital importancia prestar atención a los detalles y estructurar nuestras webs y apps de forma clara, para que el usuario pueda encontrar fácilmente lo que está buscando y pueda navegar sin problemas. </span></p> <p style="text-align: justify;"><span style="font-weight: 400;">Es por eso que el concepto </span><a href="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/mobile-first/" target="_blank" rel="noopener noreferrer"><b>Mobile First</b></a><span style="font-weight: 400;"> cobra fuerza y tenemos que enfocar nuestros esfuerzos en crear experiencias más intuitivas. Si se hace mal, los visitantes se pueden sentir frustrados y confundidos, lo que garantizará que abandonen y las empresas pueden ver sus efectos negativos. Es por eso que te queremos dar unos </span><b>tips para mejorar el diseño UX</b><span style="font-weight: 400;"> (user experience) de tu sitio web o app.</span></p> <h3 style="text-align: justify;"><b>1. Comprende. Investiga antes de diseñar</b></h3> <p style="text-align: justify;"><span style="font-weight: 400;">¿Realmente sabes lo que el usuario quiere ver en esa interfaz? </span><b>El usuario final quiere ver lo que realmente le interesa</b><span style="font-weight: 400;">, si le ofrecemos una cantidad de información aleatoria y sin interés para ellos, posiblemente podemos provocar que abandone nuestra web y busque otra que le muestre eso que está buscando. </span></p> <p style="text-align: justify;"><span style="font-weight: 400;">Imagina que vas a diseñar </span><b>una app de reparto de comida</b><span style="font-weight: 400;">. </span></p> <p style="text-align: justify;"><span style="font-weight: 400;">¿Sabes cómo se siente un usuario que descarga un app para pedir su cena? Con hambre. No lo entretengas rellenando datos, muéstrale productos y tipos de comida que puede elegir. Engánchalo para que no cambie de app y cuando tenga elegida la comida, le pides los datos. </span></p> <p style="text-align: justify;"><span style="font-weight: 400;">Haz </span><b>entrevistas de usuario</b><span style="font-weight: 400;"> a un grupo de entre 5-8 personas para saber qué es lo que buscan cuando descargan una app de reparto de comida y cuáles son sus necesidades. Es importante que este grupo sea del rango de edad de tu público objetivo. Verás como después de entrevistarlos, encuentras claves que van a mejorar la experiencia de usuario. </span></p> <h3 style="text-align: justify;"><b>2. Definir. Organiza la investigación y toma decisiones</b></h3> <p style="text-align: justify;"><span style="font-weight: 400;">Antes de diseñar nada es importante tener claro cuál va a ser nuestro público objetivo, cómo se siente un usuario cuando se descarga nuestra app o cómo nos imaginamos que sería el flujo de nuestro usuario en cuanto a la navegación.</span></p> <p style="text-align: justify;"><span style="font-weight: 400;">Existen diferentes prácticas que pueden ayudarnos en este proceso de definición:</span></p> <ul style="text-align: justify;"> <li style="font-weight: 400;" aria-level="1"><b>User persona:</b><span style="font-weight: 400;"> son planteamientos de personas ficticias que nos van a ayudar a imaginarnos mejor cómo sería un posible usuario de nuestra plataforma. </span></li> </ul> <p style="text-align: justify;"><span style="font-weight: 400;">En este planteamiento mostraremos una biografía breve de cada persona, las motivaciones que puede tener el usuario a la hora de instalarse nuestra app, las frustraciones que puede encontrarse o por ejemplo, su nivel de habilidad con las tecnologías.</span></p> <p style="text-align: justify;"><img loading="lazy" class="aligncenter size-full wp-image-2904" src="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2021/10/user-persona.png?x92914" alt="usuario tipo" width="531" height="327" srcset="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2021/10/user-persona.png 531w, https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2021/10/user-persona-300x185.png 300w" sizes="(max-width: 531px) 100vw, 531px" /></p> <p style="text-align: justify;">cada persona, las motivaciones que puede tener el usuario a la hora de instalarse nuestra app, las frustraciones que puede encontrarse o por ejemplo, su nivel de habilidad con las tecnologías.</p> <p style="text-align: justify;"><strong>Mapa de empatía:</strong> es un recurso parecido al User Persona, pero nos permitirá segmentar en diferentes aspectos a nuestro cliente “ideal”: cómo piensa, cómo habla, qué hace, cómo se siente. Esta práctica nos servirá para dar un paso más y entender un poco mejor a nuestro cliente objetivo.</p> <p style="text-align: justify;"><img loading="lazy" class="aligncenter size-full wp-image-2905" src="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2021/10/mapa-de-empatía.png?x92914" alt="mapa de empatía del usuario" width="510" height="293" srcset="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2021/10/mapa-de-empatía.png 510w, https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2021/10/mapa-de-empatía-300x172.png 300w" sizes="(max-width: 510px) 100vw, 510px" /></p> <ul style="text-align: justify;"> <li><strong>Flowchart: </strong>un flowchart o mapa de flujo nos permitirá comprender cuál va a ser el flujo del usuario dentro de nuestra app, reduciéndolo a la mínima expresión de acciones para poder entender en pocos pasos cómo va a entrar el usuario a nuestra app y cuáles son las <strong>preguntas</strong> y <strong>decisiones</strong> que va a tomar para llegar al final.</li> </ul> <p style="text-align: justify;">He seleccionado este ejemplo de flowchart porque me parece muy intuitivo y permite entender cuál sería la función real de plantear estos flujos:</p> <p style="text-align: justify;"><img loading="lazy" class="aligncenter size-full wp-image-2906" src="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2021/10/flowchart.png?x92914" alt="itinerario del usuario" width="346" height="309" srcset="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2021/10/flowchart.png 346w, https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2021/10/flowchart-300x268.png 300w" sizes="(max-width: 346px) 100vw, 346px" /></p> <p style="text-align: justify;">Hay muchas prácticas que se pueden realizar en esta parte de UX research, aunque en lo personal estas tres me parecen imprescindibles para abarcar cualquier proyecto.</p> <p style="text-align: justify;">Puedes diseñarlas desde cuál herramienta con la que te sientes a gusto, pero existen algunas <strong>plataformas gratuitas que te ofrecen recursos y plantillas</strong>, como por ejemplo <a href="https://miro.com" target="_blank" rel="nofollow noopener noreferrer">Miro</a> o <a href="https://whimsical.com/" target="_blank" rel="nofollow noopener noreferrer" data-wplink-edit="true">Whimsical</a>. </p> <h3 style="text-align: justify;"><strong>3. Idea. ¡Papel y lápiz!</strong></h3> <p style="text-align: justify;">Tras realizar la investigación del usuario tendremos claro cuáles son sus necesidades y entenderemos mejor qué puede diferenciarnos de nuestros competidores para comenzar a construir nuestro producto digital.</p> <p style="text-align: justify;">Es hora de coger papel y lápiz y plasmar ideas rápidas, en este momento del UX no hay errores. ¡No tengas miedo por ser demasiado innovador!</p> <h3 style="text-align: justify;"><strong>4. Prototipa. Pon atención únicamente a la usabilidad</strong></h3> <p style="text-align: justify;">Empieza la acción, comenzamos a diseñar nuestro producto en nuestro ordenador. Existen diversas herramientas que puedes utilizar para prototipar tus primeros <strong>wireframes</strong>, donde planteemos la estructura principal y definiremos la navegación del usuario y mejoraremos su UX: Adobe XD, Figma, Sketch, UXPin, etc</p> <p style="text-align: justify;">Recuerda que es importante diseñar interfaces limpias y con una estructura clara, que no distraiga al usuario de su objetivo principal. Haz un uso correcto de los<strong> espacios en blancos</strong>, ya que con estos y junto a una combinación de colores inteligente que facilite la navegación, <strong>tu app marcará la diferencia</strong>.</p> <p style="text-align: justify;">Estos primeros wireframes deberían carecer de color y trabajar los diseños únicamente con tonos grises. Trabajar de manera monocromática nos permitirá prestar atención únicamente a la usabilidad y experiencia de usuario, pudiendo diseñar diferentes versiones sin perder demasiado tiempo en cosas que no tienen tanta importancia en estas primeras fases del diseño y por lo tanto abaratamos costos.</p> <p style="text-align: justify;"><img loading="lazy" class="aligncenter size-full wp-image-2907" src="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2021/10/wireframe.png?x92914" alt="diseño de wireframe" width="483" height="396" srcset="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2021/10/wireframe.png 483w, https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2021/10/wireframe-300x246.png 300w" sizes="(max-width: 483px) 100vw, 483px" /></p> <h3 style="text-align: justify;"><strong>5. Valida. ¡Es el momento de ver si el diseño funciona!</strong></h3> <p style="text-align: justify;">Una vez diseñados los primeros wireframes sería conveniente <strong>hacer una prueba </strong>o <strong>test de usabilidad </strong>con usuarios reales, que puedan probar tu app y así poder concluir si realmente nuestros diseños se adaptan a los requerimientos de los usuarios o si por el contrario tendremos que realizar cambios.</p> <p style="text-align: justify;">Los objetivos de esta prueba son observar y analizar el comportamiento e interactividad media de los usuarios que visitan nuestro sitio y asegurar una experiencia de usuario positiva.</p> <p style="text-align: justify;">Reúne un grupo de unas cinco personas y <strong>proponles retos </strong>mientras utilizan el prototipo que has preparado con los wireframes: “Haz un pedido en un restaurante de comida china”, “Créate un perfil como Negocio”, “Añade tu dirección y un método de pago”, etc.</p> <p style="text-align: justify;">Pon atención en esta fase, será determinante para saber si tus diseños van por el buen camino. Recuerda que lo importante en esta prueba es sacar defectos a tus diseños.</p> <p style="text-align: justify;">Si quieres saber más, te dejamos <a href="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/test-de-usabilidad-web/" target="_blank" rel="noopener noreferrer" data-wplink-edit="true">este artículo</a>.</p> <h3 style="text-align: justify;"><strong>¡Enhorabuena! tus usuarios están teniendo una experiencia de 10 en tu app</strong></h3> <p style="text-align: justify;">Tras haber validado tus diseños con el test de usabilidad habrás pasado a preparar los mockups finales, es decir, a diseñar toda la parte de UI (User Interface).</p> <p style="text-align: justify;">Habrás publicado tu app y tus usuarios estarán comenzando a mandarte feedback de cómo está siendo su experiencia.</p> <p style="text-align: justify;">¡No te duermas en los laureles! siempre hay mejoras por hacer y posiblemente recibirás comentarios de usuarios a menudo en los que no terminan de comprender algo dentro de tu app. Es normal, y ese feedback es de agradecer.</p> <p style="text-align: justify;">El UX de tu app está en constante evolución, por eso es necesario que continúes realizando entrevistas de usuarios y tests de usabilidad con regularidad.</p> <div class="wpulike wpulike-default " ><div class="wp_ulike_general_class wp_ulike_is_not_liked"><button type="button" aria-label="Like Button" data-ulike-id="2903" data-ulike-nonce="cb68e07606" data-ulike-type="post" data-ulike-template="wpulike-default" data-ulike-display-likers="0" data-ulike-likers-style="popover" class="wp_ulike_btn wp_ulike_put_image wp_post_btn_2903"></button><span class="count-box wp_ulike_counter_up" data-ulike-counter-value="+1"></span> </div></div> <p>El artículo <a rel="nofollow" href="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/experiencia-de-usuario-en-aplicaciones-moviles/">Experiencia de usuario en aplicaciones móviles: diseña para y por tu target</a> aparece primero en <a rel="nofollow" href="http://www.inesem.es/revistadigital/">Revista Digital INESEM</a></p> ]]></content:encoded> <wfw:commentRss>https://www.inesem.es/revistadigital/diseno-y-artes-graficas/experiencia-de-usuario-en-aplicaciones-moviles/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item> <title>Así son los makerspace orientados a la creatividad y el arte</title> <link>https://www.inesem.es/revistadigital/diseno-y-artes-graficas/makerspace/</link> <comments>https://www.inesem.es/revistadigital/diseno-y-artes-graficas/makerspace/#respond</comments> <dc:creator><![CDATA[Miguel Escamilla González]]></dc:creator> <pubDate>Wed, 26 Aug 2020 07:59:48 +0000</pubDate> <category><![CDATA[Diseño Gráfico]]></category> <guid isPermaLink="false">https://www.inesem.es/revistadigital/diseno-y-artes-graficas/?p=2617</guid> <description><![CDATA[<p><img width="345" height="180" src="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2020/08/makerspace-345x180.jpg?x92914" class="attachment-thumbnail size-thumbnail wp-post-image" alt="makerspace" loading="lazy" style="float:left; margin:0 15px 15px 0;" />Los “makerspace” de creatividad y arte son espacios en los que artistas y estudiantes de diversas disciplinas se reúnen para colaborar en proyectos creativos.</p> <p>El artículo <a rel="nofollow" href="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/makerspace/">Así son los makerspace orientados a la creatividad y el arte</a> aparece primero en <a rel="nofollow" href="http://www.inesem.es/revistadigital/">Revista Digital INESEM</a></p> ]]></description> <content:encoded><![CDATA[<img width="345" height="180" src="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2020/08/makerspace-345x180.jpg?x92914" class="attachment-thumbnail size-thumbnail wp-post-image" alt="makerspace" loading="lazy" style="float:left; margin:0 15px 15px 0;" /> <p style="text-align: justify;">Los “makerspace” de creatividad y arte son espacios en los que artistas y estudiantes de diversas disciplinas se reúnen para colaborar en proyectos creativos. En estos lugares <strong>el principal objetivo es la experimentación</strong> con nuevos materiales y herramientas con el fin de crear nuevos proyectos.</p> <p style="text-align: justify;">Este tipo de espacios se basan en la metodología de <strong>“Learning by Doing”</strong> (aprender haciendo), en el que se consigue afianzar conocimientos basados en la experiencia propia, convirtiendo errores en pequeñas victorias.</p> <p style="text-align: justify;">Los makerspaces deberían estar suficientemente suministrados de recursos para llevar a cabo<strong> proyectos de creatividad</strong>: desde arcilla para moldear hasta ordenadores para arte digital. Cuanta más variedad de herramientas y materiales haya en el aula, más originales podrán ser los proyectos y más podrán experimentar los grupos de trabajo.</p> <p style="text-align: justify;">Una cita del <strong><em>Makerspace Playbook</em></strong> arroja algo de luz sobre este tema y despeja dudas:</p> <blockquote> <p style="text-align: justify;"><em data-rich-text-format-boundary="true">“Nadie que utilice el espacio necesita ser un experto, ni siquiera el profesor. Lo más importante es tener pasión y curiosidad por hacer en muchas formas diferentes. Una vez que haya establecido la seguridad y la competencia básica, los miembros pueden aprender a sí mismos lo que necesitan saber. Descubrimos que los proyectos que apasionan a un miembro son uno de los mejores motivadores para aprender”.</em></p> </blockquote> <h2 style="text-align: justify;">4 preguntas que debes plantearte antes de crear tu makerspace</h2> <p style="text-align: justify;">Si estás pensando en crear tu propio makerspace orientado a la creatividad y el arte, deberías plantearte estas cuatro preguntas antes de ponerte manos a la obra:</p> <ol class="rich-text editor-rich-text__editable block-editor-rich-text__editable is-selected" style="text-align: justify;" role="textbox" contenteditable="true" aria-multiline="true" aria-label="Escribe una lista…"> <li><strong data-rich-text-format-boundary="true">¿Qué objetivos tiene tu makerspace? </strong></li> <li><strong>¿Qué recursos tenemos para desarrollarlo?</strong></li> <li><strong>¿Cuánto espacio tenemos? </strong>Recuerda un makerspace debe realizar es lugares físicos.</li> <li><strong>¿Cómo puedo financiar los proyectos que quiero realizar?</strong></li> </ol> <p style="text-align: justify;">Tenemos que tener en cuenta todos estos factores antes de comenzar a construir un makerspace, no obstante hay formas de llevarlo a cabo si no tenemos suficientes medios.</p> <p style="text-align: justify;">Si no tienes suficientes recursos y no sabes cómo vas a poder financiar los materiales que usarán los grupos de trabajo, puedes proponer que <strong>cada integrante del makerspace use sus propios materiales</strong>, que traigan cosas que tienen por casa.</p> <p style="text-align: justify;">¿Necesitamos ordenadores? ¿Y si en vez de ordenadores planteamos los proyectos para que se puedan realizar con móviles?</p> <p style="text-align: justify;">Si no tienes un espacio en el que poder reunir a los integrantes del grupo, podéis reuniros en espacios públicos como <strong>bibliotecas</strong> o reservar algún <strong>aula coworking</strong>.</p> <p style="text-align: justify;">La creatividad en estos espacios no solo se trabaja en los proyectos que se vayan a realizar, sino también en el proceso de construcción del propio makerspace.</p> <h2 style="text-align: justify;">Que la creatividad te deje llevar y seguramente tu makerspace será un buen lugar para aprender</h2> <p style="text-align: justify;">Lo mejor de hacer y crear su Makerspace es que no hay una forma definitivamente correcta o incorrecta de abordarlo. Dejarse llevar por la creatividad y mezclar personas diversas hará que tu makerspace sea un lugar increíble <strong>no solamente para abordar el tema de la creatividad </strong>y el arte sino para aprender a ser mejores y convivir en sociedad. </p> <div class="wpulike wpulike-default " ><div class="wp_ulike_general_class wp_ulike_is_not_liked"><button type="button" aria-label="Like Button" data-ulike-id="2617" data-ulike-nonce="0c17c42718" data-ulike-type="post" data-ulike-template="wpulike-default" data-ulike-display-likers="0" data-ulike-likers-style="popover" class="wp_ulike_btn wp_ulike_put_image wp_post_btn_2617"></button><span class="count-box wp_ulike_counter_up" data-ulike-counter-value="+3"></span> </div></div> <p>El artículo <a rel="nofollow" href="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/makerspace/">Así son los makerspace orientados a la creatividad y el arte</a> aparece primero en <a rel="nofollow" href="http://www.inesem.es/revistadigital/">Revista Digital INESEM</a></p> ]]></content:encoded> <wfw:commentRss>https://www.inesem.es/revistadigital/diseno-y-artes-graficas/makerspace/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item> <title>El uso de la psicología del color en el diseño UX/UI</title> <link>https://www.inesem.es/revistadigital/diseno-y-artes-graficas/psicologia-del-color/</link> <comments>https://www.inesem.es/revistadigital/diseno-y-artes-graficas/psicologia-del-color/#respond</comments> <dc:creator><![CDATA[Miguel Escamilla González]]></dc:creator> <pubDate>Tue, 14 Jul 2020 10:02:55 +0000</pubDate> <category><![CDATA[Diseño Gráfico]]></category> <category><![CDATA[Diseño Web]]></category> <category><![CDATA[Edición y Postproducción Digital]]></category> <guid isPermaLink="false">https://www.inesem.es/revistadigital/diseno-y-artes-graficas/?p=2576</guid> <description><![CDATA[<p><img width="345" height="180" src="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2020/07/img_destacada-345x180.jpg?x92914" class="attachment-thumbnail size-thumbnail wp-post-image" alt="Psicología del color" loading="lazy" style="float:left; margin:0 15px 15px 0;" />¿Sabes cuál es el significado de los colores y cómo se relacionan con las marcas? En el artículo veremos como la psicología del color influye en la experiencia de usuario UX/UI y cuál es su importancia.</p> <p>El artículo <a rel="nofollow" href="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/psicologia-del-color/">El uso de la psicología del color en el diseño UX/UI</a> aparece primero en <a rel="nofollow" href="http://www.inesem.es/revistadigital/">Revista Digital INESEM</a></p> ]]></description> <content:encoded><![CDATA[<img width="345" height="180" src="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2020/07/img_destacada-345x180.jpg?x92914" class="attachment-thumbnail size-thumbnail wp-post-image" alt="Psicología del color" loading="lazy" style="float:left; margin:0 15px 15px 0;" /> <p style="text-align: justify;">Un diseñador UX/UI tiene como principal objetivo <strong>garantizar una navegación fácil</strong>, cómoda e intuitiva para el usuario que entra en una web o aplicación. La estructura de un sitio es importante, hay recursos como el <a href="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/diagrama-de-gutenberg/" target="_blank" rel="noopener noreferrer">Diagrama de Gutenberg</a> que nos ayuda a saber cómo organizar nuestro sitio web. Si te interesan este tipo de recursos, te dejamos estos <a href="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/trucos-usabilidad/" target="_blank" rel="noopener noreferrer">7 aspectos claves para mejorar la usabilidad web</a>.</p> <p style="text-align: justify;">No obstante, hay otros factores a tener en cuenta, uno de ellos consideramos imprescindible: <strong>el uso del color</strong>.</p> <p style="text-align: justify;">El color nos <strong>evoca emociones</strong> y<strong> sentimientos</strong> que son difíciles de conseguir con otros recursos. Una buena paleta de colores identificará tu web como un sitio de confianza, profesional, innovador, tecnológico, dependiendo del objetivo de la marca en cuestión.</p> <p style="text-align: justify;">La <strong>psicología del color</strong> ha sido de <strong>gran ayuda</strong> a lo largo de la historia, ya no solamente en el diseño, también en las Bellas Artes, en la arquitectura y nos va a seguir acompañando muchos años más, por eso es importante que conozcas sus significados y veas algunos ejemplos de cómo respira el color dentro de la web.</p> <h2 style="text-align: justify;"><strong>El color dentro de la marca</strong></h2> <p style="text-align: justify;">Cuando se crea una marca el color no se elige porque sí. A lo largo de los años se les ha dado un significado a los colores y en el diseño UX/UI estos colores transmiten unas emociones claras.</p> <h3 style="text-align: justify;"><strong>Azul</strong></h3> <p style="text-align: justify;">Sin duda el azul es <strong>uno de los colores más usados</strong> por las grandes empresas e instituciones. Representa simpatía, armonía, paciencia, eternidad, inteligencia.</p> <p style="text-align: justify;"><strong>¿Qué empresas suelen usar estos colores?</strong> Los bancos.</p> <p style="text-align: justify;"><strong>¿Por qué?</strong> Porque quieren trasmitir esa idea de confianza duradera, combinándose con tonos claros que representan la honradez y la transparencia. Te invitamos a ver las webs de <em>Barclays</em>, <em>BBVA</em>, <em>Banco Sabadell</em>, <em>BMN</em> o <em>Caixa Bank</em> para comprobarlo. </p> <p style="text-align: justify;">También las <strong>ONG</strong> como <em>Unicef</em>, <em>Ayuda en Acción</em> y <em>Manos Unidas</em> utilizan este color.</p> <p><img loading="lazy" class="aligncenter size-full wp-image-2578" src="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2020/07/1-2.jpg?x92914" alt="Psicología del color. Azul" width="500" height="300" srcset="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2020/07/1-2.jpg 500w, https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2020/07/1-2-300x180.jpg 300w" sizes="(max-width: 500px) 100vw, 500px" /></p> <h3 style="text-align: justify;"><strong>Rojo</strong></h3> <p style="text-align: justify;">Tradicionalmente relacionado con el amor, la pasión, la fuerza, el calor, el dinamismo y el valor.</p> <p style="text-align: justify;">¿Te has planteado qué empresas suelen usar este color? Las dedicadas a la automoción. Sí,<strong> las marcas de coches</strong> y <strong>motos</strong> más importantes del mercado suelen contar con este color. Tienes el ejemplo de <em>Fiat</em>, <em>Mitsubishi</em> <em>Motors</em>, <em>Honda</em>, <em>Toyota</em> o <em>Ferrari</em>.</p> <p><img loading="lazy" class="aligncenter size-full wp-image-2587" src="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2020/07/2-ok-3.jpg?x92914" alt="Psicología del color. Rojo" width="500" height="279" srcset="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2020/07/2-ok-3.jpg 500w, https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2020/07/2-ok-3-300x167.jpg 300w" sizes="(max-width: 500px) 100vw, 500px" /></p> <h3 style="text-align: justify;"><strong>Amarillo</strong></h3> <p style="text-align: justify;">Un color cálido que nos evoca a diversión, optimismo, energía (por su relación con el Sol), espontaneidad y alegría.</p> <p style="text-align: justify;">Aunque es tradicionalmente usado como un <strong>Call to Action</strong> porque es uno de los colores más vivos y que más llaman la atención hay empresas que lo utilizan como color corporativo y en su web lo tienen muy presente.</p> <p style="text-align: justify;">Te mostramos el ejemplo de <em>Hertz</em>.</p> <p><img loading="lazy" class="aligncenter size-full wp-image-2580" src="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2020/07/3-1.jpg?x92914" alt="Psicología del color. Amarillo" width="500" height="300" srcset="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2020/07/3-1.jpg 500w, https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2020/07/3-1-300x180.jpg 300w" sizes="(max-width: 500px) 100vw, 500px" /></p> <h3 style="text-align: justify;"><strong>Verde</strong></h3> <p style="text-align: justify;">Sin duda, el verde es uno de esos colores que <strong>fácilmente lo relacionamos con algo muy específico</strong>: naturaleza, esperanza y juventud. Es inevitable encontrarnos aquí organizaciones ecologistas tan importantes como <em>Green Peace</em>, que transmiten su mensaje de sostenibilidad, como no podía ser de otra forma, a través del verde.</p> <p><img loading="lazy" class="aligncenter size-full wp-image-2581" src="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2020/07/4.jpg?x92914" alt="Psicología del color. Verde" width="500" height="300" srcset="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2020/07/4.jpg 500w, https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2020/07/4-300x180.jpg 300w" sizes="(max-width: 500px) 100vw, 500px" /></p> <h3 style="text-align: justify;"><strong>Naranja</strong></h3> <p style="text-align: justify;">El color naranja nos habla de creatividad, originalidad, calidez y hogar. ¿Sabes qué <strong>importante empresa</strong> utiliza este color en su web? <em>McDonalds</em>.</p> <p style="text-align: justify;">Sí, a pesar de que el gigante de la comida rápida <strong>no usa el color naranja en su logotipo</strong>, hace uso del rojo y amarillo para crear este naranja tan característico con el que inunda su web, atrapándonos, haciéndonos ver que sus restaurantes son sitios acogedores y donde casi podemos respirar ese olor tan característico.</p> <p><img loading="lazy" class="aligncenter size-full wp-image-2582" src="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2020/07/5.jpg?x92914" alt="Psicología del color. Naranja" width="500" height="300" srcset="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2020/07/5.jpg 500w, https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2020/07/5-300x180.jpg 300w" sizes="(max-width: 500px) 100vw, 500px" /></p> <h3 style="text-align: justify;"><strong>Violeta</strong></h3> <p style="text-align: justify;">El violeta es un color que nos habla de elegancia, fantasía e imaginación. Es un color llamativo y no es de extrañar que importantes <strong>marcas de dulces</strong> y <strong>chocolates</strong> utilicen este color para llegar a los más pequeños. Es el ejemplo de <em>Milka</em> y<a href="https://www.cadbury.co.uk/" target="_blank" rel="nofollow noopener noreferrer"><em> Cadbury</em></a>.</p> <p><img loading="lazy" class="aligncenter size-full wp-image-2585" src="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2020/07/7.jpg?x92914" alt="Psicología del color. Violeta" width="500" height="300" srcset="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2020/07/7.jpg 500w, https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2020/07/7-300x180.jpg 300w" sizes="(max-width: 500px) 100vw, 500px" /></p> <h3 style="text-align: justify;"><strong>Blanco</strong></h3> <p style="text-align: justify;">El blanco tradicionalmente se ha relacionado con la pureza. En diseño UX/UI es un constante, pero <strong>no suele funcionar como único color</strong>. El blanco suele ir acompañado de colores oscuros, para crear un contraste y hacer las webs más memorables. Las <strong>marcas de moda</strong> lo saben, y lo llevan a sus webs. Es el ejemplo de <em>Louis Vuitton</em>, <a href="https://www.chanel.com/es_ES/" target="_blank" rel="nofollow noopener noreferrer"><em>Chanel</em></a>, <em>Balenciaga</em> o <em>Zara</em>. Esta última, usa el blanco como un constante, acompañándose de grandes textos en negro, creando espacios “vacíos” dando una imagen limpia a la par que elegante. Este es el ejemplo de cómo una web y el uso correcto del color <strong>habla de tu marca</strong>.</p> <p><img loading="lazy" class="aligncenter size-full wp-image-2586" src="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2020/07/8.jpg?x92914" alt="Psicología del color. Blanco" width="500" height="300" srcset="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2020/07/8.jpg 500w, https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2020/07/8-300x180.jpg 300w" sizes="(max-width: 500px) 100vw, 500px" /></p> <h3 style="text-align: justify;"><strong>Negro</strong></h3> <p style="text-align: justify;">Elegancia, sofisticación, seriedad, lujo. De todo esto nos habla el color negro. Pero, ¿qué empresa es capaz de inundar toda web de negro? Pues pocas, porque también se le ha relacionado históricamente con el color de la muerte y esto no convence del todo a las grandes empresas. Otra desventaja es que <strong>el ojo humano lee mejor un texto oscuro sobre un fondo claro que al contrario</strong>. Hay agencias de Publicidad y Diseño que sí usan este color para <strong>desmarcarse</strong> de sus competidores y eso es lo que vamos a explicar a continuación.</p> <h2 style="text-align: justify;"><strong>¡Que la psicología del color no te limite!</strong></h2> <p style="text-align: justify;">La teoría del color, sin embargo, es en parte ciencia y en parte arte. El hecho de que un color se asocie generalmente con un sentimiento o estado de ánimo particular <strong>no significa que no se pueda percibir de otras maneras al combinarlo con diferentes colores</strong>, alterar el tono exacto o variar la forma en que se usa entre otros elementos de diseño.</p> <p style="text-align: justify;">Es también labor del diseñador entender cuál es el objetivo de la empresa y jugar con el color, crear variaciones, diferentes tonalidades, siempre respetando la filosofía de la empresa.</p> <p style="text-align: justify;">Te hemos puesto el ejemplo de que el rojo es usado por muchas empresas de automoción pero si de repente le das un color verde, amarillo o violeta no pasaría nada. Es decir, puede resultar beneficioso porque estás desmarcándote de tus competidores, haciendo que tu marca sea fácilmente recordable entre las demás.</p> <h3 style="text-align: justify;"><strong>Haz un estudio de tus competidores y desmárcate</strong></h3> <p style="text-align: justify;">Captura las webs de tus competidores y haz una <strong>revisión</strong> a los colores que utilizan, esta es la mejor forma de asegurarnos si estamos haciendo un diseño original dentro del sector o por si el contrario estamos repitiendo la vieja estructura aburrida ya aprendida que todos los demás utilizan. Haz que cada diseño que hagas sea memorable.</p> <h2 style="text-align: justify;"><strong>Aplica la regla 60 – 30 – 10</strong></h2> <p style="text-align: justify;">Si no tienes muy claro cómo combinar colores y en qué medida, deberías conocer esta regla.</p> <p style="text-align: justify;">La <strong>regla 60 – 30 – 10</strong> es conocida como la proporción ideal del color y es aplicada en diferentes aspectos del diseño: gráfico, moda e interior.</p> <p style="text-align: justify;">Esta regla explica que podemos usar tres colores completamente distintos pero que lo verdaderamente importante es tener un control en la cantidad de color que usamos de cada uno.</p> <ul style="text-align: justify;"> <li>El <strong>color dominante</strong> de la marca, que normalmente será asociado como nuestro color corporativo, inundará el 60% de nuestra web.</li> <li>El <strong>30%</strong> irá destinado a un color que acompañará al color dominante, pudiendo hacer juegos y composiciones de entre ambos.</li> <li>Y el último color, el menos presente en la web, tendrá solamente un 10% de protagonismo. Normalmente se usaría para <strong>Call to Actions</strong> que nos faciliten la navegación en la web.</li> </ul> <h2 style="text-align: justify;"><strong>En definitiva, haz caso a la psicología del color pero no tanto.</strong></h2> <p style="text-align: justify;">Ya conoces la psicología del color. A partir de ahí, puedes aprovechar estos nuevos conocimientos para crear paletas de colores más variadas y sofisticadas para tus diseños.</p> <p style="text-align: justify;">Una paleta de colores bien diseñada, particularmente es una que incluye algunos tonos inesperados, <strong>no es simplemente una elección estética</strong>. Puede tener efectos psicológicos significativos en los usuarios, que los diseñadores de UX/UI deberían aprovechar para crear mejores experiencias.</p> <div class="wpulike wpulike-default " ><div class="wp_ulike_general_class wp_ulike_is_not_liked"><button type="button" aria-label="Like Button" data-ulike-id="2576" data-ulike-nonce="90d5b6fd2f" data-ulike-type="post" data-ulike-template="wpulike-default" data-ulike-display-likers="0" data-ulike-likers-style="popover" class="wp_ulike_btn wp_ulike_put_image wp_post_btn_2576"></button><span class="count-box wp_ulike_counter_up" data-ulike-counter-value="+5"></span> </div></div> <p>El artículo <a rel="nofollow" href="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/psicologia-del-color/">El uso de la psicología del color en el diseño UX/UI</a> aparece primero en <a rel="nofollow" href="http://www.inesem.es/revistadigital/">Revista Digital INESEM</a></p> ]]></content:encoded> <wfw:commentRss>https://www.inesem.es/revistadigital/diseno-y-artes-graficas/psicologia-del-color/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item> <title>Test de Usabilidad: ¿Qué es y por qué mi sitio web lo necesita?</title> <link>https://www.inesem.es/revistadigital/diseno-y-artes-graficas/test-de-usabilidad-web/</link> <comments>https://www.inesem.es/revistadigital/diseno-y-artes-graficas/test-de-usabilidad-web/#respond</comments> <dc:creator><![CDATA[Miguel Escamilla González]]></dc:creator> <pubDate>Tue, 12 Nov 2019 08:38:40 +0000</pubDate> <category><![CDATA[Diseño Web]]></category> <guid isPermaLink="false">https://www.inesem.es/revistadigital/diseno-y-artes-graficas/?p=2474</guid> <description><![CDATA[<p><img width="345" height="180" src="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2019/11/img_destacada_test-usabilidad-345x180.jpg?x92914" class="attachment-thumbnail size-thumbnail wp-post-image" alt="¿Qué es un test de usabilidad web?" loading="lazy" style="float:left; margin:0 15px 15px 0;" />La usabilidad web es la capacidad que tiene una web de ser útil para un usuario que navega por ella, teniendo como objetivo garantizar la calidad de la experiencia al interactuar con nuestro sitio.</p> <p>El artículo <a rel="nofollow" href="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/test-de-usabilidad-web/">Test de Usabilidad: ¿Qué es y por qué mi sitio web lo necesita?</a> aparece primero en <a rel="nofollow" href="http://www.inesem.es/revistadigital/">Revista Digital INESEM</a></p> ]]></description> <content:encoded><![CDATA[<img width="345" height="180" src="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2019/11/img_destacada_test-usabilidad-345x180.jpg?x92914" class="attachment-thumbnail size-thumbnail wp-post-image" alt="¿Qué es un test de usabilidad web?" loading="lazy" style="float:left; margin:0 15px 15px 0;" /> <p style="text-align: justify;">Vivimos en una sociedad cada vez más acelerada, valoramos el tiempo que dedicamos a realizar una actividad y esta prontitud se manifiesta también al navegar por la red. ¿No te ha pasado que has querido pedir comida a domicilio usando Internet y has terminado llamando por teléfono al restaurante porque no te aclarabas con el sitio web? Esto sucede más de lo que creemos porque somos impacientes y si no encontramos lo que buscamos rápidamente lo dejamos. Por eso mismo una buena labor en lo que a Investigación de Experiencia de Usuario se refiere, o lo que hoy denominan más comúnmente “User Experience Research”, convertirá un nuevo visitante de tu sitio web en potencial cliente. <strong>¿Quieres saber cómo garantizar el éxito de tu web?</strong> Continúa leyendo.</p> <h2 style="text-align: justify;">¿Qué es un test de usabilidad web?</h2> <p style="text-align: justify;">Para entender qué es un test de usabilidad web o prueba, ante todo hay que conocer el concepto “usabilidad”. Te invitamos a visitar este artículo sobre <strong><a href="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/usabilidad-web/">Usabilidad Web</a>,</strong> en el que se explica qué es y en qué puede beneficiar a tu empresa.</p> <p style="text-align: justify;">La usabilidad web la podemos resumir como la <strong>capacidad que tiene una web de ser útil para un usuario</strong> que navega por ella, teniendo como principal objetivo garantizar la calidad de la experiencia al interactuar con nuestro sitio.</p> <p style="text-align: justify;">Aquí el papel del diseñador de experiencias de usuario (Diseñador UX) es primordial, porque gracias al planteamiento de un prototipo de interfaz cómodo y fácil garantizará que la experiencia del usuario sea satisfactoria.</p> <p style="text-align: justify;">Sin embargo, un diseño como cualquier otro trabajo necesita una evaluación. Es aquí donde entra en juego la importancia del <strong>test de usabilidad web</strong>, el cual nos ayudará a detectar los problemas a los que se enfrentan nuestros usuarios al navegar por nuestra web.</p> <p style="text-align: justify;">Los <strong>objetivos</strong> de esta prueba son observar y analizar el comportamiento e interactividad media de los usuarios que visitan nuestro sitio y asegurar una experiencia de usuario positiva.</p> <p style="text-align: justify;"><img loading="lazy" class="size-full wp-image-2478 aligncenter" src="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2019/11/img002.jpg?x92914" alt="" width="500" height="300" srcset="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2019/11/img002.jpg 500w, https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2019/11/img002-300x180.jpg 300w" sizes="(max-width: 500px) 100vw, 500px" /></p> <h2 style="text-align: justify;">¿Cómo se realiza la prueba?</h2> <p style="text-align: justify;">Para empezar hay que dejar claro y asumir que no se puede evaluar una experiencia de usuario sin usuarios reales, así que pregunta a tu entorno y reúne un grupo de amigos y familiares que te puedan ayudar. Eso sí, déjales claro que las críticas constructivas son bien recibidas, recuerda que <strong>el objetivo principal, al fin y al cabo, es sacar fallos a tu web</strong>. Recuerda que una plataforma que necesite de un Manual de Usuario para explicarla, carece de un buen diseño de experiencias de usuario.</p> <p style="text-align: justify;">Cada uno de ellos tendrá una función frente a la pantalla y tú debes poner los objetivos: “Debes llegar desde la pantalla de inicio hasta la tienda online y comprar una taza”, “Entra en el blog y filtra por publicaciones con más likes y deja un comentario en una de ellas”, “Solicita información entrando en la página de contacto y rellena el formulario”, etcétera.</p> <p style="text-align: justify;">Si alguno de ellos se pierde por el camino o simplemente no sabe qué hacer sabrás que algo está fallando. No te preocupes, <strong>todo tiene solución</strong>, sabemos que a veces parece difícil salir de un diseño que hemos planteado pensando que era el más intuitivo y para evitar bloqueos te recomendamos que preguntes a las mismas personas que has seleccionado para realizar el test cómo plantearían ellos una solución a ese problema. Mientras tanto, coge papel y lápiz y ve pensando una solución bella y creativa.</p> <h2 style="text-align: justify;">¿Cuántas personas necesito para realizar el test?</h2> <p style="text-align: justify;">Según <em>Jakob Nielsen</em>, fundador de <em>Nielsen & Norman Group</em>, una de las personalidades más respetadas a nivel mundial en lo que a usabilidad web se refiere, es suficiente con seleccionar un grupo de <strong>entre 5-10 personas</strong> ya que nos garantizará una efectividad del 85%, suficiente para darnos cuenta de que algo está fallando.</p> <p style="text-align: justify;"><img loading="lazy" class="size-full wp-image-2477 aligncenter" src="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2019/11/img001.jpg?x92914" alt="" width="500" height="300" srcset="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2019/11/img001.jpg 500w, https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2019/11/img001-300x180.jpg 300w" sizes="(max-width: 500px) 100vw, 500px" /></p> <h2 style="text-align: justify;">¿Qué perfiles de personas debo seleccionar?</h2> <p style="text-align: justify;">Es más importante el perfil de la persona que seleccionamos que el número.</p> <p style="text-align: justify;">Ante todo, debemos investigar nuestra web y conocer cuál es nuestro público, analizando el perfil medio y obteniendo el <em>target</em> de nuestro sitio. Jakob Nielsen afirma que es imprescindible realizar el test a personas que cumplan con ese perfil porque vamos a diseñar la web a favor del visitante medio.</p> <p style="text-align: justify;">Sin embargo, te recomendamos que además te asegures y hagas estos tests con personas que no estén tan familiarizadas con las nuevas tecnologías. Hay veces que al plantear un diseño agradable a la vista olvidamos la interacción del usuario, <strong>debemos asegurarnos que sea intuitiva para cualquier persona que entre</strong>.</p> <h2 style="text-align: justify;">¿Cuándo debo realizarlo?</h2> <p style="text-align: justify;">Los test de usabilidad web hay que realizarlos periódicamente. Los diseñadores de INESEM siempre trabajamos mano a mano con compañeros que nos guían en el prototipado de nuestra interfaz. Puede que un botón que para el diseñador es intuitivo pase desapercibido a los ojos del usuario y quizás tan solo sea necesario modificar el color o hacer una pequeña variación para lograr un gran cambio.</p> <p style="text-align: justify;">Tampoco sirve de nada realizar estas pruebas antes de tener un producto incompleto o en fase de diseño.</p> <h2 style="text-align: justify;">Si no puedo reunir un grupo de personas para realizar el test, ¿qué hago?</h2> <p style="text-align: justify;">Existen otros tipos de pruebas que nos ayudarán a encontrar problemas en la red.</p> <ul style="text-align: justify;"> <li>Las pruebas automatizadas, <strong>el clásico test A/B</strong>: dividiremos los usuarios de nuestro sitio web en dos grupos. Al primer grupo (A), le mostraremos nuestra web sin modificaciones, tal y como la tenemos actualmente. Al segundo grupo (B), le enseñaremos la web con los cambios realizados a posibles problemas que se nos han planteado durante el proceso creativo. En un test mostraremos enlaces sin subrayado, botones sin hover, tipografías diferentes, etcétera, finalmente obtendrás unas estadísticas y resultados que mostrarán si la conversión es a favor o no.</li> <li><strong>Google Analytics</strong>: la herramienta que lo mide todo. Aunque es cierto que los números no lo dicen todo, es una buena forma de plantearse preguntas como: “¿Dónde clican los usuarios?, ¿Dónde no lo hacen?, ¿Por qué ignoran este bloque?, ¿Por qué pulsan en este botón y no en el otro?”. Si te interesa conocer esta herramienta, te invitamos a visitar la<strong> <a href="https://www.inesem.es/revistadigital/gestion-empresarial/metricas-basicas-de-google-analytics/">Guía de Google Analytics</a>.</strong></li> </ul> <p style="text-align: justify;"><img loading="lazy" class="size-full wp-image-2476 aligncenter" src="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2019/11/img003.jpg?x92914" alt="" width="500" height="300" srcset="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2019/11/img003.jpg 500w, https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2019/11/img003-300x180.jpg 300w" sizes="(max-width: 500px) 100vw, 500px" /></p> <ul style="text-align: justify;"> <li><strong>La prueba de los 5 segundos</strong>. ¿Sabías que el 80% de las personas que entran en una nueva web y no encuentran rápidamente lo que buscan, la abandonan en cinco segundos? Es por eso que hay que hacer un esfuerzo mayor en el diseño de experiencias y garantizar que la información más esencial de tu marca-empresa se muestre rápidamente en un vistazo, para captar la atención del nuevo visitante y hacer que se quede. Para ello, hay una plataforma muy interesante que se llama<strong> <em><a href="https://fivesecondtest.com/">FiveSecondTest</a></em>,</strong> en la que podrás mostrar a usuarios reales en remoto el diseño de tu página web, interactuar con ellos y como finalidad, comprobar si pasa la prueba de los 5 segundos y transmite el mensaje adecuado.</li> </ul> <p style="text-align: justify;"><img loading="lazy" class="size-full wp-image-2475 aligncenter" src="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2019/11/img004.jpg?x92914" alt="" width="500" height="300" srcset="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2019/11/img004.jpg 500w, https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2019/11/img004-300x180.jpg 300w" sizes="(max-width: 500px) 100vw, 500px" /></p> <h2>¡Optimiza al máximo tu sitio web!</h2> <p style="text-align: justify;">Ahora que ya conoces diferentes formas de evaluar y medir la usabilidad de tu sitio web es el momento de ir a la acción. <strong>Entiende los obstáculos que tus usuarios encuentran en tu sitio web o app y ¡elimínalos hoy!</strong></p> <div class="wpulike wpulike-default " ><div class="wp_ulike_general_class wp_ulike_is_not_liked"><button type="button" aria-label="Like Button" data-ulike-id="2474" data-ulike-nonce="cdf2ce86f9" data-ulike-type="post" data-ulike-template="wpulike-default" data-ulike-display-likers="0" data-ulike-likers-style="popover" class="wp_ulike_btn wp_ulike_put_image wp_post_btn_2474"></button><span class="count-box wp_ulike_counter_up" data-ulike-counter-value="+3"></span> </div></div> <p>El artículo <a rel="nofollow" href="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/test-de-usabilidad-web/">Test de Usabilidad: ¿Qué es y por qué mi sitio web lo necesita?</a> aparece primero en <a rel="nofollow" href="http://www.inesem.es/revistadigital/">Revista Digital INESEM</a></p> ]]></content:encoded> <wfw:commentRss>https://www.inesem.es/revistadigital/diseno-y-artes-graficas/test-de-usabilidad-web/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item> <title>Cómo lograr un buen diseño de formularios web</title> <link>https://www.inesem.es/revistadigital/diseno-y-artes-graficas/diseno-de-formularios-web/</link> <comments>https://www.inesem.es/revistadigital/diseno-y-artes-graficas/diseno-de-formularios-web/#respond</comments> <dc:creator><![CDATA[Miguel Escamilla González]]></dc:creator> <pubDate>Thu, 26 Sep 2019 10:11:18 +0000</pubDate> <category><![CDATA[Diseño Gráfico]]></category> <category><![CDATA[Diseño Web]]></category> <category><![CDATA[adobe]]></category> <category><![CDATA[diseñadores]]></category> <category><![CDATA[diseño]]></category> <category><![CDATA[diseño gráfico]]></category> <category><![CDATA[maquetación]]></category> <category><![CDATA[marca]]></category> <category><![CDATA[Marketing y Comunicación]]></category> <category><![CDATA[photoshop]]></category> <category><![CDATA[trucos]]></category> <guid isPermaLink="false">https://www.inesem.es/revistadigital/diseno-y-artes-graficas/?p=2445</guid> <description><![CDATA[<p><img width="345" height="180" src="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2019/09/img_Destacada-345x180.jpg?x92914" class="attachment-thumbnail size-thumbnail wp-post-image" alt="Diseño de formularios web" loading="lazy" style="float:left; margin:0 15px 15px 0;" />Definir un buen diseño de formularios web es un tema peliagudo, ya que siempre va a depender del objetivo concreto de la marca y de la finalidad que tenga el formulario en cuestión. Sin embargo, sí que deben existir elementos en común y tener en cuenta ciertos aspectos para que nuestro formulario funcione.</p> <p>El artículo <a rel="nofollow" href="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/diseno-de-formularios-web/">Cómo lograr un buen diseño de formularios web</a> aparece primero en <a rel="nofollow" href="http://www.inesem.es/revistadigital/">Revista Digital INESEM</a></p> ]]></description> <content:encoded><![CDATA[<img width="345" height="180" src="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2019/09/img_Destacada-345x180.jpg?x92914" class="attachment-thumbnail size-thumbnail wp-post-image" alt="Diseño de formularios web" loading="lazy" style="float:left; margin:0 15px 15px 0;" /><p style="text-align: justify;">Definir un buen diseño de formularios web es un tema peliagudo, ya que siempre va a depender del objetivo concreto de la marca y de la finalidad que tenga el formulario en cuestión (asesoría sobre un tema en concreto, pedidos de productos o comida a domicilio, búsquedas de vuelos, etc).</p> <p style="text-align: justify;">Sin embargo, sí que <strong>deben existir elementos en común</strong> y tener en cuenta ciertos aspectos para que nuestro formulario funcione.</p> <h2 style="text-align: justify;">El formulario será un fracaso si no tenemos claro nuestro objetivo</h2> <p style="text-align: justify;">Tenerlo claro en cuanto a diseño y dejárselo claro también al usuario. Este debe saber<strong> qué va a obtener por rellenar sus datos</strong>, hay que tener en cuenta que somos reacios a facilitar nuestros datos personales. Hay que ser<strong> concisos</strong> en cuanto a texto y mandar un <strong>mensaje directo</strong>.</p> <p style="text-align: justify;">En cualquier formulario es prioritario pedir los datos de contacto y nombres del usuario, al fin y al cabo otro de los objetivos de cualquier formulario es el de conseguir cada vez más público. De esta forma, no se nos escaparán.</p> <p style="text-align: justify;">No obstante, hay que <strong>pedir la información necesaria</strong> y que los campos a completar no sean más de cinco o seis, porque el usuario puede cansarse o dejar la solicitud de información para más adelante, lo que conllevaría (en un alto porcentaje) la pérdida del usuario.</p> <h2 style="text-align: justify;">Inspirarnos en otros… ¿por qué no?</h2> <p style="text-align: justify;">Las grandes empresas saben muy bien cómo estructurar los formularios y qué hacer para que el mayor número de personas los completen con sus datos.</p> <p style="text-align: justify;">Teniendo claro cuál es el objetivo de nuestro formulario, podremos <strong>inspirarnos en la competencia</strong> o en empresas de otros sectores.</p> <p style="text-align: justify;">Os presentamos algunos ejemplos, de sectores diferentes, y del uso que hacen del formulario en sus diferentes objetivos:</p> <h3 style="text-align: justify;">El inicio de sesión de AliExpress.</h3> <p style="text-align: justify;">Antes de nada pongámonos en situación. <em>Aliexpress</em> es una tienda en línea fundada en 2010 formada por pequeñas empresas de China y de otros lugares que ofrece productos para compradores internacionales.</p> <p style="text-align: justify;">El objetivo de esta gran empresa es enviar a domicilio los productos que compramos el línea. <strong>Nos ofrecen comodidad</strong>.</p> <p style="text-align: justify;">Esta comodidad se aprecia desde el primer momento en el que nos registramos/iniciamos sesión en la página. A diferencia de otras empresas del mismo sector, Aliexpress nos permite acceder rápidamente usando cualquier de nuestras redes sociales (<em>Facebook, Google, Instagram, Twitter, Pinterest, Vk</em>, entre otros). Nos ahorra de esta forma el molesto proceso de ingresar rellenando nuestros datos.</p> <p style="text-align: justify;">Es por eso que te aconsejamos añadir un campo de<em> Autocompletar</em> con los datos de Facebook.</p> <p style="text-align: justify;"><img loading="lazy" class="size-full wp-image-2450 aligncenter" src="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2019/09/aliexpress1.jpg?x92914" alt="" width="328" height="426" /></p> <h3 style="text-align: justify;">Asesoría de Legalitas.</h3> <p style="text-align: justify;">Legalitas es una empresa que se dedica a la <strong>asesoría jurídica a distancia.</strong></p> <p style="text-align: justify;">En este caso, el objetivo del formulario que nos presenta la marca es el de asesorar al cliente en materia jurídica por teléfono, por eso mismo nos presentan dos formularios.</p> <p style="text-align: justify;">El primero y el más llamativo, nos persigue a lo largo del scroll de la página, en la parte superior de nuestra pantalla y es tan fácil de rellenar como poner nuestro número de teléfono (sin la necesidad de abrir una nueva ventana o salir de la página de navegación) y así el asesor se encargaría de<strong> llamarnos para responder nuestras dudas.</strong></p> <p style="text-align: justify;">El segundo funciona a modo de botón (LLÁMAME GRATIS) y funciona como un <strong><em>Call to Action</em></strong> (más adelante nos detendremos a explicarlo), y al pulsarlo nos abre una ventana modal pidiéndonos solamente el número de teléfono.</p> <p style="text-align: justify;">La empresa ya tiene nuestros datos de contacto para asesorar e incluso para hacer envíos de SMS para futuras ofertas y promociones.</p> <p style="text-align: justify;"><strong> <img loading="lazy" class="size-full wp-image-2449 aligncenter" src="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2019/09/03_img.jpg?x92914" alt="" width="500" height="300" srcset="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2019/09/03_img.jpg 500w, https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2019/09/03_img-300x180.jpg 300w" sizes="(max-width: 500px) 100vw, 500px" /></strong></p> <h2 style="text-align: justify;">Cuida mucho los Call to Action</h2> <p style="text-align: justify;">Los usuarios deben saber en todo momento qué están completando y qué conseguirán al rellenar el formulario con sus datos. Es por eso que es de vital importancia cuidar las llamada de atención o Call to Action, que son los botones que nos encontramos al rellenar el formulario y al enviarlo.</p> <p style="text-align: justify;"><strong>Cuidar el mensaje del Call to Action es importante</strong>. Te pondré un ejemplo:</p> <p style="text-align: justify;">Si estás diseñando un formulario para una empresa de telefonía móvil y el formulario tiene la finalidad de asesorar y dar información, lo lógico sería usar un texto que funcionaría como Call to Action, en el que pondría<strong> «QUIERO INFORMARME»</strong>,<strong> «SOLICITAR INFORMACIÓN»</strong>, <strong>«¡LLAMADME!»</strong>. En definitiva, usar mensajes claros que refuercen la finalidad de la acción.</p> <p style="text-align: justify;"><img loading="lazy" class="size-full wp-image-2448 aligncenter" src="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2019/09/02_img.jpg?x92914" alt="" width="500" height="300" srcset="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2019/09/02_img.jpg 500w, https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2019/09/02_img-300x180.jpg 300w" sizes="(max-width: 500px) 100vw, 500px" /></p> <h2 style="text-align: justify;">No te olvides de la Política de Privacidad</h2> <p style="text-align: justify;">Recuerda dejar un espacio al final del formulario, justo antes del Call to Action, donde el usuario pueda dar su consentimiento al tratamiento de sus datos y pueda leer todo lo relacionado con la <a href="https://www.inesem.es/revistadigital/gestion-empresarial/como-aplicar-el-nuevo-reglamento-de-proteccion-de-datos-en-marketing-digital/" target="_blank" rel="noopener noreferrer"><strong>Política de Protección de Datos</strong></a>. Será suficiente con un<strong> check</strong> y “<strong>He leído y acepto la Política de Privacidad</strong>”. Recuerda añadir un enlace a la información.</p> <p style="text-align: justify;"><strong> <img loading="lazy" class="size-full wp-image-2451 aligncenter" src="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2019/09/05_img.jpg?x92914" alt="" width="500" height="300" srcset="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2019/09/05_img.jpg 500w, https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2019/09/05_img-300x180.jpg 300w" sizes="(max-width: 500px) 100vw, 500px" /></strong></p> <h2 style="text-align: justify;">Puedes usar plantillas para tu formulario</h2> <p style="text-align: justify;">Si no encuentras un diseño apropiado para el formulario que necesitas, siempre podrás recurrir a páginas que te presentan plantillas para que las modifiques con la información que quieres transmitir.</p> <p style="text-align: justify;">Nosotros te recomendamos <a href="https://www.typeform.com/es/" target="_blank" rel="nofollow noopener noreferrer">TypeForm</a>, una web dedicada a la producción de plantillas para tus formularios. Encontrarás desde la plantilla más clásica y sencilla hasta la más original y llamativa.</p> <p style="text-align: justify;">Si buscas una opción gratuita, te recomendamos<a href="https://www.123formbuilder.com/es/" target="_blank" rel="nofollow noopener noreferrer"> 123formbuilder</a>.</p> <h2 style="text-align: justify;">Ahora te toca a ti.</h2> <p style="text-align: justify;">Ya sabes lo principal para hacer un formulario efectivo.</p> <ul style="text-align: justify;"> <li>Decide el objetivo.</li> <li>Plantea una estructura coherente al objetivo.</li> <li>Presta atención a los botones y Call to Actions.</li> </ul> <p style="text-align: justify;">¡Adelante con esos diseños!</p> <div class="wpulike wpulike-default " ><div class="wp_ulike_general_class wp_ulike_is_not_liked"><button type="button" aria-label="Like Button" data-ulike-id="2445" data-ulike-nonce="c7dc7edff4" data-ulike-type="post" data-ulike-template="wpulike-default" data-ulike-display-likers="0" data-ulike-likers-style="popover" class="wp_ulike_btn wp_ulike_put_image wp_post_btn_2445"></button><span class="count-box wp_ulike_counter_up" data-ulike-counter-value="+1"></span> </div></div> <p>El artículo <a rel="nofollow" href="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/diseno-de-formularios-web/">Cómo lograr un buen diseño de formularios web</a> aparece primero en <a rel="nofollow" href="http://www.inesem.es/revistadigital/">Revista Digital INESEM</a></p> ]]></content:encoded> <wfw:commentRss>https://www.inesem.es/revistadigital/diseno-y-artes-graficas/diseno-de-formularios-web/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item> <title>Diagrama de Gutenberg: su importancia en el diseño web</title> <link>https://www.inesem.es/revistadigital/diseno-y-artes-graficas/diagrama-de-gutenberg/</link> <comments>https://www.inesem.es/revistadigital/diseno-y-artes-graficas/diagrama-de-gutenberg/#respond</comments> <dc:creator><![CDATA[Miguel Escamilla González]]></dc:creator> <pubDate>Mon, 08 Jul 2019 08:45:41 +0000</pubDate> <category><![CDATA[Diseño Web]]></category> <category><![CDATA[diagrama]]></category> <category><![CDATA[diseño]]></category> <category><![CDATA[gutenberg]]></category> <category><![CDATA[Usabilidad]]></category> <category><![CDATA[web]]></category> <guid isPermaLink="false">http://www.inesem.es/revistadigital/diseno-y-artes-graficas/?p=1418</guid> <description><![CDATA[<p><img width="345" height="180" src="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2019/07/diagrama-de-gutenberg-345x180.jpg?x92914" class="attachment-thumbnail size-thumbnail wp-post-image" alt="diagrama de gutenberg" loading="lazy" style="float:left; margin:0 15px 15px 0;" />En un mundo que gira en torno a Internet y en el que estamos conectados a golpe de click, es cada vez más difícil destacar en relación a la competencia. Las marcas buscan un diseño cada vez más atractivo de sus páginas web. Alcanzar una buena puntuación en criterios de usabilidad, te hará destacar en…</p> <p>El artículo <a rel="nofollow" href="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/diagrama-de-gutenberg/">Diagrama de Gutenberg: su importancia en el diseño web</a> aparece primero en <a rel="nofollow" href="http://www.inesem.es/revistadigital/">Revista Digital INESEM</a></p> ]]></description> <content:encoded><![CDATA[<img width="345" height="180" src="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2019/07/diagrama-de-gutenberg-345x180.jpg?x92914" class="attachment-thumbnail size-thumbnail wp-post-image" alt="diagrama de gutenberg" loading="lazy" style="float:left; margin:0 15px 15px 0;" /><p style="text-align: justify;">Hoy en día, en un mundo que gira en torno a Internet y en el que estamos conectados a golpe de click, es cada vez más difícil destacar en relación a la competencia.</p> <p style="text-align: justify;">Las grandes marcas buscan un diseño cada vez más atractivo de sus páginas web. Alcanzar una buena puntuación en criterios de usabilidad, te hará destacar en la red, incrementando así el número de personas que te conocerán. Por esto, tienes que conocer el <strong>Diagrama de Gutenberg.</strong></p> <h2 style="text-align: justify;">Consejos para mejorar tu sitio web</h2> <p style="text-align: justify;">Una buena página web debe seguir una serie de requisitos, que podríamos resumir en<strong> cinco grandes bloques</strong>:</p> <ol> <li style="text-align: justify;">Diseño fácil e intuitivo.</li> <li style="text-align: justify;">Textos legibles.</li> <li style="text-align: justify;">Diseño<strong> responsive</strong>: adaptado a cualquier tipo de dispositivo.</li> <li style="text-align: justify;">Rapidez y optimización.</li> <li style="text-align: justify;">Criterios de <strong>usabilidad</strong></li> </ol> <h2 style="text-align: justify;">La base de una buena página web: la usabilidad</h2> <p style="text-align: justify;">Para continuar es necesario dejar claro qué entendemos por <a href="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/usabilidad-web/" target="_blank" rel="noopener noreferrer">usabilidad.</a> Podríamos definirla como “<em>la capacidad de hacer que los usuarios encuentren objetivos específicos en nuestra<strong> página web,</strong> a través de un diseño sencillo, rápido y fácil de intuir”</em>.</p> <p style="text-align: justify;">La usabilidad incide en la <strong>experiencia de nuestro usuario</strong>, favoreciendo que los contenidos sean mejor valorados.</p> <p style="text-align: justify;">Al plantear nuestra página web hay que tener en cuenta el movimiento natural de nuestros ojos al observar cualquier composición: dónde empieza el recorrido de nuestros ojos y en qué punto de la composición acaba.</p> <p style="text-align: justify;">Nuestro cerebro optimiza el tiempo que dedica a un texto o a una imagen.</p> <p style="text-align: justify;">En diseño web pasa lo mismo, el usuario no suele leer el 100% del contenido de nuestra interfaz, podríamos decir que lo “escanea”, leyendo el 28% de toda la pantalla, por eso es necesario conocer cuáles son los puntos más importantes y destacar aquellos a los que no prestamos tanta atención. Esta fragmentación del espacio la denominamos “Diagrama de Gutenberg”.</p> <h2>¿Qué es el Diagrama de Gutenberg?</h2> <p style="text-align: justify;">El<strong> Diagrama de Gutenberg</strong> es un patrón muy solicitado. Su organización sirve para diseño web, para publicidad, cartelería, marketing, entre otros, y divide el medio expositivo en cuatro cuadrantes:</p> <p style="text-align: justify;"><strong>• La zona óptica primaria:</strong> situada en el margen superior izquierdo.</p> <p style="text-align: justify;"><strong>• Zona de barbecho fuerte:</strong> situada en la parte superior derecha.</p> <p style="text-align: justify;"><strong>• La zona de barbecho débil:</strong> situada en la parte inferior izquierda.</p> <p style="text-align: justify;"><strong>• Zona terminal:</strong> situada en la parte inferior derecha.</p> <p style="text-align: justify;"><img loading="lazy" class="wp-image-2220 aligncenter" src="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2016/10/infografia-gutenberg-1.jpg?x92914" alt="" width="444" height="265" srcset="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2016/10/infografia-gutenberg-1.jpg 500w, https://www.inesem.es/revistadigital/diseno-y-artes-graficas/files/2016/10/infografia-gutenberg-1-300x180.jpg 300w" sizes="(max-width: 444px) 100vw, 444px" /></p> <p style="text-align: justify;">Esta distribución del espacio se aprecia significativamente en la estructura de una página web standard: colocaríamos el<strong> logotipo </strong>de la marca en la zona óptica primaria, que es el punto en el que comienza el recorrido de nuestros ojos.</p> <p style="text-align: justify;">El contenido medio, tales como puedes ser <strong>textos </strong>o<strong> imágenes</strong> se despliegan a los largo de las zonas de barbechos y en la<strong> zona terminal</strong>, donde finaliza el recorrido, normalmente se suele colocar la<strong> información de contacto</strong>.</p> <p style="text-align: justify;">En las zonas <strong>menos observadas</strong> (zona de barbecho fuerte y zona de barbecho débil), se suele recurrir a elementos llamativos para que la vista dirija más la atención a estas zonas si lo deseamos. Algunos de estos elementos pueden ser un tipo de letra más grande de lo habitual o usar un color diferente.</p> <p style="text-align: justify;">Por supuesto, existen otros trucos que nos ayudarán a captar la atención de los ojos del usuario. Por ejemplo: <strong>contrastes</strong>, letras<strong> destacadas</strong>, usando<strong> perfiles tipográficos</strong> como la negrita y la cursiva, jugar con las <strong>opacidades</strong>, utilizar un<strong> diseño innovador</strong>.</p> <p style="text-align: justify;">Todo esto nos ayudará a organizar nuestra información y a mandar al espectador el mensaje que queremos que reciba.</p> <p style="text-align: justify;"><strong>RECUERDA</strong>: Lo más importante para mantener a un usuario en tu página web es <strong>desarrollar un diseño sencillo, cómodo y actualizado.</strong></p> <div class="wpulike wpulike-default " ><div class="wp_ulike_general_class wp_ulike_is_not_liked"><button type="button" aria-label="Like Button" data-ulike-id="1418" data-ulike-nonce="0d876a8d62" data-ulike-type="post" data-ulike-template="wpulike-default" data-ulike-display-likers="0" data-ulike-likers-style="popover" class="wp_ulike_btn wp_ulike_put_image wp_post_btn_1418"></button><span class="count-box wp_ulike_counter_up" data-ulike-counter-value="+3"></span> </div></div> <p>El artículo <a rel="nofollow" href="https://www.inesem.es/revistadigital/diseno-y-artes-graficas/diagrama-de-gutenberg/">Diagrama de Gutenberg: su importancia en el diseño web</a> aparece primero en <a rel="nofollow" href="http://www.inesem.es/revistadigital/">Revista Digital INESEM</a></p> ]]></content:encoded> <wfw:commentRss>https://www.inesem.es/revistadigital/diseno-y-artes-graficas/diagrama-de-gutenberg/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> </channel> </rss> <!-- Performance optimized by W3 Total Cache. Learn more: https://www.boldgrid.com/w3-total-cache/ Caché de objetos 92/355 objetos usando disk Almacenamiento en caché de páginas con disk Served from: www.inesem.es @ 2024-09-08 02:44:31 by W3 Total Cache -->