{"id":95,"date":"2018-11-14T15:01:09","date_gmt":"2018-11-14T13:01:09","guid":{"rendered":"http:\/\/disseny-test.uoc.edu\/materials\/tfg\/?page_id=95"},"modified":"2019-01-10T16:36:23","modified_gmt":"2019-01-10T14:36:23","slug":"3-4-3-el-prototipado-y-la-implementacion-en-un-tfg","status":"publish","type":"page","link":"http:\/\/disseny-test.uoc.edu\/materials\/tfg\/es\/3-4-3-el-prototipado-y-la-implementacion-en-un-tfg\/","title":{"rendered":"3.4.2. Posibles puntos adicionales"},"content":{"rendered":"<h3>3.4.2.2. El prototipado y la implementaci\u00f3n en un TFG<\/h3>\n<p>En esta subetapa de la gran fase cuatro (dise\u00f1o y ejecuci\u00f3n), cobra especial importancia el <strong>prototipado<\/strong> mediante un <strong><em>wireframe<\/em><\/strong> o <strong><em>mockup<\/em><\/strong> de vuestra idea despu\u00e9s de haber estudiado el <em>feedback<\/em> de los usuarios a partir de nuestra \u00abpersona\u00bb. En el marco del <em><a class=\"tooltip\"  href=\"javascript:void(0);\" data-toggle=\"popover\" data-placement=\"bottom\" data-content=\"Metodolog\u00eda orientada a la acci\u00f3n que busca procesos cortos e iterativos.\">Design Thinking<\/a><\/em>, el prototipado es un bosquejo r\u00e1pido y econ\u00f3mico que pueda expresar nuestra idea de manera muy clara.<\/p>\n<p>\u00abFallar r\u00e1pido para acertar pronto\u00bb es la m\u00e1xima que persigue esta subfase: ejecutamos mientras pensamos, mientras decidimos. Existen distintos estudios acerca de c\u00f3mo \u00abpensar con las manos\u00bb genera nuevos tipos de conexi\u00f3n en el cerebro. Tambi\u00e9n de su capacidad de inspirar nuevas ideas. Al ir prototipando, tambi\u00e9n pueden enriquecerse las ideas generadas previamente.<\/p>\n<p>Asimismo, la metodolog\u00eda \u00e1gil est\u00e1 relacionada con esta manera de trabajar en la que se plasma la idea r\u00e1pidamente para pasar a una siguiente fase. La diferencia con las metodolog\u00edas m\u00e1s tradicionales es que estas piensan en productos terminados y que ya cuenten con todas las caracter\u00edsticas antes de salir al mercado. El prototipo es justamente lo opuesto a esta perspectiva: la soluci\u00f3n o producto no ha de tener ni mucho menos todas las opciones o caracter\u00edsticas a las que podemos llegar a aspirar posteriormente. Se ir\u00e1n incorporando a medida que saquemos por ejemplo la versi\u00f3n beta, la primera versi\u00f3n, etc., y se ir\u00e1 mejorando.<\/p>\n<p><strong>\u00bfC\u00f3mo hacer un buen <em>wireframe<\/em>?<\/strong><\/p>\n<p>Para hacer un <em>wireframe<\/em> b\u00e1sico, con l\u00e1piz y papel ya es suficiente. Sin embargo, tambi\u00e9n existen muchos <em>softwares<\/em> de prototipado que os pueden ser \u00fatiles si quer\u00e9is crearlo digitalmente:<\/p>\n<ul>\n<li>Axure<\/li>\n<li>InVision<\/li>\n<li>Just in mind<\/li>\n<li>Moqups<\/li>\n<li>Mockflow<\/li>\n<li>Etc.<\/li>\n<\/ul>\n<p>La mayor\u00eda de ellos tienen alguna limitaci\u00f3n en su uso y ofrecen despu\u00e9s planes de pago. Sin embargo, para un peque\u00f1o proyecto, la mayor\u00eda puede usarse de forma gratuita, por un tiempo limitado o con un tope de n\u00famero de usuarios.<\/p>\n<p>Durante la creaci\u00f3n de un prototipo, decidimos los elementos que se incluir\u00e1n, d\u00f3nde y de qu\u00e9 manera, e incluso c\u00f3mo interact\u00faa el usuario con ellos. Por ello, en esta etapa es en la que se llega a conclusiones sobre si falta o sobra algo en lo que estemos dise\u00f1ando.<\/p>\n<figure id=\"attachment_96\" aria-describedby=\"caption-attachment-96\" style=\"width: 800px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" class=\"wp-image-96 size-full\" style=\"font-size: 16px;\" title=\"Wireframe de un sitio web\" src=\"http:\/\/disseny-test.uoc.edu\/materials\/tfg\/wp-content\/uploads\/sites\/10\/2018\/11\/20141_04.jpg\" alt=\"Wireframe de un sitio web\" width=\"800\" height=\"646\" srcset=\"http:\/\/disseny-test.uoc.edu\/materials\/tfg\/wp-content\/uploads\/sites\/10\/2018\/11\/20141_04.jpg 800w, http:\/\/disseny-test.uoc.edu\/materials\/tfg\/wp-content\/uploads\/sites\/10\/2018\/11\/20141_04-300x242.jpg 300w, http:\/\/disseny-test.uoc.edu\/materials\/tfg\/wp-content\/uploads\/sites\/10\/2018\/11\/20141_04-768x620.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption id=\"caption-attachment-96\" class=\"wp-caption-text\"><em>Wireframe<\/em> de un sitio web<br \/>Fuente: <a href=\"https:\/\/www.lucidchart.com\/pages\/es\/qu%C3%A9-es-un-wireframe-para-un-sitio-web\" target=\"_blank\" rel=\"noopener\">lucidchart.org<\/a><\/figcaption><\/figure>\n<figure id=\"attachment_101\" aria-describedby=\"caption-attachment-101\" style=\"width: 800px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" class=\"wp-image-101 size-full\" src=\"http:\/\/disseny-test.uoc.edu\/materials\/tfg\/wp-content\/uploads\/sites\/10\/2018\/11\/20141_05.jpg\" alt=\"\" width=\"800\" height=\"602\" srcset=\"http:\/\/disseny-test.uoc.edu\/materials\/tfg\/wp-content\/uploads\/sites\/10\/2018\/11\/20141_05.jpg 800w, http:\/\/disseny-test.uoc.edu\/materials\/tfg\/wp-content\/uploads\/sites\/10\/2018\/11\/20141_05-300x226.jpg 300w, http:\/\/disseny-test.uoc.edu\/materials\/tfg\/wp-content\/uploads\/sites\/10\/2018\/11\/20141_05-768x578.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption id=\"caption-attachment-101\" class=\"wp-caption-text\"><em>Wireframes<\/em> de un proyecto <em>webdoc<\/em><\/figcaption><\/figure>\n<p>Hay que tener claras las funcionalidades de lo que quer\u00e9is retratar antes de entrar en la etapa de dise\u00f1o. A veces, tras finalizar el <em>wireframe<\/em>, se llegan a enfoques muy distintos de los iniciales, que nos permiten seguir desarrollando la idea por un camino que genere mejor experiencia de usuario.<\/p>\n<p><strong>Elementos esenciales de un <em>wireframe<\/em><\/strong><\/p>\n<ul>\n<li><strong><em>Layouts<\/em><\/strong><strong> gen\u00e9ricos<\/strong>: forman la estructura general de elementos comunes extrapolables a todas las p\u00e1ginas, como la cabecera, el pie, etc.<\/li>\n<li><strong>Elementos individuales<\/strong>: son las soluciones que encontramos para cada secci\u00f3n particular: una galer\u00eda de fotos, un carrusel, un formulario de contacto\u2026<\/li>\n<\/ul>\n<p>Para ambos tipos de elementos, hay ciertos patrones que ofrecen la mejor soluci\u00f3n a problemas o necesidades habituales. Es recomendable que, si existe una soluci\u00f3n aceptada como el est\u00e1ndar, se adopte as\u00ed, ya que muy dif\u00edcilmente vuestra soluci\u00f3n le resulte m\u00e1s usable a la mayor\u00eda de los usuarios que la est\u00e1ndar, ya que estos \u00faltimos tienen a sus espaldas la experiencia acumulada de haberla usado en muchas otras ocasiones. Eso no quiere decir que no se pueda ser original, sino que hay que aplicar la l\u00f3gica y el sentido com\u00fan, e implementar aquellos elementos de Internet que ya est\u00e1n muy integrados en nuestro consciente colectivo: por ejemplo, un <em>scroll<\/em> seguir\u00e1 funcionando como estamos acostumbrados; no har\u00edamos un <em>scroll<\/em> en que el usuario tenga que hacer clic a un bot\u00f3n del men\u00fa.<\/p>\n<div class=\"featured featured-blue\"><p>Por \u00faltimo, simplemente cabe recordar que, si una soluci\u00f3n no os convence, la fase de prototipado es el momento en el que replantear el proyecto por completo.<\/p>\n<\/div>\n<p>Si lo dese\u00e1is y cont\u00e1is con tiempo, tambi\u00e9n ser\u00eda bueno en este momento del bosquejo crear un <strong><em>customer journey map<\/em><\/strong> (o mapa del ciclo de vida del cliente), que ilustra los pasos que recorrer\u00e1 nuestro usuario\/cliente antes, durante y despu\u00e9s de adquirir nuestro producto o servicio: sus necesidades individuales, la serie de interacciones que tendr\u00e1 que realizar para cumplir con los objetivos y los estados emocionales que podr\u00e1 experimentar durante todo el proceso.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>3.4.2.2. El prototipado y la implementaci\u00f3n en un TFG En esta subetapa de la gran fase cuatro (dise\u00f1o y ejecuci\u00f3n), cobra especial importancia el prototipado mediante un wireframe o mockup de vuestra idea despu\u00e9s de haber estudiado el feedback de los usuarios a partir de nuestra \u00abpersona\u00bb. En el marco del , el prototipado es [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false},"acf":[],"_links":{"self":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/tfg\/es\/wp-json\/wp\/v2\/pages\/95"}],"collection":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/tfg\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/tfg\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/disseny-test.uoc.edu\/materials\/tfg\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/disseny-test.uoc.edu\/materials\/tfg\/es\/wp-json\/wp\/v2\/comments?post=95"}],"version-history":[{"count":10,"href":"http:\/\/disseny-test.uoc.edu\/materials\/tfg\/es\/wp-json\/wp\/v2\/pages\/95\/revisions"}],"predecessor-version":[{"id":328,"href":"http:\/\/disseny-test.uoc.edu\/materials\/tfg\/es\/wp-json\/wp\/v2\/pages\/95\/revisions\/328"}],"wp:attachment":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/tfg\/es\/wp-json\/wp\/v2\/media?parent=95"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}