Con­cre­tiz­za­re l’idea del vostro sito con mockup e wireframe

All’inizio il nuovo sito web o l’app non è molto di più che una semplice idea e, per questo, riuscire a vi­sua­liz­za­re il proprio progetto è la base ir­ri­nun­cia­bi­le per la suc­ces­si­va rea­liz­za­zio­ne tecnica. Solo così potete con­vin­ce­re un cliente della vostra idea, sia che si tratti di un sito o di un app, o co­mu­ni­ca­re ai pro­gram­ma­to­ri come dovrebbe fun­zio­na­re e apparire il progetto. Inoltre potreste magari scoprire alcune ir­re­go­la­ri­tà che riu­sci­re­te così a risolvere prima di andare online. A questo proposito vengono in mente due termini: “mockup” e “wireframe”. Ma cosa si nasconde dietro questi due diversi tipi di bozze?

Anche il termine “mockup” deriva dall’inglese e significa qualcosa come “campione” o “modello di prova”. Anche questo tipo di bozza serve alla vi­sua­liz­za­zio­ne dell’idea del proprio progetto e aggiunge wireframe tramite elementi di design, su cui si basano spesso. Con un mockup per l’app o il sito non viene pre­sen­ta­to solo il layout di base, com­pren­si­vo di de­scri­zio­ne delle funzioni e se­gna­po­sto per i contenuti, ma si vi­sua­liz­za anche la prima versione di un design suc­ces­si­vo. A questo scopo si lavora alla creazione di un mockup con

• colori,

• ti­po­gra­fia,

• immagini

• ed elementi grafici

che danno vita al layout e lasciano una buona im­pres­sio­ne generale di come potrebbe apparire alla fine il progetto dal browser o sui diversi display. Per creare i mockup bastano programmi di grafica come Photoshop, ma ci sono anche specifici tool come Balsamiq con cui generare diverse pagine fa­cil­men­te, anche inserendo dei col­le­ga­men­ti. I mockup complessi di questo tipo as­so­mi­glia­no molto ai prototipi in­te­rat­ti­vi (click dummies), che però con­ten­go­no già i primi codici in HTML, CSS, ecc.

Uti­liz­zan­do alcuni mezzi visivi già nella fase iniziale di pro­get­ta­zio­ne del sito web, au­men­te­re­te di molto le vostre pos­si­bi­li­tà di successo. Se lavorate in team arrivate più ve­lo­ce­men­te ad un comune de­no­mi­na­to­re, mentre se avete in­ca­ri­ca­to uno svi­lup­pa­to­re esterno per la pro­gram­ma­zio­ne, le vostre aspet­ta­ti­ve do­vreb­be­ro essere sod­di­sfat­te, perché un pro­fes­sio­ni­sta riuscirà a dirvi in poco tempo quali funzioni sono rea­liz­za­bi­li, quali causano problemi e quali dif­fi­col­tà si ri­scon­tra­no sul sito in termini di usabilità. Infine, le bozze schizzate su carta sono anche un’ottima idea per pre­sen­ta­re la vostra app o sito ai clienti e ai po­ten­zia­li in­ve­sti­to­ri.

Del resto il percorso che inizia con l’idea, passando per la vi­sua­liz­za­zio­ne, fino ad arrivare alla pro­gram­ma­zio­ne, non deve sempre prevedere entrambi i tipi di bozze. In alcuni casi un wireframe è già più che suf­fi­cien­te: se ad esempio prevedete di ampliare il vostro sito con una sot­to­pa­gi­na in­te­rat­ti­va, la rea­liz­za­zio­ne di un mockup è superflua perché è già stato conferito un design di base al resto del sito. Stesso discorso vale anche per le aggiunte nelle ap­pli­ca­zio­ni web. Inoltre un wireframe è la migliore forma di vi­sua­liz­za­zio­ne, se avete in­ca­ri­ca­to un grafico per la creazione del design e vorreste dargli più spazio per la rea­liz­za­zio­ne del progetto.

Quando poi si tratta di con­cre­tiz­za­re le proprie aspet­ta­ti­ve sugli elementi grafici, la creazione di un mockup è ine­vi­ta­bi­le. Più siete scesi nel dettaglio con il vostro wireframe, più facile sarà la creazione di un modello di design prov­vi­so­rio. Dalla creazione di mockup in­te­rat­ti­vi e più complessi, com­pren­si­vi di struttura delle pagine e dei link, ne con­se­guo­no lo­gi­ca­men­te un impegno maggiore e costi elevati, che però in casi par­ti­co­la­ri possono anche far ri­spar­mia­re, non sorgendo la necessità di prototipi basati sul codice.

Con la crescente im­por­tan­za del re­spon­si­ve design, è anche aumentata molto la com­ples­si­tà di wireframe e mockup. Se prima era più che suf­fi­cien­te un unico schizzo, oggi è in­di­spen­sa­bi­le creare più versioni per diverse di­men­sio­ni del display. Oltre a ciò, durante questa fase pre­li­mi­na­re di pro­get­ta­zio­ne, devono anche essere con­si­de­ra­te le dif­fe­ren­ze fun­zio­na­li, come pe­ri­fe­ri­che di input (mouse, tastiera, tou­ch­screen) e i diversi requisiti tecnici (tra­smis­sio­ne dei dati, ecc.).

La modifica delle con­di­zio­ni generali ha perciò com­por­ta­to che oggi si rinuncia spesso ad un mockup e viene piuttosto creato sin da subito un prototipo re­spon­si­ve, che tiene au­to­ma­ti­ca­men­te conto delle proprietà spe­ci­fi­che di di­spo­si­ti­vi diversi. Comunque anche gli svi­lup­pa­to­ri di software di wi­re­fra­ming e di strumenti per il mockup hanno reagito ai cam­bia­men­ti del mercato e hanno sem­pli­fi­ca­to il processo di creazione di diverse versioni di una bozza. Chi volesse disegnare a mano il suo wireframe, non può che creare ogni schizzo sin­go­lar­men­te.