Si has llegado hasta aquí te estarás preguntando, ¿qué es un wireframe en el desarrollo de una página web? La definición que se debe dar a esta pregunta es que un wireframe es un dibujo representativo de la estructura general de una página web, normalmente pintado de manera sencilla y a escala de grises. Pero esta respuesta es muy genérica y muchos nos quedaremos igual que al entrar a esta entrada tras leer la definición por lo que pasamos a detallar en qué consiste.
Los wireframes tienen su inicio en la primera etapa de todo proyecto web ya que es e esta etapa dónde se define cómo va a ser nuestra página, del mismo modo que se estudia tanto la Interfaz de Usuario (IU) como la experiencia de Usuario (UX). Los wireframes reciben también el nombre coloquial de “prototipos simples” de la página web.
¿Qué sentido tienen los wireframes en los desarrollos?
Los prototipos o wireframes elaborados antes de comenzar a desarrollar código sirven de guía tanto a diseñadores como desarrolladores ya que en ellos se muestra el patrón y la estructura que debe tener esa página web. Es por tanto una herramienta de guía para la elaboración del proyecto.
Es un modo también de acordar con el cliente la forma que tendrá nuestra web. Algo que puede carecer de importancia pero que puede evitar futuras modificaciones por parte del cliente que reducirían nuestros márgenes de ganancia al tener que diseñar por duplicado nuestra página web. De este modo, y una vez aceptado el wireframe en el desarrollo de una página web por parte del cliente, tienes vía libre para elaborar el desarrollo en base a dicho prototipo. Con un wareframe aprobado por parte del cliente tenemos un documento para poder pedir un aumento del coste de la web ante posibles modificaciones de la estructura ya que supone cambios sobre lo estimado inicialmente.
Al ser prototipos tan sencillos, te dan la posibilidad de ofrecer al cliente varias versiones de una misma página web con pequeñas modificaciones con un tiempo de creación casi nulo, ampliando así la visión de lo que quiere el cliente para la página.
El hecho de que sea en escala de grises y carecer de un diseño atractivo, hace que te puedas centrar en la funcionalidad evitando que se pueda pasar algo por alto. Al estar cada “pantalla” separada en un wireframe diferente hace que se puedan hacer pequeñas modificaciones sobre cada uno de ellos, así como añadir anotaciones previas que faciliten el trabajo a los developers.
Los wireframes sirven también a los diseñadores como base para elaborar los “prototipos avanzados” que pueden suponer una idea del diseño final que tendrá nuestra página web.
Tipos de wireframes y cómo elaborarlos
Tenemos diferentes tipos de wireframes dependiendo de la complejidad de estos. Tenemos desde wireframes sencillos en los que se muestra la estructura de la página hasta wireframes con anotaciones que puedan ayudar a los diseñadores y desarrolladores en el trabajo posterior. En este tipo de gráficos se pueden añadir “diagramas de flujo” para ayudar a la persona que lo vea en cómo pueden interactuar los visitantes con la página web.
Una vez sabemos qué es un wireframe en el desarrollo de una página web vamos darte algunos consejos para poder elaborarlos.
Al ser diseños tan sencillos puedes usar un lápiz y un papel para poder realizar las anotaciones necesarias en directo mientras se lo estás mostrando al cliente.
Del mismo modo, si prefieres que el proceso esté informatizado, puedes comenzar por hacerlo con el “paint” de Windows o ya recurrir a herramientas de elaboración de wireframes más complejas, ya sean online o aplicaciones de escritorio. Puedes buscarlas en Google como “Mockups” ya que hay muchas gratuitas muy completas y al final es hacerte al modo de trabajo de esa herramienta en concreto.
Uno que me gusta mucho y que es totalmente gratuito es draw.io que se integra completamente en tu cuenta de Google para que no pierdas tus diseños.