Come accelerare il processo di wireframing con Photoshop e Adobe XD

Prima di iniziare qualsiasi progetto di design, c'è una parola che sicuramente ti seguirà dall'inizio: wireframing . Oggi impareremo come creare un wireframe in Adobe XD e come implementare alcuni elementi grafici da Photoshop semplicemente utilizzando le librerie.

Ma prima, cos'è esattamente un wireframe?

Un wireframe è una rappresentazione visiva della struttura del tuo progetto. Definisce le ossa, gli elementi che funzioneranno nel tuo layout e il posizionamento del contenuto per il tuo prototipo.

Il bello del wireframing è che è una combinazione di elementi semplici che ti fanno concentrare sulla funzionalità del tuo progetto. In questa fase, puoi disegnare senza pensare troppo allo stile e al design.

Devi solo capire quali sono gli obiettivi del tuo progetto e come svilupparli attraverso il wireframing utilizzando elementi semplici. Man mano che avanzi attraverso il wireframing, sviluppi le migliori soluzioni mentre i componenti del team formulano commenti e suggerimenti sul tuo schizzo.

Il primo passo è creare un progetto e denominarlo "sezioni", quindi fare un elenco di "elementi" necessari per completare i diversi passaggi, fino alla creazione dell'"architettura" finale.

Creare prima un wireframe "a mano" ha molto senso. Ti aiuta a sviluppare l'intera idea su carta (senza limiti digitali) e consente anche ai tuoi concetti di fluire facilmente. Per quelli di voi che lavorano in team, lavorare con la carta non sembra l'approccio migliore se si desidera condividere le proprie nozioni con tutte le persone coinvolte nel progetto, soprattutto se si lavora con il proprio team online.

In questo tutorial, tratteremo i seguenti passaggi:

1. Crea un wireframe, seleziona e inserisci risorse PS attraverso le librerie;
2. Aggiorna i file PS e guarda i risultati in Adobe XD.

Creeremo una serie di oggetti da utilizzare nel nostro wireframe. Li metteremo da parte nelle nostre risorse poiché avevamo un pannello aggiuntivo da cui possiamo prendere i nostri strumenti.

Una volta terminato, puoi salvarlo e riutilizzarlo per progetti futuri, utilizzando di nuovo gli stessi elementi e aggiungendo anche altri oggetti.

Avrai bisogno di questi elementi di Photoshop che ho preparato per utilizzare nel nostro wireframe.

Ecco cosa creeremo:

1. Crea un wireframe e seleziona e inserisci risorse PS attraverso le librerie

Il posto migliore per iniziare a sviluppare un wireframe da zero è disegnarlo prima a mano.

In questo progetto, voglio creare una landing page per un sito di corsi online. So che ho bisogno di comunicare le informazioni essenziali in esso. Non deve essere perfetto la prima volta, ma alla fine, la sua efficacia dipende molto da come ho organizzato il wireframe e da quanto si allinea con lo scopo iniziale.

Primo passo : ecco i miei wireframe disegnati a mano.

Come puoi vedere, non ci sono molte informazioni su di loro. Il primo intento è solo quello di mostrare come sarà composto il layout e quali elementi devono essere presi in considerazione. Pulito e semplice.

Secondo passaggio : invia nuovamente il wireframe in una dimensione più piccola e con alcune note a margine che utilizzo per spiegare gli elementi e il loro utilizzo:

Terzo passo : iniziamo a creare il nostro wireframe digitale con Adobe XD.

Apri Adobe XD e scegli "Web 1920" dalla finestra aperta.

Salva il tuo progetto come "Wireframe" selezionando File → Salva come .

Una volta salvato il file, crea anche un'altra tavola da disegno per iPhone ⁶ ⁄ ₇ Plus.

Fai clic sul pulsante A (tavola da disegno) sul lato sinistro e scegli "iPhone 6/7/8" nella barra laterale destra.

Ed ecco le nostre due tavole da disegno: una per desktop e una per dispositivi mobili.

Ora possiamo iniziare a creare i nostri oggetti wireframe. Seguendo i nostri schizzi disegnati a mano, ora creeremo gli stessi oggetti in XD.

Immagine dell'eroe
Seleziona il Strumento rettangolo ( R ) e disegna una forma dove dovrebbe essere l'immagine del tuo eroe. Quindi prendi lo strumento Linea ( L ) e disegna due linee che uniscono i vertici. Questo tipo di forma rappresenta la nostra immagine segnaposto.

Raggruppa la forma e le linee e chiama il gruppo "Eroe":

Ora continuiamo con la sezione "Icone". Metto del testo prima delle mie icone e lo rappresenterò visivamente con alcune linee. Prendi di nuovo lo strumento Linea ( L ) e disegna una singola linea orizzontale. Fai clic su Ripeti strumento griglia ( ⌘ + R su Mac o CTRL + R su Windows) e trascina la linea finché non ne hai tre.

Abbiamo bisogno di tre simboli per le nostre icone, quindi fai clic su Strumento ellisse / E ) e disegna un cerchio. Fai di nuovo clic su Ripeti strumento griglia ( ⌘ + R su Mac o CTRL + R su Windows) e crea tre cerchi. Quindi seleziona lo spazio tra i cerchi e trascina per allargarlo.

Sezione caratteristica
Crea uno sfondo grigio chiaro ( #F8F8F8 ) usando il Strumento rettangolo ( R ). Ripeti i passaggi della precedente sezione Hero Image sopra per creare un segnaposto per l'immagine, quindi ripeti i passaggi della sezione Icone (anche sopra) per creare una linea per il testo. Infine, crea un semplice pulsante con l'aiuto dello strumento Strumento rettangolo ( R ).

Questo è il risultato finale:

Per la Sezione Testimonianza, ripeti gli stessi passaggi di prima per creare un segnaposto immagine e alcune righe di testo. Come puoi vedere dall'immagine wireframe completa, c'è una virgoletta che dobbiamo inserire.

Lo faremo usando Photoshop.

Apri il file Photoshop che ho fornito facendo clic su questo link.

Voglio inserire questa immagine come simbolo usando Librerie CC.

In Photoshop, assicurati di vedere il pannello Librerie andando su Finestra → Librerie . Crea una nuova libreria cliccando sulla piccola icona in alto a destra (vedi immagine):

Ho chiamato la mia libreria "Wireframe". Sentiti libero di dare alla tua libreria il nome che desideri.

Ora fai clic e trascina sul simbolo che desideri avere nella tua libreria:

Torna a XD e vai su File → Apri CC Libraries e vedrai l'ultimo simbolo che hai appena caricato tramite Photoshop e la libreria che hai creato.

Trascina il simbolo della citazione nel wireframe in XD e posizionalo dove vuoi che sia.

Per le sezioni "Prezzi, Abbonati e Piè di pagina", le rappresenteremo utilizzando caselle e linee aggiuntive come quelle che vedi nell'immagine qui sotto.

Nota : puoi trovare l'icona dell'e-mail nel file Photoshop che ho fornito qui .)

Segui i passaggi descritti nella sezione Funzionalità per inserire il simbolo nella libreria tramite Photoshop, aprirlo in XD e trascinarlo nella tavola da disegno wireframe.

Questo è il risultato:

Un'ultima cosa che dobbiamo fare prima di andare avanti è ordinare i nostri livelli. Assicurati che i tuoi livelli siano attivati ​​facendo clic sull'icona del livello ( ⌘ + Y per Mac o CTRL + Y per Windows).

Raggruppa tutti gli elementi della sezione in cartelle (ho assegnato loro lo stesso nome della sezione che rappresentano). In questo modo avrai tutti i tuoi elementi in ordine e non avrai difficoltà a trovarli velocemente (vedi immagine).

Ora abbiamo finito con il nostro wireframe!

Nella fase successiva, costruiremo il nostro progetto utilizzando il nostro wireframe e scopriremo come modificare istantaneamente gli elementi delle biblioteche.

2. Aggiungere uno strato di fedeltà al tuo wireframe

Abbiamo appena terminato il nostro wireframe e, a questo punto, possiamo ricontrollarlo per vedere se abbiamo perso qualcosa. Una volta che siamo sicuri di avere tutte le informazioni necessarie incluse nel wireframe, possiamo condividerle con il team del progetto.

Siamo pronti per andare avanti e aggiornare il nostro wireframe per renderlo "vivo" con immagini, colori e copia segnaposto.

Vai avanti e crea il tuo design. Duplica il tuo wireframe salvandolo con un altro nome (es. "Wireframe-Layout").

Per prima cosa, avremo bisogno di un'immagine per la nostra sezione Eroe (sono andato avanti e ho usato questa di Priscilla Du Preez di Unsplash. .)

Apri l'immagine in Photoshop e riduci le dimensioni dell'immagine facendo clic su Immagine → Dimensioni immagine e imposta la larghezza a 3000px:

Salva la tua immagine e trascinala nelle tue Librerie.

In XD, trascina l'immagine dalle Librerie alla tavola da disegno. Lascia che si adatti alla forma che abbiamo appena creato come segnaposto dell'immagine.

Aggiungerò un logo e del testo a questa immagine; Ho bisogno che l'immagine sia un po' più scura in modo che le informazioni siano facili da leggere. Torna alle librerie di Photoshop e fai doppio clic sull'immagine nel pannello. Una volta aperta l'immagine, vai sul pannello Livello, seleziona il livello dell'immagine e fai clic su Aggiungi uno stile di livello nella parte inferiore del pannello. Impostare una sovrapposizione colore con le impostazioni come mostrato di seguito:

Salvalo e verrà automaticamente salvato in tutte le tue librerie. Torna a XD e vedrai l'immagine nella tua tavola da disegno aggiornata (non è necessario trascinarla nuovamente dalla libreria).

Nota : a seconda delle dimensioni dell'immagine, l'aggiornamento delle librerie potrebbe richiedere un po' più di tempo.

Ora inseriamo il nostro logo. Apri il file Photoshop e trascina "Impara!" logo nelle Biblioteche. Questo è il carattere che ho usato.

Poiché il nostro sfondo è scuro, avremo bisogno di un logo bianco. Torna a Photoshop e fai doppio clic sul logo da Librerie.

Prendi lo strumento testo, evidenzia il testo del logo e rendilo bianco. Salvalo e verrà automaticamente salvato anche nella tua tavola da disegno XD.

Inserisci del testo e un pulsante per completare la sezione Eroe.

Successivamente, compilerò la sezione successiva aggiungendo testo e icone. Quelli che ho usato provengono da un pacchetto gratuito che ho creato per Smashing Magazine che puoi trovare qui.

Come fatto in precedenza, apri le icone e aggiungile alle tue librerie in Photoshop, quindi torna a XD per posizionarle nel wireframe. Ecco il risultato:

Passiamo ora alla sezione Funzionalità . Come prima, trascineremo un'immagine sul segnaposto dell'immagine (ho usato questa immagine di Sonnie Hiles trovata su Unsplash). Aggiungi del testo e un pulsante come ti ho mostrato nei passaggi precedenti sopra.

Apri il file Photoshop che ho fornito e aggiungi il simbolo di spunta nelle tue Librerie. Apri Librerie in XD e metti l'icona vicino al testo. Usa la griglia ripetuta per farne tre copie:

Ora cambiamo il colore del simbolo di spunta. Torna a Photoshop, aprilo dalle Librerie e assegnagli una sovrapposizione di colori come mostrato di seguito:

Salvalo e vedi le tue icone in XD aggiornate direttamente.

Ora finiamo il nostro layout.

Per la sezione Testimonial , aggiungi testo e un'immagine per la testimonianza (ho preso il mio da UI Faces).

Infine, aggiungeremo informazioni per la sezione Prezzo , la sezione Iscriviti e il piè di pagina. Puoi trovare le tabelle dei prezzi nel file Photoshop che ho fornito. Trascinali nelle tue Librerie in Photoshop, quindi apri Librerie in XD e trascinali nella tua tavola da disegno. Sentiti libero di modificarli come vuoi.

E... abbiamo finito!

Conclusione

In questo tutorial, abbiamo imparato come lavorare con Photoshop e Adobe XD per creare un wireframe e quindi come aggiungere rapidamente fedeltà ad esso modificando gli elementi delle librerie. Per riferimento, ho creato un wireframe mobile che puoi utilizzare per esercitarti e seguire questo tutorial. Segui i passaggi come abbiamo fatto per la versione desktop per aggiungere testo e immagini.

Fammi vedere il tuo risultato nei commenti!

Questo articolo fa parte della serie di design UX sponsorizzata da Adobe. Lo strumento Adobe XD è realizzato per un processo di progettazione UX veloce e fluido, poiché ti consente di passare dall'idea al prototipo più velocemente. Progetta, prototipa e condividi: tutto in un'unica app. Puoi dare un'occhiata a progetti più stimolanti creati con Adobe XD su Behance e anche iscriverti alla newsletter di Adobe Experience Design per rimanere aggiornato e informato sulle ultime tendenze e approfondimenti per la progettazione UX/UI.