Come trasformare i layout Divi in ​​wireframe riutilizzabili

Ogni settimana ti forniamo pacchetti di layout Divi nuovi e gratuiti che puoi utilizzare per il tuo prossimo progetto. Per uno dei pacchetti di layout, condividiamo anche un caso d'uso che ti aiuterà a portare il tuo sito Web al livello successivo.

Questa settimana, come parte della nostra iniziativa di progettazione Divi in ​​corso, ti mostreremo come trasformare i layout in wireframe riutilizzabili utilizzando il pacchetto di layout per la ristorazione di Divi. I wireframe sono ottimi per il processo iniziale di creazione di un sito Web. Ti aiutano a decidere la struttura generale e lo stile di design di un sito web. Possono anche aiutare a ottenere l'opinione di un cliente su uno stile di design senza dover adattare tutto in anticipo.

Arriviamo ad esso!

Anteprima

Prima di approfondire, diamo un'occhiata al risultato finale che creeremo.

Trasforma il layout in wireframe

Apri la pagina di destinazione della ristorazione con Visual Builder

Vai avanti e apri la pagina di destinazione che hai creato utilizzando Divi's Food Catering Layout Pack.

Rimuovi le immagini di sfondo della sezione e dell'intestazione a larghezza intera, i colori di sfondo e gli sfondi sfumati

Il primo passo per creare un wireframe è rimuovere tutte le immagini di sfondo, gli sfondi sfumati e i colori di sfondo delle sezioni sulla tua pagina e il modulo di intestazione a larghezza intera nella sezione degli eroi.

Assegna invece alle sezioni alternate un colore di sfondo grigio

Per aiutare a determinare le diverse sezioni nel design della tua pagina, vai avanti e assegna a ciascuna delle sezioni alternate un colore di sfondo "#f9f9fb". In seguito, quando utilizzi un wireframe per creare una pagina, sarai in grado di utilizzare la funzione Trova e sostituisci per aggiungere la tavolozza dei colori alla tua pagina senza problemi.

Rimuovi tutto il colore negli elementi di design utilizzando il filtro stili modificati

Abilita filtro stili modificati sul modulo pulsanti

Ci sbarazzeremo anche della tavolozza dei colori che viene utilizzata. In questo modo, non ne saremo influenzati durante la creazione di una pagina. Apri uno dei moduli pulsanti sulla tua pagina e abilita il filtro stili modificati per vedere tutte le impostazioni correnti.

Dai al modulo pulsante sfondo scuro e colore bordo

Cambia sia il Colore di sfondo del pulsante che il Colore del bordo del pulsante in "#2b2b2b".

Copia gli stili dei pulsanti e applica ad altri pulsanti

Continua copiando gli stili dei pulsanti facendo clic con il pulsante destro del mouse sulle impostazioni dei pulsanti e facendo clic su "Copia stili dei pulsanti". Quindi, aggiungi gli stili dei pulsanti a ciascuno dei restanti moduli dei pulsanti nella pagina.

Rimuovi impostazioni di design aggiuntive (come Box Shadow)

Rimuovi l'ombra della casella dei pulsanti

Stiamo rimuovendo anche elementi aggiuntivi, come Box Shadow. Apri lo stesso modulo pulsanti su cui stavi lavorando e rimuovi completamente l'ombra della scatola.

Impostazioni ombra della casella del modulo del pulsante di copia

Copia gli stili di ombra della scatola di questo modulo pulsante e aggiungilo anche ai restanti moduli pulsante.

Rimuovi Box Shadow manualmente nella sezione Eroe e contatti

Gli unici due pulsanti che richiedono la rimozione manuale di Box Shadow sono quello incluso nel modulo Header a larghezza intera e nel modulo di contatto. Questi pulsanti fanno parte di un modulo con diversi elementi di design, ecco perché dobbiamo rimuoverli manualmente.

Assegna alla sezione evidenziata lo stesso colore di sfondo degli inviti all'azione

Quindi, scorri verso il basso fino a quando non trovi la sezione "evidenziata". Qui, usa il colore di sfondo della sezione "#2b2b2b". Lo stesso colore è stato utilizzato per le CTA.

Determinare le dimensioni dell'immagine

Vai alla libreria multimediale

Per rimuovere completamente l'argomento del layout del nostro layout, sostituiremo tutti i moduli immagine con segnaposto contenenti le dimensioni dell'immagine necessarie. Per trovare queste dimensioni, vai alla tua Libreria multimediale.

Apri le immagini usate singolarmente

Apri ciascuna delle immagini incluse nella tua pagina separatamente.

Annota le diverse dimensioni delle immagini sulla pagina

Una volta fatto, sarai in grado di vedere le dimensioni di quell'immagine in particolare. Tieni traccia di tutte le dimensioni di cui hai bisogno sulla tua pagina scrivendole da qualche parte prima di passare al passaggio successivo.

Crea segnaposto con dimensioni

Apri Photoshop

È ora di creare i segnaposto! Apri Photoshop o qualsiasi altro software di modifica delle immagini.

Crea nuovi progetti per le quote

Crea un nuovo progetto per ogni set di dimensioni che hai sulla tua pagina. Nel nostro caso, avremo bisogno di un progetto separato per ciascuna delle seguenti dimensioni:

• 800 x 1029
• 400 x 400
• 48 x 48

Scegli il colore grigio

Scegli '#e7e8ed' come colore.

Sblocca il livello di sfondo

Sblocca anche il tuo livello di sfondo.

Seleziona lo strumento Secchiello e aggiungi colore al livello

Quindi, usa lo strumento Secchiello per colorare di grigio la tua tela.

Aggiungi testo con dimensioni

Per aiutarti a tenere traccia delle dimensioni dell'immagine, puoi anche aggiungere le dimensioni al centro del segnaposto. In questo modo, saprai di quali dimensioni dell'immagine avrai bisogno per la tua pagina una volta che modificherai le immagini con cui le sostituirai.

Salva per Web

Al termine, salva il segnaposto dell'immagine per il web.

Ripeti per ognuna delle dimensioni dell'immagine sulla pagina

Ripeti questi passaggi per ciascuna delle serie di dimensioni sulla tua pagina. Per questa pagina, avrai bisogno di tre diversi set in totale:

• 800 x 1029 (sezione chi siamo
• 400 x 400 (sezione galleria)
• 48 x 48 (icone)

Sostituisci le immagini con i segnaposto

Dopo aver esportato tutti i segnaposto delle immagini, vai avanti e sostituisci le immagini.

Rendere il Wireframe facilmente riutilizzabile

Crea una mappa wireframe sul computer

Dopo aver creato un wireframe, è consigliabile salvarne l'aspetto da qualche parte. Crea una nuova cartella da qualche parte sul tuo computer.

Layout di cattura dello schermo e salvataggio in locale

Quindi, usa il tuo componente aggiuntivo/estensione per la cattura dello schermo che preferisci per catturare la tua pagina. Nelle immagini sottostanti, abbiamo utilizzato il componente aggiuntivo FireShot per Mozilla Firefox. Assicurati che quando salvi lo screenshot, gli dia un nome appropriato.

Salva layout nella libreria con lo stesso nome

Usa lo stesso nome che hai usato per il tuo screenshot per salvare il layout wireframe nella tua libreria Divi. Ciò ti consente di dare un'occhiata al wireframe sul tuo computer prima di caricarlo su una delle tue pagine.

Modifica le impostazioni di progettazione per Wireframe personalizzato

Aggiungi divisori di sezione

Non sei limitato a creare un wireframe per pagina. Puoi facilmente modificare le impostazioni di progettazione per creare nuovi wireframe. Puoi giocare con i divisori di sezione, ad esempio, per creare design unici.

Gioca con la tipografia

Abilita Trova e sostituisci sul carattere dell'intestazione

Oppure puoi anche giocare con la tipografia. Apri il modulo di intestazione a larghezza intera nella sezione degli eroi e fai clic con il pulsante destro del mouse sul carattere del titolo. Continua abilitando la funzione Trova e sostituisci.

Cambia carattere

Cambia il carattere che viene utilizzato sulla tua pagina con un altro e hai un wireframe nuovo di zecca!

Salva elementi di design separati usando le categorie

Fare clic sull'icona "Aggiungi alla libreria"

Un'altra cosa che puoi fare è salvare elementi di design particolari sulla tua pagina separatamente. Supponiamo, ad esempio, che desideri creare una raccolta di sezioni degli eroi, puoi facilmente aggiungere la tua sezione degli eroi alla tua libreria Divi.

Aggiungi una nuova categoria e assegna un nome all'elemento di design

Per avere una struttura più organizzata, continua aggiungendo una nuova categoria di sezioni chiamata "Sezioni Hero" in modo da poter trovare facilmente la sezione Hero di tua scelta ed esplorare tutti i design che hai in negozio.

Anteprima

Ora che abbiamo seguito tutti i passaggi, diamo un'occhiata finale al risultato finale.

Pensieri finali

In questo post sul blog dei casi d'uso, ti abbiamo mostrato come trasformare i layout Divi in ​​wireframe riutilizzabili. Trasformare i layout in wireframe ti aiuta a mantenere la visione generale di come vuoi che appaia la struttura di un sito web. Sono anche eccellenti per illustrare lo stile di design a un cliente nella prima fase del processo di creazione del sito web. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti!