Dopo aver visto i 21 elementi psicologici che alimentano il web design efficace (parte 1), un lettore di MarketingExperiments ha commentato e chiesto …
“Che tipo di informazioni / contenuti offri ai tuoi progettisti per creare quei wireframe iniziali? Quando Flint mostrava i wireframe di Meghan e parlava del web design in generale, sembrava che il contenuto avrebbe riempito il wireframe invece di creare contenuti e quindi creare wireframe per quel contenuto ".
E davvero, questo solleva una domanda più grande: come si fa a wireframe una landing page? Ecco una panoramica di un processo che utilizziamo per i nostri siti Web presso MECLABS Institute (MarketingSherpa.com, MarketingExperiments.com e MECLABS.com). Non è incastonato nella pietra, può variare in base al progetto, ma spero che ti dia alcune idee per migliorare il tuo processo.
(Questo articolo è stato originariamente pubblicato nella newsletter e-mail di MarketingExperiments.)
Passaggio n. 1: incontrarsi per discutere dell'obiettivo
Prima che qualcosa venga creato, Meghan inizia con un incontro sull'obiettivo della pagina.
"Spesso non ho in anticipo i contenuti specifici. Ma non ne ho bisogno. La cosa più importante per cominciare è l'obiettivo ”, ha affermato Meghan Brown, Graphic Designer, MECLABS Institute. "Anche senza contenuti specifici, sai che ci saranno un titolo, immagini, un invito all'azione, ecc. Quindi progetti il layout in base agli elementi di cui parla l'incontro obiettivo."
Se sei un marketer che lavora con un designer su una pagina di destinazione o un sito Web, ecco alcune domande a cui dovresti rispondere nella riunione obiettiva:
- Chi è il cliente ideale?
- Qual è l'obiettivo di conversione?
- Qual è la proposta di valore a livello di processo? Quali altre proposte di valore dovrebbero essere comunicate sulla pagina?
- Chi sono i tuoi migliori concorrenti? (Osserva i loro siti Web.)
- Ci sono esempi di landing page e siti Web che ti piacciono? Non ti piace?
- Quale sito web andrà?
- Ci sono delle linee guida sul marchio?
- Qualche considerazione specifica sulla funzionalità?
- Quante pagine sono necessarie nel flusso del cliente (ad es. Una landing page con una pagina di ringraziamento, un microsito di cinque pagine, ecc.)?
- Quali elementi devono andare sulla pagina (ad es. Video, modulo, quantità approssimativa di copia, ecc.)?
- Quando è la scadenza?
“Parlare dell'obiettivo è la parte più importante. Una domanda chiave che i progettisti avranno in quanto layout di concetto è quanto tempo devono lavorare su questi wireframe. Posso montare qualcosa in due giorni e farà il lavoro, oppure posso passare un paio di settimane intensamente concentrato su un progetto più grande ed essere creativo con i disegni. Tutto dipende dalle esigenze aziendali ", ha affermato Meghan.
Passaggio 2: creare wireframe di schizzo a matita della pagina di destinazione in un blocco note
All'inizio come copywriter, ero solito fare un concept con un art director che avrebbe disegnato quelle idee su carta. Li chiamavamo "marcatori", ed è tutto quello che erano, davvero. Un'idea elaborata su un foglio di carta di grandi dimensioni con un marcatore di magia nera audace.
Potresti dire che ero in scadenza per una campagna perché le pareti del mio ufficio e dell'ufficio del mio art director sarebbero state disseminate di questi oggetti disegnati rozzamente e fissati su tutte le nostre pareti.
Sì, avevamo i computer. QuarkXPress. Adobe Photoshop e Illustrator. Ma non abbiamo iniziato da lì. Abbiamo iniziato con l'idea, in sostanza, la comunicazione minima realizzabile dell'idea.
Quindi adoro vedere Meghan che cammina per l'ufficio con i suoi schizzi a matita di pagine di destinazione. Non posso fare a meno di pensare che qualcosa si perde quando passiamo troppo rapidamente all'esecuzione e alla tecnologia. Nonostante tutta l'eccezionale nuova tecnologia di marketing, è solo uno strumento. Gli esperti di marketing vincono con idee migliori.
Dopo l'incontro obiettivo, Meghan crea wireframe a bassa fedeltà facendo schizzi di base sul suo taccuino.
"È più veloce per me mettere le idee a posto", ha detto.
Propone più idee fianco a fianco – di solito circa tre se sta facendo boxe da sola – assicurandosi che ognuna sia categoricamente diversa. Ad esempio, si potrebbe porre maggiormente l'accento sul titolo, si potrebbe porre maggiormente l'accento sull'immagine di un eroe, un altro potrebbe portare a un'immagine di prodotto con un titolo e punti elenco. “Il più delle volte, ho prima le mie cattive idee e poi mi hanno portato idee migliori. Non voglio iniziare andando direttamente a un programma come [Adobe] Photoshop con una cattiva idea, fa sprecare il tempo e poi deve ricominciare tutto da capo ", ha detto Meghan.
A questo punto di solito utilizza solo wireframe per le pagine mobili. "Comincio con i dispositivi mobili perché c'è meno spazio su cui lavorare ed è più semplice trasferire i contenuti dal cellulare al desktop rispetto al contrario. Disegno wireframe per tablet e desktop solo se ne ho il tempo; altrimenti, salterò questa parte per dopo ", ha detto.
Passaggio 3: rivedere le idee
Una volta che si è stabilita sui concetti generali del suo taccuino, crea versioni molto più grandi e un po 'più dettagliate da presentare, usando una matita e un grande blocco.
Poiché questi sono ancora solo disegni a matita, sono chiari modi per comunicare rapidamente l'idea.
L'obiettivo in questa fase è collaborare con le parti interessate e i decisori in modo da rendere facili le revisioni e le opzioni. Infatti, invece di ridisegnare i wireframe, a volte Meghan aggiunge semplicemente note adesive con nuove idee ai wireframe disegnati a matita.
Questo è anche un modo semplice per giocare con le idee e esaminarle ulteriormente dando maggiore chiarezza e specificità a ciò che sarebbe necessario per eseguire la landing page o il sito Web.
Per prima cosa, questo aiuta gli sviluppatori a farsi un'idea più precisa di ciò che un direttore marketing vuole costruire, per fornire una stima più accurata di ciò che sarebbe necessario per costruire quella pagina di destinazione, il flusso di checkout o il sito Web.
Ma oltre a ciò, quando è in gioco un'idea per un prodotto o servizio complessivo, può essere utile tracciare una landing page per esso – idealmente, in combinazione con un'analisi competitiva – per ottenere una comprensione iniziale di ciò che l'offerta sarebbe la prospettiva del cliente e se spicca davvero sul mercato. Se questo workup iniziale infonde fiducia nel team di marketing e sviluppo del prodotto, potrebbe decidere di investire in un seminario sulla proposta di valore vicino per iniziare a portare il prodotto sul mercato.
Passaggio n. 4: creare wireframe ad alta fedeltà su un computer
Una volta che l'intero team ha acquisito il consenso su quale dei tre concetti vogliono andare avanti e hanno deciso di apportare modifiche in quella direzione, Meghan va al computer per creare un wireframe ad alta fedeltà usando uno strumento come Adobe XD . (Un altro strumento che potresti prendere in considerazione, utilizzato da altri membri del nostro team, è Axure RP.) A questo punto, realizzerà il singolo concetto in tre dimensioni: mobile, tablet e desktop.
"È a metà strada per un progetto reale. L'obiettivo in questa fase è quello di ridurre il layout e fare spazio per la copia ", ha detto.
Alla domanda originale di un lettore di MarketingExperiments, è qui che entra in gioco il contenuto effettivo della pagina. “Questa è la fase in cui inizio a richiedere copie e contenuti: immagini, video, icone, tutto. È difficile andare oltre senza di essa perché dovrai regolare molto il layout in base alla lunghezza della copia, al numero di testimonianze, al numero di immagini, ecc. Quindi, prima ho il contenuto, più veloce viene eseguito il wireframe ”, Meghan Dimmi.
C'è un altro round di collaborazione, approvazione e feedback in questa fase.
Passaggio n. 5: crea le composizioni su un computer
Dopo due livelli di collaborazione, Meghan ora sta investendo il tempo nella creazione di una composizione completa della landing page. Dopo aver ottenuto le immagini e averle modificate in Adobe Photoshop, utilizza Adobe XD per creare un prototipo interattivo con marchio, immagini, colori, copie reali e qualsiasi altro contenuto necessario.
Tuttavia, continua a collaborare, assicurandosi di ottenere feedback e riscontri lungo il percorso in modo da non perdere tempo a spostarsi troppo in fondo alla strada in una direzione e scendere dalla base di ciò che pensano gli altri membri del team.
“A questo punto ricevo tre round di feedback. Compilo completamente la versione mobile e ricevo feedback. Quindi tablet, quindi desktop. Può sembrare che ci voglia più tempo per interrompere il feedback, ma ho scoperto che in realtà si risparmia tempo per ottenere feedback dopo aver creato ogni comp ", ha detto.
Di seguito è riportato un esempio per la composizione di un flusso di e-commerce sul desktop. Puoi vedere la pagina finale qui e quanto vicino in questa fase la composizione finale è alla pagina.
Passaggio n. 6: progettazione completa per gli sviluppatori
Dopo il feedback, Meghan apporta le fasi finali delle modifiche e crea i file finali da fornire allo sviluppatore / i – raggruppando le risorse e gli elementi di cui uno sviluppatore avrebbe bisogno per costruire la pagina, assicurandosi che tutte le immagini abbiano dimensioni e risoluzione ottimali per il web design su diversi tipi di dispositivi e fornendo le sezioni CSS.
Questo è un argomento completamente diverso e se stai cercando informazioni sugli aspetti tecnici delle riprogettazioni del sito web, puoi trovarle qui.
La cosa principale di cui il designer e il marketer devono preoccuparsi in questa fase è una revisione della fedeltà. Non limitarti a consegnarlo allo sviluppatore e andartene. Le pagine progettate finali riflettono accuratamente ciò che il team stava cercando di realizzare? Su tutte le dimensioni del dispositivo?
E ora, alcuni avvertimenti …
Avvertenza n. 1: è sufficiente una versione di una landing page?
Per semplicità, questo articolo si concentra sul wireframing e sulla progettazione di una singola landing page. Se esegui test A / B per l'ottimizzazione delle conversioni, potrebbe essere la pagina di destinazione che verifichi contro il controllo.
Ma se non hai il controllo e desideri impegnarti nei test, dovresti creare almeno due (se non più) pagine di destinazione da testare come trattamenti. Puoi seguire lo stesso processo, basta moltiplicare il numero di opzioni e pagine create.
Puoi dare un'occhiata dietro le quinte alla creazione di un test A / B qui.
Avvertenza n. 2: non tutte le landing page richiedono questo intenso lavoro
Non voglio che tu pensi che ogni pagina che creiamo abbia questo intenso processo. O addirittura un wireframe.
Ad esempio, per alcune landing page, abbiamo creato un modello in Instapage che riutilizziamo. Ecco un esempio.
In effetti, se non hai risorse di progettazione e sviluppo mentre inizi, questa potrebbe essere l'opzione migliore per te. "Per gli esperti di marketing che lo fanno da soli, utilizzare uno strumento come Instapage o un altro generatore di pagine Web. Ti fa risparmiare così tanto tempo ”, ha consigliato Meghan.
Risorse correlate
Corso di certificazione on demand per l'ottimizzazione della pagina di destinazione dell'istituto MECLABS – Progettato per aiutarti a insegnare la scienza dell'ottimizzazione della pagina di destinazione senza i costi di assunzione di un consulente costoso
Modelli di pagine di destinazione supportati dalla ricerca per ampliare il programma di test
La fine del web design: non progettare per il web, progettare per la mente
