Diseño
Què és un wireframe?
Un wireframe és un esquema visual de baixa fidelitat que representa l'estructura d'una pàgina o pantalla abans d'aplicar-hi disseny gràfic. Defineix on es col·loquen els blocs de contingut, la navegació i les crides a l'acció, normalment en escala de grisos, per acordar la disposició abans de programar.
Per Emili Hernàndez · CEO i Cofounder
Dissenyador i desenvolupador web. Responsable tècnic d'Estudi Zeta.
Veure el perfil de Emili Hernàndez
Per a què serveix un wireframe
El wireframe permet decidir l'estructura abans de fer el disseny i desenvolupament. En treballar en gris i sense detall gràfic, la conversa se centra en quina informació va a cada lloc i com es navega, que és el que resulta car de canviar més endavant.
| Fidelitat | Nivell de detall | Quan s'utilitza |
|---|---|---|
| Baixa | Caixes i text de farciment | Explorar idees i estructura a l'inici |
| Mitjana | Contingut real, sense estil gràfic | Validar la disposició amb el client |
| Alta | Proper al disseny final | Preparar el pas a disseny i desenvolupament |
Wireframe, mockup i prototip
El wireframe defineix l'estructura. El mockup afegeix el disseny visual (color, tipografia, imatges). El prototip fa navegable aquest disseny per provar la interacció. Són tres passos d'un mateix procés, cadascun amb més detall que l'anterior.
Com es fa un wireframe
Es parteix dels objectius de la pàgina i del contingut que hi ha d'aparèixer, s'ordenen els blocs per prioritat i es defineix la navegació. Eines habituals són Figma o Balsamiq.
Preguntes freqüents sobre wireframes
Per a què serveix un wireframe?
Per acordar l'estructura d'una pantalla abans de dissenyar-la i programar-la, quan els canvis encara són barats.
Quins són els tipus de wireframe?
De baixa, mitjana i alta fidelitat, segons el detall.
Quina diferència hi ha entre wireframe, mockup i prototip?
El wireframe defineix l'estructura, el mockup afegeix el disseny visual i el prototip el fa navegable.
Com es fa un wireframe?
Partint de l'objectiu i el contingut, ordenant els blocs per prioritat i definint la navegació.