Si has decidido diseñar o desarrollar una web, hay que tener ciertos puntos previos en cuenta. Uno de los más importantes: el Wireframe.
El Wireframe consiste en un boceto / diseño / esquema, que funciona a modo de estructura visual para nuestra web y que representa de forma muy sencilla todo el contenido de esta.
El diseño de un Wireframe previo al desarrollo web tiene diferentes propósitos. Para comenzar son estructuras sencillas, lo que facilita el diseño de diversas versiones. De esta manera, se puede estudiar la interfaz de usuario y la experiencia de este (UI y UX) sin tener que escribir ningún tipo de código, y decidir si alguna funcionalidad es necesaria o no, lo que nos ahorraría bastantes horas de desarrollo y evitar futuros errores.
Una de las cosas más interesantes es que estamos hablando de una interpretación visual de lo que queremos conseguir, es decir, la estructura final que tendrá nuestra web. Un Wireframe nos funcionará fácilmente como una guía visual que hará de la implementación web una tarea mucho más veloz.
Es común ver en algunos Wireframes anotaciones e información sobre los contenidos de la web, una serie de comentarios que ayudan a tener una visión mucho más clara de la funcionalidad de esta.
¿Cómo creamos un Wireframe?
Hoy en día existen centenares de aplicaciones que te ayudan a crear wireframes, sea a partir de una plantilla, como si empiezas de cero. La mayoría de estas aplicaciones son sencillas de utilizar, con elementos predeterminados que harán que diseñar sea tan sencillo como arrastrar estos elementos hasta la posición deseada. Algunas de estas aplicaciones incluso permiten crear versiones para modelos responsive.
Dentro de las aplicaciones más conocidas, encontramos:
– Figma: quizás la más conocida y a la vez más potente, desde tu mismo navegador puedes crear Wireframes con una facilidad asombrosa ya que estamos hablando de una web-app. Tiene total integración con Google Drive y nos permite crear diferentes espacios de trabajo para organizar mejor nuestros diseños.
– Adobe XD: la alternativa por parte de los de Adobe viene acogida por su ya conocida plataforma “Creative Cloud”, lo que nos asegura futuras actualizaciones y soporte. Su utilización es también sencilla y nos permite crear diseños bastante avanzados.
–UXPin: interactivo e intuitivo. Su facilidad lo hace una de las mejores opciones para coger experiencia en el diseño de Wireframes.
Por otra parte, aun existe quienes prefieren hacerlo a lápiz, papel e imaginación. No es necesario ningún tipo de conocimiento artístico, ya que estamos hablando de lineas y comentarios. Esta es, quizá, la forma más sencilla, pero siempre hay que tener en cuenta que el diseño responsive se deberá diseñar a parte.
Sea cual sea la manera que escojas, lo importante es centrarse en la funcionalidad de la web y la experiencia de usuario, es decir, los contenidos de nuestra web:
1. Web map: Debemos tener clara la red de links de nuestra página y la conexión entre páginas internas
2. Grid: Teniendo en cuenta si trabajaremos con bootstrap o no, debemos estructurar los contenidos de nuestra web, por ejemplo: donde situaremos el menú (en el header o en un lateral), según donde escojamos, la estructura de nuestra página se verá afectada.
3. Composición: Ahora toca repartir los elementos dentro de nuestra estructura: imágenes, textos, botones, videos, sliders,…
4. Comentarios: finalmente, tendremos que anotar las diferentes indicaciones que veamos necesarias (animaciones, hovers, iframes,…)
Como veis, hacer un wireframe es una tarea realmente sencilla que puede ahorrarnos muchas horas de desarrollo web.
