Website wireframes: Què són i com diferenciar-los dels mockups i dels prototips

Des de Nubulus sabem que aquests tres conceptes poden donar lloc a confusió quan un s'inicia al disseny web. I és completament normal, no només perquè poden ser paraules noves sinó perquè malauradament és freqüent trobar els seus significats intercanviats o, fins i tot, que se'n parli com si fossin conceptes sinònims. No obstant això, encara que tots ells facin referència a etapes del disseny web, descriuen fases diferents dins del flux de treball.

Wireframe, Mockups i prototips: Diferències.

• Webiste wireframe: Els wireframes són esbossos esquemàtics on es planteja l'arquitectura bàsica d'un projecte, és a dir, la col·locació dels continguts. Aquests es realitzen durant la fase més inicial i són el tipus de representació més bàsica d’un projecte. És per això que, en aquesta etapa inicial, no s'utilitzen eines visuals com colors, tipografies o textos, que ens puguin distraure de la part més important d'aquesta etapa: L'estructura del contingut web.

• Mockups: Els mockups són representacions més realistes del producte final.  Aquests, van un pas més enllà que els wireframe, ja que en aquesta fase s'apliquen elements visuals, com diferents tipus de topografies o bé la gamma de colors finals, aconseguint així una representació més pròxima del producte final. Malgrat això, aquests segueixen sense ser funcionals, tractant-se encara d'un esquema.

• Prototip: És en aquesta etapa quan el nostre projecte s'assembla més a ser la seva versió final, ja que els prototips ja són versions funcionals. És doncs, l'etapa en la qual es pot simular la interacció i l’experiència de l'usuari. La manera més adequada per a provar el funcionament web. 

En resum, els wireframes s'utilitzen al principi del flux de treball i defineixen l'estructura bàsica del nostre projecte, els mockups, en canvi, defineixen l'aspecte visual i el disseny, i per últim, els prototips, els quals s'utilitzen per a provar la interacció de l'usuari amb la web.

Quins beneficis aporten els wireframes al nostre projecte?

Ja que, els wireframes són una representació bàsica i senzilla de realitzar, permeten crear diverses versions de manera ràpida, permetent així, una visualització clara de la col·locació de tots els continguts web.
Això també els converteix en una eina fonamental per a facilitar la comunicació, ja sigui amb membres del mateix equip o amb els clients, ja que permet visualitzar idees de manera senzilla i efectuar canvis de manera ràpida.

Com puc crear un wireframe?

Actualment existeixen una gran quantitat d'eines que s'adapten a les diferents necessitats de cada projecte, com també, a les habilitats del dissenyador i els seus recursos.
Aquestes van des de les més clàssiques, com n'és el dibuix amb llapis i paper, fins a les més avançades, que serien l'ús d'eines específiques com Adobe Xd, Blasamiq, Mogups o CAcoo, InVision, Sketch, etc. També podem trobar eines amb un ús més general, però sense que deixin de ser útils per al disseny de wireframes com Photoshop, Canva, Powerpoint o Illustrator.

Els wireframes són, doncs, un pas essencial per al disseny web, ja que, ens permeten crear una estructura ben definida des del primer moment, estalviant-nos així temps i costos inesperats.