{"id":263179,"date":"2023-07-06T07:26:00","date_gmt":"2023-07-06T04:26:00","guid":{"rendered":"https:\/\/inform.click\/como-presentar-un-diseno-web-al-cliente\/"},"modified":"2023-07-06T08:09:00","modified_gmt":"2023-07-06T05:09:00","slug":"como-presentar-un-diseno-web-al-cliente","status":"publish","type":"post","link":"https:\/\/inform.click\/es\/como-presentar-un-diseno-web-al-cliente\/","title":{"rendered":"C\u00f3mo presentar un dise\u00f1o web al cliente"},"content":{"rendered":"<p>\n  El \u00e9xito de su dise\u00f1o depende no solo de su capacidad para crear algo visualmente atractivo, sino tambi\u00e9n de su capacidad para venderlo.\n<\/p>\n<p>\n  Como dise\u00f1ador profesional, debes saber c\u00f3mo comunicarte con tu cliente y presentar tu producto de la mejor manera posible. Cuanto mejor sea su presentaci\u00f3n, mayores ser\u00e1n las posibilidades de que su proyecto sea aprobado.\n<\/p>\n<p>\n  En este art\u00edculo, compartiremos algunos secretos de una presentaci\u00f3n efectiva y algunos trucos para que tus clientes se enamoren de tu trabajo. Comenzaremos con la cantidad de opciones que debe presentar a su cliente.\n<\/p>\n<h5>\n  \u00bfCu\u00e1ntas opciones de dise\u00f1o debo presentar?<br \/>\n<\/h5>\n<p>\n  Sheena Iyengar, una experta de renombre mundial en opciones y toma de decisiones, dice que una variedad de opciones puede llamar la atenci\u00f3n de los consumidores pero al mismo tiempo abrumarlos y confundirlos. Es decir, dado que hay demasiados consumidores, simplemente elegir\u00e1n algo, incluso si no es la mejor opci\u00f3n.\n<\/p>\n<p>\n  \u00bfPor qu\u00e9 presentar varias opciones, incluidas algunas de las que no est\u00e1 tan seguro? Si ofrece demasiadas opciones, es muy posible que su cliente ignore su dise\u00f1o favorito. Es por esto que recomendamos presentar solo el prototipo final.\n<\/p>\n<p>\n  Sin embargo, esto no significa que debas mostrar solo una imagen. Cuente toda la historia desde el principio, brindando instant\u00e1neas de su proyecto en varias etapas. Explique las decisiones que ha tomado y c\u00f3mo cumplen con los objetivos comerciales de su cliente. Gu\u00ede a su cliente a trav\u00e9s de todas las iteraciones por las que ha pasado para encontrar una soluci\u00f3n a su problema. Esto hablar\u00e1 de su experiencia y demostrar\u00e1 que no solo ha vuelto a dibujar un dise\u00f1o existente, sino que ha realizado una gran cantidad de trabajo.\n<\/p>\n<p>\n  El personaje principal en tu historia de dise\u00f1o eres t\u00fa. Los clientes te observar\u00e1n y juzgar\u00e1n por tus palabras y acciones. Por lo tanto, ser\u00e1 mejor que pienses en lo que dir\u00e1s de antemano.\n<\/p>\n<p>\n  C\u00f3mo encantar a los clientes con su presentaci\u00f3n\n<\/p>\n<p>\n  A veces, al presentar su dise\u00f1o, puede desencadenar una r\u00e1faga de especulaciones, divulgar demasiada informaci\u00f3n o aburrir a su cliente. Obviamente, eso no es lo que realmente quieres hacer. Si desea realizar una presentaci\u00f3n fluida, intente organizarla siguiendo estos cinco pasos:\n<\/p>\n<h5>\n  1 Formula el problema<br \/>\n<\/h5>\n<p>\n  \u00bfQu\u00e9 deber\u00edas hacer primero? Establezca expectativas para su audiencia: anuncie lo que sus clientes est\u00e1n a punto de ver y lo que obtendr\u00e1n de ello. Formule el problema planteado en su primera reuni\u00f3n, la tarea en la que ha estado trabajando (por ejemplo, crear un dise\u00f1o r\u00e1pido y excelente para una aplicaci\u00f3n web de fitness) y los enfoques que ha utilizado para manejar este problema.\n<\/p>\n<p>\n  Alternativamente, puede comenzar con un resumen r\u00e1pido de lo que sus clientes ya han visto: el \u00faltimo dise\u00f1o, un producto existente o un art\u00edculo redise\u00f1ado. Tambi\u00e9n puede mencionar los \u00faltimos comentarios que dieron sus clientes. Al hacer esto, sentar\u00e1 las bases para su presentaci\u00f3n principal y evitar\u00e1 preguntas innecesarias.\n<\/p>\n<h5>\n  2 Aborde el negocio de su cliente<br \/>\n<\/h5>\n<p>\n  Trate de hacer su presentaci\u00f3n m\u00e1s personal. Discuta la marca de su cliente y su p\u00fablico objetivo. Su objetivo es demostrar que comprende el negocio de su cliente. Suponga que est\u00e1 dise\u00f1ando un sitio web para la empresa Soft Blankets. Este sitio web debe reflejar la gama de productos y precios de la empresa, as\u00ed como transmitir una sensaci\u00f3n de calidez y comodidad a los clientes.\n<\/p>\n<p>\n  Puedes enriquecer tanto tus maquetas como el dise\u00f1o final con fotos de la empresa de tu cliente en lugar de fotograf\u00edas de stock. Por ejemplo, si est\u00e1 creando un sitio web de caridad, las fotos reales de una subasta de caridad que realiz\u00f3 la empresa tendr\u00e1n un impacto mucho mayor en sus clientes y posibles patrocinadores.\n<\/p>\n<h5>\n  3 Describa el proceso de dise\u00f1o<br \/>\n<\/h5>\n<p>\n  Proporcione una breve descripci\u00f3n de cada fase individual de su proceso de dise\u00f1o y hable sobre la informaci\u00f3n que ha obtenido. Tambi\u00e9n debe subrayar las formas en que aprovech\u00f3 esta informaci\u00f3n para mejorar el dise\u00f1o general. Aqu\u00ed es muy importante presentar los componentes del dise\u00f1o como beneficios para el negocio de su cliente. Por ejemplo, puede explicar que us\u00f3 m\u00e1s rojo para un sitio web de comida r\u00e1pida, ya que aumenta el apetito de los clientes y puede alentarlos a pedir m\u00e1s comida. Ahora se revela el secreto de McDonald's y KFC.\n<\/p>\n<h5>\n  4 Mantenga una conversaci\u00f3n<br \/>\n<\/h5>\n<p>\n  Una presentaci\u00f3n de dise\u00f1o es una conversaci\u00f3n. Si desea obtener comentarios informados, responda las preguntas cuando surjan y explique todo lo que su cliente se haya perdido. Aseg\u00farese de que su presentaci\u00f3n sea clara para su cliente y que est\u00e9 en la misma p\u00e1gina. Adem\u00e1s, el di\u00e1logo constructivo puede traer nuevas ideas y soluciones.\n<\/p>\n<h5>\n  5 Re\u00fana comentarios<br \/>\n<\/h5>\n<p>\n  El \u00faltimo paso, y probablemente el m\u00e1s importante, es obtener retroalimentaci\u00f3n. Dale a tus clientes algo de tiempo para evaluar tu trabajo. El tiempo que debe esperar depende de su cliente, su carga de trabajo y el tama\u00f1o de su proyecto. Obviamente, los proyectos grandes toman m\u00e1s tiempo para revisar que los peque\u00f1os. No entre en p\u00e1nico si su cliente no responde en los primeros tres d\u00edas. El sitio web que ha dise\u00f1ado es una gran parte del negocio de su cliente y deben estar seguros de que ganar\u00e1 su audiencia.\n<\/p>\n<h3>\n  C\u00f3mo recopilar comentarios de la manera correcta<br \/>\n<\/h3>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-292709-6382edb9629b8.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-292709-6382edb9629b8.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  A veces, sin embargo, es posible que trabaje duro y a\u00fan as\u00ed reciba comentarios que son in\u00fatiles o que no puede administrar adecuadamente, o la respuesta puede demorar meses. \u00bfC\u00f3mo puede evitar tal situaci\u00f3n y establecer la direcci\u00f3n correcta para sus clientes? Solo sigue estos consejos.\n<\/p>\n<h5>\n  1 plan por adelantado<br \/>\n<\/h5>\n<p>\n  Le recomendamos que aclare todos los problemas antes de recopilar comentarios. Establezca una fecha espec\u00edfica en la que su cliente proporcionar\u00e1 comentarios sobre su trabajo. T\u00f3mate esta fecha en serio. Ser\u00eda bueno de su parte recordarle a su cliente la fecha de la retroalimentaci\u00f3n con unos d\u00edas de anticipaci\u00f3n. Tambi\u00e9n debe acordar la forma de los comentarios, ya sea por tel\u00e9fono, correo electr\u00f3nico o en persona.\n<\/p>\n<h5>\n  2 Haga preguntas enfocadas<br \/>\n<\/h5>\n<p>\n  Muy a menudo, las presentaciones de dise\u00f1o se convierten por completo en debates sobre el contenido. Claramente, se esperan algunas discusiones de contenido, pero su cliente no deber\u00eda dedicar todos sus comentarios a este tema. Si desea obtener comentarios \u00fatiles, haga preguntas espec\u00edficas y dirija la conversaci\u00f3n a lo que realmente le gustar\u00eda recibir comentarios.\n<\/p>\n<p>\n  No le preguntes a tus clientes \u00ab\u00bfQu\u00e9 piensas?\u00bb En cambio, preg\u00fantales si este concepto cumple con sus objetivos comerciales o de qu\u00e9 manera no lo hace, o preg\u00fantales si la paleta de colores se ajusta al posicionamiento de la marca.\n<\/p>\n<h5>\n  3 Comprender el verdadero significado<br \/>\n<\/h5>\n<p>\n  Al comentar sobre su proyecto, los clientes frecuentemente proponen soluciones en lugar de se\u00f1alar el problema: \u00ab\u00bfPuedes agrandar este bot\u00f3n? \u00bfPuedes agregar m\u00e1s verde?\u00bb Su tarea es identificar el problema central o el desaf\u00edo que se esconde en esa retroalimentaci\u00f3n.\n<\/p>\n<p>\n  Siempre preg\u00fantales por qu\u00e9: \u00ab\u00bfPor qu\u00e9 quieres que este bot\u00f3n sea m\u00e1s grande? \u00bfPor qu\u00e9 cree que m\u00e1s verde ser\u00e1 mejor para su sitio web?\u00bb Dustin Curtis, fundador de Svbtle, hace al menos tres preguntas a sus clientes sobre sus opiniones.\n<\/p>\n<h5>\n  4 Aplique la l\u00f3gica y cite marcas famosas<br \/>\n<\/h5>\n<p>\n  Si no compartes la misma opini\u00f3n que tu cliente, no empieces a criticarlo y desacreditarlo. Respalda tus argumentos con hechos, estudios e investigaciones. Deje que estos hechos hablen por s\u00ed mismos. Adem\u00e1s, puede citar empresas famosas como ejemplos.\n<\/p>\n<p>\n  Imagina que tu cliente te pide que reduzcas el tama\u00f1o de la fuente de 22 a 12 puntos. En este caso, podr\u00edas responder con algo como \u00abEse es un punto interesante. Pero sabes, recientemente le\u00ed un estudio que muestra que los tama\u00f1os de fuente m\u00e1s grandes pueden despertar conexiones emocionales m\u00e1s fuertes con una marca. Por cierto, Medium tambi\u00e9n usa una fuente de 22 puntos\u00bb.\n<\/p>\n<p>\n  Y no uses frases que caigan en el estilo \u00abTe lo dije\u00bb. Trate de mostrar empat\u00eda: \u00abS\u00ed, yo tambi\u00e9n me sorprend\u00ed cuando escuch\u00e9 esto\u00bb.\n<\/p>\n<h5>\n  5 Respeta la opini\u00f3n de tu cliente<br \/>\n<\/h5>\n<p>\n  Aunque es probable que tengas mucha m\u00e1s experiencia en dise\u00f1o web, tu cliente a\u00fan conoce su negocio mejor que t\u00fa. Son ellos quienes utilizar\u00e1n el dise\u00f1o a diario. Por lo tanto, necesitan sentirse c\u00f3modos con el sitio web que ha dise\u00f1ado.\n<\/p>\n<p>\n  Si su cliente sigue insatisfecho con su dise\u00f1o, revisen su trabajo juntos. Trate de encontrar un compromiso y adapte el dise\u00f1o en funci\u00f3n de los comentarios de su cliente. Recuerda que la simbiosis del conocimiento de tu cliente y tu experiencia puede dar lugar a un producto realmente exitoso.\n<\/p>\n<p>\n  Ahora ya conoces la parte te\u00f3rica: c\u00f3mo actuar y qu\u00e9 decir al presentar tu trabajo de dise\u00f1o. Sin embargo, no est\u00e1 claro de qu\u00e9 forma debe enmarcar su dise\u00f1o. \u00bfC\u00f3mo deber\u00eda ser tu prototipo?\n<\/p>\n<h3>\n  \u00bfQu\u00e9 tipo de prototipo debo elegir?<br \/>\n<\/h3>\n<p>\n  No podemos darte una respuesta universal y decir \u00absimplemente dib\u00fajalo as\u00ed\u00bb. Pero podemos facilitarle el trabajo ofreci\u00e9ndole algunos consejos pr\u00e1cticos sobre el flujo de creaci\u00f3n de prototipos. Le recomendamos que elija el tipo de prototipo y las herramientas que utiliza para crearlo en funci\u00f3n de la etapa de dise\u00f1o en la que se encuentre actualmente, ya sea la etapa inicial o la etapa final. Echemos un vistazo m\u00e1s de cerca a estas dos etapas.\n<\/p>\n<h5>\n  Etapa temprana<br \/>\n<\/h5>\n<p>\n  La etapa inicial es cuando piensa en la l\u00f3gica y la funcionalidad del sitio web: dise\u00f1o, caracter\u00edsticas, conexiones y transiciones. Con su p\u00fablico objetivo en mente, forma elementos que har\u00e1n que el sitio web sea intuitivo para los usuarios. Su principal objetivo es comprobar la operatividad del producto.\n<\/p>\n<p>\n  Por lo tanto, en esta etapa, puede presentar un prototipo de baja fidelidad en forma de pantallas esquem\u00e1ticas simples, generalmente en colores b\u00e1sicos y sin efectos visuales ni detalles.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-292709-6382edbb3e665.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-292709-6382edbb3e665.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Para dise\u00f1ar un prototipo de baja fidelidad, puede probar las siguientes herramientas:\n<\/p>\n<ul>\n<li>\n    <strong>Wireframe.cc<\/strong>: una de las herramientas m\u00e1s b\u00e1sicas que los dise\u00f1adores pueden usar para crear wireframes. Sus principales ventajas son su interfaz simple y la posibilidad de comenzar a dise\u00f1ar wireframes inmediatamente sin registrarse.\n  <\/li>\n<li>\n    <strong>Moqups.com<\/strong>: una aplicaci\u00f3n web que lo ayuda a crear estructuras al\u00e1mbricas, maquetas y prototipos. Moqups ofrece una biblioteca integrada con miles de conjuntos de iconos, almacenamiento basado en la nube y comentarios y funciones de retroalimentaci\u00f3n.\n  <\/li>\n<li>\n    <strong>Pencil Project<\/strong> (pencil.evolus.vn): una herramienta de creaci\u00f3n de prototipos gratuita y de c\u00f3digo abierto para plataformas m\u00f3viles y de escritorio. Pencil Project proporciona colecciones integradas (formas, elementos de diagramas de flujo, etc.), compatibilidad con dibujos de diagramas y enlaces entre p\u00e1ginas.\n  <\/li>\n<\/ul>\n<p>\n  Con un prototipo de baja fidelidad, debe tener cuidado, ya que puede enfrentar malentendidos y comentarios negativos por parte de su cliente: \u00ab\u00bfPor qu\u00e9 las pantallas son tan simples? \u00bfPor qu\u00e9 usaste un esquema de color tan pobre? Si esto sucede, t\u00f3mese el tiempo para explicarle a su cliente qu\u00e9 es la UX y c\u00f3mo es importante para su producto, que la UX es el coraz\u00f3n y el alma de su futuro sitio web, y que este prototipo est\u00e1 lejos de ser la versi\u00f3n final.\n<\/p>\n<h5>\n  Etapa final<br \/>\n<\/h5>\n<p>\n  En la etapa final, debe entregar un prototipo de alta fidelidad a su cliente: agregue elementos interactivos como micro interacciones, navegaci\u00f3n de pantalla a pantalla y otras animaciones.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-292709-6382edc0c43af.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-292709-6382edc0c43af.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Un prototipo de alta fidelidad es una representaci\u00f3n interactiva basada en computadora hecha lo m\u00e1s cerca posible del dise\u00f1o final (en t\u00e9rminos de detalles y funcionalidad) para permitir que su cliente examine la usabilidad del producto y saque conclusiones sobre el comportamiento del usuario.\n<\/p>\n<p>\n  Los prototipos de alta fidelidad le permiten sentir las transiciones y funciones del sitio web de manera m\u00e1s realista que los de baja fidelidad y revelan posibles errores o dificultades en esta etapa antes de crear la interfaz de usuario.\n<\/p>\n<p>\n  Si no est\u00e1 seguro de qu\u00e9 herramientas usar para animar su prototipo, pruebe estas:\n<\/p>\n<ul>\n<li>\n    <strong>InVision<\/strong> (invisionapp.com): una plataforma de dise\u00f1o de productos digitales que le permite crear prototipos interactivos en cuesti\u00f3n de minutos. Con InVision, puede crear hojas de estilo y generar c\u00f3digo real para cualquier elemento de dise\u00f1o. Adem\u00e1s, InVision permite que sus clientes, miembros del equipo y partes interesadas comenten directamente sobre sus dise\u00f1os.\n  <\/li>\n<li>\n    <strong>Adobe XD<\/strong> (adobe.com\/products\/xd.html): la soluci\u00f3n de UI\/UX todo en uno que lo ayuda a convertir su dise\u00f1o est\u00e1tico en un prototipo interactivo con un solo clic. Con Adobe XD, su prototipo se actualiza autom\u00e1ticamente con cada cambio que realiza: no se requiere sincronizaci\u00f3n.\n  <\/li>\n<li>\n    <strong>Principio<\/strong> (principleformac.com): una herramienta de creaci\u00f3n de prototipos que le permite dise\u00f1ar interfaces de usuario animadas e interactivas sin importar si est\u00e1 dise\u00f1ando el flujo de una aplicaci\u00f3n de m\u00faltiples pantallas o nuevas animaciones e interacciones.\n  <\/li>\n<\/ul>\n<h3>\n  \u00bfEst\u00e1s listo para presentar tu dise\u00f1o web?<br \/>\n<\/h3>\n<p>\n  La forma en que presenta su dise\u00f1o depende del tipo de producto, los componentes de dise\u00f1o que presenta (por ejemplo, dise\u00f1o o funcionalidad) y la etapa del proceso de dise\u00f1o en la que se encuentra. -prototipos de fidelidad, mientras que la \u00faltima etapa requiere que te acerques al producto final lo antes posible y entregues un prototipo interactivo de alta fidelidad.\n<\/p>\n<p>\n  Por supuesto, el \u00e9xito de su presentaci\u00f3n radica en su confianza y en los datos que posee: tenga a mano hechos y argumentos basados \u200b\u200ben la l\u00f3gica para respaldar sus opiniones. Y no tengas miedo de preguntarle a tu cliente \u00ab\u00bfpor qu\u00e9?\u00bb.\n<\/p>\n<p>\n  \u00bfHas probado alguno de estos consejos? \u00bfConoces alg\u00fan otro secreto para una presentaci\u00f3n ganadora? Comparta sus pensamientos en los comentarios a continuaci\u00f3n.\n<\/p>\n<\/p>\n<div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\n  Fuente de grabaci\u00f3n: <a target=\"_blank\" rel=\"noopener nofollow\" data-pssr=\"\" href=\"http:\/\/www.instantshift.com\/2018\/02\/02\/present-web-design-to-client\/\">instantshift.com<\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>El \u00e9xito de su dise\u00f1o depende no solo de su capacidad para crear algo visualmente atractivo, sino tambi\u00e9n de su capacidad para venderlo. Como dise\u00f1ador profesional, debes saber c\u00f3mo comunicarte con tu cliente y presentar tu producto de la mejor manera posible. Cuanto mejor sea su presentaci\u00f3n, mayores ser\u00e1n las posibilidades de que su proyecto sea aprobado. En este art\u00edculo, compartiremos algunos secretos de una presentaci\u00f3n efectiva y algunos trucos para que tus clientes se enamoren de tu trabajo. Comenzaremos con la cantidad de opciones que debe presentar a su cliente. \u00bfCu\u00e1ntas opciones de dise\u00f1o deber\u00edan&#8230;<\/p>\n","protected":false},"author":1,"featured_media":175963,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[281,203,229,268,60],"tags":[],"class_list":["post-263179","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-carrera-y-negocios","category-diseno-web","category-libros-de-texto","category-psicologia-2-2","category-web-y-wordpress"],"_links":{"self":[{"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/posts\/263179","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/comments?post=263179"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/posts\/263179\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/media\/175963"}],"wp:attachment":[{"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/media?parent=263179"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/categories?post=263179"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/tags?post=263179"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}