Share
Cosa starai creandoIn questo tutorial creeremo un layout per un negozio di articoli artigianali. Non parlerò troppo delle dimensioni dei caratteri o dei codici colore specifici, ma mi concentrerò invece sulla spiegazione delle scelte di carattere, dei colori, delle proporzioni e così via.
Per poter seguire, avrai bisogno di alcune risorse (disponibili gratuitamente):
Prima di iniziare a progettare il layout, devi prima definire quali sono gli obiettivi di business di questo esercizio. La priorità principale è aumentare la consapevolezza del marchio? Si tratta di vendere prodotti a nuovi clienti o di fornire loro un valore in primo luogo, ottenere i loro dettagli e poi vendere più tardi? Devi pensare al marketing, agli obiettivi di business e alle tue esigenze degli utenti al fine di progettare un layout che convinca il tuo pubblico target a intraprendere le azioni che desideri.
Inizia ponendo queste domande:
Per questo tutorial ho deciso di concentrarmi su immagini forti e un uso generoso dello spazio negativo per creare una sensazione di libertà e chiarezza. Voglio che il design sia di classe e attraente per le persone che amano la loro immagine.
Prima di saltare in Adobe Photoshop e ridurre l'immagine, definiamo alcune variabili come colori, stile e direzione generale.
Inizia a raccogliere le immagini che ti piacciono per il tuo moodboard e la tavolozza dei colori. Di solito uso Pinterest, ma gomoodboard.com è molto utile ed è stato progettato esclusivamente per creare moodboard.
gomoodboard.com è uno strumento di moodboard semplice e facile da usare.Successivamente, formiamo una combinazione di colori per il tuo progetto; uno che è rilevante per il tuo marchio e piacerà al tuo pubblico di destinazione. È spesso buona norma usare un generatore di palette di colori come Adobe Color CC (ex Kuler) che può far risparmiare tempo alla scelta dei colori.
Carica un'immagine dal tuo moodboard e guarda quali colori sono generati. Regola la tavolozza in base alle tue esigenze e salva i colori per riferimenti futuri.
Adobe Color CC consente di creare una tavolozza di colori da un'immagine.Ispirato da alcuni degli elementi nel nostro moodboard andremo con la famiglia di font Source Pro, incluse sia le sans che le versioni serif del font. Una miscela di entrambi aggiungerà un sentimento equilibrato e titoli forti.
Prima di essere creativi in Adobe Photoshop, ordiniamo alcune pulizie, come la creazione di un nuovo documento e l'impostazione di alcune linee guida.
Apri Adobe Photoshop e crea un nuovo documento CMD + N. Definisci le sue dimensioni in base a ciò che ritieni si adatti alle tue esigenze di progettazione, nel mio caso lo è 1400x3564px.
Dopo aver impostato alcune guide, il nostro layout ha abbastanza spazio e sembra equilibrato. L'impostazione di alcune linee guida garantirà l'accuratezza e contribuirà a definire la larghezza del nostro sito Web ai fini di questo progetto. Vai a Visualizza> Nuova guida ... e impostare alcune linee guida. Di solito scelgo 1000px come punto di partenza e aggiungo alcune linee guida dagli angoli in modo che abbia spazio per respirare.
Nota: Linee guida utilizzate per questo tutorial: verticale a 200px, 500px, 550px, 700px, 850px, 900px e 1200px.
Mancia: È anche possibile utilizzare il plug-in GuideGuide Photoshop per rendere questo processo ancora più rapido.
Inizieremo la progettazione del nostro negozio creando una zona superiore visivamente attraente per catturare l'attenzione del visitatore e inviare un messaggio istantaneo di ciò che è il sito.
Crea un nuovo gruppo chiamato "Navigazione" e imposta una nuova linea guida orizzontale a 130px. Qui è dove risiedono il nostro logo, i link di navigazione e la ricerca. Metti il tuo logo a sinistra. Se non ne hai uno, crea una forma rettangolare e posiziona il testo su di essa.
Ora posiziona i tuoi elementi di navigazione come un testo puro. Dalla fase di pianificazione dovresti già sapere cosa devi includere nella tua navigazione in modo che il tuo potenziale cliente lo trovi utile. Utilizzare il Strumento di tipo orizzontale (T) per scrivere i titoli dei collegamenti e posizionarli accanto al tuo logo lasciando una buona quantità di spazio.
La ricerca è una funzione incredibilmente importante per quanto riguarda l'e-commerce. Rendi il tuo campo di ricerca visibile e accessibile posizionandolo a destra nella tua navigazione principale. Per crearlo usa il Strumento rettangolo (U) e il Strumento di tipo orizzontale (T). Nota come i colori sono ispirati dall'immagine che abbiamo usato con Adobe Color CC.
Ora è il momento di posizionare un'immagine sorprendente che sarà un punto focale dell'intero sito Web una volta che il visitatore lo vedrà per la prima volta. Come vedrai abbastanza spesso sul Web in questi giorni, sceglieremo un'immagine di alta qualità con un focus forte e chiaro, consentendo la sovrapposizione di testo e elementi dell'interfaccia utente.
utilizzando Strumento rettangolo (T) disegnare un 1400x700px (qualsiasi colore) forma rettangolo e posizionarlo giusto sotto la navigazione superiore (ricorda la linea guida orizzontale 130px? È per questa forma). Quindi trascina un'immagine a tua scelta e posiziona il suo livello sopra il livello di forma rettangolare.
Dopo di ciò, tieni premuto il tasto alt premere il tasto e il mouse sul livello dell'immagine finché non si vede una piccola freccia rivolta verso il basso, quindi rilasciare il mouse per creare un Maschera di ritaglio quindi l'immagine è visibile solo all'interno dell'area del rettangolo.
Colpire T CMD + per ridimensionare la foto, assicurandoti di tenere premuto il tasto Cambio chiave in modo da ridimensionarla proporzionalmente.
Per aiutare la nostra immagine ad attirare maggiormente l'attenzione verso il centro orizzontale, aggiungiamo un gradiente che passa dal trasparente al nero nella parte inferiore. Prendi il Strumento sfumatura (G) e personalizzalo per passare dal nero # 000000 trasparente. Dopo che tieni premuto Cambio trascinare con il mouse dalla parte inferiore dell'immagine verso il centro per creare un gradiente. Quindi trasformalo in a Maschera di ritaglio e riduci il suo Opacità a 50% quindi non è così intenso. Rinominare il livello su "Ombra", quindi è facile identificarlo.
Ora è il momento di utilizzare un titolo potente che attira l'attenzione del visitatore e li incoraggia a scoprire di più. Usa Source Sans Pro grande e audace e scrivi un breve titolo. Ho usato Source Sans Pro (nero) 70 px taglia e 160 per lettera puntamento.
Hai attirato l'attenzione dell'utente, ora fornisci un messaggio secondario e, soprattutto, un invito all'azione (noto anche come CTA.) Ho usato 28px taglia Source Serif Pro (Regular) per il sottotitolo e riutilizzato il pulsante di ricerca per mantenere l'interfaccia utente coerente.
Notare la spaziatura che sto usando. Lascia sempre uno spazio sufficiente attorno agli elementi in modo che siano percepiti più velocemente e sembrino più organizzati. Inoltre, se guardi da vicino vedrai che i livelli di testo sono più vicini tra loro. Ciò è dovuto alla legge di prossimità di Gestalt.
"Secondo la legge della vicinanza, le cose che sono vicine l'una all'altra sembrano essere raggruppate insieme".
E abbiamo finito con "accogliere nuovi clienti", o intestazione, area. Dopo aver attirato l'attenzione e l'interesse del visitatore, è il momento di mostrare loro ulteriori vantaggi che il nostro negozio ha da offrire.
Dato che abbiamo mantenuto la nostra area superiore del sito web abbastanza minimal, andremo con un'estetica pulita e semplice per il resto del layout.
Inserisci un titolo che potrebbe interessare i tuoi visitatori e una breve descrizione che li incoraggerà ancora di più. Ho usato Source Sans Pro (Semibold) 24px e un grigio scuro # 282723. Assicurati di lasciare molto spazio sopra il titolo in modo che sia coerente con l'area superiore.
Per la descrizione utilizzare qualcosa di più luminoso in modo che sia visivamente più debole e immediatamente percepito come secondario in importanza. Ho usato 16px Source Serif Pro (Regular) e il colore è grigio #adadad.
Un modo efficace per creare fiducia è usare immagini attraenti di alta qualità che attivano il cervello, creando il desiderio. Assicurati di investire del tempo scattando ottime foto dei tuoi prodotti o ottenendo un fotografo professionista per portare a termine il lavoro. Per questo tutorial userò prodotti di fantasia quindi non devo scattare foto da me stesso, ma usando quelli di Unsplash e Stock Up.
Scegli il Strumento rettangolo (U) e disegna una forma rettangolare. Dopo di che trascina la tua foto del prodotto in Photoshop, posizionala sopra il rettangolo e crea un Maschera di ritaglio. Ridimensiona l'immagine se necessario colpendo T CMD +.
Posiziona il tuo rettangolo tra il primo e il secondo orientamento verticale poiché abbiamo definito aree uguali per le immagini del prodotto all'inizio.Per semplificare le cose, forniremo solo informazioni di base sul prodotto, tra cui titolo e prezzo (che potresti trovare in grado di indurre gli utenti a voler saperne di più).
Scegli lo stesso Source Serif Pro carattere e inserire il titolo utilizzando grigio più scuro come usato per il titolo della sezione. Successivamente, usa il grigio più chiaro per il cartellino del prezzo, poiché è un'informazione secondaria e non richiede troppa forza visiva. Un'altra cosa da tenere a mente è che i nostri elementi del negozio come titoli, pulsanti di chiamata a chiamata e blocchi di descrizione sono centrati.
Ora metti tutti i livelli del prodotto in un gruppo e duplicali colpendo CMD + J, posizionarli tra le linee guida verticali definite in precedenza lasciando spazi tra loro.
Abbiamo finito con una sezione "Tendenza" con tre prodotti. Secondo Paul Seys, tre opzioni sono il numero ottimale per rendere la tua offerta più persuasiva.
"Una di queste tecniche è conosciuta come 'Goldilocks Effect' (o 'Goldilocks Pricing'). Il termine deriva dal racconto dei fratelli Grimm in cui Goldilocks mangia tre ciotole di porridge; il primo è troppo caldo, il prossimo è troppo freddo, ma l'ultimo è "giusto". "
Ora mettiamo un piccolo divisore in modo da separare il layout in sezioni. Ho usato il Strumento linea (U) 1px grigio chiaro # e6e6e6 quindi è visibile, ma non troppo forte.
Mancia: Tieni premuto Cambio chiave per disegnare facilmente una linea perfettamente orizzontale.
Ora creiamo un'altra sezione che mostra più prodotti e la chiamiamo "Popolare". Le persone cercano sempre la convalida e mostrano prodotti popolari a cui le altre persone hanno goduto dando prova sociale del fatto che questi prodotti valgono i loro soldi.
Duplicare CMD + J e personalizzare il titolo, la descrizione e i prodotti della sezione "Tendenza". Duplica più prodotti e crea una griglia di 3x2 dei tuoi migliori prodotti.
Dopo aver esposto la maggior parte degli elementi visivi per evocare interesse e desiderio, è il momento di acquisire le informazioni dei visitatori nel caso in cui non voglia di acquistare in questo momento, in modo da poterti contattare più tardi.
Includeremo una semplice sezione di blog che utilizza lo stesso titolo e il formato di descrizione e alcuni estratti dei post del blog per reindirizzare gli utenti a contenuti che potrebbero interessarli.
Scegli il Strumento rettangolo (U) e disegna un enorme rettangolo che servirà da sfondo di questa nuova sezione. Utilizzare un leggero grigio chiaro per creare una leggera separazione dai prodotti. Ho usato #fbfafa. Ora duplica il titolo e la descrizione della sezione precedente e posizionali sopra il nuovo sfondo.
Ora scegli il Strumento di tipo orizzontale (T) e inserisci titolo, data e breve estratto del tuo post sul blog. Ho usato ancora una volta Source Serif Pro per il titolo e la descrizione e Source Sans Pro per la data.
Anche in questo blocco di blog si noterà una chiara gerarchia visiva, il titolo è il più scuro e il più grande e altri elementi più piccoli e più chiari. Impiegare sempre la gerarchia visiva per ottenere un flusso logico. Per mantenere la coerenza, i post del blog sono grandi quanto i blocchi del prodotto.
Ora metti tutti i post del blog in un gruppo e duplicalo due volte battendo CMD + J, posizionarlo tra le linee guida verticali lasciando gli spazi intermedi come con i prodotti.
Dopo aver mostrato alcuni fantastici prodotti e preziosi post sul blog, è arrivato il momento di spingere i visitatori un po 'e di fornire un modulo con un chiaro invito all'azione per iscriversi.
Ancora una volta prendi il Strumento rettangolo (U), scegli un colore più scuro, come # 282723 e disegnare uno sfondo per il modulo di iscrizione. Usando uno sfondo notevolmente più scuro creerai il contrasto che attirerà automaticamente l'attenzione degli spettatori.
Ora scrivi una breve descrizione che spiega perché le persone dovrebbero iscriversi; esprimere benefici al di sopra di Caratteristiche. Successivamente, accedi alla navigazione del nostro progetto e duplica il campo di ricerca incluso il pulsante, lo riutilizzeremo per il modulo di iscrizione.
Trascina i livelli duplicati e posizionali sullo sfondo appena creato, quindi personalizza i campi di input e chiama il pulsante di azione.
Infine, ogni modello deve avere un piè di pagina con collegamenti inclusi, in modo che le persone possano scorrere verso il basso e trovare la navigazione verso le pagine chiave, come l'assistenza clienti, le informazioni di contatto, i social network e altro.
Ancora una volta, duplica i livelli di testo del post del blog e personalizzali per mostrare i link di tua scelta. Dividi diversi gruppi di link e forma colonne che sono equamente distanziati in una riga.
Ultimo tocco: aggiungi una riga di copyright nella parte inferiore del layout.
Questo è tutto! Finalmente abbiamo finito con il design del tema per il nostro store powered di Shopify, ora procedi e rivedi i tuoi livelli di documento, elimina quelli non necessari e consegnali al tuo sviluppatore, o, ancora meglio, codificalo da solo!
Accentsconagua