Quando si crea un sito Web di livello aziendale, il wireframing è necessario per uno o più dei seguenti motivi:
- I requisiti dell’utente non sono completamente compresi
- La ricerca di mercato o lo sviluppo del prodotto sono ancora in corso
- È troppo presto per prendere decisioni sulla tecnologia
- WordPress
- Drupal
- HTML5 semplice
- PHP su misura
- Sono necessari test approfonditi
- È necessario il buy-in
Naturalmente, il design è fondamentale e questi siti devono funzionare come proposto. Ma il più grande ostacolo allo sviluppo è solitamente interno: ottenere un accordo sull’aspetto, l’aspetto e il funzionamento del sito prima ancora che inizi la codifica.
Il processo di wireframing
La comprensione di questi cinque passaggi ti aiuterà a ottenere il wireframing corretto.
Marca
Può sembrare strano, ma molte organizzazioni che commissionano un sito web di grandi dimensioni non hanno una specifica del marchio o non ne hanno una sufficiente per un sito web. Un logo, un carattere tipografico e una tavolozza di colori possono essere sufficienti per semplici brochure di vendita, ma un sito Web necessita anche di definizioni di tono di voce, posizione nei confronti del lettore, stile fotografico, elementi grafici secondari e interazioni. Per lo meno, una specifica del marchio deve coprire la promessa del marchio, la posizione o la categoria di mercato, i valori del marchio, lo stile o la personalità del marchio, l’architettura del marchio, l’identità del marchio (nome, logo, trattamento grafico) e le decisioni specifiche per l’implementazione. Altrimenti, man mano che il progetto cresce, il team tornerà ancora e ancora a decisioni che avrebbero dovuto essere prese in anticipo.
Funzione
Tutta la comunicazione strutturata deve rispondere a domande di risultati, pubblico, messaggi e consegna. I risultati si riferiscono ai cambiamenti nel “mondo reale” a seguito di cambiamenti nel pensiero e nel comportamento degli individui. “Produrre un sito web” non è di per sé un risultato. Il pubblico sono le persone che dobbiamo raggiungere affinché ciò accada. I segmenti di pubblico rilevanti sono i decisori, ad esempio un individuo che preme un pulsante per acquistare un prodotto, gli influencer, ad esempio le persone che condividono un post veloce su Facebook, e custodi. I guardiani sono persone che non possono necessariamente far accadere le cose, ma possono impedire che accadano. L’esempio ovvio sono le autorità di regolamentazione, ma i gatekeeper sono spesso interni: un team di vendita che non spinge il sito Web, un team esecutivo che decide di annullare il progetto o persino un responsabile finanziario che trattiene il budget.
I messaggi sono “ciò che crediamo persuaderà i responsabili delle decisioni a raggiungere il risultato, se ci credono”. Mentre ci saranno molti messaggi che appariranno su un sito web complesso con numerosi contributori, il sito avrà anche tre o quattro messaggi sottostanti. Questi saranno spesso comunicati dall’aspetto grafico e rafforzati solo dalle parole.
La consegna è il modo in cui i messaggi raggiungono il pubblico in modo coerente e ripetuto. Per un sito Web, questo alla fine sarà espresso nella codifica, ma, lasciati a se stessi, i programmatori si lasciano facilmente trasportare. Ad esempio, WordPress è diventata una piattaforma estremamente potente con una varietà di plugin. All’ultimo minuto, un programmatore può semplicemente aggiungere un plug-in della mappa, un plug-in di calendario o una piattaforma di social media. Tuttavia, a meno che questi non facciano parte di una deliberata decisione di recapitare i messaggi in questo modo, il risultato non aggiungerà ma sminuirà.
Creativo
Il trattamento creativo è il punto in cui il wireframing entra in gioco. Una volta compresi il marchio e la funzione, dovremmo cercare la presentazione più efficace possibile. È sempre meglio recapitare i messaggi attraverso il lavoro creativo che attraverso la codifica. Se guardi il sito Web di Apple, noterai che la prima pagina è “piatta”, con una grafica meravigliosa ma senza interazioni o animazioni. Dopo aver fatto clic su una linea di prodotti, inizia una codifica intelligente, ma solo nella misura in cui puoi configurare il tuo prodotto in base ad alcune semplici scelte
La creatività trae vantaggio dall’essere provata da molte persone. Questo potrebbe essere un po’ diverso dal modo in cui a molti designer piace lavorare, ma un designer che può facilitare un intero team facendoli riunire attorno alla loro postazione di lavoro e chiedere di aggiungere ulteriori elementi, per poi vederli un minuto dopo come un sito web funzionante — guadagnerà una quota crescente nel processo.
Buy-in
I grandi progetti web entrano in circoli crescenti di consenso. Questo perché il rischio per l’intera organizzazione è notevolmente maggiore con un sito Web che con una singola pubblicazione cartacea. I dirigenti che non si interesserebbero a una brochure di vendita vorranno che la loro voce sia ascoltata su un progetto che rappresenterà l’intera organizzazione. Ciò significherà quasi sempre produrre rapporti scritti aggiuntivi del progetto Web, piuttosto che mostrare solo wireframe (come con PowerPoint) o persino consentire loro di giocare con un sito Web flessibile prodotto da QuarkXPress. Sorprendentemente, la qualità dei materiali stampati a supporto della decisione avrà spesso più peso per il team esecutivo rispetto al lavoro digitale stesso.
Codifica
A un certo punto, il lavoro creativo è pronto e il buy-in è completo. Questo è quando il sito viene consegnato al team di codifica. In realtà è possibile convertire un sito QuarkXPress Flex in WordPress, Drupal o altri sistemi, ma la maggior parte dei programmatori preferirà utilizzare il sito prodotto da QuarkXPress come comunicazione visiva e funzionale ed eseguire la propria codifica. Dare loro un sito Web funzionante su cui lavorare consentirà loro di farlo bene la prima volta. Consentirà inoltre al team di progetto di spiegare cosa c’è che non va se la codifica produce qualcosa di sostanzialmente diverso.
In definitiva, il wireframing ha tre obiettivi:
- 1. Produci il sito che desideri davvero
- 2. Convinci i partner ad accettarlo
- 3. Pubblica facilmente i tuoi contenuti
Il wireframing con QuarkXPress può aiutare a raggiungere questi obiettivi più velocemente, più facilmente e con maggiore fiducia nei risultati. È molto più adatto a propagare le modifiche in tutto il layout tramite stili di elementi, contenuto condiviso e aggiornamento delle immagini e, soprattutto, lo stato attuale del design può essere trasformato in un’anteprima o in un sito Web funzionante con un clic del mouse. Ciò dà fiducia al team, in quanto può sperimentare il sito da solo in qualsiasi momento durante lo sviluppo. Significa anche una comunicazione notevolmente migliore con il team di codifica alla fine del processo.
Guarda la replica del webinar su “Wireframing di siti Web aziendali”.