Los wireframes o prototipos han llegado a nuestra vida para hacernos felices, tanto a diseñadores, como a desarrolladores y por qué no, a los propios clientes.
La idea de construir la casa por el tejado siempre ha sonado guay, pero lo cierto es que el asunto acaba flaqueando por algún sitio.
Si se te está dibujando una sonrisilla porque te pasaste horas diseñando una página web y luego el cliente te puso esta cara…
..Deberías seguir leyendo este post. Porque vamos a hablar de lo importante que es hacerte amigo de los wireframes.
¿Qué es un wireframe?
Lo que nos hace la vida más fácil en el camino del diseño de una página web. Un wireframe o prototipo es una especie de boceto donde visualmente y de forma sencilla y esquemática se presenta la estructura de una web.
Los wireframes se centran en la funcionalidad del sitio y en la experiencia del usuario
Su objetivo es delimitar el contenido y la posición de las páginas y bloques del escaparate de tu empresa. Además, permite representar la interacción entre sí de los distintos elementos del futuro portal.
Estos prototipos se centran en la funcionalidad del sitio y en la experiencia del usuario, dejando de lado los colores, tipografías o cualquier componente gráfico.
Que sea un boceto simple ofrece la ventaja de crear múltiples versiones del mismo proyecto o incluso implementar cambios que vayan surgiendo conforme se trabaja en el proyecto.
Los wireframes son nuestros mejores aliados porque nos sirven para guiar a nuestro cliente de cara al proceso de diseño. De esta forma es muy probable que cuando finalice el proceso recibamos un correo electrónico con una carita más que feliz (o con muchas exclamaciones).
Esencial para el diseño de una página web
Ante todo queremos no tener que resoplar más de tres veces cuando empecemos con el HTML y el CSS. Por eso es imprescindible comprobar que no haya fallos de peso que cuesten más tiempo enmendar.
¿Qué ventajas tiene usar wireframes?
- Cumplen las tres B. Son buenos, bonitos y baratos. Al ser bocetos esquemáticos se crean con facilidad y a un coste bajo. Además son muy útiles y por supuesto, bonitos. Que sea un boceto no significa que tengamos que restarle atractivo.
- Avisan de los problemas. Puedes recibir un feedback al instante y así los obstáculos no son tan graves.
- Permiten mejoras sencillas. Son esenciales para aportar mejoras, para evaluarlos previamente y tener en cuenta que se puede añadir o suprimir.
- Amigos de la usabilidad. Toda esta planificación está ligada a una mejor usabilidad ya que se deja de lado la improvisación.
Tú decides cómo quieres crearlo
Existen muchas formas para crear un wireframe. Ahora que estamos continuamente atrapados por una pantalla, aprovechar la oportunidad y hacerlo a mano puede parecernos una experiencia incluso relajante.
De esta forma, podemos usar distintos tamaños de papel para representar los diferentes dispositivos donde se vería la web.
También existen plantillas imprimibles o incluso programas y aplicaciones como Mockflow, que te permite crear estos bocetos en la nube.
Pero en Blubber nos gusta conocer cómo se maneja en estos cotarros la persona que ha llegado leyendo hasta el final del post. Así que, ¿cómo haces tú los wireframes?
