¿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.

1.Balsamiq

2.iPlotz

3.Pencil Project

4.templatr

5.Flair Builder

 

 

 

 

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 – Herramienta para creación rápida de maquetas y prototipos

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

---

Mockup Builder – Aplicación de prototipado

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

---

Tiggr – Creación colaborativa de prototipos

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

---

Frame Box – Herramienta online para crear Mockups

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

---

SimpleDiagrams Edición gratuita

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

---

iPhone Mockup

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

---

fluidIA

fluidIAes una herramienta de diseño basada ​​en web para desarrollar prototipos de interfaces de usuario.

Pagina de la herramienta: fluidIA

---

Pencil Project

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

---

CogTool – Herramienta de prototipado para interfaces de usuario

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 Composer

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 ?

---

DUB – DENIM

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:

• MockFlow: Utilidad online para crear Wireframes
• Gliffy – Herramienta online para crear diagramas de software
• Naview – Herramienta para desarrollar prototipos de elementos de navegación
• iPlotz – wireframing, mockups y prototipos
• FlairBuilder – Wireframes, maquetas y prototipos
• Cacoo – Creación online de diagramas
• Mockabilly – Maquetación de aplicaciones para iPhone

 

 

 

 

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.

Hot Gloo

  Opción en flash, muy sencilla de usar y con cuenta gratuita que no permite eltrabajoen grupo.

Mockingbird

  Permite realizar los wireframes deformasencilla y dispone de la opción para compartir los resultados con otras personas.

Pencil Project

  Una extensión de Firefox muyútilpara quien realiza este tipo de trabajos

ProtoShare

Muy fácil de usar y con mucho trabajo para diseñar. Tienen una versión de prueba de 30 días.

Balsamiq

  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.

Flair Builder

  Con una paleta de funciones ymucho espaciopara trabajar. Es una de las más populares.

Cacoo

Permite hacer diagramas de prácticamente cualquier cosa, con posibilidad de enviar el resultado por email.

Serena: Prototype Composer

Herramienta de creación de prototipos especialmente diseñada para quien trabaja para proyectos web.

MockFlow

Con una amplia biblioteca de componentes y plantillas listas para usar. las versiones premium incluyen más opciones de este tipo.

fluidIA

Una plataforma que permite a los desarrolladores construir un sistema de dibujo de prototipos de forma colaborativa.

Lumzy

Nos permite dibujar a mano o incluir componente diseñados previamente.

GUI Studio Design

Una herramienta muy completa para el diseño de software en general.

iPlotz

Permite crear wireframes dinámicos para poder simular la actividad del programa.

OmniGraffle

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