Wireframe y prototype
Cada vez hay más ayudas para iniciar el diseño de tu sitio web. Incluso para pasar a papel tu idea abstracta sobre el sitio web que quieres diseñar.
Esta parte del trabajo de planeamiento inicial suele recibir el nombre de wireframing y prototyping. En castellano sería como esquemas (o bocetos) y prototipos. Son dos conceptos muy parecidos que a veces se confunden.
Wireframe
Mira el wireframe como un esquema básico de todo el sitio web y de cada una de sus páginas. Pero solo eso: un esquema donde aún no se ven los diseños las formas visuales.
El wireframe es un esqueleto del sitio y de las páginas, pero no tiene que hacer referencia al diseño visual. Así podemos poner que una determinada página va a tener un formulario de registro con sus campos, pero no me va a decir como es visualemente ese formulario. Pero si vamos a especificar que una vez realizado el registro se pasará a una página de bienvenida, por ejemplo.
El wireframing tendrá como resultado una especie de diagrama de flujo donde se detalla como se distribuyen los contenidos y como se van a relacionar las páginas del sitio. Se trata de materializar por escrito como va a funcionar nuestro sitio web.
En resumen el wireframing permite:
- Conectar la arquitectura de un sitio con su diseño visual, definiendo las relaciones entre páginas
- Ser consistentes al mostrar información de diferentes tipos en la interfaz de usuario
- Planear las funcionalidades e interacciones
- Repartir adecuadamente los contenidos a lo largo de todo el sitio y en cada página
Esta fase puede hacerse con un buen editor de diagramas de flujo o simplemente a mano con un editor gráfico simple. Básicamente serán bloques con texto, pueden mostrar las relaciones entre páginas, el layout en cada página.
Prototyping
Una vez tenemos el esquema descriptivo de nuestro sitio web toca darle color y ponerlo en funcionamiento. Es la misión del prototyping tener una descripsión funcional del sitio web. Si el wireframe es el plano de la casa el prototyping es la maqueta.
El prototipo resultante de esta fase del sieño es una maqueta funcional del sitio web en la que podremos ver como funcionan todos los elementos del sitio web de manera gráfica. Es en esta fase donde ya se deciden colores, colocación de los elementos, imágenes a usar, animaciones... Pero todavía no es el sitio, por lo que puede no ser tan amigable y quizás no puedean hacerse visibles algunas interacciones.
Para realizar esta tarea podemos contar con un editor de imágenes o herramientas específicas.
Herramientas
Para un buen wireframe basta con papel y lápiz, un cuadrno puede ser suficiente, al menos al principio. si quieres algo más puedes usar un buen editor de diagramas de flujo o un editor gráfico.
El prototype también podría hacerse con un buen editor de gráficos. Aquí ya hay colores imágnes, videos..
Pero para ambos procesos existen herramientas más específicas. En general el software para esta fase de sieño abarca ambos pasos: la construcción del esquema o wireframe y la del prototipo.
Las herramientas habituales para diagrmas de flujo o mapas concpetuales suelen tener la funcionalidad de crear wireframe, como por ejemplo
Las herraientas para prototyping suelen ofrecer ambas posibilidades prototipado y wireframe
Existen muchas, pero en todas debes buscar:
- Facilidad de uso
- Posibilidad de trabajo colaborativo
- Un precio adecuado