Direzione del contenuto visivo Cosa devi sapere
Il direzione visiva del contenuto è un aspetto meno discusso, ma cruciale del web design ad alta conversione. Ogni visitatore "assorbe" un nuovo sito sul carico della prima pagina, indipendentemente dal fatto che lo faccia consapevolmente o meno.
L'estetica gioca un ruolo, ma è più sul sensazione generale del design. Questa sensazione può essere influenzata da spazi, tipografia, simmetria, ma soprattutto relazioni tra gli elementi della pagina.
I designer vogliono che i visitatori rimani sulla pagina e continua a scorrere catturando la loro attenzione e mantenendoli interessati al sito. I principi di progettazione dovrebbero sempre essere focalizzati su funzione prima della forma. Questo significa che il design dovrebbe completare il contenuto, non spingerlo dentro come un ripensamento.
In questo post, vorrei mostrarti alcuni suggerimenti su come puoi migliorare i layout e i flussi di contenuti visivi sul tuo sito.
Concentrati sulla composizione
Ogni singolo pezzo di un sito web costruisce sul layout generale. Questo layout generale crea una composizione che segue le regole della teoria della Gestalt che lo afferma il tutto è sempre maggiore della somma delle parti.
Le singole aree di una pagina si uniscono a formare un intero. Gli elementi di progettazione devono creare un spinta gravitazionale sul contenuto; tutto sulla pagina dovrebbe guida naturalmente i visitatori fino a raggiungere la parte inferiore della pagina.
Questo è il motivo per cui le relazioni tra le diverse parti del contenuto (immagini, testo, pulsanti, ecc.) Sono così importanti da progettare.
Il tuo obiettivo dovrebbe essere incoraggiare le persone per esplorare il sito dalla propria inclinazione. È più facile a dirsi che a farsi, ma puoi imparare molto da studiando esempi reali.
La home page di Monkop è un grande esempio di gerarchia visiva con sia testo che immagini. Un sacco di spazio è usato tra gli elementi, e la tipografia completa le illustrazioni vettoriali di marca.
Mentre scorri, noterai blocchi di pagina orizzontali dritti diviso per colori, bordi e grafica. Questi sono costruiti con modelli di progettazione in mente a offrire coerenza in tutta la pagina.
Verso il basso, troverai a divisione a due colonne con immagini su un lato, testo sull'altro. Anche le immagini scambiare i lati in un modello di destra-sinistra-destra-sinistra. Questo attira l'attenzione, e rompe la monotonia della pagina tipica mentre ancora mantenendo un flusso naturale nel contenuto.
UN estetica del design simile può essere trovato sul sito web di Picjumbo, una pagina di destinazione per un addon fotografico per gli utenti di Photoshop e Sketch.
La home page si concentra sul logo e sul video di anteprima. Mentre scorri, noterai animazioni personalizzate che si muovono su tutta la pagina. Questa animazione davvero cattura l'attenzione, e ottiene lo spettatore interessato a continuare a scorrere.
Nel complesso, la pagina si sente Aperto e facile da navigare. Il contenuto è diviso in blocchi orizzontali con una tipografia nitida e icone pulite.
Considera il modo in cui i diversi elementi della pagina equilibrio insieme, lo spazio tra gli elementi, il contrasto tra i colori e le diverse forme. Tutte queste cose hanno un ruolo nella composizione generale. Ogni sito attira naturalmente un certo peso sul contenuto.
Non c'è una risposta assoluta perché è diversa per ogni sito. Per esempio, alcuni link di navigazione hanno un aspetto migliore quando sono grandi e di grandi dimensioni. Altri si adattano meglio quando sono piccolo con lettere maiuscole.
Ti suggerisco di studiare altri siti web nella tua nicchia. Analizza davvero come sono messi insieme. Prova anche a ricostruire i layout per vedere quali elementi rendono finalmente il design "come insieme".
Digitare argomenti di progettazione
Il modo in cui disegni la tua tipografia lo farà influenza la direzione del contenuto sul tuo sito. Questo ha a che fare con la gerarchia dei tipi e il stili di design di diversi elementi della pagina come paragrafi, intestazioni, elenchi puntati, citazioni e elementi di layout speciali come colonne o tabelle.
Visuals può influenzare anche il layout, quindi è una buona idea progettare contenuti con una progressione naturale. Scrivi contenuti in un modo simile scorre lungo la pagina, e continua a leggere attraverso ogni paragrafo.
Lo strumento più grande che hai a disposizione è il tuo occhio per il design. Impara a riconoscere le differenze negli elementi tipografici e in che modo si relazionano agli altri elementi della pagina. Creare relazioni tra le sezioni di pagina per distinguere le aree di contenuto.
Alcune cose che potresti considerare:
- Dimensione del testo
- Famiglia di font
- Contrasto di colori
- Relazioni di sezione della pagina
- Altezza della linea e margini del paragrafo
- Spaziatura lettere e maiuscole / minuscole
Ad esempio, guarda la homepage di Campaign Monitor. I link di navigazione in alto usano tutti i maiuscoli con caratteri piccoli. Altre intestazioni sulla pagina segui questo stesso disegno di tutte le protezioni quale crea un senso di uniformità.
Altre intestazioni più grandi sul sito sono molto più prominente, e saltano davvero fuori dalla pagina. Solo guardando un tipico design di intestazione, dovrebbe essere facile dì la differenza tra un'intestazione e la sua copia del corpo appaiata.
Gli stili di design tipografico su Campaign Monitor sono squisiti e loro si fondono naturalmente nel layout. Ci vuole pratica per ottenere un risultato come questo, ma più ci provi, più facile sarà.
Per saperne un po 'di più, consiglio vivamente i seguenti link:
- Principi di progettazione: peso visivo e direzione
- Lavorare con il peso visivo nei tuoi disegni
- 19 Fattori che influiscono sull'equilibrio composito
Contenuto guida
Capire che diversi tipi di siti web avere metodi diversi per guidare i visitatori attraverso il sito. Ad esempio, le pagine di destinazione vogliono guidare i visitatori bocconcini di informazioni, piccole icone, screenshot, e testimonianze.
Di solito, altri siti come i blog non portano le persone alla home page in una sola volta. Maggior parte delle persone atterrare su una pagina di articolo, così i layout dei post dei blog sono pensati per evidenzia il titolo, e disegna le persone ulteriormente nel contenuto. È qui che entra in gioco il copywriting di qualità perché vuoi che i lettori appesolino ogni parola.
I social network e le app Web hanno bisogno esperienza utente di qualità, quindi questo è un argomento leggermente diverso, ma considera come è progettato il feed di Facebook incoraggiare lo scorrimento e l'interazione dell'utente.
I metodi di progettazione che utilizzi per mantenere le persone che navigano nel sito lo faranno cambiare nel tempo. Ma in generale, il tuo obiettivo è quello di guida i visitatori con una direzione del contenuto visivo.
Diamo un'occhiata a a pagina di destinazione e a design del blog per individuare le differenze.
Cactus è un generatore di siti statici per OS X. La loro home page segue da vicino lo stile di design di Apple - un sacco di spazi bianchi e sottili caratteri sans-serif.
Il contenuto è organizzato in colonne, blocchi e frammenti di testo con una grafica semplice. Queste stesse estetiche sono comune con i prodotti Apple, così gli utenti Mac apprezzeranno questo stile di design.
Le informazioni sul prodotto, comprese le funzioni e l'impostazione, sono elencate nella home page. La pagina stessa incoraggia lo scorrimento attraverso contenuti esclusivi, icone di base e un modello di colonna alternato di blocchi di contenuti sinistro / destro.
L'obiettivo qui è fornire informazioni a utenti esistenti, e vendere nuovi utenti l'idea di Cactus.
Ora confronta il progetto con la home page di The Next Web. Il contenuto è molto più sporadico su una home page del blog, perché c'è un sacco di diversi post argomenti.
I rettangoli creano un sistema di griglia che incapsula più post in un unico layout. L'obiettivo qui è quello di convincere gli utenti a leggere il contenuto sul posto. Non importa se i visitatori scaricano qualcosa, ma importa se lo fanno resta in giro per leggere qualcosa.
Il modo per far leggere le persone è con belle foto e titoli accattivanti. TNW fa un ottimo lavoro, e il loro layout è costruito per mantenere le persone a navigare con anteprime post correlate nella barra laterale e nell'area post-contenuto.
Guidare i visitatori a una determinata azione è diverso su ogni sito. Ma puoi imparare molto studiando cosa fanno altri siti di successo e imparando come copiare.
Fidati dei tuoi occhi
Le singole proprietà di progettazione possono essere spiegate analiticamente, ma le modifiche di implementazione per ciascun sito. Un'immagine dell'eroe con un collegamento "Scorri ulteriormente" non esegue lo stesso su tutti i siti web.
Imparare a progettare è molto importante processo visivo. Il tuo occhio per il design è l'aspetto più importante. Devi vedere le cose correttamente per identificare questo gerarchia visiva. Se riesci a vederlo su altri siti web, potrai replicarlo sui tuoi siti.
Il miglior consiglio che ho è quello di fidati solo dei tuoi occhi. Crea un elenco dei tuoi siti Web preferiti e trascorri 5 minuti a sfogliare ciascuno di essi. Annota i tuoi elementi preferiti sulla pagina e come influiscono sul design. Questo ti aiuterà interiorizzare questi concetti da una prospettiva UI / UX, piuttosto che la prospettiva di un utente.
Inoltre non aver paura di provare cose! Nessuno è diventato bravo nel design appena leggendo articoli sul design. Sì, aiutano - possono davvero aiutare molto. Ma tu bisogno a creare cose da zero per imparare cosa lavori e cosa non lo fa.
Allena il tuo occhio studiando i layout del sito web che ti piacciono e ricreando loro. Col passare del tempo, costruirai una biblioteca di modelli nella tua mente che rende molto più semplice la progettazione di nuovi siti.
Avvolgendo
Spero che questi suggerimenti ti consentano di iniziare e fornirti una tabella di marcia di base da seguire. Non è facile diventare un web designer, ma il mondo ha bisogno di talento e non è mai stato più facile insegnare a te stesso questi concetti fondamentali.
Studia i migliori esempi di siti web con elementi di pagina che ti piacciono. Treno il tuo occhio per riconoscere le relazioni e lo farai rapidamente sviluppare le abilità necessarie per replicare quelle relazioni nel tuo lavoro.
