Realizzare un template con mockup e wireframe



Se stai pensando di avviare un progetto per un sito web o un’applicazione, il primo passo per realizzarlo è creare una bozza del template che consenta di visualizzare subito come apparirà una volta terminato. Solo dopo si passerà alla fase di sviluppo tecnico per farlo girare online. Vediamo cosa sono e come funzionano mockup e wireframe.

Wireframe, la struttura di base

Il wireframe è lo scheletro del progetto, il modello base da cui partire per costruire il sito. Ti consente di rappresentare graficamente in maniera grezza, ciò che era solo nelle tue idee. Basta disegnare anche su un foglio di carta gli spazi che successivamente lasceranno spazio a grafica e testi. In questa fase decidi dove vuoi che siano posizionati gli elementi e la loro dimensione nella pagina. Questo sarà il layout base che consente di testare l’usabilità e ottimizzare il sito nella sua fase embrionale. Nella fase successiva si elabora il design definitivo con elementi di testo e design.

Mockup, il modello di prova

Il mockup a differenza del wireframe rappresenta visivamente quello che sarà il modello definitivo del sito o dell’applicazione. Vengono inseriti molti più elementi grafici – immagini, colori e tipografia – per avere un’anteprima dello sviluppo successivo. Possiamo considerare il mockup come una foto istantanea del progetto, dove sono inseriti elementi statici – ma non necessariamente – per dare un effetto realistico in fase di presentazione a clienti, colleghi o investitori. Dopo le modifiche finali si potrà passare allo sviluppo vero e proprio per mettere online il progetto.

Responsive design

La necessità di avere un sito responsive, adatto per le diverse dimensioni degli schermi, complica sensibilmente il lavoro di progettazione. Se prima era sufficiente un’unica bozza, ora è necessario creare versioni adattate per i diversi device – computer, tablet e smartphone – poiché anche le funzionalità del sito cambiano a seconda dello schermo su cui verrà visualizzato il sito o l’applicazione. Ma anziché creare più bozze differenti moltiplicando il lavoro, è possibile realizzare direttamente un prototipo responsive

Prenota un appuntamento