Se ti trasferissi in un altro paese (dove non parlano la tua stessa lingua), una delle prime cose che probabilmente faresti è iniziare a imparare la lingua. Potresti anche iniziare molto prima di trasferirti in preparazione per essere in grado di comunicare con le persone che presto chiamerai vicini di casa.

La comunicazione è una parte essenziale della vita e come web designer è quello che facciamo con ogni nuovo design.
Cosa succede quando le parole non bastano? Se vuoi che qualcuno guardi in una certa direzione, potresti indicare quella direzione. Abbiamo tutti sviluppato una grammatica per comunicare con gesti fisici e comunichiamo tanto, se non di più, con il linguaggio del corpo che con quello verbale.

I web e graphic designer comunicano visivamente. Per esempio, la scelta di una combinazione di colori con un blu scuro come dominante manda un messaggio molto diverso rispetto al rosa caldo come colore dominante. Il colore è uno dei modi in cui comunichiamo visivamente. È uno degli elementi costitutivi della grammatica visiva, che di solito sono definiti per includere:

• linee
• forme
• colore
• texture
• valore
• spazio
• forma/volume/massa

Abbiamo parlato della teoria del colore e del suo significato in passato e dell’uso dello spazio bianco nel design. Oggi volevo guardare alle linee. Quali tipi di linee sono a nostra disposizione? Cosa comunicano le diverse linee? La prossima volta parleremo delle forme e faremo alcune delle stesse domande su di esse.

La grammatica delle linee

Una linea è un punto fuori per una passeggiata.
-Paul Klee

Una linea collega due punti. È anche il percorso fatto da un punto in movimento. Le linee possono essere spesse o sottili. Possono essere lunghe o corte. Possono essere verticali, orizzontali o diagonali. Possono essere solide, punteggiate o tratteggiate. Le linee possono essere curve o dritte o combinazioni di entrambe. C’è una varietà infinita in ciò che pensiamo come una linea.

Le linee possono essere letterali o implicite. Disegna una serie di 3, 4 o 5 punti e la tua mente riempirà la linea tra di loro.

Ognuno dei diversi modi in cui disegniamo o rappresentiamo una linea le dà caratteristiche uniche. Le linee spesse trasmettono un significato diverso dalle linee sottili. Una linea curva trasmette un messaggio diverso da una linea retta netta.

Tipi di linee

Ci sono diversi tipi di linee definiti dal loro uso.

• Le linee di contorno sono usate per definire i bordi. Creano confini intorno o all’interno di un oggetto. La maggior parte delle linee che si incontrano sono linee di contorno. Nel web design queste potrebbero essere i bordi che aggiungi intorno ad un oggetto o un gruppo di oggetti
• Anche le linee divisorie possono definire i bordi, ma ciò che le distingue dalle linee di contorno è che dividono lo spazio. Le linee tra le colonne di testo sono linee divisorie così come le linee che separano le voci di menu.
• Le linee di decorazione sono usate per abbellire un oggetto. Il tratteggio è un esempio dell’uso delle linee di decorazione per aggiungere ombreggiatura e forma ad un oggetto. La linea sotto il testo che è piaciuto è una linea decorativa come lo sono le linee usate per creare un’immagine di sfondo floreale
• Le linee di gesto sono linee continue veloci e grezze usate per catturare forma e movimento. Sono generalmente usate quando si studiano la forma e il movimento della forma umana. Probabilmente non userete linee di gesto (in base alla definizione tecnica) in un design web, ma potresti certamente creare modelli di linee per indicare il movimento o costruire una forma

Il significato dei diversi tipi di linee

Come ho detto sopra ci sono molti modi diversi in cui possiamo descrivere una data linea e ognuno dà ad una linea caratteristiche uniche. Cosa significano queste caratteristiche e cosa comunicano? (.doc)

Le linee sottili sono fragili. Sembrano facili da rompere o da rovesciare. Suggeriscono fragilità e trasmettono una qualità elegante. Sono delicate ed emanano un’aria effimera.

Le linee spesse invece sembrano difficili da rompere. Suggeriscono forza e danno enfasi agli elementi vicini. Le linee spesse sono audaci e fanno una dichiarazione.

Le linee orizzontali sono parallele all’orizzonte (da cui il nome). Sembrano sdraiate, a riposo, addormentate. Suggeriscono calma e tranquillità, un comfort rilassato.

Le linee orizzontali non possono cadere. Accentuano la larghezza. Sono stabili e sicure. Trasmettono un’assenza di conflitto, una pace riposante. Le linee orizzontali per la loro connessione con l’orizzonte sono associate a cose e idee legate alla terra.

Le linee verticali sono perpendicolari all’orizzonte. Sono piene di energia potenziale che potrebbe essere liberata se dovessero cadere. Le linee verticali sono forti e rigide. Possono suggerire stabilità, specialmente quando sono più spesse. Le linee verticali accentuano l’altezza e trasmettono una mancanza di movimento, che di solito è vista come orizzontale.

Si estendono dalla terra al cielo e sono spesso collegate a sentimenti religiosi. La loro altezza e formalità possono dare l’impressione di dignità.

Le linee diagonali sono sbilanciate. Sono piene di energia inquieta e incontrollata. Possono sembrare in aumento o in diminuzione e trasmettere azione e movimento. La loro energia cinetica e il movimento apparente creano tensione ed eccitazione. Le linee diagonali sono più drammatiche delle linee orizzontali o verticali.

Le linee diagonali possono anche apparire solide e immobili se sorreggono qualcosa o sono a riposo contro una linea o un piano verticale.

Le linee curve sono più morbide delle linee rette. Spazzano e girano con grazia tra i punti finali. Sono meno definite e prevedibili delle linee rette. Si piegano, cambiano direzione. Le linee curve esprimono un movimento fluido. Possono essere calme o dinamiche a seconda di quanto curvano. Meno attiva è la curva, più calma è la sensazione.

Le linee a zig-zag sono una combinazione di linee diagonali che si collegano in punti. Assumono le caratteristiche dinamiche e ad alta energia delle linee diagonali. Creano eccitazione e movimento intenso. Trasmettono confusione e nervosismo perché cambiano direzione rapidamente e frequentemente. Possono implicare pericolo e distruzione quando si rompono.

Le linee lunghe e perfettamente regolari sembrano artificiali. La natura non è perfettamente dritta. Quando si aggiunge una variazione a una linea, questa diventa meno artificiale e più naturale.

Le linee tratteggiate e punteggiate sono linee implicite. Sono incomplete e permettono agli oggetti di passarci attraverso. Una linea spessa, verticale, punteggiata o tratteggiata è ancora una linea forte, anche se non così forte come se la linea fosse completamente solida.

Line Patterns

Una serie di linee forma un pattern. Questi modelli di linee trasmettono un significato in aggiunta al significato delle singole linee.

Le linee parallele di larghezza e spaziatura uniforme creano un effetto statico e ordinato. Non importa se le linee sono orizzontali, verticali o diagonali. Anche nelle linee curve la ripetizione crea ordine, comunque uno più dinamico delle linee rette. Non troppo come la serie di linee curve, anche se per lo più statiche, crea ancora un senso di movimento.

Variando la spaziatura tra linee di uguale spessore possiamo trasmettere movimento. Quando la spaziatura tra linee dello stesso spessore è casuale, otteniamo un effetto dinamico con poco ordine. Quando si varia sia la spaziatura che lo spessore, l’effetto diventa più caotico e disordinato.

I modelli di linee possono essere costruiti per creare ombreggiature e texture. Il valore può essere controllato attraverso l’uso della linea. Le linee possono essere combinate per formare forme. Le linee possono essere costituite da un tipo o da qualsiasi forma posta una dopo l’altra.

Come usare le linee nel Web Design

Utilizziamo le linee per organizzare, collegare e separare informazioni ed elementi di design. Puoi usare le linee per trasmettere movimento e creare texture. Le linee forniscono enfasi e definiscono la forma. Possono essere usate per trasmettere stato d’animo ed emozioni.

Pensate a qualsiasi sito web e a tutti i posti dove le linee sono o potrebbero essere usate. Quando si allineano gli elementi di un design si crea una linea implicita che organizza e collega quegli elementi. Puoi enfatizzare ulteriormente la relazione con una linea reale.

Si aggiungono bordi intorno a vari elementi del tuo design per raggrupparli e separarli chiaramente da altri elementi della pagina.

Le linee sono usate per dividere l’intestazione dal contenuto e il contenuto dal piè di pagina. Sono usate per dividere la pagina in colonne e righe di informazioni. Le linee della griglia potrebbero anche essere la colla strutturale che tiene insieme l’intero design.

Il design controlla lo spazio e le linee sono spesso usate per definire quello spazio. Possiamo usare linee reali o implicite in combinazione con i principi gestaltici di continuità, connessione uniforme, prossimità, parallelismo, regione comune e anche chiusura.

Sommario

Le linee sono un elemento essenziale del nostro vocabolario visivo. Combinate con forme, colore, valore, struttura, spazio e forma ci danno una grammatica visiva che possiamo usare per comunicare.

Sembrano semplici. Non avevate bisogno che vi dicessi cos’è una linea quando avete iniziato a leggere questo post, eppure siamo qui dopo circa 2000 parole e abbiamo appena scalfito la superficie di ciò che le linee possono fare. Se lo volessimo, le linee potrebbero creare la superficie e rappresentare il graffio.

Qualcosa di semplice come una linea può avere una combinazione o varietà infinita e attraverso quella varietà trasmettere diversi significati, concetti, temi.

Ancora di più quando combiniamo le linee in modelli possiamo trasmettere ulteriori informazioni e significato. Possiamo usare le linee per creare texture e forme, il che ci porta al prossimo post.

La prossima volta continueremo a costruire la nostra grammatica visiva con una discussione sulle forme.

Scarica un campione gratuito dal mio libro, Design Fundamentals.