Los wireframes o guayframes, como más de un cliente me ha dicho alguna vez, son uno de los primeros pasos de cualquier proyecto web.

Plantear un buen esquema, previo al diseño,  con las secciones que va a llevar tu web, así como una estructura apropiada, puede determinar el éxito que después tenga tu página. Y es que hoy en día, la usabilidad y el responsive design, son los mejores amigos de los que nos dedicamos al mundo del marketing online.

¿Os ha pasado en alguna ocasión que estáis viendo una página por primera vez, pero automáticamente buscas lo referente a tu perfil en la esquina superior derecha? ¿Sí? ¡Bingo! Pues a eso, se le llama estándares de diseño y gracias a ellos facilitamos la navegación a los usuarios. Es importante que mostremos lo que el usuario está buscando, donde él intuye que lo va a encontrar, y no dónde a nosotros nos ha parecido que quedaba más bonito.

Igual que en el tetris, se trata de ir encajando cada pieza de manera que todas juntas cumplan un único objetivo. Gracias a los wireframes, conseguimos que se planteen todas las secciones que va a tener nuestra página web antes de empezar a diseñarla o pintarla. La mayoría de las webs que parten de una plantilla, siguen esqueletos muy parecidos entre sí, con cajas de contenidos definidas siempre de la misma manera, por eso, hay que poner especial interés cuando la web se crea desde cero.

Hay dos pasos fundamentales a la hora de crear un buen wireframe. El primero es tener claro que vamos a querer que tenga nuestra web, menús, secciones, registros, etc. Y el segundo, qué contenidos son los más relevantes y que queremos que el usuario vea sí o sí. Con esto en nuestra cabeza, podemos empezar a jugar a este tetris para colocar cada cajita en su sitio e ir subiendo de nivel.

Un wireframe está bien hecho, si cuando lo das por acabado, te das cuenta de que no funciona. ¿Paradójico verdad? Pues así es. Lo normal es que necesitemos dos o más intentos hasta que todos los elementos encuentren su posición correcta y podamos ver que el flujo de navegación de la página es intuitivo y guía al usuario por dónde nosotros queremos que encuentre la información.

No pasa nada si nos damos cuenta de un error en este punto de desarrollo del proyecto, porque es ahora cuando merece la pena perder tiempo en pensar cuál va a ser el comportamiento del usuario. El problema real viene, si cuando ya está todo maquetado y programado, nos damos cuenta de que hay partes de la web que no se entienden.

En ocasiones los timings ajustados y las prisas nos hacen dedicar menos tiempo del que deberíamos a esta parte, pero si queremos hacer las cosas bien hechas… ¡apuesta por los guay-frames!

El usuario de ahora ya no usa ni una, ni dos, sino tres pantallas, por lo que nuestro wireframe tiene que atender a sus necesidades y funcionar bien, desde cualquier dispositivo. Mi consejo, cuando plantees la arquitectura de la información hazlo primero en móvil. Empieza ordenando los elementos en la pantalla más pequeña y más complicada en la que tu usuario va a ver tu página, y luego ve simplificando a tablet y a desktop. Al principio cuesta más, pero al hacerlo en este orden, evitas que cuando lo llevas al móvil, haya partes que no encajen.

Os animamos a que consultéis en vuestro teléfono cualquiera de los microsites que habitualmente visitéis, y os fijéis si la información sigue donde siempre y es fácil su navegación, o si por el contrario, la versión móvil se planteó después y sorprendentemente las cosas encajan “como buenamente pueden”.

Si tienes una idea entre manos y estás pensando en cómo sería su página web, no te olvides de hacer wireframes para plantear el esquema de la información y cómo van a estructurarse todos los elementos.

Plantea todo desde el punto de vista del usuario, da más visibilidad a lo importante y empieza siempre por la versión móvil.