ABC del diseño web: Los Wireframes

Un elemento que no debe de faltar en el proceso de diseño y desarrollo web es el wireframe, pero ¿Qué es un Wireframe y para que nos sirve?, bueno, hablando en el contexto de diseño y desarrollo de paginas web, un wireframe es esencialmente una guía visual que representa la estructura del sitio, es el esqueleto, el esquema u orden del diseño. Normalmente este se crea antes que el diseño ya que el diseño depende de la estructura que hayamos definido.  Normalmente esta tarea la realiza un arquitecto de información dependiendo de lo que quiera el cliente o lo que se haya acordado con el.

Un wireframe no es exactamente un diseño donde aplicamos esquemas de colores, tipografías y estilos gráficos, la finalidad del wireframe es representar la funcionalidad, el comportamiento y la jerarquía de la información.

Cuando creamos wireframes para los diferentes proyectos necesitamos trabajar con el contenido que el cliente nos entrega,  necesitamos saber  la cantidad de contenido y los diferentes elementos que se necesitan para plasmar esa información en un boceto u estructura base, antes de comenzar con los detalles del diseño grafico.

Wireframe, el ABC del diseño web.

220px-ProfilewireframeA todos los que estudiamos algo relacionado con el arte (En especial digital),  nos enseñaron a antes de comenzar a trabajar , sentarnos frente a la computadora con un programa de diseño con algunas ideas básicas de lo que queremos hacer, antes de todo esto, hacer bocetos, ya sea digital o a papel como solemos hacer algunos, en un boceto estructuramos la información que tenemos para así estar mas seguro de lo vamos a hacer, saber donde estarán los bloques de textos, si contamos con videos en donde serán ubicados, menús, títulos y otros elementos.

Por eso para mi, esta etapa es una de las mas importantes del diseño web, la estructuración, ya que son las bases del proyecto. También de seguro vamos a ahorrar mucho tiempo. Bueno no solo del diseño web ya que también este paso fundamental lo suelen hacer los analistas de negocios, arquitectos de información, programadores, gestores de productos, artistas entre otros..

Puntos importante para el diseño de wireframes

Al momento de crear un wireframe para algún proyecto web debemos de tener varios puntos importantes claros, aunque hay muchos mas dirían los arquitectos de información, para mi hay unos básicos que nunca se deben de olvidar.

  1. hacer que el contenido sea fluido y claro. Esto básicamente es asegurarse que el contenido se lea correctamente y que el ojo del usuario se mueva de forma fluida entre las diferentes partes que componen el sitio.
  2. Hacer estructuras pensando en el usuario final. Esto si que es importante, las paginas web se crean para los usuarios, bueno casi todas, por eso los usuarios deben de tener una buena experiencia en el sitio, ya sea un ecommerce, una pagina de información, una landing u otra se debe de estructurar para que el usuario no tenga una experiencia discordante u engorrosa, por eso al momento de crear estructuras, se debe pensar como usuario.
  3. Seguir tendencias o flujos normales de trabajos ( a no ser que se quiera hacer algo diferente de lo común). A que me refiero con esto. Como usuarios de interne esperamos las cosas o elementos donde normalmente suelen estar, tenemos en la mente mapas y tendencias de sitios que nos hacen pensar cual es el flujo normal de una paina web. Cuando entramos a un sitio web esperamos encontrar el siguiente flujo, logotipo, cabecera, contenidos y módulos a los costados, pie de pagina. La idea es colocar las cosas donde los usuarios esperan encontrarlas (teniendo en cuenta que hay excepciones).

Hay mas puntos para tener en cuenta, pero para mi estos son los mas relevantes.

Aplicaciones y herramientas para la creación de Wireframes.

Al momento de crear Wireframes nos encontramos con una cantidad de herramientas tanto aplicaciones para descargar y utilizar en nuestra computadora como en herramientas online para la creación y diseño de wireframes. A continuación te diré cuales son las mas mejores, útiles e importantes. (en mi concepto.)

1 – Balsamiq Mockups

Balsamiq Mockups

Balsamiq Mockups

Balsamiq es mi favorita, es una herramienta muy buena donde podemos crear nuestros wireframes de forma rápida y eficiente, lo único que hacemos es arrastrar objetos al escenario y armar nuestra maqueta, cuenta con todo tipo de elemento grafico que se pueden utilizar en un sitio web.

Plataforma: Mac, Linux, Windows & online
Precio: $79 por licencia o también cuenta con planes empresariales. (puedes probarlo gratis por 30 dias)
Sitio web: www.balsamiq.com

2 – Mockflow

Wireframe-mockflow

Mockflow

MockFlow nos permite crear prototipos de trabajo y tiene muchas características importantes, cuenta con una gran colección de imágenes , elementos y de componentes que nos ayudan mucho en este trabajo, tiene exportación a HTML5.

Plataforma: Online
Precio: Cuenta con varios planes y precios, también nos ofrece una free
Sitio web: www.mockflow.com

3 – Axure

Axure

Axure

Axure permite añadir características importantes a los wireframes, al igual que los anteriores contiene una gran cantidad de elementos para formar una buena maqueta grafica.

Plataforma: Mac & Windows
Precio: $289 – $589
Sitio web: www.axure.com/

4 – Gliffy

Gliffy

Gliffy

Gliffy permite añadir elementos y componentes web al escenario para armar los prototipos o wireframes.

Plataforma: Online
Precio: $3,99 mes Estándar – $7,99 mes Pro y Free para usuarios ocacionales.
Sitio web: www.gliffy.com

5 – Adobe Photoshop

Photoshop

Photoshop

Photoshop Para mi, esta herramienta es la mas poderosa en cuanto grafico se refiere, y en cuanto a la creación de wireframes no se queda atrás, con un uso básico de las herramientas podemos crear prototipos muy completos.

Sitio web: Adobe Photoshop

Otros

framebox

FlairBuilder

Justinmind

HotGloo

OmniGraffle

Visio

ProtoShare

Pencil Project

iPhone mockup

Entre otros…

Uno más!! tu mano, un lapiz y papel…Importante

wireframe-a-mano

Dicen que las grandes ideas se crearon en lápiz y papel.. y en este caso no pueden haber exepciones, esta básica y natural forma de trabajar suele dar muchos frutos a los profesionales en sus diferentes oficios.. Para mi una de las mejores fuentes de creatividad.. el lapiz y el papel.

 

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo

2 Respuestas

  1. majoweb dice:

    gracias johan, este articulo esta muy bien escrito, aveces pasamos por alto este paso importante. saludos

  2. Muy buen articulo colega, muy buen blog tmb