Come creare mockup per siti web

Nel 2014, insieme a Rembrant Van der Mijnsbrugge, ho fondato l'agenzia MOTE. Specializzati in ecommerce, collaboriamo con i clienti in ogni fase del loro percorso di branding: dalla strategia di mercato iniziale e l'identità del marchio al design, lo sviluppo e il marketing, sempre con un focus sulla crescita sostenibile. Con 15 anni di esperienza nel design di siti web per l'ecommerce, ho plasmato le strategie di clienti che vanno da marchi indipendenti ad aziende inserite nella lista Fortune 500. Sono entusiasta di condividere le conoscenze di web design che ho appreso nel corso della mia carriera.

Modificare un tema per un sito web predefinito è semplice: se vuoi vedere come apparirà il tuo sito con quattro prodotti per riga invece di due, puoi visualizzarlo in pochi secondi. Tuttavia, con un sito web completamente personalizzato, apportare modifiche nel codice può richiedere tempistiche e costi elevati. Per questo motivo, i designer creano dei mockup del sito web prima di passare alla fase di sviluppo.

In questo articolo scoprirai cosa sono i mockup per siti web, nonché sugli strumenti e le migliori pratiche per creare il mockup del tuo sito.

Cos'è un mockup per siti web?

Un mockup per siti web è un'anteprima visiva statica di un sito. Permette di farsi un'idea del design e del layout finale, ma non è ancora funzionale con il codice di backend che renderebbe il sito interattivo e pronto per la pubblicazione. I web designer utilizzano i mockup per valutare diverse opzioni di design prima di passare allo sviluppo per la codifica. Una volta che un sito è stato costruito in codice, è più difficile apportare modifiche, quindi un mockup di alta fedeltà (uno che si avvicina il più possibile al prodotto finale) può far risparmiare tempo e denaro.

Mockup per siti web vs wireframe vs prototipi

Mockup, wireframe e prototipi sono tutti modi diversi di visualizzare un'idea di design. Ecco quando utilizzare ciascuno:

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 offrono un'anteprima realistica di come apparirà il sito finale a un utente, ma non sono ancora interattivi. I mockup sono essenziali quando si costruisce un sito web personalizzato perché consentono di apportare modifiche al design prima che inizi la codifica.

Wireframe

I wireframe sono diagrammi che mostrano il layout e la struttura di un sito web senza elementi di design. Pensa a un wireframe come a un progetto per il design del sito web.

Un wireframe può essere anche un semplice schizzo su carta, quindi è uno strumento utile per chi non è un designer ma desidera comunicare la propria visione. I wireframe possono anche aiutare i designer che lavorano ai siti con un elemento nuovo o profondamente interattivo. Questo perché i wireframe consentono di decidere l'outline di base e la funzionalità del sito prima di lavorare al design e al codice.

Anche se stai costruendo un sito ecommerce più semplice, un wireframe può aiutarti a consolidare il funnel di vendita e l'esperienza del cliente che desideri creare. Essendo così semplici, i wireframe sono un ottimo modo per mettere tutti d’accordo prima di iniziare il design.

Prototipi

I prototipi sono l'opzione di massima fedeltà per visualizzare un sito web. Si tratta di modelli interattivi che utilizzano link di anteprima per simulare l'esperienza utente e rendere il design del sito web più realistico.

Per i progetti che richiedono la sperimentazione di diversi elementi interattivi prima dello sviluppo, un prototipo può essere davvero utile. Per progetti più semplici, si può passare direttamente da un mockup allo sviluppo.

Come creare mockup per siti web

1. Decidi come presentare il brand
2. Crea una narrazione lineare
3. Raccogli gli elementi del marchio
4. Progetta template per ogni tipo di pagina
5. Inserisci testo segnaposto
6. Ottieni feedback

Che tu stia progettando qualcosa da solo o collaborando con un designer, gli elementi fondamentali da considerare durante il processo di design sono gli stessi.

1. Decidi come presentare il brand

Il primo passo per progettare un sito web è pensare a come presentare il brand. Se stai lavorando con un designer, potresti iniziare il processo con un brief creativo. Questo aiuterà il designer a conoscere il tuo brand, il pubblico e le fonti di ispirazione.

È normale volersi concentrare su caratteristiche specifiche, ma prima di lasciarti trasportare dai dettagli tecnici, prova a fare un po’ di chiarezza: pensa a ciò che vuoi comunicare con il layout del tuo sito.

Ad esempio, potresti iniziare con l'obiettivo di incoraggiare gli utenti a trascorrere più tempo sulla tua homepage. L’homepage è spesso il primo punto di contatto con un brand e tende ad avere i tassi di abbandono più elevati. Ma invece di partire da una prospettiva di funzionalità od ottimizzazione delle conversioni, fatti 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 brand “above the fold”. Se i tuoi brand values sono al centro della tua attività, la homepage costituisce un'ottima opportunità per metterli in mostra. Ad esempio, dimostrare valori come la sostenibilità o l'inclusività potrebbe suscitare interesse nel tuo pubblico target, mantenendolo sul tuo sito più a lungo.

2. Crea una narrazione lineare

Il tuo sito web dovrebbe seguire una narrazione lineare, il che significa che ogni sezione e pagina dovrebbe fluire in modo logico ed essere legata alla successiva. Una narrazione di successo assicura che quando qualcuno arriva sulla tua homepage, abbia una chiara comprensione del tuo brand e dei prodotti che vendi. Man mano che gli utenti navigano nel sito, dovrebbero ricevere maggiori dettagli e funzionalità che li aiutino a trovare i prodotti giusti per loro.

In un sito ecommerce tradizionale, la tua narrazione lineare è il funnel di vendita: un utente arriva sulla homepage, che è una sorta di introduzione al tuo brand. Da lì, trova facilmente le pagine dei prodotti, che forniscono maggiori dettagli rispetto alla homepage, presentando prima le informazioni più importanti, ma permettendo di accedere facilmente anche alle informazioni 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.

3. Raccogli gli elementi del marchio

Una volta che hai pensato a come desideri impostare la narrazione del sito, raccogli gli elementi del brand che verranno utilizzati nel design.

Se hai delle linee guida del marchio, puoi condividerle con il tuo designer (o farvi riferimento tu stesso). Se non le hai, dovrai scegliere gli elementi del brand come la tipografia, le grafiche e i colori prima di creare un mockup. Il layout a griglia del sito sarà basato sulle altezze delle righe e sullo spazio tra le lettere dei tuoi font di brand, quindi è importante stabilire questi elementi prima di creare il mockup del tuo sito web. Una volta che hai un layout a griglia, puoi creare mockup utilizzando i tuoi elementi di design e il brief creativo.

4. Progetta template per ogni tipo di pagina

Quando progetti un mockup per un sito web, non devi 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).

Mentre progetti ciascuno di questi template, è sempre bene chiedersi cosa renderà l'esperienza più efficace. Se hai un assortimento di sei prodotti o meno, la tua pagina di collezione dovrebbe mostrare ciascuno di questi prodotti e fornire un po' di contesto prima di passare alle pagine di prodotto dettagliate.

Se hai un inventario di dozzine, centinaia o addirittura migliaia di prodotti, dovresti progettare un sito con filtri di prodotto più avanzati. Questo aiuterà coloro che arrivano su una pagina di collezione a restringere i risultati ai prodotti più rilevanti per loro.

5. Inserisci testo segnaposto

Poiché un mockup è un'anteprima del tuo sito web, è possibile che tu stia ancora generando contenuti per il sito mentre il mockup è in fase di sviluppo. Se è così, puoi utilizzare un testo segnaposto.

Anche se le immagini e il testo utilizzati nel mockup sono temporanei, dovrebbero essere il più vicino possibile all'obiettivo finale. In questo modo, quando visualizzi i mockup, avrai una chiara idea della forma che sta prendendo il sito. Invece di utilizzare testo segnaposto “lorem ipsum”, puoi redigere un testo di esempio che sia in linea con il brand.

6. Ottieni feedback

Una volta che il tuo mockup è pronto, è il momento di presentarlo e ricevere feedback. Il principale vantaggio di creare un mockup per siti web è che puoi apportare revisioni senza modificare il codice, quindi sfrutta questa opportunità per assicurarti che tutti siano d’accordo sul mockup prima di avviare il processo di codifica.

Strumenti per i mockup per siti web

Ci sono molti strumenti di design che puoi utilizzare per creare un mockup per siti web, ma tra i più popolari ci sono:

Sketch

Sketch è un'app di design web che consente iterazioni rapide. Creata nel 2010 specificamente per il design UI, permette di creare mockup e prototipi interattivi. Un abbonamento standard parte da 12 € al mese.

Figma

Figma è uno strumento di design che consente la collaborazione in tempo reale. Se più persone del tuo team stanno lavorando su un mockup contemporaneamente, Figma potrebbe essere una buona opzione. Puoi iscriverti a Figma gratuitamente, ma se desideri utilizzare tutte le sue funzionalità, i piani partono da 15 € al mese.

Adobe XD

I designer che lavorano con l'intera suite di design Adobe (app come Photoshop, Illustrator, InDesign e Lightroom) amano Adobe XD per la sua integrazione fluida con altre applicazioni Adobe. Adobe non vende più XD come prodotto autonomo, ma puoi accedervi tramite un abbonamento ad Adobe Creative Cloud per 59,99 € al mese.