Web

Cómo hacer un Wireframe y qué carajo es

FacebookTwitterWhatsAppLinkedInPinterest

El wireframe no es una palabra de otro planeta aunque los diseñadores web parezcan serlo. Si eres diseñador y te toca hacer diseños en psd de webs o app’s, con este post queremos enseñarte como ahorrarte horas de cambios.

FacebookTwitterWhatsAppLinkedInPinterest

A lo mejor te estás preguntando “¿Wirequé?” . Si te has quedado en blanco y con los ojos como platos, te vamos a contar en que consiste.

Un Wireframe es un paso previo muy importante antes de empezar el diseño de una web. Consiste en crear un boceto de la estructura de tu página de una forma simple, pero concretando cómo vamos a organizar la información.

Hacer este planteamiento previo de la página sin haber empezado a diseñar nos permitirá ser más rápidos a la hora del desarrollo del diseño y evitará que acabemos distribuyendo la información a ciegas. También hará que el cliente vea antes de meterle mano al código cómo se organizará la información, lo que hará que siempre le podamos tapar un poco la boca cuando nos diga “es que esto aquí no lo quería”.
Ya que este documento es muy importante en el proceso de creación de una web, es necesario que el cliente acepte el wireframe como parte del proyecto y firme que está conforme en cómo hemos hecho el planteamiento antes de que empecemos a diseñar. ¡Mejor nos ahorramos disgustos!

Herramientas

Existen un montón de aplicaciones online para crear wireframes cómo moqups, gliffy o incluso desde Google Drive creando un archivo de dibujo. Es habitual también desarrollarlo en illustrator, indesign o photoshop, que nos permiten, de camino, colocar elementos a tamaño real. Este método es muy cómodo, y si luego continuamos trabajando en ese programa el diseño, ya estará listo para programar.

como-hacer-un-web-wireframe-digital-example

Para nosotros, la manera más cómoda de abordar un Wireframe es hacer un boceto en una libreta. ¡Que no se diga que en diseño web no necesitamos papel y lápiz! Una libreta de cuadros puede ser nuestro mejor aliado para este proceso.

Elementos de un Wireframe

Pero… ¿qué debe contener un Wireframe?

  • El wireframe debe definir la estructura y jerarquía de la página.
  • Debe indicar dónde aparece cada contenido.
  • En él se debe indicar qué comportamiento y funcionamiento tienen los elementos con los que se puede interactuar o los que tendrán movimiento.

En cualquier caso, puesto que va a ser un boceto, el wireframe no contendrá elementos de diseño como fotografías o tipografías. Es un esquema meramente estructural.

Proceso de creación de un Wireframe

1. Mapa web

Para empezar debes tener definido un mapa web. El mapa web es la red de links que tendrá tu página. Si has desarrollado bien los contenidos con el cliente, el mapa web vendrá rodado porque tendréis bien definidos cada uno de los apartados.

2. Estructura y grid

Ahora debemos elegir la retícula: si vamos a trabajar a ‘full width’, si el menú va en la cabecera, si lo pondremos en el lateral… Para la estructura podemos basarnos en un grid.

Si dejamos a nuestra pobre libreta abandonada y vamos a trabajar directamente en digital, existen herramientas para Photoshop con las que empezar a componer un grid de doce columnas en base a Bootstrap, que es el marco de trabajo más común entre diseñadores web.

como-hacer-un-web-wireframe-esquema1

3. Composición

Una vez bien definida nuestra estructura, añadiremos los elementos que formarán nuestra composición: si tiene fotos, vídeos, slider, si hay que añadir botones para algun ‘call to action’…

como-hacer-un-web-wireframe-esquema2

4. Indicaciones

Por último añadiremos a nuestro boceto las indicaciones oportunas a cerca de las funcionalidades.

como-hacer-un-web-wireframe-esquema3

Como podrás ver, el hecho de crear un wireframe no debe ser un engorro. Muchas veces se desarrolla delante del cliente si ya llevas la idea de casa. Es algo que, al igual que el mapa web, lo podéis decidir entre el cliente y el diseñador (aunque todo depende del caso).

Aunque existen formas más elaboradas que otras, el mínimo sería hacer un wireframe rápido a papel para que quede clara la estructura y el cliente sepa un poco por dónde vas a empezar. Es una herramienta muy útil en tu proceso de trabajo, e invertir un pequeño tiempo en definir este paso te ahorrará muchas horas de cambios si tu cliente es un “quitapón”.

Suscríbete y no te pierdas nada


Recibe nuestra newsletter para estar al tanto de todo, todo y todo

Comenta por aquí

FacebookTwitterPinterestLinkedInWhatsApp

Cookies

Este blog emplea cookies de Google para prestar sus servicios y analizar el tráfico. Conocer más sobre la política de cookies.

ACEPTAR