La guida del designer alla punteggiatura visiva

La punteggiatura è più di semplici periodi e punti esclamativi. In termini di design, la punteggiatura può essere qualsiasi cosa che spinga o interrompa un lettore o un utente. Può accadere mentre leggi il testo o mentre l'occhio si sposta da un elemento all'altro. Questi frammenti di punteggiatura visiva sono ovunque e sono parti vitali di qualsiasi concetto di design.

Gli elementi chiave della punteggiatura visiva includono segni di punteggiatura leggibili come pure spazio, linee, regole, icone e colori.

Cos'è la punteggiatura visiva?

La punteggiatura visiva si presenta in due forme primarie: segni che ti inducono a fermarti nel processo di lettura o elementi che creano una pausa quando guardi da un oggetto a un altro. Entrambi i tipi di punteggiatura sono ugualmente importanti, e mentre la punteggiatura contestuale è abbastanza conosciuta e comune, non tutti pensano spesso ad altri segnali visivi.

La punteggiatura visiva è importante perché può far sì che le persone guardino il design impegnato e impediscano la fatica durante la lettura o la visualizzazione di un disegno. Le pause naturali fanno parte della natura umana e, progettandole, si creano arresti che si verificano quando e dove li si desidera. Gli aiuti aggiungono contesto e flusso visivo.

Rende anche più facile la progettazione per un utente / lettore da digerire. Quando il? Lavoro? è fatto per loro, la visualizzazione di un disegno può essere più semplice e richiede meno sforzo o pensiero. (E sappiamo tutti che nel mondo frenetico di oggi, rendere le cose più facili per chi guarda i nostri progetti è migliore.)

In poche parole, la punteggiatura visiva è tutto ciò che il designer usa per separare, raggruppare o enfatizzare elementi, foto o parole all'interno di un disegno. Intenzionale o no, la punteggiatura visiva farà sì che qualcuno si fermi e guardi una certa parte della tela.

Punteggiatura leggibile (testo)

Il tipo più comune di punteggiatura è? bene? punteggiatura reale. Tutti i segni che appaiono nel testo che ti causano l'interruzione durante la lettura sono considerati segni di punteggiatura.

I simboli comuni includono il punto, punto interrogativo, punto esclamativo, asterisco, trattino, punto e virgola, parentesi, parentesi, ellissi, virgolette, due punti, trattino, apostrofo e la virgola. I marchi possono essere usati nel contesto della scrittura o della formulazione di frasi, ma sono spesso usati anche per scopi visivi.

A volte questi personaggi saranno usati come parte di un logo o nell'arte di un design per trasmettere significato o enfasi. A causa della loro natura comune e dei significati spesso ben compresi, questi simboli sono facili da usare in una varietà di modi.

Spazio

L'uso dello spazio come forma di punteggiatura visiva viene anche dal testo e dalla scrittura. Lo spazio è usato per non iniziare un nuovo paragrafo in un blocco di testo, o anche l'inizio di un nuovo capitolo in un libro. Lo spazio può funzionare in modo distinto come un punto o in un modo più fluido come un trattino in avanti.

Lo spazio è anche usato per creare visivi e arresti visivi e creare una direzione in cui i tuoi occhi possano viaggiare. La quantità di spazio utilizzato tra gli elementi può rappresentare quanto vicini o distanti siano in rapporto all'altro contenuto. Lo spazio può anche creare spazio per te per concentrarti su più elementi in modo indipendente.

Guarda l'immagine sopra da United Strands. C'è una grande quantità di spazio tra la pila di camicie e il semplice testo. Lo spazio dà all'utente il tempo di guardare ogni oggetto e digerirlo da solo e poi come unità. Lo spazio serve come promemoria per rallentare e come un modo per collegare gli elementi sullo schermo.

Lo spazio genera un risultato diverso nella pagina Nizza e Serious di cui sopra. A causa della spaziatura costante tra quattro oggetti simili, ma diversi, nei cerchi rossi, si raggruppano naturalmente gli elementi come un'unica immagine. Lo spazio tra ogni elemento è piuttosto stretto e coerente da un elemento all'altro, facendoli sentire? come un singolo elemento.

Linee e regole

Le linee sono regole creano una netta separazione tra gli oggetti. (Puoi anche ottenere lo stesso effetto con gli elementi di inscatolamento.) La linea delinea dove finisce una cosa e un'altra inizia; è molto simile a un punto alla fine di ogni frase in un paragrafo.

Le linee sono spesso usate in congiunzione con lo spazio, ma non è sempre così. Le linee che sono vicine tra loro o mancano di spazio possono contribuire a una sensazione di oppressione o a volte possono collegare elementi attraverso quella separazione.

Negli esempi sopra, le linee sono usate in due modi. Sulla pagina Quadrato, vengono usate più linee per formare un immaginario, o? Fantasma? pulsante. Le linee impostano la parte cliccabile della pagina separatamente dal resto. Nella pagina Agra Culture Kitchen & Press, le righe vengono utilizzate in due modi: per mantenere l'occhio in movimento da un elemento all'altro e per attirare l'attenzione su contenuti specifici di importanza, come il logo, il testo principale e il pulsante di richiesta di intervento sulla home page .

Icone ed elementi di design

Mentre l'uso di icone e altri elementi (e gli strumenti di interfaccia utente per i progetti digitali) sono il risultato della funzione, forniscono anche la direzione del progetto. Questi strumenti indicano agli utenti dove andare nella progettazione, come interagire con il contenuto e contribuire a definire le azioni complessive che un utente intraprenderà interagendo con un elemento specifico.

Nei progetti di stampa, ad esempio, i loghi di Facebook e Twitter sono spesso usati per dire agli utenti che le aziende hanno pagine che possono piacere o seguire. Le icone piuttosto che gli URL più lunghi o più difficili stanno diventando la norma. Queste stesse icone sono spesso utilizzate in progetti digitali come un link cliccabile a questi siti o che portano gli utenti a condividere le opzioni all'interno di questi siti di social media.

Anche le icone e gli elementi di design possono avere un altro uso. Servono come divari visivi nel processo di narrazione e possono essere usati per invogliare i lettori attraverso il testo o da un elemento all'altro sulla tela.(Pensa a loro quasi come virgole, che ti consentono di mettere in pausa, ma non smettere di spostarti lungo il percorso.) Octopus, ad esempio, utilizza icone grandi come collegamenti nelle caselle colorate e come elementi di navigazione visiva nei punti elenco puntati qui sotto. Openbox utilizza le icone in modo simile, variando i disegni dei triangoli per aiutare gli utenti a spostarsi tra i contenuti del sito. (Il + o x, a seconda dell'orientamento, fa la stessa cosa.) Un altro elemento di nota qui sono i punti sotto il testo principale, che agiscono come regola e strumento di navigazione.

Colore

Il colore può aggiungere un tocco divertente quando stai cercando di creare una separazione degli elementi nel design. E ci sono molti modi per realizzarlo. Dal colore al nero e al bianco, dai contrasti netti ai colori tematici o ai pannelli a colori, l'utilizzo di tonalità diverse è un modo semplice per attirare l'attenzione su parti specifiche del design in modo interessante.

Gli esempi sopra mostrano due modi nettamente diversi per usare il colore per creare una pausa. Nella pagina P'unk Ave, un'icona rosso vivo sta nuotando nello spazio su uno sfondo monocromatico. Garners immediato impatto visivo e connessione. (Consideralo un punto esclamativo).

La pagina South Australia usa il colore in un modo completamente diverso. Ogni sezione del contenuto diversa (e la schermata di coordinamento nel quadro della parallasse) utilizzano una schermata a colori diversa. Questo ti aiuta a sapere quale sezione stai leggendo e quali altri contenuti devono venire. Questi punti e virgola? darti il ​​tempo di finire un pensiero mentre passi all'altro.

Conclusione

La punteggiatura visiva è ovunque. All'inizio potrebbe non essere così ovvio come i piccoli personaggi con lo stesso nome nel testo, ma è altrettanto importante. La punteggiatura visiva aiuta a creare flusso, direzione e impedisce l'affaticamento del lettore (e dell'utente).

Aiuta a creare armonia e armonia visiva. La domanda più grande non è se la usi, ma se ci pensi nel processo di progettazione. I segni di punteggiatura visivi sono appena accaduti o li pianifichi? Ci piacerebbe saperne di più sul tuo processo di progettazione nei commenti.