Guida per principianti alla progettazione di wireframe di siti web

Che cos'è un wireframe per un sito web?

Un wireframe è un layout di base per un sito web o un'applicazione mobile. Un wireframe può essere semplice come uno schizzo molto approssimativo o un progetto più curato, ma sono tutti considerati a bassa o media fedeltà, il che significa che non assomigliano molto al progetto finale.

Pensate a un wireframe come al telaio di una casa. Quando una casa viene incorniciata, si può vedere la struttura di base disposta in tavole, ma non si ha idea di come sarà la casa finale perché le parti belle - muri, finestre, porte, portici e altri elementi - vengono aggiunte in un secondo momento.

I wireframe non devono necessariamente essere belli o assomigliare a un sito web o a un'applicazione reale. Anzi, è meglio che siano semplici. Ciò consente una rapida iterazione. Potete creare venti o più schizzi rapidi nel tempo che impieghereste per creare un solo modello. Quanto più semplice è il wireframe, tanto minore sarà l'impegno nei suoi confronti e più facile sarà apportare modifiche.

Qual è lo scopo dei wireframe dei siti web?

I wireframe servono come struttura di base per un sito web o un'applicazione. Proprio come un artista può creare uno storyboard di schizzi per un film o un cartone animato per far capire come si svolgeranno le scene, un wireframe aiuta chi sta costruendo un sito web o un'applicazione a creare la struttura. I wireframe consentono una rapida iterazione, rendendo semplice e veloce la modifica del layout, della navigazione e dell'aspetto.

Esistono 3 tipi principali di wireframe:

1. Bassa fedeltà (lo-fi): Un wireframe low-fi assomiglia molto poco al progetto finale. Si tratta di un semplice schizzo o di un semplice disegno grafico in bianco e nero. Di solito ci sono pochi dettagli e potrebbe anche non esserci un testo vero e proprio, ma solo linee o caselle abbozzate in cui inserire le caratteristiche.
2. Media fedeltà (mid-fi): Un wireframe a media fedeltà è un po' più dettagliato e un po' più vicino a un progetto rifinito. Di solito sono in bianco e nero e non contengono immagini vere e proprie, come un wireframe low-fi, ma possono avere qualche dettaglio in più, come rappresentazioni di elementi grafici come pulsanti o segnaposti di immagini.
3. Alta fedeltà (hi-fi): Un wireframe hi-fi va oltre i segnaposto delle immagini e il testo lorem ipsum. Un wireframe hi-fi è spesso una parte della fase di prototipo, che include i contenuti effettivi, la tipografia, i colori e altri elementi di branding che saranno incorporati nel sito web o nell'app finale.

Wireframe vs. mockup vs. prototipo

Molti usano i termini wireframe, mockup e prototipo in modo intercambiabile, ma ognuno di questi è un prodotto diverso. Un wireframe è uno schizzo o un rapido layout grafico di base di un sito web o di un'applicazione. Sebbene queste fasi di progettazione del sito web abbiano molto in comune, è importante notare le differenze quando si tratta di costruire il proprio sito web o la propria applicazione.

Un mockup è molto più dettagliato di un wireframe e può avere un aspetto molto simile al progetto finale, ma non è ancora funzionale. Serve solo come elemento visivo per mostrare l'aspetto del prodotto. Per restare all'analogia con la costruzione di una casa, un mockup è più simile a un dipinto o a un modello 3D che mostra l'aspetto del prodotto finale. Non si può fare molto, ma dà una bella immagine di come sarà quando sarà finito.

È stato aggiunto un prototipo di funzionalità. Ad esempio, un wireframe cartaceo a bassa fedeltà (schizzato) può essere trasformato in un prototipo creando diverse schermate attraverso le quali le persone possono fare una finta navigazione, oppure un wireframe ad alta fedeltà può essere trasformato in un prototipo in Figma, Sketch, Adobe XD o un altro pacchetto software di prototipazione collegando gli elementi tra loro per simulare la funzionalità del prodotto finale. Nella nostra analogia con la costruzione di una casa, il prototipo sarebbe come un modello a grandezza di bambola della casa reale, o una simulazione completa in 3D. Si può vedere esattamente come è fatto, come scorrono le stanze e così via, ma non si può comunque viverci.

Cosa si deve includere nel wireframe di un sito web?

Gli elementi che devono essere inclusi in un wireframe variano in base al tipo di sito web o di app che si sta creando, allo scopo che avrà, al target demografico e ad altri fattori. In generale, ci sono degli elementi principali che quasi tutti i wireframe dovrebbero contenere.

1. Navigazione: A meno che non stiate creando qualcosa di una sola pagina, dovrete includere elementi che consentano agli utenti di spostarsi tra le pagine, compreso un pulsante o un link per tornare alla pagina iniziale.
2. Logo: La maggior parte dei siti web o delle app ha un logo o il nome del sito, solitamente posizionato in alto a sinistra o al centro della pagina. In un wireframe, il logo è spesso solo una forma usata come segnaposto, o forse il nome del sito web o dell'azienda in forma testuale.
3. Layout: Un wireframe presenta un layout generale che comprende le posizioni delle immagini, del testo, della navigazione e di altri elementi. È come un progetto da seguire quando si costruisce il prodotto finito.
4. Invito all'azione: Un invito all'azione, o CTA, facilita l'azione che si vuole far compiere all'utente. Ad esempio, potreste volere che l'utente si iscriva alla vostra lista di e-mail o che acquisti qualcosa. La CTA è spesso un pulsante o un link di testo, eventualmente corredato da una funzionalità aggiuntiva come un modulo. Possono essere presenti più call-to-action, ma è necessario includere dei segnaposto per le stesse.

Tutti questi elementi possono essere (e di solito dovrebbero essere) semplici segnaposto. Non è necessario che siano specifici in fase di wireframe. Ad esempio, i link di navigazione nella parte superiore della pagina potrebbero essere solo linee che indicano la direzione che prenderà il menu. Oppure il logo potrebbe essere solo un riquadro o un cerchio che indica il potenziale posizionamento. Ricordate che lo scopo di un wireframe è quello di mostrare il layout di base, non di scegliere font o colori o di essere rappresentativo del design finale.

Avete bisogno di contenuti pronti per il wireframe?

No. Non è necessario alcun tipo di contenuto pronto per costruire il wireframe. Poiché un wireframe lo-fi può essere semplice come uno schizzo con caselle e linee come segnaposto, non c'è nemmeno bisogno di conoscere cose come le opzioni di navigazione. Se volete vedere come potrebbe apparire un disegno con dei contenuti, potete usare un testo segnaposto noto come lorem ipsum.

Molti pacchetti software dispongono di plugin lorem ipsum che possono essere utilizzati per generare un testo segnaposto, oppure si può semplicemente inventare un'espressione gibberish per avere un'idea di come il contenuto apparirà sulla pagina e con i font scelti. Si può anche copiare il testo da un libro di dominio pubblico o da un articolo di Wikipedia per sostituirlo al contenuto.

Come creare un wireframe

La creazione di un wireframe è un processo relativamente semplice. Un wireframe inizia spesso come un semplice schizzo. Non è necessario che sia un bel disegno. Non è nemmeno necessario che ci siano linee rette. Non è necessario essere esperti di disegno. Se sapete tenere in mano una penna o una matita, potete abbozzare un wireframe.

Se state creando un sito web completo o un'applicazione mobile, dovrete creare più wireframe. Per ora ci concentreremo sulla creazione di uno solo. È possibile ripetere questa procedura per ogni wireframe, se necessario.

1. Elenco degli elementi necessari

Il primo passo per la creazione di un wireframe è decidere cosa deve esserci nella pagina. Probabilmente avrete bisogno di elementi come un logo, un menu di navigazione, alcune immagini, un titolo e del testo o altri contenuti. È sempre possibile aggiungere elementi in un secondo momento, ma cercate di essere il più accurati possibile.

2. Creare schizzi

Successivamente, è necessario abbozzare almeno un layout di base per il wireframe. Se preferite, potete farlo in digitale, ma di solito è più veloce e più facile creare iterazioni del wireframe se fate uno schizzo con una penna o una matita. Lo scopo di questa fase è provare diversi layout per arrivare a quello con cui gli utenti possono interagire più facilmente. In questa fase è possibile creare tutti gli schizzi wireframe che si desidera.

3. Finalizzare il wireframe

Dopo aver scelto uno schizzo come base, potreste voler creare un wireframe più rifinito da mostrare agli altri per ottenere un feedback. Non è mai una buona idea creare qualcosa senza averla testata con altri che potrebbero fornire un feedback prezioso e aiutarvi a migliorarla. È possibile utilizzare un programma come Figma per creare una versione più rifinita dello schizzo finale.

4. Sollecitare un feedback iniziale

Una volta che avete uno o due wireframe che vi piacciono molto, chiedete un feedback alle parti interessate o ai potenziali utenti. Gli stakeholder sono persone che hanno un interesse personale nel risultato finale. Potrebbe trattarsi del vostro capo, di un partner commerciale, di un cliente o di persone che potrebbero utilizzare il sito web o l'applicazione finale. Cercate di non utilizzare amici o parenti per questa fase, perché il loro feedback potrebbe essere di parte e probabilmente non sono il vostro mercato di riferimento.

5. Iterare il progetto

Una volta ottenuto il feedback, probabilmente sarà necessario apportare alcune modifiche al wireframe. Una volta apportate le modifiche, chiedete nuovamente un riscontro. Potrebbero essere le stesse persone di prima o un gruppo diverso, a seconda delle esigenze. Continuate a iterare e a ricevere feedback finché non sarete soddisfatti del progetto e il consenso generale sarà positivo.

I wireframe sono essenziali per il processo di progettazione di un sito web.

Si può essere tentati di saltare il processo di wireframing perché si pensa che richieda troppo tempo, ma in realtà il wireframing fa risparmiare tempo nel lungo periodo. Poiché il wireframing consente di individuare i problemi e di modificarli nelle prime fasi del processo, può prevenire problemi enormi che richiederebbero molto più tempo per essere risolti. Una volta iniziato il wireframing di siti web e applicazioni, è improbabile che si voglia smettere.

Una volta completato il wireframe, è possibile utilizzare un website builder come quello fornito da Mailchimp per creare il sito web. L'editor è semplice e facile da usare, pur offrendo flessibilità e una grande varietà di opzioni che possono aiutare a dare vita al vostro wireframe in pochissimo tempo. Mailchimp offre anche servizi aggiuntivi per sfruttare al meglio il vostro sito web, tra cui un pacchetto completo di gestione delle relazioni con i clienti e un servizio di liste di e-mail potente e conveniente. Iniziate oggi stesso con il website builder di Mailchimp.