Suggerimenti per l'utilizzo del contrasto per migliorare la leggibilità

Un buon design è un design leggibile. Senza un messaggio chiaro, visualizzato in un modo facile da digerire, è facile perdere il significato di qualsiasi lavoro di progettazione. Ecco perché è così cruciale che qualsiasi progetto deve essere facile da leggere.

Progettare per la leggibilità è una lezione di tipografia, ma anche in contrasto. Il contrasto è la chiave per migliorare la leggibilità e aiutare a creare un flusso attraverso il testo in modo logico in modo che gli utenti capiscano esattamente cosa vuoi dire.

Contrasto di colore

Le scritte devono distinguersi dalla tela. Ha bisogno di avere una presenza che attira l'attenzione.

Esistono molti modi per creare il contrasto del colore, ma il più popolare è il testo nero su una tela bianca o leggera. Ed è popolare perché funziona. (La combinazione opposta funziona altrettanto bene.)

Quando si posiziona il testo, è fondamentale pensare a come le lettere appariranno sullo sfondo. Sono facili da vedere? Questa considerazione è di particolare importanza quando si lavora con lettere sopra immagini o video, in cui i colori sullo sfondo potrebbero essere posizionati in modo diverso in base alle dimensioni dello schermo o al movimento nel contenuto.

I progettisti one way superano questo problema con una sovrapposizione di colori su immagini o video che creano un po 'di assicurazione di leggibilità. Che si tratti di una trasparenza scura o di una tonalità brillante, una sovrapposizione può garantire che il testo appaia come previsto indipendentemente da ciò che accade in background.

L'altra opzione - e una che sta guadagnando la trazione - è quella di rimuovere il testo da immagini o video e accoppiarli fianco a fianco. Questo offre spazio per entrambi gli elementi senza sacrificare il contenuto di entrambi.

Stili di caratteri tipografici contrastanti

Le differenze nei caratteri tipografici o negli stili possono attirare immediatamente l'attenzione sulle scritte. L'interesse visivo aumenta con caratteri tipografici molto diversi, come lo script e i serif associati al trattamento del logo principale di Le Farfalle.

Ogni carattere tipografico è interessante da solo, ma la differenza tra i due crea piuttosto la composizione.

Accoppiare i caratteri tipografici in questo modo può essere un po 'complicato perché alcune coppie di stili distintamente diversi possono lasciare gli utenti in imbarazzo. Optare per caratteri tipografici con alcune somiglianze che non sono così ovvi per l'utente comune, come ad esempio altezze di x comuni, forme di lettere (controllare la minuscola? O? Per vedere se gli stili sono arrotondati o più ovali) o inclinati. Mantenendo una sensazione simile in queste aree, gli stili possono essere mescolati e abbinati in modo da creare un sacco di contrasto senza interrompere il flusso del design.

Variabilità delle dimensioni

Un modo per stupire gli utenti con il contrasto è con caratteri sovradimensionati o sottodimensionati.

La tipografia sovradimensionata può essere molto divertente da progettare ed è un modo sorprendente per invogliare gli utenti a continuare a muoversi attraverso un sito web. Mentre lettere sottodimensionate possono essere ugualmente efficaci, è molto più difficile da usare.

Accoppia le opzioni sovradimensionate con blocchi di testo in una dimensione più tradizionale per evidenziare la variazione tra le dimensioni del testo. Aiuterà a fornire un punto focale nel design e renderà impossibile evitare le parole grandi. Continua il tema oltre la scritta display e considera i sottotitoli leggermente più grandi del normale, in modo che lo stesso concetto sovradimensionato e in-your-face segua gli utenti in tutto il design.

Considera gli allineamenti

Molte persone dimenticano l'allineamento quando viene letto.

Ci sono due scuole di pensiero:

  • Usa gli allineamenti contrastanti per la visualizzazione e le intestazioni rispetto al testo.
  • Usa lo stesso allineamento per tutto.

Entrambe le idee hanno ragione a modo loro. Pensa all'allineamento del testo in relazione al resto del progetto. L'allineamento fornisce un contrasto sufficiente per far apparire lo sfondo. Questo può includere qualsiasi cosa, dalla spaziatura tra il bordo della tela e il testo al posizionamento in relazione ad altri elementi.

Quando si parla di allineamento, il modo migliore per pensarci potrebbe essere immaginare un pulsante. Come è allineato il testo all'interno del pulsante? La maggior parte dei designer opterebbe per il centro, ma ciò non significa che il resto del sito includerà il testo centrato. L'allineamento è dettato dall'elemento stesso. Ora ridimensiona questo pensiero pensando all'intero progetto.

Flusso di testo

Il flusso di testo diventa più importante con più testo incluso in un disegno. Se gli elementi di testo non fluiscono in modo lineare in modo gerarchico, gli utenti possono perdere o perdere informazioni leggendo in modo illogico.

Considerazioni chiave su flusso di testo includono:

  • Dimensione dei blocchi di testo
  • Elenchi puntati e elenchi
  • Linea altezze e lunghezze
  • Grassetto o corsivo
  • Colore

Ognuno di questi attributi di testo aiuta a differenziare parole chiave, informazioni e frasi dal resto. Forniscono punti di ingresso visivi per la scansione del testo in modo che le informazioni più importanti salti fuori per l'utente.

L'uso di stili diversi all'interno di lunghi blocchi di testo - questo è particolarmente importante per i contenuti di lunga durata o i blog - può ridurre l'affaticamento dei lettori. Se l'utente si stanca di leggere la copia perché è ingombrante da guardare e digerire, non consumerà il contenuto. Suddividilo in parti che rendono più facile la lettura.

Keep It Coerente

La chiave finale per la leggibilità è la coerenza. Qualunque cosa tu faccia sulla homepage o per l'intestazione o nella copia del corpo per creare il contrasto, segui questa procedura.

Usando gli stessi colori, o stili o trattamenti di tipo in tutto mostrerà agli utenti che non sono persi nel design. Indipendentemente da dove la navigazione li porta, sembrerà ancora come il tuo sito web.

Ntgrate fa un lavoro da dio creando uno sfondo bianco e nero e una combinazione di blocchi di testo dall'inizio. La combinazione di colori yin e yang è riportata sopra l'immagine dell'eroe nell'intestazione e le caselle di testo successive attraverso il sito presentano lo stesso modello di testo e colore.

Conclusione

Il contrasto è uno degli strumenti che aiuta a stabilire l'interesse visivo in qualsiasi progetto di design.È anche importante quando si tratta di creare una tipografia leggibile con la gerarchia.

L'alto contrasto è l'opzione più leggibile. Colori attenuati o stili troppo simili possono quasi sempre presentare problemi in termini di leggibilità. Rendi più facile agli utenti la comprensione di ciò che vuoi dire con un design altamente leggibile che offre molto contrasto tra testo e altri elementi.