Il mockup è un modello destinato a essere visualizzato prima del completamento di un progetto. In ambito informatico, un mockup è un modello di sito web: un’immagine statica che mostra come potrebbe apparire una qualsiasi pagina, una volta realizzata al 100%.
Per questo motivo, il mockup finale non potrà essere confuso con altre parole in qualche modo legate all’idea del modello. Nell’informatica, ad esempio, il termine “wireframe” è spesso utilizzato per indicare un prototipo che mostra vari aspetti fondamentali di un sito web in fase di sviluppo. Dunque, prima di entrare nel merito di come si fa un mockup, sarà sicuramente utile fare un piccolo passo indietro. Analizzate più in dettaglio il significato di questa frase, evidenziando le differenze rispetto a un wireframe o, più in generale, a un prototipo.
COSA E’ UN MOCKUP
Il termine inglese mockup, talvolta scritto “mock-up”, può venire tradotto in italiano con la parola “modello”. Si tratta di una realizzazione che viene prodotta con fine illustrativo o espositivo. Pertanto, se si parla di tecnologia dell’informazione, un mockup è un modello di sito web. Una prima cosa importante da sottolineare è che un mockup di sito web non deve necessariamente rappresentare tutte le pagine coinvolte.
Un mockup può essere utilizzato nel campo della progettazione grafica per fornire un esempio più concreto. A volte, durante la creazione di un logo, vengono presentati diversi mockup per dimostrarne l’applicazione nei concorsi più disparati, come pubblicazioni online, articoli di merchandising, associazioni e altre sedi. A ben vedere, anche i mockup di siti web corrispondono invece essenzialmente a delle immagini statiche. Servono dunque a mostrare layout, disposizione degli elementi, colori, caratteri tipografici e così via.
In certi casi un mockup di sito web entra anche nel merito di pulsanti, collegamenti ed eventuali CTA. Considerate che ognuno di questi elementi sarà solo presentato e non potrà essere “cliccato”.
DIFFERENZA TRA MOCKUP E WIREFRAME
Mockup
I mockup sono rappresentazioni statiche ad alta fedeltà che illustrano il layout del sito web con le scelte di branding applicate. A differenza dei wireframe, i mockup includono lo stile grafico, la tipografia e l’uso dei colori. I mockup forniscono all’utente un’anteprima realistica del sito web finale, ma non sono interconnessi. I mockup sono essenziali quando si costruisce un sito web personalizzato, perché consentono di apportare modifiche alla progettazione prima di iniziare la codifica.
Wireframe
I wireframe sono diagrammi che mostrano il layout e la struttura di un sito web senza elementi di design. Considerate un wireframe come un progetto per la progettazione di un sito web. Possono anche aiutare i designer che lavorano ai siti con un elemento nuovo o profondamente interattivo. I wireframe, infatti, consentono di prendere decisioni in merito alla funzionalità e alla struttura di base del sito prima di progettare e scrivere il codice. Anche se state costruendo un negozio online più semplice, un wireframe può aiutarvi a consolidare il funnel di vendita e l’esperienza del cliente che volete creare. In poche parole, i wireframe sono un ottimo modo per mettere tutti d’accordo prima di iniziare la progettazione.
COME CREARE UN MOCKUP
Decidi come presentare il sito web
Il primo passo per progettare un sito web è pensare a come presentare il marchio. Se lavorate con un designer, potete iniziare il processo con un brief creativo. Questo aiuterà il designer a conoscere il tuo marchio, il pubblico e le fonti di ispirazione.
È normale concentrarsi su caratteristiche specifiche, ma prima di passare dai dispositivi tecnici, pensate a ciò che volete comunicare con il layout del vostro sito web.
La homepage è spesso il primo punto di contatto con un marchio e tende ad avere le opzioni più personalizzabili. Tuttavia, piuttosto che iniziare con un obiettivo di funzionalità o di ottimizzazione della conversione, è stata posta questa domanda: “Come posso stabilire una connessione più profonda con i visitatori della homepage?”. La soluzione potrebbe essere semplice: scrivere una breve introduzione al tuo marchio “above the fold”. Se i valori del tuo marchio sono al centro della tua attività, la homepage costituisce un’ottima opportunità per metterli in mostra. Per esempio, la dimostrazione di valori come la sostenibilità o l’inclusione potrebbe suscitare l’interesse del vostro target pubblico, facendolo rimanere più a lungo sul vostro sito web.
Crea una narrazione lineare
Il vostro sito web deve seguire una narrazione lineare, il che significa che ogni pagina e sezione deve scorrere in modo logico ed essere collegata a quella precedente. Una storia di successo garantisce ai visitatori della vostra homepage una comprensione approfondita del vostro marchio e dei prodotti che vendete. Man mano che gli utenti navigano nel sito, dovrebbero ricevere maggiori dettagli e funzionalità che li aiutino a trovare i prodotti giusti per loro.
La vostra narrazione lineare è l’imbuto di vendita di un sito di e-commerce tradizionale: un visitatore arriva alla vostra homepage, che serve come una sorta di introduzione al vostro marchio. Da qui è facile trovare le pagine dei prodotti, che forniscono più dettagli rispetto alla homepage, presentando prima le informazioni più importanti e consentendo un facile accesso a quelle secondarie e terziarie. In un flusso narrativo ottimale, l’utente selezionerà i prodotti, andrà alla pagina del carrello e, infine, completerà il processo di checkout.
Raccogli elementi del marchio
Una volta deciso come raccontare la storia del sito web, elencate gli elementi del marchio che saranno utilizzati nel design. Se disponete di una guida ai prodotti, potete discuterne con il vostro designer (o fornire un feedback per conto vostro). Prima di realizzare un mockup, se non lo avete, dovrete scegliere la tipografia, la grafica e i colori del marchio. Poiché il layout della griglia del sito si baserà sulla spaziatura tra le lettere del carattere del marchio, è importante stabilizzare questi elementi prima di creare il mockup del sito. Una volta che avete un layout a griglia, potete creare un mockup utilizzando i vostri elementi di design e il brief creativo.
Progetta template per ogni tipo di pagina
Quando si progetta un mockup per un sito web, non bisogna creare un mockup per ogni singola pagina, bensì un template di mockup per diversi tipi di pagine (ad es. un template per la pagina di collezione e uno per la pagina del prodotto).
Quando si lavora con uno di questi modelli, è sempre una buona idea chiedersi cosa possa rendere l’esperienza più efficace. Se avete meno di sei prodotti nel vostro inventario, la vostra pagina di collezione dovrebbe mostrare uno di questi prodotti e fornire un po’ di concorrenza prima di passare alle pagine dei prodotti. Se il vostro inventario è ricco di prodotti, dovreste creare un sito web con filtri più avanzati per i prodotti. Questo aiuterà le persone che arrivano a una pagina di raccolta a trovare i prodotti migliori per loro, dando loro un colore.
Ottieni feedback
Una volta terminato il mockup, è il momento di mostrarlo e ottenere un feedback. Il vantaggio principale della creazione di un mockup di un sito web è che potete apportare revisioni senza modificare il codice, quindi sfruttate questa opportunità per assicurarvi che tutti siano d’accordo sul mockup prima di iniziare il processo di codifica.
