Herramientas Wireframe para diseño Web

Es un error empezar una Web directamente con la creación del código (HTML y CSS) o diseñando directamente en Photoshop. Un paso previo debería ser crear un “borrador” con papel y lápiz (tomando en cuenta, objetivos de la pagina, contenidos, etc.), ya que es más fácil (y libre de distracciones) inspirarse sobre el papel que sobre el teclado y monitor.

Antes de empezar a diseñar sobre Photoshop, vale la pena utilizar una herramienta de Wireframing.

WIREFRAME

Una herramienta de Wireframe permite crear un mapa del sitio de la futura Web y hacer un “prototipo”, una idea visual de como sera la estructura de cada página, esto nos permitirá abstraernos de los colores y diseño final, concentrándonos en el contenido y en las arquitectura de la información.

Ahora veremos algunas herramientas de wireframing:

MockFlow
url: http://www.mockflow.com/

uiwireframetools10

Mockingbird
url: https://gomockingbird.com/

Wireframe1

Pencil
url: http://pencil.evolus.vn/Default.html

uiwireframetools8

iPhone Mockup
url: http://iphonemockup.lkmc.ch/

uiwireframetools6

Cacoo
url: https://cacoo.com/lang/es/

uiwireframetools11

Wireframe.cc
url: http://wireframe.cc/

6

Simple Diagrams
url: http://www.simplediagrams.com/

uiwireframetools5

BALSAMIQ MOCKUPS
url: http://www.balsamiq.com/products/mockups

4645

Frame box
url: http://framebox.org/fkBH

uiwireframetools3

Creately
url: http://creately.com/Online-UI-Mockups-and-Wireframes

uiwireframetools12

El uso de una herramienta de wireframe nos permitirá explorar múltiples posibilidades y se lo puede hacer fácil y rápidamente. Ademas sirve para para resaltar y aclarar requerimientos, probar la navegabilidad, realizar pruebas de usabilidad en etapas muy tempranas del proyecto.

Anuncios

2 pensamientos en “Herramientas Wireframe para diseño Web

    • Estimado Jose Israel, lastimosamente en español no (o por lo menos yo no lo conozco), una gran cantidad de “los mejores” programas siempre estarán en idioma ingles. Como contratarte puedo indicar que la interfaz de la mayoría de los recomendados en este post tienen una interfaz muy amigable, te invito a probarlos.

Responder

Por favor, inicia sesión con uno de estos métodos para publicar tu comentario:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s