¿Qué es un Wireframe?
Un Wireframe es prototipo visual de baja calidad, es un armazón o esqueleto de lo que puede ser un sitio web o una aplicación web. En inglés son sinónimos de Wireframe: skeleton, blueprint, outline.
Sirve para darnos una idea de que áreas van a conformar el sitio, su layout, jerarquías y esquemas de navegación. No deben tener elementos finalizados de diseño (colores o tipografías)
Deben estar en blanco y negro o máximo en escala de grises, no deben tener color porque sirven más para validar la arquitectura, el layout. Los colores pueden suponer distracciones.
Beneficios de los Wireframes
- Lo primero y más importante es que se pueden hacer fácil y rápidamente.
- Permiten explorar múltiples posibilidades.
- Sirven para levantar requerimientos de forma rápida.
- Sirven para probar y validar esquemas de navegación.
- Pueden utilizarse para hacer pruebas de usabilidad en etapas tempranas del proyecto.
Los Wireframes son representaciones esquemáticas de una página web, de manera coloquial puede ser el “esqueleto” del sitio, hacer wireframes resulta mucho más rápido y económico, es mucho más fácil 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.
Los wireframes son útiles porque nos permiten de una manera esquemática ver que elementos va a tener la interfaz, que jerarquías debe tener y como se relacionan los elementos con el resto del sitio o que funcionalidad pueden tener, es mucho más eficiente si se quiere crear los diferentes wireframes para diversas pantallas, ver el flujo por el cual tendrá que moverse el usuario y hacer cambios sobre estos wireframes ya que es mucho más rápido.
Una vez se tenga claro el funcionamiento y el esquema general de las pantallas si se debe proceder a realizar un wireframe más elaborado, es decir un mockup.
Es importante crear esta cultura en la empresa en la que trabajamos o con los clientes que tengamos puesto que nos ayudará a tener un proceso de diseño más eficiente y nos evitará sorpresas desagradables tales como montar un sitio de 200 páginas y 500 fotos y mostrárselo al cliente para que nos diga que ya no le gusta de esa forma o que se lo imaginaba diferente.
Cómo se hacen los Wireframes?
Existen diversas formas de hacer los wireframes, la más fácil en papel y a mano, despues tomare una foto y listo, pero si se quiere se pueden hacer con recortes de papel (Paper propotipyng).
How to WireframefromClay Parker JonesonVimeo.
Existen varias herramientas en internet que nos permiten hacer wireframes, les dejo algunas de las mejores que he encontrado.
Herramientas gratis para hacer Wireframes
A continuación podrán ver 10 herramientas gratis online que les permitirán hacer wireframes.
1.Mockingbird
Este es uno de mis favoritos por su sencillez de uso y cuenta con elementos básicos en la librería, pero parra mi gusto los suficientes, existe una versión gratuita que permite guardar un proyecto con hasta 10 páginas y pueden exportarse a pdf.
2.Lovely Charts
Este lo he utilizado para hacer diagramas, mapas del sitio y flujos de usuario, pero también sirve para hacer Wireframes.
3.Cacoo
Lo más 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.
4.Gliffy
5.Lumzy
6.Mockflow
7. Pencil Project
8.SimpleDiagrams
9. Denim
10.Website Wireframe
Herramientas gratuitas para diseñar wireframes
1-Mockflow: cuenta con una librería de plantillas donde podrás elegir la más adecuada para organizar tu contenido web. Si bien es gratuito, existe una versión de pago para usuarios que necesiten funciones más avanzadas.
2-Mockingbird:permite crear y compartirwireframesonline. Interfazdrag and dropmuy simple de utilizar, interfaz limpia y fácil de usar.
3-Lovely Charts: herramientaonlinegratuita para crear el esquema de tu sitio web. Ideal para quienes buscan una alternativa simple para diseñar suwireframe.
4-Cacoo: es una herramienta fácil de utilizar para crearwireframescompletamenteonline. Su característica más destacable es la posibilidad de colaborar entre usuarios en tiempo real.
5-Gliffy: otra herramienta gratuita y online para crearmockupsde tu sitio web. Cuenta con una librería de esquemas y con una API para que los desarrolladores puedan integrar la herramienta con sus aplicaciones.
Pidoco
Pidoco es una plataforma de colaboración en línea en tiempo real, para crear web interactivas y prototipos de software, probarlos, discutirlos y optimizarlos.
Entrar en Pidoco
ProtoShare
ProtoShare es una herramienta de colaboración en línea para construir Wireframes, prototipos de páginas web dinámicas y páginas web navegables que los miembros del equipo pueden revisar y comentar en tiempo real.
Entrar en ProtoShare
iPlotz
Con iPlotz puedes crear Wireframes hacer clic, navegable para crear la experiencia de un sitio web real o aplicación de software. También puede invitar a otros a comentar sobre los diseños, y una vez listo, puedes gestionar las tareas para que los desarrolladores y diseñadores creen el proyecto.
Entrar en IPlotz
Hot Gloo
Hot Gloo es la aplicación de Wireframes en línea, actualmente en versión beta gratuita. Usted puede arrastrar y soltar elementos, escalar, enlazar, el nombre y cambiar el nombre de ellos. También puede editar, comentar y compartir cualquier momento del proceso de desarrollo con colegas y clientes.
Entrar en Hot Gloo
Pencil
Pencil es un complemento de Firefox para crear diagramas y prototipos de interfaz gráfica de usuario. Incluye la construcción de diagramas y prototipos, documentos de multi-páginas, añadir objetos externos, instalación de plantillas definidas por el usuario,… etc… Es importante anotar que esta herramienta es totalmente gratuita.
Descargar Componente Pencil de Firefox
video con la instalación y el funcionamiento por si lo queréis ver:
http://www.noticiasdelacalle.es/2012/07/11/instalacion-y-funcionamiento-de-la-herramienta-de-wireframes-pencil/
Gliffy
Gliffy es un software que hace que sea fácil crear Wireframes de sitios web y compartir maquetas web con alguien. Puede exportar su estructura y diseños. No es totalmente gratuita ya que tiene un periodo de prueba y luego debes pagara para continuar con su uso.
Entrar en Gliffy
Omnigraffle
Omnigraffle es una aplicación wireframe de diagramas, construido específicamente para Mac OS. Usa la técnica de drag and drop, la interfaz WYSIWYG donde los usuarios pueden crear diagramas simples y complejos, diagramas de flujo, organigramas e ilustraciones. La importación, exportación de archivos de Visio es compatible.
Entrar en Omnigraffle
MockupScreens
MockupScreens te permite crear prototipos de tu aplicación y organizarlas en escenarios. Los usuarios pueden experimentar de forma interactiva con los clientes y visualizar rápidamente escenarios de aplicaciones antes comenzar la programación. Este producto tiene un coste entre 89 a 369 $.
Entrar en MockupScreens
iRise
iRise es una herramienta de visualización de autoría que simula el flujo de trabajo y el comportamiento básico de las aplicaciones de negocio, propuesto a través de comunicación directa con las partes interesadas a través de los requisitos de recopilación de sesiones interactivas. iRise también ayuda a crear una versión de alta fidelidad en la simulación. Quizás se la herramienta de más coste.
Entrar en iRise
Estas son las herramientas más populares pero también os dejo otras herramientas que son: http://garmahis.com/reviews/wireframe-tools/%26hl%3Des%26client%3Dfirefox-a%26hs%3DzD9%26rls%3Dorg.mozilla:es-ES:official%26prmd%3Divns&rurl=translate.google.es&usg=ALkJrhh86Q1UC6bISjudeiWE5R2c2FtLkA” style=”border: 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;”>Axure RP Pro, http://garmahis.com/reviews/wireframe-tools/%26hl%3Des%26client%3Dfirefox-a%26hs%3DzD9%26rls%3Dorg.mozilla:es-ES:official%26prmd%3Divns&rurl=translate.google.es&usg=ALkJrhiBWIixUnc0qMAZfTp5tcoUvDmkyw” style=”border: 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;”>Jumpchart, http://garmahis.com/reviews/wireframe-tools/%26hl%3Des%26client%3Dfirefox-a%26hs%3DzD9%26rls%3Dorg.mozilla:es-ES:official%26prmd%3Divns&rurl=translate.google.es&usg=ALkJrhgdBkeLBrgh7y0sK_pIltfhjYDc-g” style=”border: 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;”>EightShapes Unify, http://garmahis.com/reviews/wireframe-tools/%26hl%3Des%26client%3Dfirefox-a%26hs%3DzD9%26rls%3Dorg.mozilla:es-ES:official%26prmd%3Divns&rurl=translate.google.es&usg=ALkJrhgnPmwcVbuinUwpS9t4Gwlvp9Hbug” style=”border: 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;”>Wireframesketcher, el popular http://garmahis.com/reviews/wireframe-tools/%26hl%3Des%26client%3Dfirefox-a%26hs%3DzD9%26rls%3Dorg.mozilla:es-ES:official%26prmd%3Divns&rurl=translate.google.es&usg=ALkJrhhgFH1e5m2oaNFwiEcBf3Fntt8AEA” style=”border: 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;”>Microsoft Visio, http://garmahis.com/reviews/wireframe-tools/%26hl%3Des%26client%3Dfirefox-a%26hs%3DzD9%26rls%3Dorg.mozilla:es-ES:official%26prmd%3Divns&rurl=translate.google.es&usg=ALkJrhjuKv3R8MV0kQdLc2T9zh1037wzmw” style=”border: 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;”>Balsamiq Mockups, http://garmahis.com/reviews/wireframe-tools/%26hl%3Des%26client%3Dfirefox-a%26hs%3DzD9%26rls%3Dorg.mozilla:es-ES:official%26prmd%3Divns&rurl=translate.google.es&usg=ALkJrhjUCKO05o-iD2KoHM2TAUB2X6tQtA” style=”border: 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;”>MxGraph, http://garmahis.com/reviews/wireframe-tools/%26hl%3Des%26client%3Dfirefox-a%26hs%3DzD9%26rls%3Dorg.mozilla:es-ES:official%26prmd%3Divns&rurl=translate.google.es&usg=ALkJrhi9cftq4-jlTGyk4q7nAJrZ2aRKYA” style=”border: 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;”>Justinmind Prototyper, http://garmahis.com/reviews/wireframe-tools/%26hl%3Des%26client%3Dfirefox-a%26hs%3DzD9%26rls%3Dorg.mozilla:es-ES:official%26prmd%3Divns&rurl=translate.google.es&usg=ALkJrhhHx3eNPuwZr1dwpssXlDbOl3p8cQ” style=”border: 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;”>ForeUI, http://garmahis.com/reviews/wireframe-tools/%26hl%3Des%26client%3Dfirefox-a%26hs%3DzD9%26rls%3Dorg.mozilla:es-ES:official%26prmd%3Divns&rurl=translate.google.es&usg=ALkJrhhSHMVMkQlGiCJdTmp2CSWUQ9XwnA” style=”border: 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;”>FlairBuilder, http://garmahis.com/reviews/wireframe-tools/%26hl%3Des%26client%3Dfirefox-a%26hs%3DzD9%26rls%3Dorg.mozilla:es-ES:official%26prmd%3Divns&rurl=translate.google.es&usg=ALkJrhgPtxyf_LI07r7BaKm0QVAgMBNr-A” style=”border: 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;”>Justproto, http://garmahis.com/reviews/wireframe-tools/%26hl%3Des%26client%3Dfirefox-a%26hs%3DzD9%26rls%3Dorg.mozilla:es-ES:official%26prmd%3Divns&rurl=translate.google.es&usg=ALkJrhgs2orTigr-tInbzjxDh_wXQioQTw” style=”border: 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;”>Lucid Specpara que podáis comparar y elegir la que más se adapte a las necesidades de vuestros proyectos.
En esta ocasión, incluimos una colección de herramientas gratuitas para crear prototipos y maquetas.
Lumzy, nos permite puede crear maquetas de sitios web o aplicacines mediante la adición de los eventos de una extensa lista de controles. Además de ser una gran herramienta para la creación de maquetas, también puedes crear mensajes de alerta y páginas de navegación, añadir enlaces a contenidos externos, y mucho más. Por otra parte nos ofrece un conjunto de herramientas de colaboración y un motor de chat para deliberar sobre los diseños. Todo esto y es absolutamentegratis.
Página de la herramienta: Lumzy Homepage
Editor de Lumzy
Mockup Builderes una herramienta para desarrollar prototipos muy versátil que nos permite crear maquetas de interfaz de usuario, wireframes interactivos, diseños web, prototipos para software de escritorio e incluso mapas de sitio y árboles de navegación.
También aporta herramientas de colaboración para compartir nuestros diseños con clientes y colegas. Y sí, es totalmenteGRATIS
Página de la herramienta: Mockup Builder
Editor de Mockup Builder
La idea detrás de Tiggr (actualmente en versión beta) es aportar los recursos necesarios para crear prototipos para sitios web, aplicaciones de escritorio o aplicaciones móviles. Permite diseñar de un gran número de componentes, compartir nuestro trabajo (a través de correo electrónico, Twitter o Facebook), y generar código HTML / JS / CSS, para que pueda obtener una vista previa maquetas de la interfaz de usuario muy rápidamente. Precisa de registro en la herramienta y, es gratis.
Página de la herramienta: Tiggr
Tiggr – Apariencia del editor
Frame Boxnos permite arrastrar y soltar, cambiar el tamaño y copiar / pegar los elementos de una interfaz de usuario de forma que nos facilita la creación de maquetas y prototipos. Esgratisy sólo requiere una inscripción rápida.does not have an extensive list of features (like the web based apps above).
Página de la herramienta: Frame Box
La versión gratuita de SimpleDiagramses una aplicación Adobe Air que nos permite plantear, rápidamente, ideas de diseño. Cuenta con una importante librería de elementos sobre los que podemos realizar drag & drop, entre otras funcionalidades interesantes.
Página de la herramienta: SimpleDiagrams
Con la herramienta iPhone Mockuptenemos la opción de usar ya sea el editor de estilo de lápiz (captura de pantalla anterior) o el editor de ilustraciones (imagen abajo).En cualquiera de las dos opciones nospermite crear maquetas para iPhone maquetas muy rápidamente, compartirlas con otras personas.
Página de la herramienta: iPhone Mockup
Editor de iPhone Mockup
fluidIAes una herramienta de diseño basada en web para desarrollar prototipos de interfaces de usuario.
Pagina de la herramienta: fluidIA
Pencil Projectes un complemento gratuito de Firefox para el diseño de prototipos de interfaces de usuario. Cuenta con unabase de plantillas para páginas y, después, exportarlas a PNG, formatos Openoffice.org, documento HTML, documentos de Word o PDF.
Página de la herramienta: Pencil Project
Editor de Pencil Project
CogTooles una herramienta gratuita para prototipado de interfaces de usuario. Tiene, como valor añadido, que evalúa automáticamente el diseño que estamos realizando en función de modelos predictivos del comportamiento del usuario.
Página de la herramienta: CogTool
Prototype Composercuenta con una edición para comunidades que nos posibilita la simulación de la apariencia de las aplicaciones según vamos codificándolas.
Prototype Composer Homepage ?
DENIM es una herramienta gratuita de escritorio disponible para Windows, Unix y Mac OS X que se describe a si misma como “an Informal Tool For Early Stage Web Site and UI Design”.
Combina los beneficios de las utilidades basadas en papel con las herramientas de prototipado electrónico.
Página de la herramienta: DUB – DENIM
Aplicaciones para creación de maquetas y prototipos que cuentan con una versión gratuita
Todas ellas cuentan con opciones gratuitas con funcionalidades restringidas:
En el mundo deldiseñoweb, un wireframe es una representación esquemática de una página web, sin elementos gráficos que muestren contenido. Son realmente útiles como herramientas de comunicación entre programadores, diseñadores y clientes.
Aquí os dejo una lista de aplicaciones que podéis usar para realizar este tipo de dibujos, lista publicada enspyrestudios.com. Por desgracia no todas son gratuitas, con lo que tendréis que poner los pros y contras de cada opción antes de tomar una decisión.
Opción en flash, muy sencilla de usar y con cuenta gratuita que no permite eltrabajoen grupo.
Permite realizar los wireframes deformasencilla y dispone de la opción para compartir los resultados con otras personas.
Una extensión de Firefox muyútilpara quien realiza este tipo de trabajos
Muy fácil de usar y con mucho trabajo para diseñar. Tienen una versión de prueba de 30 días.
Nos permite trabajar como si estuviéramos dibujando con lápiz ypapel, con lo que es ideal apra los que vienen del mundo clásico.
Con una paleta de funciones ymucho espaciopara trabajar. Es una de las más populares.
Permite hacer diagramas de prácticamente cualquier cosa, con posibilidad de enviar el resultado por email.
Herramienta de creación de prototipos especialmente diseñada para quien trabaja para proyectos web.
Con una amplia biblioteca de componentes y plantillas listas para usar. las versiones premium incluyen más opciones de este tipo.
Una plataforma que permite a los desarrolladores construir un sistema de dibujo de prototipos de forma colaborativa.
Nos permite dibujar a mano o incluir componente diseñados previamente.
Una herramienta muy completa para el diseño de software en general.
Permite crear wireframes dinámicos para poder simular la actividad del programa.
Integrado con Visio, permite hacer diseños realmente sorprendentes.
10 HERRAMIENTAS DE WIREFRAMING (GRATIS Y PREMIUM).
Publicado porSandra Guerreroel 11/10/2012. Categoría:Diseño Web
http://s.c.lnkd.licdn.com/scds/common/u/img/sprite/sprite_connect_v13.png) !important; background-position-x: -150px !important; background-position-y: 0%; background-repeat: no-repeat no-repeat !important;”>7
) !important; cursor: pointer !important; border: 0px !important; text-indent: -9999em !important; overflow: hidden !important; position: absolute !important; left: 0px !important; top: 0px !important; display: block !important; width: 20px !important; height: 20px !important; float: right !important; background-position: 0px -276px !important; background-repeat: no-repeat no-repeat !important;”>inShare
Recientemente hemos visto que el hacer un sketch a mano de una web esuno de los primeros pasosantes de ponernos manos a la obra con el diseño de una web. El siguiente paso vimos que era utilizar una herramienta de wireframing. Un wireframe nos permite hacer un prototipo rápido de nuestra web para así poderlo presentar al cliente sin haber de invertir mucho tiempo en su diseño.
Los wireframes nos permiten comunicar ideas de una manera mucho más efectiva que un sketch a mano, a la vez que nos permite introducir mejoras sin tener que hacer una gran inversión de tiempo en la modificación del diseño. Es el paso previo a la maquetación del diseño web en Photoshop.
En este post vamos a ver varias herramientas de wireframing que nos permitirán mostrar nuestros sketchs digitalizados a nuestros clientes.
Esta herramienta sólo es gratis para un único proyecto activo.
