Share
All'inizio di questa serie, abbiamo parlato molto dei contenuti e dell'importanza dei contenuti in qualsiasi lavoro di progettazione. È qualcosa che dovrebbe essere ovviamente esaminato e risolto prima di iniziare qualsiasi progetto, ma puoi vedere i risultati reali di questo lavoro solo quando inizi a progettare.
Quando lavoriamo con i contenuti all'inizio del processo, dovremmo cercare di definire una struttura che funzioni per il contenuto. Ripensa anche alle fasi di sketch e wireframing del processo. Qui, abbiamo esaminato le idee che avevamo per presentare i nostri contenuti in un modo che funzionasse bene e avesse una buona gerarchia. Ora vogliamo fare in modo che la gerarchia dei contenuti funzioni visivamente e visivamente attraverso i nostri progetti.
La home page di Fusion Ads utilizza i contenuti per presentare l'utente al suo prodotto e allo stesso tempo mostrare il prodotto in azione. Quindi come lo facciamo? Per prima cosa dobbiamo decidere che cosa nel nostro contenuto è pertinente per i nostri utenti e perché così - dobbiamo essere in grado di giustificare le decisioni che prendiamo. Abbiamo anche bisogno di guardare a ciò che deve essere il focus nei nostri contenuti, il bit di informazione che vogliamo davvero che i nostri utenti prestino attenzione. Quindi, dobbiamo iniziare a tradurre questo in una forma più visiva.
Facciamo questo distribuendo il contenuto in un modo che si riferisce alla nostra originale struttura del contenuto desiderata. Non si tratta solo di titoli e paragrafi, dobbiamo pensare di più a come il contenuto si legge una volta che è nella pagina, e l'enfasi che deve essere posta su tutti i diversi elementi. Una volta che abbiamo a disposizione alcuni contenuti di base, possiamo iniziare a utilizzare diversi strumenti e sussidi per aiutare a focalizzare la nostra attenzione sul rendere i bit certi che devono essere enfatizzati più forti e risaltare di più.
Nella parte inferiore della home page di Fusion Ads, hanno una FAQ in cui tutte le informazioni sono bilanciate e facili da leggere, il che è molto importante per questi tipi di contenuti. Le dimensioni possono riguardare sia la dimensione dei singoli bit di contenuti che hai nel tuo design, sia altri elementi, come le immagini, e come questi si giocano uno contro l'altro. Ad esempio, usa le dimensioni per attirare l'attenzione sui titoli principali. Garantire che siano forse più grandi del contenuto principale mostra che hanno un diverso livello di importanza e sono qualcosa a cui l'utente deve prestare attenzione.
La dimensione è anche utile per suddividere il contenuto della pagina in blocchi più piccoli e enfatizzare piccole parti di contenuto che sono importanti. Puoi anche usare la dimensione per prendere l'accento lontano da determinati elementi o parti di contenuto che si desidera essere meno evidenti o che non sono importanti quanto il resto. Anche questo è strettamente legato al contrasto: la creazione di una gerarchia di contenuti più visiva piuttosto contrastante si aggiunge all'impatto visivo del tuo design.
L'uso intelligente di pesi e stili dei font è un ottimo modo per aggiungere un'enfasi più sottile a parti del contenuto che potrebbero essere intercalate e disseminate sul resto del contenuto principale che si ha. L'uso di pesi dei caratteri più pesanti rispetto al resto del contenuto (come una versione in grassetto di un carattere tipografico che hai nel tuo disegno) o in uno stile di carattere diverso (come il corsivo) può essere ottimo per aggiungere enfasi a piccoli bit di contenuto che potrebbe voler estrarre e dare un po 'più di riconoscimento, senza opprimere il resto del design.
Usa anche pesi e stili dei font per aggiungere impatto e forte enfasi ai tuoi progetti. Ad esempio, se lo stile di progettazione lo consente, l'utilizzo di un peso "leggero" di un carattere tipografico (che è spesso molto più sottile dei pesi dei font standard) può funzionare bene per aggiungere impatto a intestazioni di grandi dimensioni, come nell'esempio che è possibile vedere di seguito.
Sebbene molti degli articoli di A List Apart siano estremamente ricchi di contenuti, riescono comunque a visualizzare quel contenuto in modo davvero equilibrato e digeribile. Il loro uso di diverse dimensioni e stili dei caratteri aiuta con questo. Il colore variabile è un altro efficace con il quale è possibile dividere e visualizzare il contenuto nei propri progetti. Ciò non significa che si sparga il colore dappertutto, ma lo si usi per aggiungere in modo sottile l'attenzione alle aree del progetto, bloccando aree del contenuto o utilizzandolo all'interno del contenuto per aggiungere enfasi al testo che potrebbe richiedere.
Il modo in cui posizioni i tuoi contenuti ha un grande impatto sul modo in cui viene percepito dai tuoi utenti. Garantire che lavori sul tuo sistema di rete e allineare bene i tuoi contenuti è molto importante. L'allineamento crea anche un ordine nel tuo progetto, contribuendo a raccontare la storia del tuo sito web e guidare gli utenti in un viaggio attraverso il tuo sito web.
Colore, allineamento e griglie giocano un ruolo importante nel design del sito web di The Verge. C'è un sacco di contenuti da guardare, ma usando il colore possono rendere più facile concentrarsi su quali moduli o bit di testo sono diversi l'uno dall'altro. Guardare come gli elementi vicini o lontani nel vostro disegno sono distanziati è essenziale per costruire una gerarchia di contenuti visivi che abbia un impatto e abbia un senso. Se gli elementi correlati sono troppo distanti, interromperà il flusso per l'utente quando sta leggendo la pagina. Tuttavia, lo stesso si può dire per gli elementi che sono distanziati troppo ravvicinati. Le cose che sono troppo anguste saranno difficili da comprendere in termini di ciò che ha più importanza o dovrebbe avere maggior risalto. Come utente, sarà difficile capire come orientarsi.
Gridset usa molti spazi bianchi sulla loro homepage - insieme a diversi stili di testo e immagini di accompagnamento - per evidenziare caratteristiche ed esempi chiave. Ora sai su diversi modi in cui puoi aggiungere peso visivo o enfasi a elementi particolari, voglio che tu lo metta in pratica nel tuo progetto. Prova ad integrare una di ciascuna delle tecniche visualizzate sopra per aggiungere più di una gerarchia di contenuti visivi nel tuo progetto.
Accentsconagua