Wireframe y prototypes: Bocetos y prototipos
Para el desarrollo de un sitio web, o de cualquier aplicación esté o no destinada a la web, es necesario realizar un trabajo previo de diseño. Se necestia un proyecto donde quede claro el objeto del sitio, el aspecto, las funcionalidades etc.
Puedes tener en tu cabeza una idea perfectamente clara de lo que quieres, pero debes plasmarla en papel para completar esos detalles que no has tenido en cuenta o aspectos que puede mejorarse.
Ahora toca ver en papel el aspecto de las páginas que forman tu sitio. Una estrategia muy útil es plasmar esas ideas en forma gráfica. Ver lo que estás pensando plasmado sobre un papel te va a dar una idea más general de todo el proyecto y te va a permitir avanzar de forma ordenada.
Por supuesto lo de papel es más bien conceptual, hoy en día poca gente echa mano del lápiz para escribir (pese a que es una muy buena idea hacerlo) pero bueno ambién puedes usar la versión digital.
Puedes usar una tablet con lápiz electrónico, tiene la gran vetnaja de que puedes modificar borrar y reescribir sin emborronar tus bocetos.
También esxisten programas que ayudan, por ejemlo los editores de diagramas de flujo pueden tener una apartado para símbolos de diseño que viene muy bien.
En esta sección te presento dos conceptos relativos a esta tareas, son el wireframing y elprototyping. En castellano sería como esquemas (o bocetos) y prototipos. Son dos conceptos muy parecidos que a veces se confunden.
Este trabajo precio se puede hacer de formas muy dispares. Pero existen algunas herramientas o métodos más o menos establecidos para facilitar la tarea.
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 de las páginas del sitio web, 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 marcas para texto, imágenes, video, formularios etc. Pueden mostrar las relaciones entre páginas y el layout (distribución del contenido) de 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 diseñ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.
Por ejemplo, si tienes un formulario no enviará mensajes, a lo sumo hará una simulación de envío para ver la página de respuesta al formulario.
De la misma forma las imágenes pueden no ser las definitivas, solo tendrán la función de ocupar los espacios para ver como quedan en el diseño.
Al ir refinando y completando el prototipo lo habitual es llegar al producto final y acabado, listo para comenzar la fase de pruebas, donde ya si que todo debe funcionar adecuadamente.
Una página prototipo puede comenzar con una imagen realizada en un editor de imágenes o con alguna herramienta específica, para luego convertirse en una página web.
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 iniciarse con un buen editor de gráficos. Aquí ya hay colores imágnes, videos. Algunos son capaces de exportar en forma de página web (archivos PSD a HTML).
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 diagramas de flujo o mapas conceptuales suelen tener la funcionalidad de crear wireframes, como por ejemplo
Las herraientas para prototypes suelen ofrecer ambas posibilidades prototipado y wireframe
Existen muchas, pero en todas debes buscar:
- Facilidad de uso
- Posibilidad de trabajo colaborativo
- Un precio adecuado