La guida del progettista alla punteggiatura visiva
La punteggiatura è molto più di punti e punti esclamativi. In termini di design, la punteggiatura può essere qualsiasi cosa che causa l'interruzione o la pausa di un lettore o di un utente. Può accadere durante la lettura del testo o mentre l'occhio si sposta da un elemento a un altro. Questi segni di punteggiatura visiva sono ovunque e sono parti vitali di qualsiasi concetto di design.
Gli elementi chiave della punteggiatura visiva includono segni di punteggiatura comuni e leggibili, nonché spazio, linee, regole, icone e colore.
Esplora Envato Elements
Che cos'è la punteggiatura visiva?
La punteggiatura visiva si presenta in due forme primarie: segni che ti fanno fermare nel processo di lettura o elementi che creano una pausa guardando da un oggetto all'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 un progetto coinvolto e previene l'affaticamento durante la lettura o la visualizzazione di un disegno. Le pause naturali fanno parte della natura umana e, progettandole, crei fermate che si verificano quando e dove le desideri. Aiuta ad aggiungere contesto e flusso visivo.
Inoltre semplifica la digestione del tuo progetto per un utente / lettore. Quando il "lavoro" viene svolto per loro, visualizzare un progetto 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 è meglio.)
In breve, la punteggiatura visiva è tutto ciò che il designer utilizza per separare, raggruppare o enfatizzare elementi, foto o parole all'interno di un disegno. Intenzionata o meno, la punteggiatura visiva farà fermare qualcuno e guarderà una certa parte della tela.
Punteggiatura (testo) leggibile
Il tipo di punteggiatura più comunemente noto è ... beh ... punteggiatura effettiva. Tutti i segni che compaiono nel testo che ti fanno fermare durante la lettura sono considerati punteggiatura.
I simboli comuni includono punto, punto interrogativo, punto esclamativo, asterisco, trattino, punto e virgola, parentesi, parentesi, ellissi, virgolette, due punti, trattino, apostrofo e virgola. I segni possono essere usati nel contesto della scrittura o della formazione di frasi, ma sono spesso usati anche per scopi visivi.
A volte questi personaggi verranno utilizzati 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 vari modi.
Spazio
L'uso dello spazio come forma di punteggiatura visiva deriva anche dal testo e dalla scrittura. Lo spazio non viene utilizzato per l'inizio di un nuovo paragrafo in un blocco di testo, né per l'inizio di un nuovo capitolo di un libro. Lo spazio può funzionare in modo distinto come un punto o in un modo più scorrevole come un trattino.
Lo spazio viene anche utilizzato per creare start e stop visivi e creare una direzione per i tuoi occhi di viaggiare. La quantità di spazio utilizzata tra gli elementi può rappresentare quanto sono vicini o lontani rispetto all'altro contenuto. Lo spazio può anche creare spazio per concentrarti su più elementi in modo indipendente.
Guarda l'immagine sopra da United Strands. C'è molto spazio tra la pila di camicie e il semplice testo. Lo spazio dà all'utente il tempo di guardare ogni elemento e digerirlo da solo e poi come un'unità. Lo spazio serve come promemoria per rallentare e come modo per collegare gli elementi sullo schermo.
Lo spazio produce un risultato diverso nella pagina Nice and Serious sopra. A causa della spaziatura coerente tra quattro elementi simili, ma diversi, nei cerchi rossi, raggruppate naturalmente gli elementi come una singola 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 che creano una netta separazione tra gli oggetti. (Puoi anche ottenere lo stesso effetto con elementi di boxe.) 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 insieme allo spazio, ma non è sempre così. Le linee ravvicinate o prive di spaziatura possono contribuire a creare una sensazione di rigidità o a volte collegare elementi attraverso quella separazione.
Negli esempi sopra, le linee sono usate in due modi. Nella pagina quadrata vengono utilizzate più linee per formare un pulsante immaginario o "fantasma". Le linee distinguono la parte cliccabile della pagina dal resto. Nella pagina Agra Culture Kitchen & Press, le linee 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 invito all'azione sulla homepage .
Icone ed elementi di design
Mentre l'uso di icone e altri elementi (e strumenti di interfaccia utente per progetti digitali) sono il risultato della funzione, forniscono anche una direzione di progettazione. Questi strumenti indicano agli utenti dove andare nella progettazione, come interagire con il contenuto e aiutano a modellare le azioni generali che un utente eseguirà quando interagisce con un elemento specifico.
Nei progetti di stampa, ad esempio, i loghi di Facebook e Twitter vengono spesso utilizzati per dire agli utenti che le aziende hanno pagine che possono piacere o seguire. Le icone anziché gli URL più lunghi o più difficili stanno diventando la norma. Queste stesse icone sono spesso utilizzate nei progetti digitali come collegamento cliccabile a questi siti o che portano gli utenti a condividere opzioni all'interno di questi siti di social media.
Le icone e gli elementi di design possono avere anche un altro uso. Servono come elementi visivi nel processo di narrazione e possono essere utilizzati per attirare i lettori attraverso il testo o da un elemento all'altro sulla tela. (Pensali quasi come delle virgole, che ti consentono di mettere in pausa, ma non di smettere di muoverti lungo il percorso.) Polpo, ad esempio, utilizza icone grandi come collegamenti nelle caselle colorate e come elementi visivi di navigazione nei punti elenco in basso. 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 fungono da regola e strumento di navigazione.
Colore
Il colore può aggiungere un tocco divertente quando stai cercando di creare una separazione di elementi nel design. E ci sono molti modi per realizzarlo. Dal colore al bianco e nero ai contrasti netti alle combinazioni di colori tematiche o ai pannelli di colore, l'uso di tonalità diverse è un modo semplice per attirare l'attenzione su parti specifiche del design in modi interessanti.
Gli esempi sopra mostrano due modi nettamente diversi di usare il colore per creare una pausa. Nella pagina di P'unk Ave, un'icona rossa brillante sta nuotando nello spazio su uno sfondo a un colore. Garantisce un impatto visivo e una connessione immediati. (Consideralo una specie di punto esclamativo.)
La pagina dell'Australia Meridionale usa il colore in un modo abbastanza diverso. Ogni sezione di contenuto diverso (e schermata di coordinamento nel framework di parallasse) utilizza uno schermo di colore diverso. Questo ti aiuta a sapere quale sezione stai leggendo e quali altri contenuti devono venire. Questi "punti e virgola" visivi ti danno il tempo di finire un pensiero mentre passi al successivo.
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 previene 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 si verificano o li pianifichi? Ci piacerebbe sapere di più sul tuo processo di progettazione nei commenti.
