{"id":15923,"date":"2020-09-02T13:02:41","date_gmt":"2020-09-02T12:02:41","guid":{"rendered":"https:\/\/scoreapps.com\/blog\/?p=15923"},"modified":"2021-12-15T16:32:55","modified_gmt":"2021-12-15T15:32:55","slug":"wireframes","status":"publish","type":"post","link":"https:\/\/scoreapps.com\/blog\/wireframes\/","title":{"rendered":"Wireframe: Descubre qu\u00e9 es y c\u00f3mo hacer prototipos de tus webs o apps"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_75 ez-toc-wrap-center counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">TABLA DE CONTENIDOS<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a3e1b2edae9f\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"ez-toc-cssicon\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #50527b;color:#50527b\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #50527b;color:#50527b\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a3e1b2edae9f\" checked aria-label=\"Alternar\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/scoreapps.com\/blog\/wireframes\/#training-gratis-como-generar-100-nuevos-clientes-a-la-semana-con-un-unico-embudo-de-ventas\" >[Training GRATIS]: C\u00f3mo generar 100 Nuevos Clientes a la semana con un \u00fanico Embudo de Ventas<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/scoreapps.com\/blog\/wireframes\/#%c2%bfque-es-un-wireframe\" >\u00bfQu\u00e9 es un Wireframe?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/scoreapps.com\/blog\/wireframes\/#%c2%bfpara-que-sirve-un-wireframe\" >\u00bfPara qu\u00e9 sirve un Wireframe?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/scoreapps.com\/blog\/wireframes\/#ventajas-de-usar-wireframes\" >Ventajas de usar Wireframes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/scoreapps.com\/blog\/wireframes\/#como-crear-un-wireframe-paso-a-paso\" >C\u00f3mo crear un wireframe paso a paso<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/scoreapps.com\/blog\/wireframes\/#aplicaciones-para-crear-wireframes\" >Aplicaciones para crear Wireframes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/scoreapps.com\/blog\/wireframes\/#ejemplos-de-wireframes-para-clientes\" >Ejemplos de wireframes para clientes<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"training-gratis-como-generar-100-nuevos-clientes-a-la-semana-con-un-unico-embudo-de-ventas\"><\/span>[Training GRATIS]: C\u00f3mo generar 100 Nuevos Clientes a la semana con un \u00fanico Embudo de Ventas<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Si tu P\u00e1gina Web no te genera un m\u00ednimo de 100 clientes nuevos cada semana&#8230;presta atenci\u00f3n porque en los pr\u00f3ximos minutos vas a aprender a duplicar, triplicar o incluso cuadruplicar el tama\u00f1o de cualquier negocio de forma garantizada.<\/p>\n<p>S\u00ed. Has le\u00eddo bien. Estamos tan seguros de que este sistema funciona que GARANTIZAMOS SUS RESULTADOS POR ESCRITO.<\/p>\n<p>\u2022 Sin malgastar dinero en publicidad.<br \/>\n\u2022 Sin generar contenido en redes sociales.<br \/>\n\u2022 Sin expertos en <a href=\"https:\/\/scoreapps.com\/blog\/ai-prompts-para-seo\/\">SEO<\/a>.<br \/>\n\u2022 Y sin invertir m\u00e1s dinero en marketing.<\/p>\n<p>Si no nos crees, mira este v\u00eddeo&#8230;<\/p>\n<div class=\"w-100 br-3 embed-responsive reproductor video-responsive\" data-id=\"d_UOtZX6jPE\">\n<div class=\"launchVideo\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-22230\" src=\"https:\/\/scoreapps.com\/blog\/wp-content\/uploads\/1200x628_optimized-1.jpg\" alt=\"Miniatura para el inicio del v\u00eddeo de webinar cliente final\" width=\"677\" height=\"381\" \/><\/div>\n<\/div>\n<div id=\"w1639412880256\" style=\"padding: 2px 0 14px;\">\n<style> .ewebinar__Dots { opacity: 1; animation: 1.5s linear 0s normal forwards 1 delayin; position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; } .ewebinar__LoadingDot { height: 0.5em; width: 0.5em; border-radius: 100%; display: inline-block; animation: 1.2s ewebinar-loading-dot ease-in-out infinite; } .ewebinar__LoadingDot:nth-of-type(2) { animation-delay: 0.15s; margin-left: 0.5em; } .ewebinar__LoadingDot:nth-of-type(3) { animation-delay: 0.25s; margin-left: 0.5em; } @keyframes delayin { 0% { opacity:0; } 66% { opacity:0; } 100% { opacity:1; } } @keyframes ewebinar-loading-dot { 30% { transform: translateY(-35%); opacity: 0.3; } 60  % { transform: translateY(0%); opacity: 0.8; } } .ewebinar__Widget { line-height: 1.5; } .ewebinar__Widget select { display: flex; } .ewebinar__Widget * { box-sizing: border-box; } .ewebinar__RegisterButton { font-family: inherit; } .ewebinar__RegisterButton.loaded .ewebinar__Dots { display: none !important; } .ewebinar__RegisterButton.loaded .ewebinar__ButtonText { opacity: 1 !important; } .ewebinar__RegisterButton * {           font-family: inherit; } .ewebinar__RegisterButton:hover {           transform: translateY(-1px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.1); border: none !important; } .ewebinar__RegisterButton:active { transform: translateY(0px); } @media only screen and (max-width: 614px) { .ewebinar__RegisterButton { max-width: 320px !important; min-height: 42px !important; width: 100% !important; } } <\/style>\n<p> <a class=\"ewebinar__RegisterButton__Wrap\" href=\"javascript:;\" style=\"text-decoration: none; undefined\"> <button class=\"ewebinar__Widget ewebinar__RegisterButton\" type=\"button\" style=\" font-family: inherit; position: relative; display: flex; padding: 0.7em 2em; cursor: pointer; align-items: center; justify-content: center; border-width: 0px; outline: none; border-radius: 50px; transition: all 0.2s; background: #2fb4fbff; color: #ffffff; margin: 0 auto; font-weight: 500; font-size: inherit; box-sizing: border-box; undefined \" > <\/p>\n<div class=\"ewebinar__Dots \"> <span class=\"ewebinar__LoadingDot\" style=\"background: #ffffff\"><\/span> <span class=\"ewebinar__LoadingDot\" style=\"background: #ffffff\"><\/span> <span class=\"ewebinar__LoadingDot\" style=\"background: #ffffff\"><\/span> <\/div>\n<p> <span class=\"ewebinar__ButtonText\" style=\"text-align:center; color:white !important; opacity: 0; white-space: nowrap\" ><b style:\"text-align:center;\">\u00a1ACCEDER AL TRAINING AHORA!<\/b><br \/>y obtener curso + swipe file gratis<\/span> <\/button> <\/a> <noscript> <\/p>\n<div style=\" margin-top: 1em; text-decoration: none; undefined\"> <a style=\"color: #000; font-size: 13px;\" href=\"https:\/\/marketing.scoreapps.com\/webinar-cliente-final\/registro\">\u00a1Acceder al Training AHORA!<\/a> <\/div>\n<p> <\/noscript> <\/div>\n<p><script>(function (w,d,s,o,f,js,fjs) { w['eWidget']=o;w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) }; if(d.getElementById(o)) return; js = d.createElement(s), fjs = d.getElementsByTagName(s)[0]; js.id = o; js.src = f; fjs.parentNode.insertBefore(js, fjs); }(window, document, 'script', '_ew', 'https:\/\/app.ewebinar.com\/widget.js'));_ew('init', {\"for\":\"Registration\",\"type\":\"Button\",\"btnText\":\"\u00a1Acceder al Training AHORA!\",\"source\":\"\",\"jitBtnText\":\"Go to session now\",\"addToCalendarBtnText\":\"Add to calendar\",\"replayBtnText\":\"Watch replay now\",\"onlyButton\":false,\"openInPopup\":false,\"showButtonTimer\":false,\"position\":\"Left\",\"mobilePosition\":\"Left\",\"url\":\"https:\/\/marketing.scoreapps.com\/webinar-cliente-final\/registro\",\"shortUrl\":\"https:\/\/webinar.scoreapps.com\/webinar\/3198\",\"title\":\"C%C3%B3mo%20Generar%20100%20clientes%20a%20la%20semana%20con%20un%20%C3%BAnico%20Embudo%20de%20Ventas\",\"description\":\"Ah%C3%AD%20va%20un%20avance%20de%20lo%20que%20compartir%C3%A9%20contigo%20en%20este%20Webinar%20GRATUITO%0A%E2%80%8B%0A%F0%9F%94%B9C%C3%B3mo%20generar%20cientos%20de%20clientes%20a%20la%20semana%20y%20c%C3%B3mo%20convertirlos%20en%20clientes%20de%20alto%20valor%20para%20tu%20negocio%20y%20retenerlos%20a%20largo%20plazo%20de%20forma%20automatizada.%0A%E2%80%8B%0A%F0%9F%94%B9C%C3%B3mo%20hacerlo%20sin%20gastar%20una%20fortuna%20en%20publicidad,%20sin%20tener%20que%20estar%20generando%20enormes%20cantidades%20de%20contenido%20todos%20los%20d%C3%ADas%20y%20sin%20tener%20que%20contratar%20enlaces%20ni%20expertos%20en%20posicionamiento%20SEO.%0A%E2%80%8B%0A%F0%9F%94%B9C%C3%B3mo%20implementarlo%20por%20ti%20mismo%20en%20cuesti%C3%B3n%20de%20horas%20y%20ver%20resultados%20en%20menos%20de%207%20d%C3%ADas.%20Entender%C3%A1s%20por%20qu%C3%A9%20la%20mayor%C3%ADa%20de%20las%20p%C3%A1ginas%20web%20de%20otras%20empresas%20no%20funcionan%20y%20cu%C3%A1l%20es%20la%20estrategia%20que%20necesitas%20para%20generar%20clientes%20de%20forma%20sistem%C3%A1tica.\",\"presenters\":[],\"image\":\"https:\/\/ewebinar.imgix.net\/ewebinar\/17562\/sections.imageWithText.imageMediaUrl-1638444598239?ixlib=js-2.3.2&fit=clip&w=425&h=337&dpr=2&&s=63b93d4af95cbba4b86469ce831cec64\",\"video\":\"https:\/\/www.youtube.com\/embed\/eYs7UTzHLds\",\"language\":\"es\",\"sessions\":[],\"borderRadius\":50,\"primaryColor\":\"#2fb4fbff\",\"readableColor\":\"#ffffff\",\"readableOnWhiteColor\":\"#2fb4fbff\",\"root\":\"w1639412880256\"});window.ewInit && window.ewInit();<\/script><\/p>\n<h2><span class=\"ez-toc-section\" id=\"%c2%bfque-es-un-wireframe\"><\/span>\u00bfQu\u00e9 es un Wireframe?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Empecemos por el principio. Un wireframe no es m\u00e1s que un <strong>dise\u00f1o de estructura <\/strong>de lo que m\u00e1s adelante ser\u00e1 una web o una aplicaci\u00f3n m\u00f3vil. Se trata de un boceto en el que se representan visualmente todos los componentes de la p\u00e1gina de manera muy esquem\u00e1tica para que se pueda ver f\u00e1cilmente y a simple vista lo que ser\u00e1 el resultado final.<\/p>\n<p>Estos prototipos son una herramienta muy \u00fatil antes de comenzar a trabajar en el dise\u00f1o web para organizar la informaci\u00f3n y fijar una estructura base. De hecho, a pesar de todas las herramientas de las que disponemos, es un trabajo que muchos dise\u00f1adores siguen haciendo a mano en un papel. Digamos que es como el dibujo que har\u00edas en una servilleta al imaginarte c\u00f3mo quieres que sea tu p\u00e1gina.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%c2%bfpara-que-sirve-un-wireframe\"><\/span>\u00bfPara qu\u00e9 sirve un Wireframe?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>El motivo por el que se hace un wireframe previo est\u00e1 muy claro, es <strong>la manera m\u00e1s r\u00e1pida de definir el contenido y los bloques<\/strong> de los que se compondr\u00e1 una web sin perder mucho tiempo. Debemos colocar d\u00f3nde ir\u00e1n los men\u00fas de navegaci\u00f3n, im\u00e1genes, bloques de contenido, descripciones de producto, etc. Adem\u00e1s de intentar definir c\u00f3mo se relacionar\u00e1n los elementos dentro de la p\u00e1gina.<\/p>\n<p>Pero no solo eso, un wireframe sirve para mucho m\u00e1s:<\/p>\n<p>&#8211;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Gracias a la simplicidad de estos esquemas podemos <strong>crear varias versiones<\/strong> del mismo proyecto web para poder valorar todas las opciones.<\/p>\n<p>&#8211;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Nos permite ser mucho <strong>m\u00e1s r\u00e1pidos al desarrollar la parte de dise\u00f1o <\/strong>ya que nos basamos en algo cerrado previamente.<\/p>\n<p>&#8211;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Permite que<strong> el cliente vea c\u00f3mo vamos a organizar los contenidos<\/strong> y que pueda modificar todo lo que quiera sin que suponga una p\u00e9rdida de tiempo para nosotros.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"ventajas-de-usar-wireframes\"><\/span>Ventajas de usar Wireframes<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>La verdad es que si nos paramos a pensar no encontramos nada en contra de los wireframes, su uso solo tiene ventajas. Y es que en realidad se trata del t\u00edpico esquema que hacemos al comenzar un proyecto para tener claro lo que tenemos que hacer.<\/p>\n<p>Estos son los principales <strong>beneficios de incorporar la creaci\u00f3n de wireframes<\/strong> a tu rutina de trabajo, tanto para la creaci\u00f3n de webs como de apps:<\/p>\n<p>&#8211;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <strong>Se hacen de manera r\u00e1pida<\/strong> sin tener que invertir a penas en su creaci\u00f3n. A tratarse de dise\u00f1os tan simples podemos hacer todos los que se nos ocurran sin que suponga un problema a la hora de facturar.<\/p>\n<p>&#8211;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Son<strong> la mejor manera de identificar problemas<\/strong> para poder corregirlos antes de haber invertido mucho tiempo. De hecho, gracias a los wireframes es posible detectar problemas b\u00e1sicos de usabilidad sin que suponga ning\u00fan drama.<\/p>\n<p>&#8211;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <strong>Se pueden modificar r\u00e1pidamente<\/strong>, por lo que puedes trabajar en un boceto actualizado casi en el momento de hacer cualquier cambio.<\/p>\n<p>&#8211;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Es una manera de conseguir una <strong>mayor usabilidad<\/strong> al haber planteado previamente la estructura y haber definido los pasos a seguir.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"como-crear-un-wireframe-paso-a-paso\"><\/span>C\u00f3mo crear un wireframe paso a paso<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Puedes pensar por lo que hemos dicho hasta ahora que hacer un wireframe no es m\u00e1s que garabatear un papel o hacer un dise\u00f1o sencillo por ordenador, pero lo cierto es que detr\u00e1s lleva un trabajo. Sencillo, pero que hay que tener en cuenta.<\/p>\n<p>Para poder tener un buen resultado al <strong>hacer un wireframe <\/strong>casi a la primera te recomendamos que, en la medida de lo posible, sigas este proceso junto con el cliente. Ya que de esta manera podr\u00e1s definir m\u00e1s claramente el proyecto que tiene en mente o al menos saber lo que no quiere. En caso de que est\u00e9s dise\u00f1ando una app o una web para ti, ten en cuenta tambi\u00e9n estos pasos.<\/p>\n<h3>1.\u00a0\u00a0 Define un mapa web.<\/h3>\n<p>Antes de nada tienes que tener muy claro las distintas secciones que tendr\u00e1 tu web, as\u00ed como los enlaces que habr\u00e1 entre ellas. Habitualmente,<strong> el mapa web se basa en los contenidos de la p\u00e1gina<\/strong> por lo que lo normal es que est\u00e9n definidos previamente. En caso de que no lo est\u00e9n es muy importante sentarse a decidir los diferentes apartados que necesitamos: p\u00e1gina principal, servicios, tienda online, p\u00e1ginas de producto, contacto, blog, etc.<\/p>\n<h3>2.\u00a0\u00a0 Fija una estructura.<\/h3>\n<p>Ahora ya s\u00ed que s\u00ed, comenzamos a meternos en el dise\u00f1o de la web aunque a un nivel muy b\u00e1sico. Se trata de empezar tomando las decisiones m\u00e1s b\u00e1sicas sobre la <strong>ret\u00edcula de la p\u00e1gina o app<\/strong>. Es decir, es el momento de optar por un dise\u00f1o a pantalla completa, elegir el lugar en el que colocaremos el men\u00fa o d\u00f3nde ir\u00e1 el logotipo.<\/p>\n<p>Ten en cuenta que puedes crear esta estructura t\u00fa s\u00f3lo desde cero o bien basarte en plantillas b\u00e1sicas predefinidas que podr\u00e1s modificar m\u00e1s adelante. Igualmente, es posible hacer este paso a mano en una libreta o usar Photoshop bas\u00e1ndonos en un grid.<\/p>\n<h3>3.\u00a0\u00a0 Introduce el contenido.<\/h3>\n<p>Cuando la estructura ya est\u00e1 bien definida hay que comenzar la <strong>composici\u00f3n con todos los elementos<\/strong> que queremos que aparezcan en la p\u00e1gina. Para ello lo mejor es hacer un listado de lo que debemos incluir obligatoriamente, aunque por supuesto, siendo flexibles en caso de que hagamos modificaciones.<\/p>\n<p>As\u00ed tendremos por ejemplo: sliders, fotos, v\u00eddeos, bloques de contenido, botones CTA o galer\u00edas de im\u00e1genes. Teniendo en cuenta el dise\u00f1o y el p\u00fablico de la web ve colocando los distintos elementos hasta llegar a una composici\u00f3n que pueda funcionar.<\/p>\n<h3>4.\u00a0\u00a0 Apunta las indicaciones que sean necesarias.<\/h3>\n<p>Ya que el wireframe suele ser una herramienta con la que presentar tu proyecto de dise\u00f1o a un cliente, es recomendable a\u00f1adir cualquier nota que pueda ayudar a la hora de explicar el dise\u00f1o o aclarar alguna decisi\u00f3n. Adem\u00e1s, es una oportunidad tambi\u00e9n para apuntar las indicaciones y sugerencias que haga el cliente.<\/p>\n<p>Como ves, <strong>hacer un wireframe<\/strong> antes de comenzar con el dise\u00f1o de un aplicaci\u00f3n m\u00f3vil o una web es relativamente f\u00e1cil y puede ayudar mucho a la hora de continuar con el proyecto. Adem\u00e1s de suponer un gran ahorro en el momento de presentar una propuesta a un cliente, ya que en muchas ocasiones se puede echar atr\u00e1s completamente el trabajo realizado hasta el momento.<\/p>\n<p>Para pon\u00e9rtelo a\u00fan m\u00e1s f\u00e1cil te chivamos algunas herramientas con las que puedes crear tus wireframes.<\/p>\n<p><!------------------------------------------------------- FORMULARIO LEAD MAGNET -------------------------------------------------------><\/p>\n<div class=\" cta-convert cf-2095-area-79309\"><\/div>\n<p><!-------------------------------------------------------------------- TEXTO -------------------------------------------------------------------------><\/p>\n<h2><span class=\"ez-toc-section\" id=\"aplicaciones-para-crear-wireframes\"><\/span>Aplicaciones para crear Wireframes<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Estas son las aplicaciones m\u00e1s populares usadas por dise\u00f1adores y programadores de todo el mundo a la hora de <strong>preparar wireframes<\/strong> al comenzar con un proyecto nuevo. Algunas son de pago y otras gratuitas pero lo cierto es que la elecci\u00f3n de una u otra depende m\u00e1s de los gustos personales de cada uno.<\/p>\n<h3><a href=\"https:\/\/wireframe.cc\/\" target=\"_blank\" rel=\"noopener\">Wireframe.cc<\/a><\/h3>\n<p>Una de las aplicaciones m\u00e1s populares a la hora de hacer wireframes es esta. Puedes acceder directamente desde tu navegador sin tener que descargar ning\u00fan programa ni hacer ning\u00fan tipo de inversi\u00f3n, lo que adem\u00e1s hace acceder sea muy r\u00e1pido.<\/p>\n<p>Tiene una interfaz muy sencilla que simula una aplicaci\u00f3n de dibujo con barras e iconos, lo que la ha convertido en una de las mejores herramientas online del sector.<\/p>\n<h3><a href=\"https:\/\/www.mockflow.com\/\" target=\"_blank\" rel=\"noopener\">Mockflow<\/a><\/h3>\n<p>En este caso estamos hablando de nuevo de una app a la que puedes acceder desde cualquier navegador siempre que tengas una cuenta creada. Aunque esta <strong>aplicaci\u00f3n en la nube<\/strong> cuenta con una versi\u00f3n gratuita, lo cierto es que las versiones de pago empiezan en los 14 d\u00f3lares, por lo que puede ser una buena opci\u00f3n al menos para probar cuando est\u00e1s comenzando.<\/p>\n<h3><a href=\"https:\/\/balsamiq.com\/\" target=\"_blank\" rel=\"noopener\">Balsamiq<\/a><\/h3>\n<p>Esta herramienta tiene muchos seguidores en el mundo del dise\u00f1o web y la programaci\u00f3n gracias en parte a la est\u00e9tica low-fi basada en dibujos, aunque tambi\u00e9n cuenta con una opci\u00f3n de l\u00edneas rectas m\u00e1s \u201cseria\u201d. En cualquier caso, es una app disponible tanto para Mac como para Windows que permite tambi\u00e9n el acceso desde un navegador, por lo que es muy accesible.<\/p>\n<p>A la hora de dise\u00f1ar cuenta con funcionalidades de arrastrar y soltar lo que hace que sea bastante r\u00e1pida y sencilla de usar. Adem\u00e1s, la versi\u00f3n de pago comienza desde 9 d\u00f3lares con dos proyectos al mes para aquellos que est\u00e9n comenzando.<\/p>\n<h3><a href=\"https:\/\/www.axure.com\/\" target=\"_blank\" rel=\"noopener\">Axure<\/a><\/h3>\n<p>El origen de las <strong>aplicaciones para la creaci\u00f3n de wireframes<\/strong>. Una de las primeras herramientas desarrollada de manera profesional para hacer prototipos de p\u00e1ginas web. Y como no pod\u00eda ser de otra manera, la antig\u00fcedad es un grado. Axure te permite crear bocetos interactivos y ver c\u00f3mo quedar\u00eda el dise\u00f1o en todo tipo de soportes.<\/p>\n<p>El precio de esta herramienta comienza en los 29 d\u00f3lares al mes por usuario y est\u00e1 disponible para Mac y Windows. Debemos destacar que se trata de una aplicaci\u00f3n profesional con una larga trayectoria detr\u00e1s y todo tipo de funcionalidades.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"ejemplos-de-wireframes-para-clientes\"><\/span>Ejemplos de wireframes para clientes<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Ahora que ya sabes lo que tienes que hacer para <strong>crear tus propios wireframes<\/strong> te presentamos algunos ejemplos reales para que te sirvan de fuente de inspiraci\u00f3n.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-16808\" src=\"https:\/\/scoreapps.com\/blog\/wp-content\/uploads\/ejemplo-wireframes-scaled.jpg\" alt=\"Ejemplos de Wireframes\" width=\"2560\" height=\"2560\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Te contamos <strong>qu\u00e9 es un wireframe, sus usos y ventajas<\/strong>. Adem\u00e1s, te ense\u00f1amos a hacer tus propios wireframes de manera sencilla con ejemplos reales de webs y apps. No te pierdas este contenido y empieza a deslumbrar a tus clientes con dise\u00f1os claros y f\u00e1cilmente modificables.<\/p>\n","protected":false},"author":15,"featured_media":22538,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-15923","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-marketing-movil"],"rank_math_seo":{"title":"\u25b7 Wireframes: Aprende a crear estructuras para tu web o app","description":"Descubre todo sobre los Wireframes, aprende a crear los bocetos para tu web o aplicaci\u00f3n m\u00f3vil \u2b50\ufe0fVentajas \u2b50\ufe0fPaso a paso \u2b50\ufe0fEjemplos \u2b50\ufe0fAplicaciones","focus_keyword":"wireframes","canonical_url":"","robots":["index"],"score":""},"_links":{"self":[{"href":"https:\/\/scoreapps.com\/blog\/wp-json\/wp\/v2\/posts\/15923","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/scoreapps.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/scoreapps.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/scoreapps.com\/blog\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/scoreapps.com\/blog\/wp-json\/wp\/v2\/comments?post=15923"}],"version-history":[{"count":0,"href":"https:\/\/scoreapps.com\/blog\/wp-json\/wp\/v2\/posts\/15923\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/scoreapps.com\/blog\/wp-json\/wp\/v2\/media\/22538"}],"wp:attachment":[{"href":"https:\/\/scoreapps.com\/blog\/wp-json\/wp\/v2\/media?parent=15923"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/scoreapps.com\/blog\/wp-json\/wp\/v2\/categories?post=15923"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/scoreapps.com\/blog\/wp-json\/wp\/v2\/tags?post=15923"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}