{"id":285,"date":"2018-07-23T18:41:00","date_gmt":"2018-07-23T18:41:00","guid":{"rendered":"https:\/\/www.artcreateweb.com\/blog\/?p=285"},"modified":"2021-02-17T18:45:24","modified_gmt":"2021-02-17T18:45:24","slug":"que-son-sketchs-mockups-wireframes-y-prototipos","status":"publish","type":"post","link":"https:\/\/www.artcreateweb.com\/blog\/index.php\/2018\/07\/23\/que-son-sketchs-mockups-wireframes-y-prototipos\/","title":{"rendered":"\u00bfQu\u00e9 son sketchs, mockups, wireframes y prototipos?"},"content":{"rendered":"\n<p>Antes de pasar a la fase de desarrollo de un sitio Web o aplicaci\u00f3n, es conveniente hacer un estudio previo del dise\u00f1o, sistema de navegaci\u00f3n, estructura, funcionalidad, requerimientos, adaptaci\u00f3n a los diferentes dispositivos, necesidades de los usuarios, etc. <br><br>Para que puedas entender cuales son los distintos tipos de prototipos y sus funcionalidades, a continuaci\u00f3n te los detallo brevemente:<\/p>\n\n\n\n<ul><li><strong>Sketching:<\/strong> Se consideran prototipos de baja fidelidad ya que est\u00e1n realizados de forma r\u00e1pida e informal(bocetos) con l\u00e1piz y papel o con programas que desempe\u00f1an las funciones f\u00edsicas anteriores plasm\u00e1ndolas de manera digital. Sirven para hacerte una idea clara y r\u00e1pida.<\/li><li><strong>Wireframes:<\/strong> Son prototipos m\u00e1s elaborados e incluyen el inventariado de contenidos, representando as\u00ed el contenido y esquema de cada p\u00e1gina con todos sus elementos (enlaces, listas, formularios, etiquetado, etc). Adem\u00e1s incluyen notas asociadas con las explicaciones pertinentes.<\/li><li><strong>Storyboard:<\/strong> Cuando tenemos realizado una secuencia de wireframes, el storyboard nos ayuda a mostrar como se realiza una tarea en cada una de sus fases (vi\u00f1etas). Ayuda por tanto a comprender la situaci\u00f3n y marco de desarrollo real del proyecto Web o app a trav\u00e9s de su historia.<\/li><li><strong>Mockups:<\/strong> Se consideran prototipos de alta fidelidad ya que permiten detallar el proceso interactivo de una o varias tareas del proyecto Web o app. Ayuda al cliente a hacerse una idea m\u00e1s aproximada de c\u00f3mo quedar\u00e1 el proyecto antes de ponerlo en marcha.<\/li><\/ul>\n\n\n\n<p><br>Hay que tener en cuenta que los prototipos solo utilizan escalas de grises y no otros colores ( a excepci\u00f3n de los mockups), ya que son maquetas y bocetos del proyecto. El color se emplea despu\u00e9s en la fase de elaboraci\u00f3n del dise\u00f1o gr\u00e1fico.<\/p>\n\n\n\n<p>Por otra parte, resulta importante conocer las diferencias conceptuales entre los distintos prototipos o maquetas para poder tener en cuenta las repercusiones econ\u00f3micas en un proyecto, ya que utilizar un m\u00e9todo u otro, influye en la cantidad de horas a invertir en el proceso de desarrollo y dise\u00f1o, y por tanto influye en el incremento de los costes asociados al mismo.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Antes de pasar a la fase de desarrollo de un sitio Web o aplicaci\u00f3n, es conveniente hacer un estudio previo del dise\u00f1o, sistema de navegaci\u00f3n, estructura, funcionalidad, requerimientos, adaptaci\u00f3n a los diferentes dispositivos, necesidades de los usuarios, etc. <\/p>\n","protected":false},"author":1,"featured_media":287,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[5],"tags":[61,58,33,32],"_links":{"self":[{"href":"https:\/\/www.artcreateweb.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/285"}],"collection":[{"href":"https:\/\/www.artcreateweb.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.artcreateweb.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.artcreateweb.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.artcreateweb.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=285"}],"version-history":[{"count":1,"href":"https:\/\/www.artcreateweb.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/285\/revisions"}],"predecessor-version":[{"id":286,"href":"https:\/\/www.artcreateweb.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/285\/revisions\/286"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.artcreateweb.com\/blog\/index.php\/wp-json\/wp\/v2\/media\/287"}],"wp:attachment":[{"href":"https:\/\/www.artcreateweb.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=285"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.artcreateweb.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=285"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.artcreateweb.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=285"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}