![\"Wireframe\"](\"http:\/\/www.uxabilidad.com\/wp-content\/uploads\/2010\/07\/wireframe.gif\")
<\/a>Un Wireframe es prototipo visual de baja calidad, es un armaz\u00f3n o esqueleto de lo que puede ser un sitio web o una aplicaci\u00f3n web. En ingl\u00e9s son sin\u00f3nimos de Wireframe: skeleton, blueprint, outline.<\/p>\n
Sirve para darnos una idea de que \u00e1reas van a conformar el sitio, su layout, jerarqu\u00edas y esquemas de navegaci\u00f3n. No deben tener elementos finalizados de dise\u00f1o (colores o tipograf\u00edas)<\/p>\n
Deben estar en blanco y negro o m\u00e1ximo en escala de grises, no deben tener color porque sirven m\u00e1s para validar la arquitectura, el layout. Los colores pueden suponer distracciones.<\/p>\n
Beneficios de los Wireframes<\/h2>\n\n- Lo primero y m\u00e1s importante es que se pueden hacer f\u00e1cil y r\u00e1pidamente.<\/li>\n
- Permiten explorar m\u00faltiples posibilidades.<\/li>\n
- Sirven para levantar requerimientos de forma r\u00e1pida.<\/li>\n
- Sirven para probar y validar esquemas de navegaci\u00f3n.<\/li>\n
- Pueden utilizarse para hacer pruebas de usabilidad en etapas tempranas del proyecto.<\/li>\n<\/ul>\n
<\/p>\n
<\/p>\n
![\"sketched](\"http:\/\/www.uxabilidad.com\/wp-content\/uploads\/HLIC\/webdesignledger.com\/wp-content\/uploads\/2010\/05\/sketched_wireframes_5.jpg\")
<\/a><\/p>\nLos Wireframes son representaciones esquem\u00e1ticas de una p\u00e1gina web, de manera coloquial puede ser el \u201cesqueleto\u201d del sitio, hacer wireframes resulta mucho m\u00e1s r\u00e1pido y econ\u00f3mico, es mucho m\u00e1s f\u00e1cil ver si la interfaz que estamos construyendo puede cumplir con los objetivos del negocio y generar buenas experiencias en los usuarios que la vayan a utilizar.<\/p>\n
Los wireframes son \u00fatiles porque nos permiten de una manera esquem\u00e1tica ver que elementos va a tener la interfaz, que jerarqu\u00edas debe tener y como se relacionan los elementos con el resto del sitio o que funcionalidad pueden tener, es mucho m\u00e1s eficiente si se quiere crear los diferentes wireframes para diversas pantallas, ver el flujo por el cual tendr\u00e1 que moverse el usuario y hacer cambios sobre estos wireframes ya que es mucho m\u00e1s r\u00e1pido.<\/p>\n
Una vez se tenga claro el funcionamiento y el esquema general de las pantallas si se debe proceder a realizar un wireframe m\u00e1s elaborado, es decir un mockup.<\/p>\n
Es importante crear esta cultura en la empresa en la que trabajamos o con los clientes que tengamos puesto que nos ayudar\u00e1 a tener un proceso de dise\u00f1o m\u00e1s eficiente y nos evitar\u00e1 sorpresas desagradables tales como montar un sitio de 200 p\u00e1ginas y 500 fotos y mostr\u00e1rselo al cliente para que nos diga que ya no le gusta de esa forma o que se lo imaginaba diferente.<\/p>\n
C\u00f3mo se hacen los Wireframes?<\/h2>\n
Existen diversas formas de hacer los wireframes, la m\u00e1s f\u00e1cil en papel y a mano, despues tomare una foto y listo, pero si se quiere se pueden hacer con recortes de papel (Paper propotipyng<\/a>).<\/p>\nHow to Wireframe<\/a>fromClay Parker Jones<\/a>onVimeo<\/a>.<\/p>\n <\/p>\n
<\/p>\n
<\/p>\n
Existen varias herramientas en internet que nos permiten hacer wireframes, les dejo algunas de las mejores que he encontrado.<\/p>\n
1.Balsamiq<\/a><\/h3>\n![\"Balsamiq](\"http:\/\/www.uxabilidad.com\/wp-content\/uploads\/HLIC\/net.onextrapixel.com\/wp-content\/uploads\/2009\/07\/balsamiq.jpg\" "\\"Balsamiq")
<\/a><\/p>\n2.iPlotz<\/a><\/h3>\n![\"iPlotz](\"http:\/\/www.uxabilidad.com\/wp-content\/uploads\/HLIC\/net.onextrapixel.com\/wp-content\/uploads\/2009\/07\/iplotz.jpg\" "\\"iPlotz")
<\/a><\/p>\n3.Pencil Project<\/a><\/h3>\n![\"Pencil](\"http:\/\/www.uxabilidad.com\/wp-content\/uploads\/HLIC\/net.onextrapixel.com\/wp-content\/uploads\/2009\/07\/pencilproject.jpg\" "\\"Pencil")
<\/a><\/p>\n4.templatr<\/a><\/h3>\n![\"Templatr](\"http:\/\/www.uxabilidad.com\/wp-content\/uploads\/HLIC\/net.onextrapixel.com\/wp-content\/uploads\/2009\/07\/templatr.jpg\" "\\"Templatr")
<\/a><\/p>\n5.Flair Builder<\/a><\/h3>\n![\"Flair](\"http:\/\/www.uxabilidad.com\/wp-content\/uploads\/HLIC\/net.onextrapixel.com\/wp-content\/uploads\/2009\/07\/flairbuilder.jpg\" "\\"Flair")
<\/a><\/p>\n <\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
Herramientas gratis para hacer Wireframes<\/h2>\n
A continuaci\u00f3n podr\u00e1n ver 10 herramientas gratis online que les permitir\u00e1n hacer wireframes.<\/p>\n
1.Mockingbird<\/h2>\n
![\"\"](\"http:\/\/www.uxabilidad.com\/wp-content\/uploads\/HLIC\/cdn.mashable.com\/wp-content\/uploads\/2010\/07\/Mockingbird.jpg\" "\\"Mockingbird\\"")
<\/a><\/p>\nEste es uno de mis favoritos por su sencillez de uso y cuenta con elementos b\u00e1sicos en la librer\u00eda, pero parra mi gusto los suficientes, existe una versi\u00f3n gratuita que permite guardar un proyecto con hasta 10 p\u00e1ginas y pueden exportarse a pdf.<\/p>\n
2.Lovely Charts<\/h2>\n
![\"\"](\"http:\/\/www.uxabilidad.com\/wp-content\/uploads\/HLIC\/cdn.mashable.com\/wp-content\/uploads\/2010\/07\/LovelyCharts.jpg\" "\\"LovelyCharts\\"")
<\/a><\/p>\nEste lo he utilizado para hacer diagramas, mapas del sitio y flujos de usuario, pero tambi\u00e9n sirve para hacer Wireframes.<\/p>\n
3.Cacoo<\/h2>\n
![\"\"](\"http:\/\/www.uxabilidad.com\/wp-content\/uploads\/HLIC\/cdn.mashable.com\/wp-content\/uploads\/2010\/07\/Cacoo.jpg\" "\\"Cacoo\\"")
<\/a><\/p>\nLo m\u00e1s interesante de este es que varios usuarios pueden trabajar en el mismo archivo al tiempo, la interface no me parece tan amigable puesto que ya tiene muchos controles.<\/p>\n
4.Gliffy<\/h2>\n
![\"\"](\"http:\/\/www.uxabilidad.com\/wp-content\/uploads\/HLIC\/cdn.mashable.com\/wp-content\/uploads\/2010\/07\/Gliffy.jpg\" "\\"Gliffy\\"")
<\/a><\/p>\n5.Lumzy<\/h2>\n
![\"\"](\"http:\/\/www.uxabilidad.com\/wp-content\/uploads\/HLIC\/cdn.mashable.com\/wp-content\/uploads\/2010\/07\/Lumzy.jpg\" "\\"Lumzy\\"")
<\/a><\/p>\n6.Mockflow<\/h2>\n
![\"\"](\"http:\/\/www.uxabilidad.com\/wp-content\/uploads\/HLIC\/cdn.mashable.com\/wp-content\/uploads\/2010\/07\/Mockflow.jpg\" "\\"Mockflow\\"")
<\/a><\/p>\n7. Pencil Project<\/h2>\n
![\"\"](\"http:\/\/www.uxabilidad.com\/wp-content\/uploads\/HLIC\/cdn.mashable.com\/wp-content\/uploads\/2010\/07\/Pencil.jpg\" "\\"Pencil\\"")
<\/a><\/p>\n8.SimpleDiagrams<\/h2>\n
![\"\"](\"http:\/\/www.uxabilidad.com\/wp-content\/uploads\/HLIC\/cdn.mashable.com\/wp-content\/uploads\/2010\/07\/SimpleDiagrams.jpg\" "\\"SimpleDiagrams\\"")
<\/a><\/p>\n9. Denim<\/h2>\n
![\"\"](\"http:\/\/www.uxabilidad.com\/wp-content\/uploads\/HLIC\/cdn.mashable.com\/wp-content\/uploads\/2010\/07\/Denim.jpg\" "\\"Denim\\"")
<\/a><\/p>\n10.Website Wireframe<\/h2>\n
![\"website\"](\"http:\/\/www.uxabilidad.com\/wp-content\/uploads\/2010\/07\/website.jpg\")
<\/a><\/p>\n <\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
Herramientas gratuitas para dise\u00f1ar wireframes<\/h1>\n
1-Mockflow<\/a>: cuenta con una librer\u00eda de plantillas donde podr\u00e1s elegir la m\u00e1s adecuada para organizar tu contenido web. Si bien es gratuito, existe una versi\u00f3n de pago para usuarios que necesiten funciones m\u00e1s avanzadas.<\/p>\n2-Mockingbird:<\/a>permite crear y compartirwireframes<\/em>online<\/em>. Interfazdrag and drop<\/em>muy simple de utilizar, interfaz limpia y f\u00e1cil de usar.<\/p>\n3-Lovely Charts<\/a>: herramientaonline<\/em>gratuita para crear el esquema de tu sitio web. Ideal para quienes buscan una alternativa simple para dise\u00f1ar suwireframe<\/em>.<\/p>\n4-Cacoo<\/a>: es una herramienta f\u00e1cil de utilizar para crearwireframes<\/em>completamenteonline<\/em>. Su caracter\u00edstica m\u00e1s destacable es la posibilidad de colaborar entre usuarios en tiempo real.<\/p>\n5-Gliffy<\/a>: otra herramienta gratuita y online para crearmockups<\/em>de tu sitio web. Cuenta con una librer\u00eda de esquemas y con una API para que los desarrolladores puedan integrar la herramienta con sus aplicaciones.<\/p>\n <\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
Pidoco<\/h2>\n
Pidoco es una plataforma de colaboraci\u00f3n en l\u00ednea en tiempo real, para crear web interactivas y prototipos de software, probarlos, discutirlos y optimizarlos.<\/p>\n
![\"pidoco\"](\"http:\/\/www.maspixel.com\/wp-content\/uploads\/picolo.jpg\" "\\"pidoco\\"")
<\/a><\/p>\nEntrar en Pidoco<\/a><\/p>\nProtoShare<\/h2>\n
ProtoShare es una herramienta de colaboraci\u00f3n en l\u00ednea para construir Wireframes, prototipos de p\u00e1ginas web din\u00e1micas y p\u00e1ginas web navegables que los miembros del equipo pueden revisar y comentar en tiempo real.<\/p>\n
![\"protoshare\"](\"http:\/\/www.maspixel.com\/wp-content\/uploads\/protoshare.jpg\" "\\"protoshare\\"")
<\/a><\/p>\nEntrar en ProtoShare<\/a><\/p>\niPlotz<\/h2>\n
Con iPlotz puedes crear Wireframes hacer clic, navegable para crear la experiencia de un sitio web real o aplicaci\u00f3n de software. Tambi\u00e9n puede invitar a otros a comentar sobre los dise\u00f1os, y una vez listo, puedes gestionar las tareas para que los desarrolladores y dise\u00f1adores creen el proyecto.<\/p>\n
![\"iplotz\"](\"http:\/\/www.maspixel.com\/wp-content\/uploads\/iplotz.jpg\" "\\"iplotz\\"")
<\/a><\/p>\nEntrar en IPlotz<\/a><\/p>\nHot Gloo<\/h2>\n
Hot Gloo es la aplicaci\u00f3n de Wireframes en l\u00ednea, actualmente en versi\u00f3n beta gratuita. Usted puede arrastrar y soltar elementos, escalar, enlazar, el nombre y cambiar el nombre de ellos. Tambi\u00e9n puede editar, comentar y compartir cualquier momento del proceso de desarrollo con colegas y clientes.<\/p>\n
![\"hotgloo\"](\"http:\/\/www.maspixel.com\/wp-content\/uploads\/hotgloo.jpg\" "\\"hotgloo\\"")
<\/a><\/p>\nEntrar en Hot Gloo<\/a><\/p>\nPencil<\/h2>\n
Pencil es un complemento de Firefox para crear diagramas y prototipos de interfaz gr\u00e1fica de usuario. Incluye la construcci\u00f3n de diagramas y prototipos, documentos de multi-p\u00e1ginas, a\u00f1adir objetos externos, instalaci\u00f3n de plantillas definidas por el usuario,\u2026 etc\u2026 Es importante anotar que esta herramienta es totalmente gratuita.<\/p>\n
![\"pencil\"](\"http:\/\/www.maspixel.com\/wp-content\/uploads\/pencil_firefox.jpg\" "\\"pencil_firefox\\"")
<\/a><\/p>\nDescargar Componente Pencil de Firefox<\/a><\/p>\nvideo con la instalaci\u00f3n y el funcionamiento por si lo quer\u00e9is ver:<\/span>
http:\/\/www.noticiasdelacalle.es\/2012\/07\/11\/instalacion-y-funcionamiento-de-la-herramienta-de-wireframes-pencil\/<\/a><\/p>\n <\/p>\n
Gliffy<\/h2>\n
Gliffy es un software que hace que sea f\u00e1cil crear Wireframes de sitios web y compartir maquetas web con alguien. Puede exportar su estructura y dise\u00f1os. No es totalmente gratuita ya que tiene un periodo de prueba y luego debes pagara para continuar con su uso.<\/p>\n
![\"gliffy\"](\"http:\/\/www.maspixel.com\/wp-content\/uploads\/gliffy.jpg\" "\\"gliffy\\"")
<\/a><\/p>\nEntrar en Gliffy<\/a><\/p>\nOmnigraffle<\/h2>\n
Omnigraffle es una aplicaci\u00f3n wireframe de diagramas, construido espec\u00edficamente para Mac OS. Usa la t\u00e9cnica de drag and drop, la interfaz WYSIWYG donde los usuarios pueden crear diagramas simples y complejos, diagramas de flujo, organigramas e ilustraciones. La importaci\u00f3n, exportaci\u00f3n de archivos de Visio es compatible.<\/p>\n
![\"Omnigraffle\"](\"http:\/\/www.maspixel.com\/wp-content\/uploads\/offmni.jpg\" "\\"Omnigraffle\\"")
<\/a><\/p>\nEntrar en Omnigraffle<\/a><\/p>\nMockupScreens<\/h2>\n
MockupScreens te permite crear prototipos de tu aplicaci\u00f3n y organizarlas en escenarios. Los usuarios pueden experimentar de forma interactiva con los clientes y visualizar r\u00e1pidamente escenarios de aplicaciones antes comenzar la programaci\u00f3n. Este producto tiene un coste entre 89 a 369 $.<\/p>\n
![\"mockupscreens\"](\"http:\/\/www.maspixel.com\/wp-content\/uploads\/mockupscreens.jpg\" "\\"mockupscreens\\"")
<\/a><\/p>\nEntrar en MockupScreens<\/a><\/p>\niRise<\/h2>\n
iRise es una herramienta de visualizaci\u00f3n de autor\u00eda que simula el flujo de trabajo y el comportamiento b\u00e1sico de las aplicaciones de negocio, propuesto a trav\u00e9s de comunicaci\u00f3n directa con las partes interesadas a trav\u00e9s de los requisitos de recopilaci\u00f3n de sesiones interactivas. iRise tambi\u00e9n ayuda a crear una versi\u00f3n de alta fidelidad en la simulaci\u00f3n. Quiz\u00e1s se la herramienta de m\u00e1s coste.<\/p>\n
![\"Irise\"](\"http:\/\/www.maspixel.com\/wp-content\/uploads\/irise.jpg\" "\\"irise\\"")
<\/a><\/p>\nEntrar en iRise<\/a><\/p>\nEstas son las herramientas m\u00e1s populares pero tambi\u00e9n os dejo otras herramientas que son: http:\/\/garmahis.com\/reviews\/wireframe-tools\/%26hl%3Des%26client%3Dfirefox-a%26hs%3DzD9%26rls%3Dorg.mozilla<\/a>:es-ES:official%26prmd%3Divns&rurl=translate.google.es&usg=ALkJrhh86Q1UC6bISjudeiWE5R2c2FtLkA\u00bb style=\u00bbborder: 0px; margin: 0px; outline: 0px; padding: 0px; background-color: transparent; vertical-align: baseline; text-decoration: underline; color: rgb(49, 81, 162); background-position: initial initial; background-repeat: initial initial;\u00bb>Axure RP Pro, http:\/\/garmahis.com\/reviews\/wireframe-tools\/%26hl%3Des%26client%3Dfirefox-a%26hs%3DzD9%26rls%3Dorg.mozilla<\/a>:es-ES:official%26prmd%3Divns&rurl=translate.google.es&usg=ALkJrhiBWIixUnc0qMAZfTp5tcoUvDmkyw\u00bb style=\u00bbborder: 0px; margin: 0px; outline: 0px; padding: 0px; background-color: transparent; vertical-align: baseline; text-decoration: underline; color: rgb(49, 81, 162); background-position: initial initial; background-repeat: initial initial;\u00bb>Jumpchart, http:\/\/garmahis.com\/reviews\/wireframe-tools\/%26hl%3Des%26client%3Dfirefox-a%26hs%3DzD9%26rls%3Dorg.mozilla<\/a>:es-ES:official%26prmd%3Divns&rurl=translate.google.es&usg=ALkJrhgdBkeLBrgh7y0sK_pIltfhjYDc-g\u00bb style=\u00bbborder: 0px; margin: 0px; outline: 0px; padding: 0px; background-color: transparent; vertical-align: baseline; text-decoration: underline; color: rgb(49, 81, 162); background-position: initial initial; background-repeat: initial initial;\u00bb>EightShapes Unify, http:\/\/garmahis.com\/reviews\/wireframe-tools\/%26hl%3Des%26client%3Dfirefox-a%26hs%3DzD9%26rls%3Dorg.mozilla<\/a>:es-ES:official%26prmd%3Divns&rurl=translate.google.es&usg=ALkJrhgnPmwcVbuinUwpS9t4Gwlvp9Hbug\u00bb style=\u00bbborder: 0px; margin: 0px; outline: 0px; padding: 0px; background-color: transparent; vertical-align: baseline; text-decoration: underline; color: rgb(49, 81, 162); background-position: initial initial; background-repeat: initial initial;\u00bb>Wireframesketcher, el popular http:\/\/garmahis.com\/reviews\/wireframe-tools\/%26hl%3Des%26client%3Dfirefox-a%26hs%3DzD9%26rls%3Dorg.mozilla<\/a>:es-ES:official%26prmd%3Divns&rurl=translate.google.es&usg=ALkJrhhgFH1e5m2oaNFwiEcBf3Fntt8AEA\u00bb style=\u00bbborder: 0px; margin: 0px; outline: 0px; padding: 0px; background-color: transparent; vertical-align: baseline; text-decoration: underline; color: rgb(49, 81, 162); background-position: initial initial; background-repeat: initial initial;\u00bb>Microsoft Visio, http:\/\/garmahis.com\/reviews\/wireframe-tools\/%26hl%3Des%26client%3Dfirefox-a%26hs%3DzD9%26rls%3Dorg.mozilla<\/a>:es-ES:official%26prmd%3Divns&rurl=translate.google.es&usg=ALkJrhjuKv3R8MV0kQdLc2T9zh1037wzmw\u00bb style=\u00bbborder: 0px; margin: 0px; outline: 0px; padding: 0px; background-color: transparent; vertical-align: baseline; text-decoration: underline; color: rgb(49, 81, 162); background-position: initial initial; background-repeat: initial initial;\u00bb>Balsamiq Mockups, http:\/\/garmahis.com\/reviews\/wireframe-tools\/%26hl%3Des%26client%3Dfirefox-a%26hs%3DzD9%26rls%3Dorg.mozilla<\/a>:es-ES:official%26prmd%3Divns&rurl=translate.google.es&usg=ALkJrhjUCKO05o-iD2KoHM2TAUB2X6tQtA\u00bb style=\u00bbborder: 0px; margin: 0px; outline: 0px; padding: 0px; background-color: transparent; vertical-align: baseline; text-decoration: underline; color: rgb(49, 81, 162); background-position: initial initial; background-repeat: initial initial;\u00bb>MxGraph, http:\/\/garmahis.com\/reviews\/wireframe-tools\/%26hl%3Des%26client%3Dfirefox-a%26hs%3DzD9%26rls%3Dorg.mozilla<\/a>:es-ES:official%26prmd%3Divns&rurl=translate.google.es&usg=ALkJrhi9cftq4-jlTGyk4q7nAJrZ2aRKYA\u00bb style=\u00bbborder: 0px; margin: 0px; outline: 0px; padding: 0px; background-color: transparent; vertical-align: baseline; text-decoration: underline; color: rgb(49, 81, 162); background-position: initial initial; background-repeat: initial initial;\u00bb>Justinmind Prototyper, http:\/\/garmahis.com\/reviews\/wireframe-tools\/%26hl%3Des%26client%3Dfirefox-a%26hs%3DzD9%26rls%3Dorg.mozilla<\/a>:es-ES:official%26prmd%3Divns&rurl=translate.google.es&usg=ALkJrhhHx3eNPuwZr1dwpssXlDbOl3p8cQ\u00bb style=\u00bbborder: 0px; margin: 0px; outline: 0px; padding: 0px; background-color: transparent; vertical-align: baseline; text-decoration: underline; color: rgb(49, 81, 162); background-position: initial initial; background-repeat: initial initial;\u00bb>ForeUI, http:\/\/garmahis.com\/reviews\/wireframe-tools\/%26hl%3Des%26client%3Dfirefox-a%26hs%3DzD9%26rls%3Dorg.mozilla<\/a>:es-ES:official%26prmd%3Divns&rurl=translate.google.es&usg=ALkJrhhSHMVMkQlGiCJdTmp2CSWUQ9XwnA\u00bb style=\u00bbborder: 0px; margin: 0px; outline: 0px; padding: 0px; background-color: transparent; vertical-align: baseline; text-decoration: underline; color: rgb(49, 81, 162); background-position: initial initial; background-repeat: initial initial;\u00bb>FlairBuilder, http:\/\/garmahis.com\/reviews\/wireframe-tools\/%26hl%3Des%26client%3Dfirefox-a%26hs%3DzD9%26rls%3Dorg.mozilla<\/a>:es-ES:official%26prmd%3Divns&rurl=translate.google.es&usg=ALkJrhgPtxyf_LI07r7BaKm0QVAgMBNr-A\u00bb style=\u00bbborder: 0px; margin: 0px; outline: 0px; padding: 0px; background-color: transparent; vertical-align: baseline; text-decoration: underline; color: rgb(49, 81, 162); background-position: initial initial; background-repeat: initial initial;\u00bb>Justproto, http:\/\/garmahis.com\/reviews\/wireframe-tools\/%26hl%3Des%26client%3Dfirefox-a%26hs%3DzD9%26rls%3Dorg.mozilla<\/a>:es-ES:official%26prmd%3Divns&rurl=translate.google.es&usg=ALkJrhgs2orTigr-tInbzjxDh_wXQioQTw\u00bb style=\u00bbborder: 0px; margin: 0px; outline: 0px; padding: 0px; background-color: transparent; vertical-align: baseline; text-decoration: underline; color: rgb(49, 81, 162); background-position: initial initial; background-repeat: initial initial;\u00bb>Lucid Specpara que pod\u00e1is comparar y elegir la que m\u00e1s se adapte a las necesidades de vuestros proyectos.<\/p>\n <\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
En esta ocasi\u00f3n, incluimos una colecci\u00f3n de herramientas gratuitas para crear prototipos y maquetas.<\/p>\n
Lumzy \u2013 Herramienta para creaci\u00f3n r\u00e1pida de maquetas y prototipos<\/a><\/h2>\n![\"herramientas](\"http:\/\/almacenplantillasweb.es\/images\/herramientas-gratis-wireframing-mockup\/herramientas-mockup-wireframe_01.jpg\" "\\"Lumzy")
<\/a>
Lumzy<\/a>, nos permite puede crear maquetas de sitios web o aplicacines mediante la adici\u00f3n de los eventos de una extensa lista de controles. Adem\u00e1s de ser una gran herramienta para la creaci\u00f3n de maquetas, tambi\u00e9n puedes crear mensajes de alerta y p\u00e1ginas de navegaci\u00f3n, a\u00f1adir enlaces a contenidos externos, y mucho m\u00e1s. Por otra parte nos ofrece un conjunto de herramientas de colaboraci\u00f3n y un motor de chat para deliberar sobre los dise\u00f1os. Todo esto y es absolutamentegratis.<\/strong>
P\u00e1gina de la herramienta: Lumzy Homepage<\/a><\/p>\n![\"herramientas](\"http:\/\/almacenplantillasweb.es\/images\/herramientas-gratis-wireframing-mockup\/herramientas-mockup-wireframe_02.jpg\" "\\"Editor")
<\/a> <\/p>\nEditor de Lumzy<\/p>\n<\/p><\/div>\n
\nMockup Builder \u2013 Aplicaci\u00f3n de prototipado<\/a><\/h2>\n![\"wireframe](\"http:\/\/i0.wp.com\/speckyboy.specky.netdna-cdn.com\/wp-content\/uploads\/2011\/02\/wireframe_a.jpg?resize=576%2C262\" "\\"Mockup")
<\/a>
Mockup Builder<\/a>es una herramienta para desarrollar prototipos muy vers\u00e1til que nos permite crear maquetas de interfaz de usuario, wireframes interactivos, dise\u00f1os web, prototipos para software de escritorio e incluso mapas de sitio y \u00e1rboles de navegaci\u00f3n.
Tambi\u00e9n aporta herramientas de colaboraci\u00f3n para compartir nuestros dise\u00f1os con clientes y colegas. Y s\u00ed, es totalmenteGRATIS<\/strong>
P\u00e1gina de la herramienta: Mockup Builder<\/a><\/p>\n![\"wireframe](\"http:\/\/i1.wp.com\/speckyboy.specky.netdna-cdn.com\/wp-content\/uploads\/2011\/02\/wireframe_b.jpg?resize=576%2C281\" "\\"10")
<\/a> <\/p>\nEditor de Mockup Builder<\/p>\n<\/p><\/div>\n
\nTiggr \u2013 Creaci\u00f3n colaborativa de prototipos<\/a><\/h2>\n![\"herramientas](\"http:\/\/almacenplantillasweb.es\/images\/herramientas-gratis-wireframing-mockup\/herramientas-mockup-wireframe_03.jpg\" "\\"Tiggr")
<\/a><\/p>\nLa idea detr\u00e1s de Tiggr (actualmente en versi\u00f3n beta) es aportar los recursos necesarios para crear prototipos para sitios web, aplicaciones de escritorio o aplicaciones m\u00f3viles. Permite dise\u00f1ar de un gran n\u00famero de componentes, compartir nuestro trabajo (a trav\u00e9s de correo electr\u00f3nico, Twitter o Facebook), y generar c\u00f3digo HTML \/ JS \/ CSS, para que pueda obtener una vista previa maquetas de la interfaz de usuario muy r\u00e1pidamente. Precisa de registro en la herramienta y, es gratis.<\/p>\n
P\u00e1gina de la herramienta: Tiggr<\/a><\/p>\n![\"herramientas](\"http:\/\/almacenplantillasweb.es\/images\/herramientas-gratis-wireframing-mockup\/herramientas-mockup-wireframe_04.jpg\" "\\"Tiggr")
<\/a> <\/p>\nTiggr – Apariencia del editor<\/p>\n<\/p><\/div>\n
\nFrame Box \u2013 Herramienta online para crear Mockups<\/a><\/h2>\n![\"herramientas](\"http:\/\/almacenplantillasweb.es\/images\/herramientas-gratis-wireframing-mockup\/herramientas-mockup-wireframe_05.jpg\" "\\"Frame")
<\/a>
Frame Box<\/a>nos permite arrastrar y soltar, cambiar el tama\u00f1o y copiar \/ pegar los elementos de una interfaz de usuario de forma que nos facilita la creaci\u00f3n de maquetas y prototipos. Esgratis<\/strong>y s\u00f3lo requiere una inscripci\u00f3n r\u00e1pida.does not have an extensive list of features (like the web based apps above).
P\u00e1gina de la herramienta: Frame Box<\/a><\/p>\n
\nSimpleDiagrams Edici\u00f3n gratuita<\/a><\/h2>\n![\"herramientas](\"http:\/\/almacenplantillasweb.es\/images\/herramientas-gratis-wireframing-mockup\/herramientas-mockup-wireframe_08.jpg\" "\\"SimpleDiagrams")
<\/a>
La versi\u00f3n gratuita de SimpleDiagrams<\/a>es una aplicaci\u00f3n Adobe Air que nos permite plantear, r\u00e1pidamente, ideas de dise\u00f1o. Cuenta con una importante librer\u00eda de elementos sobre los que podemos realizar drag & drop, entre otras funcionalidades interesantes.
P\u00e1gina de la herramienta: SimpleDiagrams<\/a><\/p>\n
\niPhone Mockup<\/a><\/h2>\n![\"herramientas](\"http:\/\/almacenplantillasweb.es\/images\/herramientas-gratis-wireframing-mockup\/herramientas-mockup-wireframe_09.jpg\" "\\"iPhone")
<\/a>
Con la herramienta iPhone Mockup<\/a>tenemos la opci\u00f3n de usar ya sea el editor de estilo de l\u00e1piz (captura de pantalla anterior) o el editor de ilustraciones (imagen abajo).<\/span>En cualquiera de las dos opciones nospermite crear maquetas para iPhone maquetas muy r\u00e1pidamente, compartirlas con otras personas.<\/span><\/span><\/p>\nP\u00e1gina de la herramienta: iPhone Mockup<\/a><\/p>\n![\"herramientas](\"http:\/\/almacenplantillasweb.es\/images\/herramientas-gratis-wireframing-mockup\/herramientas-mockup-wireframe_10.jpg\" "\\"Editor")
<\/a> <\/p>\nEditor de iPhone Mockup<\/p>\n<\/p><\/div>\n
\nfluidIA<\/a><\/h2>\n![\"herramientas](\"http:\/\/almacenplantillasweb.es\/images\/herramientas-gratis-wireframing-mockup\/herramientas-mockup-wireframe_11.jpg\" "\\"fluidIA\\"")
<\/a>
fluidIA<\/a>es una herramienta de dise\u00f1o basada \u200b\u200ben web para desarrollar prototipos de interfaces de usuario.<\/span><\/p>\nPagina de la herramienta: fluidIA<\/a><\/p>\n![\"herramientas](\"http:\/\/almacenplantillasweb.es\/images\/herramientas-gratis-wireframing-mockup\/herramientas-mockup-wireframe_12.jpg\" "\\"Editor")
<\/a><\/p>\n
\nPencil Project<\/a><\/h2>\n![\"herramientas](\"http:\/\/almacenplantillasweb.es\/images\/herramientas-gratis-wireframing-mockup\/herramientas-mockup-wireframe_13.jpg\" "\\"Pencil")
<\/a>
Pencil Project<\/a>es un complemento gratuito de Firefox para el dise\u00f1o de prototipos de interfaces de usuario. Cuenta con unabase de plantillas para p\u00e1ginas y, despu\u00e9s, exportarlas a PNG, formatos Openoffice.org, documento HTML, documentos de Word o PDF.<\/span><\/span><\/p>\nP\u00e1gina de la herramienta: Pencil Project<\/a><\/p>\n![\"herramientas](\"http:\/\/almacenplantillasweb.es\/images\/herramientas-gratis-wireframing-mockup\/herramientas-mockup-wireframe_14.jpg\" "\\"Editor")
<\/a> <\/p>\nEditor de Pencil Project<\/p>\n<\/p><\/div>\n
\nCogTool \u2013 Herramienta de prototipado para interfaces de usuario<\/a><\/h2>\n![\"herramientas](\"http:\/\/almacenplantillasweb.es\/images\/herramientas-gratis-wireframing-mockup\/herramientas-mockup-wireframe_17.jpg\" "\\"CogTool")
<\/a>
CogTool<\/a>es una herramienta gratuita para prototipado de interfaces de usuario. Tiene, como valor a\u00f1adido, que eval\u00faa autom\u00e1ticamente el dise\u00f1o que estamos realizando en funci\u00f3n de modelos predictivos del comportamiento del usuario.
P\u00e1gina de la herramienta: CogTool<\/a><\/p>\n
\nPrototype Composer<\/a><\/h2>\n![\"herramientas](\"http:\/\/almacenplantillasweb.es\/images\/herramientas-gratis-wireframing-mockup\/herramientas-mockup-wireframe_18.jpg\" "\\"Software")
<\/a>
Prototype Composer<\/a>cuenta con una edici\u00f3n para comunidades que nos posibilita la simulaci\u00f3n de la apariencia de las aplicaciones seg\u00fan vamos codific\u00e1ndolas.
Prototype Composer Homepage ?<\/a><\/p>\n
\nDUB \u2013 DENIM<\/a><\/h2>\n![\"herramientas](\"http:\/\/almacenplantillasweb.es\/images\/herramientas-gratis-wireframing-mockup\/herramientas-mockup-wireframe_19.jpg\" "\\"DUB")
<\/a>
DENIM es una herramienta gratuita de escritorio disponible para Windows, Unix y Mac OS X que se describe a si misma como \u201can Informal Tool For Early Stage Web Site and UI Design<\/em>\u201d.
Combina los beneficios de las utilidades basadas en papel con las herramientas de prototipado electr\u00f3nico.
P\u00e1gina de la herramienta: DUB \u2013 DENIM<\/a><\/p>\n
\nAplicaciones para creaci\u00f3n de maquetas y prototipos que cuentan con una versi\u00f3n gratuita<\/h2>\n
Todas ellas cuentan con opciones gratuitas con funcionalidades restringidas:<\/p>\n
\n- MockFlow: Utilidad online para crear Wireframes<\/a><\/li>\n
- Gliffy \u2013 Herramienta online para crear diagramas de software<\/a><\/li>\n
- Naview \u2013 Herramienta para desarrollar prototipos de elementos de navegaci\u00f3n<\/a><\/li>\n
- iPlotz \u2013 wireframing, mockups y prototipos<\/a><\/li>\n
- FlairBuilder \u2013 Wireframes, maquetas y prototipos<\/a><\/li>\n
- Cacoo \u2013 Creaci\u00f3n online de diagramas<\/a><\/li>\n
- Mockabilly \u2013 Maquetaci\u00f3n de aplicaciones para iPhone<\/a><\/li>\n<\/ul>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
En el mundo deldise\u00f1o<\/a>web, un wireframe es una representaci\u00f3n esquem\u00e1tica de una p\u00e1gina web, sin elementos gr\u00e1ficos que muestren contenido. Son realmente \u00fatiles como herramientas de comunicaci\u00f3n entre programadores, dise\u00f1adores y clientes.<\/p>\nAqu\u00ed os dejo una lista de aplicaciones que pod\u00e9is usar para realizar este tipo de dibujos, lista publicada enspyrestudios.com<\/a>. Por desgracia no todas son gratuitas, con lo que tendr\u00e9is que poner los pros y contras de cada opci\u00f3n antes de tomar una decisi\u00f3n.<\/p>\nHot Gloo<\/a><\/h3>\n![](\"http:\/\/wwwhatsnew.com\/wp-content\/uploads\/2010\/03\/wiretool-1.jpg\")
<\/a>
Opci\u00f3n en flash, muy sencilla de usar y con cuenta gratuita que no permite eltrabajo<\/a>en grupo.<\/p>\nMockingbird<\/a><\/h3>\n![](\"http:\/\/wwwhatsnew.com\/wp-content\/uploads\/2010\/03\/wiretool-2.jpg\")
<\/a>
Permite realizar los wireframes deforma<\/a>sencilla y dispone de la opci\u00f3n para compartir los resultados con otras personas.<\/p>\nPencil Project<\/a><\/h3>\n![](\"http:\/\/wwwhatsnew.com\/wp-content\/uploads\/2010\/03\/wiretool-3.jpg\")
<\/a>
Una extensi\u00f3n de Firefox muy\u00fatil<\/a>para quien realiza este tipo de trabajos<\/p>\nProtoShare<\/a><\/h3>\n![](\"http:\/\/wwwhatsnew.com\/wp-content\/uploads\/2010\/03\/wiretool-4.jpg\")
<\/a>
Muy f\u00e1cil de usar y con mucho trabajo para dise\u00f1ar. Tienen una versi\u00f3n de prueba de 30 d\u00edas.<\/p>\nBalsamiq<\/a><\/h3>\n![](\"http:\/\/wwwhatsnew.com\/wp-content\/uploads\/2010\/03\/wiretool-5.jpg\")
<\/a>
Nos permite trabajar como si estuvi\u00e9ramos dibujando con l\u00e1piz ypapel<\/a>, con lo que es ideal apra los que vienen del mundo cl\u00e1sico.<\/p>\nFlair Builder<\/a><\/h3>\n![](\"http:\/\/wwwhatsnew.com\/wp-content\/uploads\/2010\/03\/wiretool-6.jpg\")
<\/a>
Con una paleta de funciones ymucho espacio<\/a>para trabajar. Es una de las m\u00e1s populares.<\/p>\nCacoo<\/a><\/h3>\n![](\"http:\/\/wwwhatsnew.com\/wp-content\/uploads\/2010\/03\/wiretool-7.jpg\")
<\/a>
Permite hacer diagramas de pr\u00e1cticamente cualquier cosa, con posibilidad de enviar el resultado por email.<\/p>\nSerena: Prototype Composer<\/a><\/h3>\n![](\"http:\/\/wwwhatsnew.com\/wp-content\/uploads\/2010\/03\/wiretool-8.jpg\")
<\/a>
Herramienta de creaci\u00f3n de prototipos especialmente dise\u00f1ada para quien trabaja para proyectos web.<\/p>\nMockFlow<\/a><\/h3>\n![](\"http:\/\/wwwhatsnew.com\/wp-content\/uploads\/2010\/03\/wiretool-9.jpg\")
<\/a>
Con una amplia biblioteca de componentes y plantillas listas para usar. las versiones premium incluyen m\u00e1s opciones de este tipo.<\/p>\nfluidIA<\/a><\/h3>\n![](\"http:\/\/wwwhatsnew.com\/wp-content\/uploads\/2010\/03\/wiretool-10.jpg\")
<\/a>
Una plataforma que permite a los desarrolladores construir un sistema de dibujo de prototipos de forma colaborativa.<\/p>\nLumzy<\/a><\/h3>\n![](\"http:\/\/wwwhatsnew.com\/wp-content\/uploads\/2010\/03\/wiretool-11.jpg\")
<\/a>
Nos permite dibujar a mano o incluir componente dise\u00f1ados previamente.<\/p>\nGUI Studio Design<\/a><\/h3>\n
<\/p>\n
<\/p>\n
Los Wireframes son representaciones esquem\u00e1ticas de una p\u00e1gina web, de manera coloquial puede ser el \u201cesqueleto\u201d del sitio, hacer wireframes resulta mucho m\u00e1s r\u00e1pido y econ\u00f3mico, es mucho m\u00e1s f\u00e1cil ver si la interfaz que estamos construyendo puede cumplir con los objetivos del negocio y generar buenas experiencias en los usuarios que la vayan a utilizar.<\/p>\n Los wireframes son \u00fatiles porque nos permiten de una manera esquem\u00e1tica ver que elementos va a tener la interfaz, que jerarqu\u00edas debe tener y como se relacionan los elementos con el resto del sitio o que funcionalidad pueden tener, es mucho m\u00e1s eficiente si se quiere crear los diferentes wireframes para diversas pantallas, ver el flujo por el cual tendr\u00e1 que moverse el usuario y hacer cambios sobre estos wireframes ya que es mucho m\u00e1s r\u00e1pido.<\/p>\n Una vez se tenga claro el funcionamiento y el esquema general de las pantallas si se debe proceder a realizar un wireframe m\u00e1s elaborado, es decir un mockup.<\/p>\n Es importante crear esta cultura en la empresa en la que trabajamos o con los clientes que tengamos puesto que nos ayudar\u00e1 a tener un proceso de dise\u00f1o m\u00e1s eficiente y nos evitar\u00e1 sorpresas desagradables tales como montar un sitio de 200 p\u00e1ginas y 500 fotos y mostr\u00e1rselo al cliente para que nos diga que ya no le gusta de esa forma o que se lo imaginaba diferente.<\/p>\n Existen diversas formas de hacer los wireframes, la m\u00e1s f\u00e1cil en papel y a mano, despues tomare una foto y listo, pero si se quiere se pueden hacer con recortes de papel (Paper propotipyng<\/a>).<\/p>\n How to Wireframe<\/a>fromClay Parker Jones<\/a>onVimeo<\/a>.<\/p>\n <\/p>\n <\/p>\n <\/p>\n Existen varias herramientas en internet que nos permiten hacer wireframes, les dejo algunas de las mejores que he encontrado.<\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n A continuaci\u00f3n podr\u00e1n ver 10 herramientas gratis online que les permitir\u00e1n hacer wireframes.<\/p>\n Este es uno de mis favoritos por su sencillez de uso y cuenta con elementos b\u00e1sicos en la librer\u00eda, pero parra mi gusto los suficientes, existe una versi\u00f3n gratuita que permite guardar un proyecto con hasta 10 p\u00e1ginas y pueden exportarse a pdf.<\/p>\n Este lo he utilizado para hacer diagramas, mapas del sitio y flujos de usuario, pero tambi\u00e9n sirve para hacer Wireframes.<\/p>\n Lo m\u00e1s interesante de este es que varios usuarios pueden trabajar en el mismo archivo al tiempo, la interface no me parece tan amigable puesto que ya tiene muchos controles.<\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n 1-Mockflow<\/a>: cuenta con una librer\u00eda de plantillas donde podr\u00e1s elegir la m\u00e1s adecuada para organizar tu contenido web. Si bien es gratuito, existe una versi\u00f3n de pago para usuarios que necesiten funciones m\u00e1s avanzadas.<\/p>\n 2-Mockingbird:<\/a>permite crear y compartirwireframes<\/em>online<\/em>. Interfazdrag and drop<\/em>muy simple de utilizar, interfaz limpia y f\u00e1cil de usar.<\/p>\n 3-Lovely Charts<\/a>: herramientaonline<\/em>gratuita para crear el esquema de tu sitio web. Ideal para quienes buscan una alternativa simple para dise\u00f1ar suwireframe<\/em>.<\/p>\n 4-Cacoo<\/a>: es una herramienta f\u00e1cil de utilizar para crearwireframes<\/em>completamenteonline<\/em>. Su caracter\u00edstica m\u00e1s destacable es la posibilidad de colaborar entre usuarios en tiempo real.<\/p>\n 5-Gliffy<\/a>: otra herramienta gratuita y online para crearmockups<\/em>de tu sitio web. Cuenta con una librer\u00eda de esquemas y con una API para que los desarrolladores puedan integrar la herramienta con sus aplicaciones.<\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n Pidoco es una plataforma de colaboraci\u00f3n en l\u00ednea en tiempo real, para crear web interactivas y prototipos de software, probarlos, discutirlos y optimizarlos.<\/p>\n Entrar en Pidoco<\/a><\/p>\n ProtoShare es una herramienta de colaboraci\u00f3n en l\u00ednea para construir Wireframes, prototipos de p\u00e1ginas web din\u00e1micas y p\u00e1ginas web navegables que los miembros del equipo pueden revisar y comentar en tiempo real.<\/p>\n Entrar en ProtoShare<\/a><\/p>\n Con iPlotz puedes crear Wireframes hacer clic, navegable para crear la experiencia de un sitio web real o aplicaci\u00f3n de software. Tambi\u00e9n puede invitar a otros a comentar sobre los dise\u00f1os, y una vez listo, puedes gestionar las tareas para que los desarrolladores y dise\u00f1adores creen el proyecto.<\/p>\n Entrar en IPlotz<\/a><\/p>\n Hot Gloo es la aplicaci\u00f3n de Wireframes en l\u00ednea, actualmente en versi\u00f3n beta gratuita. Usted puede arrastrar y soltar elementos, escalar, enlazar, el nombre y cambiar el nombre de ellos. Tambi\u00e9n puede editar, comentar y compartir cualquier momento del proceso de desarrollo con colegas y clientes.<\/p>\n Entrar en Hot Gloo<\/a><\/p>\n Pencil es un complemento de Firefox para crear diagramas y prototipos de interfaz gr\u00e1fica de usuario. Incluye la construcci\u00f3n de diagramas y prototipos, documentos de multi-p\u00e1ginas, a\u00f1adir objetos externos, instalaci\u00f3n de plantillas definidas por el usuario,\u2026 etc\u2026 Es importante anotar que esta herramienta es totalmente gratuita.<\/p>\n Descargar Componente Pencil de Firefox<\/a><\/p>\n video con la instalaci\u00f3n y el funcionamiento por si lo quer\u00e9is ver:<\/span> <\/p>\n Gliffy es un software que hace que sea f\u00e1cil crear Wireframes de sitios web y compartir maquetas web con alguien. Puede exportar su estructura y dise\u00f1os. No es totalmente gratuita ya que tiene un periodo de prueba y luego debes pagara para continuar con su uso.<\/p>\n Entrar en Gliffy<\/a><\/p>\n Omnigraffle es una aplicaci\u00f3n wireframe de diagramas, construido espec\u00edficamente para Mac OS. Usa la t\u00e9cnica de drag and drop, la interfaz WYSIWYG donde los usuarios pueden crear diagramas simples y complejos, diagramas de flujo, organigramas e ilustraciones. La importaci\u00f3n, exportaci\u00f3n de archivos de Visio es compatible.<\/p>\n Entrar en Omnigraffle<\/a><\/p>\n MockupScreens te permite crear prototipos de tu aplicaci\u00f3n y organizarlas en escenarios. Los usuarios pueden experimentar de forma interactiva con los clientes y visualizar r\u00e1pidamente escenarios de aplicaciones antes comenzar la programaci\u00f3n. Este producto tiene un coste entre 89 a 369 $.<\/p>\n Entrar en MockupScreens<\/a><\/p>\n iRise es una herramienta de visualizaci\u00f3n de autor\u00eda que simula el flujo de trabajo y el comportamiento b\u00e1sico de las aplicaciones de negocio, propuesto a trav\u00e9s de comunicaci\u00f3n directa con las partes interesadas a trav\u00e9s de los requisitos de recopilaci\u00f3n de sesiones interactivas. iRise tambi\u00e9n ayuda a crear una versi\u00f3n de alta fidelidad en la simulaci\u00f3n. Quiz\u00e1s se la herramienta de m\u00e1s coste.<\/p>\n Entrar en iRise<\/a><\/p>\n Estas son las herramientas m\u00e1s populares pero tambi\u00e9n os dejo otras herramientas que son: http:\/\/garmahis.com\/reviews\/wireframe-tools\/%26hl%3Des%26client%3Dfirefox-a%26hs%3DzD9%26rls%3Dorg.mozilla<\/a>:es-ES:official%26prmd%3Divns&rurl=translate.google.es&usg=ALkJrhh86Q1UC6bISjudeiWE5R2c2FtLkA\u00bb style=\u00bbborder: 0px; margin: 0px; outline: 0px; padding: 0px; background-color: transparent; vertical-align: baseline; text-decoration: underline; color: rgb(49, 81, 162); background-position: initial initial; background-repeat: initial initial;\u00bb>Axure RP Pro, http:\/\/garmahis.com\/reviews\/wireframe-tools\/%26hl%3Des%26client%3Dfirefox-a%26hs%3DzD9%26rls%3Dorg.mozilla<\/a>:es-ES:official%26prmd%3Divns&rurl=translate.google.es&usg=ALkJrhiBWIixUnc0qMAZfTp5tcoUvDmkyw\u00bb style=\u00bbborder: 0px; margin: 0px; outline: 0px; padding: 0px; background-color: transparent; vertical-align: baseline; text-decoration: underline; color: rgb(49, 81, 162); background-position: initial initial; background-repeat: initial initial;\u00bb>Jumpchart, http:\/\/garmahis.com\/reviews\/wireframe-tools\/%26hl%3Des%26client%3Dfirefox-a%26hs%3DzD9%26rls%3Dorg.mozilla<\/a>:es-ES:official%26prmd%3Divns&rurl=translate.google.es&usg=ALkJrhgdBkeLBrgh7y0sK_pIltfhjYDc-g\u00bb style=\u00bbborder: 0px; margin: 0px; outline: 0px; padding: 0px; background-color: transparent; vertical-align: baseline; text-decoration: underline; color: rgb(49, 81, 162); background-position: initial initial; background-repeat: initial initial;\u00bb>EightShapes Unify, http:\/\/garmahis.com\/reviews\/wireframe-tools\/%26hl%3Des%26client%3Dfirefox-a%26hs%3DzD9%26rls%3Dorg.mozilla<\/a>:es-ES:official%26prmd%3Divns&rurl=translate.google.es&usg=ALkJrhgnPmwcVbuinUwpS9t4Gwlvp9Hbug\u00bb style=\u00bbborder: 0px; margin: 0px; outline: 0px; padding: 0px; background-color: transparent; vertical-align: baseline; text-decoration: underline; color: rgb(49, 81, 162); background-position: initial initial; background-repeat: initial initial;\u00bb>Wireframesketcher, el popular http:\/\/garmahis.com\/reviews\/wireframe-tools\/%26hl%3Des%26client%3Dfirefox-a%26hs%3DzD9%26rls%3Dorg.mozilla<\/a>:es-ES:official%26prmd%3Divns&rurl=translate.google.es&usg=ALkJrhhgFH1e5m2oaNFwiEcBf3Fntt8AEA\u00bb style=\u00bbborder: 0px; margin: 0px; outline: 0px; padding: 0px; background-color: transparent; vertical-align: baseline; text-decoration: underline; color: rgb(49, 81, 162); background-position: initial initial; background-repeat: initial initial;\u00bb>Microsoft Visio, http:\/\/garmahis.com\/reviews\/wireframe-tools\/%26hl%3Des%26client%3Dfirefox-a%26hs%3DzD9%26rls%3Dorg.mozilla<\/a>:es-ES:official%26prmd%3Divns&rurl=translate.google.es&usg=ALkJrhjuKv3R8MV0kQdLc2T9zh1037wzmw\u00bb style=\u00bbborder: 0px; margin: 0px; outline: 0px; padding: 0px; background-color: transparent; vertical-align: baseline; text-decoration: underline; color: rgb(49, 81, 162); background-position: initial initial; background-repeat: initial initial;\u00bb>Balsamiq Mockups, http:\/\/garmahis.com\/reviews\/wireframe-tools\/%26hl%3Des%26client%3Dfirefox-a%26hs%3DzD9%26rls%3Dorg.mozilla<\/a>:es-ES:official%26prmd%3Divns&rurl=translate.google.es&usg=ALkJrhjUCKO05o-iD2KoHM2TAUB2X6tQtA\u00bb style=\u00bbborder: 0px; margin: 0px; outline: 0px; padding: 0px; background-color: transparent; vertical-align: baseline; text-decoration: underline; color: rgb(49, 81, 162); background-position: initial initial; background-repeat: initial initial;\u00bb>MxGraph, http:\/\/garmahis.com\/reviews\/wireframe-tools\/%26hl%3Des%26client%3Dfirefox-a%26hs%3DzD9%26rls%3Dorg.mozilla<\/a>:es-ES:official%26prmd%3Divns&rurl=translate.google.es&usg=ALkJrhi9cftq4-jlTGyk4q7nAJrZ2aRKYA\u00bb style=\u00bbborder: 0px; margin: 0px; outline: 0px; padding: 0px; background-color: transparent; vertical-align: baseline; text-decoration: underline; color: rgb(49, 81, 162); background-position: initial initial; background-repeat: initial initial;\u00bb>Justinmind Prototyper, http:\/\/garmahis.com\/reviews\/wireframe-tools\/%26hl%3Des%26client%3Dfirefox-a%26hs%3DzD9%26rls%3Dorg.mozilla<\/a>:es-ES:official%26prmd%3Divns&rurl=translate.google.es&usg=ALkJrhhHx3eNPuwZr1dwpssXlDbOl3p8cQ\u00bb style=\u00bbborder: 0px; margin: 0px; outline: 0px; padding: 0px; background-color: transparent; vertical-align: baseline; text-decoration: underline; color: rgb(49, 81, 162); background-position: initial initial; background-repeat: initial initial;\u00bb>ForeUI, http:\/\/garmahis.com\/reviews\/wireframe-tools\/%26hl%3Des%26client%3Dfirefox-a%26hs%3DzD9%26rls%3Dorg.mozilla<\/a>:es-ES:official%26prmd%3Divns&rurl=translate.google.es&usg=ALkJrhhSHMVMkQlGiCJdTmp2CSWUQ9XwnA\u00bb style=\u00bbborder: 0px; margin: 0px; outline: 0px; padding: 0px; background-color: transparent; vertical-align: baseline; text-decoration: underline; color: rgb(49, 81, 162); background-position: initial initial; background-repeat: initial initial;\u00bb>FlairBuilder, http:\/\/garmahis.com\/reviews\/wireframe-tools\/%26hl%3Des%26client%3Dfirefox-a%26hs%3DzD9%26rls%3Dorg.mozilla<\/a>:es-ES:official%26prmd%3Divns&rurl=translate.google.es&usg=ALkJrhgPtxyf_LI07r7BaKm0QVAgMBNr-A\u00bb style=\u00bbborder: 0px; margin: 0px; outline: 0px; padding: 0px; background-color: transparent; vertical-align: baseline; text-decoration: underline; color: rgb(49, 81, 162); background-position: initial initial; background-repeat: initial initial;\u00bb>Justproto, http:\/\/garmahis.com\/reviews\/wireframe-tools\/%26hl%3Des%26client%3Dfirefox-a%26hs%3DzD9%26rls%3Dorg.mozilla<\/a>:es-ES:official%26prmd%3Divns&rurl=translate.google.es&usg=ALkJrhgs2orTigr-tInbzjxDh_wXQioQTw\u00bb style=\u00bbborder: 0px; margin: 0px; outline: 0px; padding: 0px; background-color: transparent; vertical-align: baseline; text-decoration: underline; color: rgb(49, 81, 162); background-position: initial initial; background-repeat: initial initial;\u00bb>Lucid Specpara que pod\u00e1is comparar y elegir la que m\u00e1s se adapte a las necesidades de vuestros proyectos.<\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n En esta ocasi\u00f3n, incluimos una colecci\u00f3n de herramientas gratuitas para crear prototipos y maquetas.<\/p>\n Editor de Lumzy<\/p>\n<\/p><\/div>\n Editor de Mockup Builder<\/p>\n<\/p><\/div>\n La idea detr\u00e1s de Tiggr (actualmente en versi\u00f3n beta) es aportar los recursos necesarios para crear prototipos para sitios web, aplicaciones de escritorio o aplicaciones m\u00f3viles. Permite dise\u00f1ar de un gran n\u00famero de componentes, compartir nuestro trabajo (a trav\u00e9s de correo electr\u00f3nico, Twitter o Facebook), y generar c\u00f3digo HTML \/ JS \/ CSS, para que pueda obtener una vista previa maquetas de la interfaz de usuario muy r\u00e1pidamente. Precisa de registro en la herramienta y, es gratis.<\/p>\n P\u00e1gina de la herramienta: Tiggr<\/a><\/p>\n Tiggr – Apariencia del editor<\/p>\n<\/p><\/div>\n P\u00e1gina de la herramienta: iPhone Mockup<\/a><\/p>\n Editor de iPhone Mockup<\/p>\n<\/p><\/div>\n Pagina de la herramienta: fluidIA<\/a><\/p>\n P\u00e1gina de la herramienta: Pencil Project<\/a><\/p>\n Editor de Pencil Project<\/p>\n<\/p><\/div>\n Todas ellas cuentan con opciones gratuitas con funcionalidades restringidas:<\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n En el mundo deldise\u00f1o<\/a>web, un wireframe es una representaci\u00f3n esquem\u00e1tica de una p\u00e1gina web, sin elementos gr\u00e1ficos que muestren contenido. Son realmente \u00fatiles como herramientas de comunicaci\u00f3n entre programadores, dise\u00f1adores y clientes.<\/p>\n Aqu\u00ed os dejo una lista de aplicaciones que pod\u00e9is usar para realizar este tipo de dibujos, lista publicada enspyrestudios.com<\/a>. Por desgracia no todas son gratuitas, con lo que tendr\u00e9is que poner los pros y contras de cada opci\u00f3n antes de tomar una decisi\u00f3n.<\/p>\n<\/a><\/p>\nC\u00f3mo se hacen los Wireframes?<\/h2>\n
1.Balsamiq<\/a><\/h3>\n
<\/a><\/p>\n2.iPlotz<\/a><\/h3>\n
<\/a><\/p>\n3.Pencil Project<\/a><\/h3>\n
<\/a><\/p>\n4.templatr<\/a><\/h3>\n
<\/a><\/p>\n5.Flair Builder<\/a><\/h3>\n
<\/a><\/p>\nHerramientas gratis para hacer Wireframes<\/h2>\n
1.Mockingbird<\/h2>\n
<\/a><\/p>\n2.Lovely Charts<\/h2>\n
<\/a><\/p>\n3.Cacoo<\/h2>\n
<\/a><\/p>\n4.Gliffy<\/h2>\n
<\/a><\/p>\n5.Lumzy<\/h2>\n
<\/a><\/p>\n6.Mockflow<\/h2>\n
<\/a><\/p>\n7. Pencil Project<\/h2>\n
<\/a><\/p>\n8.SimpleDiagrams<\/h2>\n
<\/a><\/p>\n9. Denim<\/h2>\n
<\/a><\/p>\n10.Website Wireframe<\/h2>\n
<\/a><\/p>\nHerramientas gratuitas para dise\u00f1ar wireframes<\/h1>\n
Pidoco<\/h2>\n
<\/a><\/p>\nProtoShare<\/h2>\n
<\/a><\/p>\niPlotz<\/h2>\n
<\/a><\/p>\nHot Gloo<\/h2>\n
<\/a><\/p>\nPencil<\/h2>\n
<\/a><\/p>\n
http:\/\/www.noticiasdelacalle.es\/2012\/07\/11\/instalacion-y-funcionamiento-de-la-herramienta-de-wireframes-pencil\/<\/a><\/p>\nGliffy<\/h2>\n
<\/a><\/p>\nOmnigraffle<\/h2>\n
<\/a><\/p>\nMockupScreens<\/h2>\n
<\/a><\/p>\niRise<\/h2>\n
<\/a><\/p>\nLumzy \u2013 Herramienta para creaci\u00f3n r\u00e1pida de maquetas y prototipos<\/a><\/h2>\n
<\/a>
Lumzy<\/a>, nos permite puede crear maquetas de sitios web o aplicacines mediante la adici\u00f3n de los eventos de una extensa lista de controles. Adem\u00e1s de ser una gran herramienta para la creaci\u00f3n de maquetas, tambi\u00e9n puedes crear mensajes de alerta y p\u00e1ginas de navegaci\u00f3n, a\u00f1adir enlaces a contenidos externos, y mucho m\u00e1s. Por otra parte nos ofrece un conjunto de herramientas de colaboraci\u00f3n y un motor de chat para deliberar sobre los dise\u00f1os. Todo esto y es absolutamentegratis.<\/strong>
P\u00e1gina de la herramienta: Lumzy Homepage<\/a><\/p>\n<\/a> <\/p>\n
\nMockup Builder \u2013 Aplicaci\u00f3n de prototipado<\/a><\/h2>\n
<\/a>
Mockup Builder<\/a>es una herramienta para desarrollar prototipos muy vers\u00e1til que nos permite crear maquetas de interfaz de usuario, wireframes interactivos, dise\u00f1os web, prototipos para software de escritorio e incluso mapas de sitio y \u00e1rboles de navegaci\u00f3n.
Tambi\u00e9n aporta herramientas de colaboraci\u00f3n para compartir nuestros dise\u00f1os con clientes y colegas. Y s\u00ed, es totalmenteGRATIS<\/strong>
P\u00e1gina de la herramienta: Mockup Builder<\/a><\/p>\n<\/a> <\/p>\n
\nTiggr \u2013 Creaci\u00f3n colaborativa de prototipos<\/a><\/h2>\n
<\/a><\/p>\n<\/a> <\/p>\n
\nFrame Box \u2013 Herramienta online para crear Mockups<\/a><\/h2>\n
<\/a>
Frame Box<\/a>nos permite arrastrar y soltar, cambiar el tama\u00f1o y copiar \/ pegar los elementos de una interfaz de usuario de forma que nos facilita la creaci\u00f3n de maquetas y prototipos. Esgratis<\/strong>y s\u00f3lo requiere una inscripci\u00f3n r\u00e1pida.does not have an extensive list of features (like the web based apps above).
P\u00e1gina de la herramienta: Frame Box<\/a><\/p>\n
\nSimpleDiagrams Edici\u00f3n gratuita<\/a><\/h2>\n
<\/a>
La versi\u00f3n gratuita de SimpleDiagrams<\/a>es una aplicaci\u00f3n Adobe Air que nos permite plantear, r\u00e1pidamente, ideas de dise\u00f1o. Cuenta con una importante librer\u00eda de elementos sobre los que podemos realizar drag & drop, entre otras funcionalidades interesantes.
P\u00e1gina de la herramienta: SimpleDiagrams<\/a><\/p>\n
\niPhone Mockup<\/a><\/h2>\n
<\/a>
Con la herramienta iPhone Mockup<\/a>tenemos la opci\u00f3n de usar ya sea el editor de estilo de l\u00e1piz (captura de pantalla anterior) o el editor de ilustraciones (imagen abajo).<\/span>En cualquiera de las dos opciones nospermite crear maquetas para iPhone maquetas muy r\u00e1pidamente, compartirlas con otras personas.<\/span><\/span><\/p>\n<\/a> <\/p>\n
\nfluidIA<\/a><\/h2>\n
<\/a>
fluidIA<\/a>es una herramienta de dise\u00f1o basada \u200b\u200ben web para desarrollar prototipos de interfaces de usuario.<\/span><\/p>\n<\/a><\/p>\n
\nPencil Project<\/a><\/h2>\n
<\/a>
Pencil Project<\/a>es un complemento gratuito de Firefox para el dise\u00f1o de prototipos de interfaces de usuario. Cuenta con unabase de plantillas para p\u00e1ginas y, despu\u00e9s, exportarlas a PNG, formatos Openoffice.org, documento HTML, documentos de Word o PDF.<\/span><\/span><\/p>\n<\/a> <\/p>\n
\nCogTool \u2013 Herramienta de prototipado para interfaces de usuario<\/a><\/h2>\n
<\/a>
CogTool<\/a>es una herramienta gratuita para prototipado de interfaces de usuario. Tiene, como valor a\u00f1adido, que eval\u00faa autom\u00e1ticamente el dise\u00f1o que estamos realizando en funci\u00f3n de modelos predictivos del comportamiento del usuario.
P\u00e1gina de la herramienta: CogTool<\/a><\/p>\n
\nPrototype Composer<\/a><\/h2>\n
<\/a>
Prototype Composer<\/a>cuenta con una edici\u00f3n para comunidades que nos posibilita la simulaci\u00f3n de la apariencia de las aplicaciones seg\u00fan vamos codific\u00e1ndolas.
Prototype Composer Homepage ?<\/a><\/p>\n
\nDUB \u2013 DENIM<\/a><\/h2>\n
<\/a>
DENIM es una herramienta gratuita de escritorio disponible para Windows, Unix y Mac OS X que se describe a si misma como \u201can Informal Tool For Early Stage Web Site and UI Design<\/em>\u201d.
Combina los beneficios de las utilidades basadas en papel con las herramientas de prototipado electr\u00f3nico.
P\u00e1gina de la herramienta: DUB \u2013 DENIM<\/a><\/p>\n
\nAplicaciones para creaci\u00f3n de maquetas y prototipos que cuentan con una versi\u00f3n gratuita<\/h2>\n
\n
Hot Gloo<\/a><\/h3>\n
<\/a>
Opci\u00f3n en flash, muy sencilla de usar y con cuenta gratuita que no permite eltrabajo<\/a>en grupo.<\/p>\nMockingbird<\/a><\/h3>\n
<\/a>
Permite realizar los wireframes deforma<\/a>sencilla y dispone de la opci\u00f3n para compartir los resultados con otras personas.<\/p>\nPencil Project<\/a><\/h3>\n
<\/a>
Una extensi\u00f3n de Firefox muy\u00fatil<\/a>para quien realiza este tipo de trabajos<\/p>\nProtoShare<\/a><\/h3>\n
<\/a>
Muy f\u00e1cil de usar y con mucho trabajo para dise\u00f1ar. Tienen una versi\u00f3n de prueba de 30 d\u00edas.<\/p>\nBalsamiq<\/a><\/h3>\n
<\/a>
Nos permite trabajar como si estuvi\u00e9ramos dibujando con l\u00e1piz ypapel<\/a>, con lo que es ideal apra los que vienen del mundo cl\u00e1sico.<\/p>\nFlair Builder<\/a><\/h3>\n
<\/a>
Con una paleta de funciones ymucho espacio<\/a>para trabajar. Es una de las m\u00e1s populares.<\/p>\nCacoo<\/a><\/h3>\n
<\/a>
Permite hacer diagramas de pr\u00e1cticamente cualquier cosa, con posibilidad de enviar el resultado por email.<\/p>\nSerena: Prototype Composer<\/a><\/h3>\n
<\/a>
Herramienta de creaci\u00f3n de prototipos especialmente dise\u00f1ada para quien trabaja para proyectos web.<\/p>\nMockFlow<\/a><\/h3>\n
<\/a>
Con una amplia biblioteca de componentes y plantillas listas para usar. las versiones premium incluyen m\u00e1s opciones de este tipo.<\/p>\nfluidIA<\/a><\/h3>\n
<\/a>
Una plataforma que permite a los desarrolladores construir un sistema de dibujo de prototipos de forma colaborativa.<\/p>\nLumzy<\/a><\/h3>\n
<\/a>
Nos permite dibujar a mano o incluir componente dise\u00f1ados previamente.<\/p>\nGUI Studio Design<\/a><\/h3>\n