Oggi esamineremo uno degli elementi di progettazione più semplici possibili: una linea. Impareremo come maneggiare le linee correttamente e cosa evitare durante l'implementazione.
Aggiungere poche linee semplici a un design può conferire struttura e stile grafico a un design altrimenti noioso. È un trucco semplice e semplice che, se usato in modo efficace, ha l'effetto di aggiungere uno strato di finitura al tuo design.
1: usa una sottolineatura
Inizieremo con il trucco base del libro di tipografia: una sottolineatura. Un titolo sottolineato è più pesante e fornisce una separazione più precisa tra l'intestazione e il corpo. Tieni presente che questi sono necessariamente attributi positivi o negativi ma sono più neutrali; devi decidere quando la loro presenza è buona o cattiva in base all'aspetto che stai cercando.
Nota come la linea non agisce solo come separatore tra i due elementi, ma aiuta anche a definire la larghezza della colonna.
Una cosa che mi infastidisce con le sottolineature è il caos visivo creato quando si hanno lettere contenenti un discensore che si schianta sulla linea. Non c'è una regola ufficiale contro questo, ma ho scoperto che è un po 'troppo distratto e guida l'interesse dello spettatore verso tutti i posti sbagliati.
Quindi, come affrontiamo questo problema? L'opzione più semplice è ovviamente quella di evitare di usare discensori e sottolineature insieme, ma è un po 'troppo restrittivo per i miei gusti. Invece, quello che faccio di solito è creare la sottolineatura manualmente disegnando una linea (anziché fare semplicemente clic sul pulsante di sottolineatura), quindi mascherare le parti della linea che si schiantano nei miei discendenti.
Come puoi vedere nell'esempio sopra, questo è molto più bello dell'esempio precedente e contiene molta meno complessità visiva. Se non ti piace quella piccola parte di una linea arenata dopo l'ultima? G? puoi semplicemente fermare la sottolineatura all'ultimo discensore (applicabile solo dove la lettera finale contiene un discensore).
Estendilo
Tieni presente che una sottolineatura non deve conformarsi alla larghezza del testo. Talvolta rende interessante una dichiarazione per estendere la sottolineatura fino in fondo o persino fuori dalla pagina.
Se estendi la sottolineatura, pensa ai modi in cui puoi divertirti con lo schieramento nello spazio negativo. Puoi dargli un po 'di turbolenza, piegarlo in una forma, tutto ciò che vuoi!
Il designer di seguito ha concluso la sottolineatura estesa con e ha concluso con un punto. Questo lo fa sentire connesso a qualsiasi contenuto sulla destra e aggiunge un piacevole ma sottile interesse alla linea semplice.
# 2: Break Up the Line
Non cadere nella trappola di disegnare sempre una linea continua. Puoi utilizzare trattini, punti, triangoli, stelle e qualsiasi altra cosa tu possa pensare per creare la linea che desideri e raggiunge comunque lo stesso obiettivo.
Scopri come questo designer ha utilizzato un lenzuolo tratteggiato che si allinea con il centro di un titolo per creare una sezione chiara. Anche se il testo è allineato al centro, il design sembra giustificato perché le linee estendono i limiti visivi del titolo ai lati sinistro e destro della colonna.
3: fiancheggia il tipo
Se stai cercando un tema formale, ripetere la sottolineatura nella parte superiore del titolo può creare un sentimento di stampa vecchio stile. Penso sempre all'intestazione di un giornale quando vedo questo stile.
Se si vuole ridurre la sensazione di formalità, scaglionare le linee in modi diversi in modo che appaia meno strutturata. Questo è anche un effetto utile per creare una sensazione di movimento su una pagina statica.
4: andare in verticale
Finora ci siamo concentrati sulle linee orizzontali, ma le linee verticali possono essere utilizzate per inserire un interesse grafico davvero creativo in un progetto. Il designer di seguito ha esagerato le linee verticali nel carattere tipografico per nessun motivo reale oltre al fatto che sembra piuttosto interessante e crea un tema piacevole e coeso da sviluppare sul resto della pagina.
Ovviamente, un uso un po 'più tradizionale di una linea verticale sarebbe semplicemente separare due colonne di contenuto. Questo può essere usato in combinazione con entrambi i tipi o immagini e ti permette di mettere molto spazio tra le tue colonne senza avere un gap imbarazzante.
5: andare in diagonale
Se vuoi davvero che la tua pagina sia pazzesca, inclina il contenuto in diagonale. Questo di solito dà l'impressione di un design giovane ed eccitante che infrange le regole e spinge i confini.
Inclinare i tuoi contenuti può sembrare un po 'casuale, ma estendere le linee nel disegno ti aiuta a sembrare intenzionale e spinge davvero l'effetto. Non essere timido, ma davvero fai girare la rotazione e allunga quelle linee abbastanza lontano da fare una dichiarazione.
L'effetto diagonale è particolarmente indicato per i modelli retro-ispirati come quello sopra.
N. 6: Go Nuts
Questo è dove dovrei dirti di prendertela comoda. Una o due linee semplici possono aggiungere molto al tuo design e andare troppo lontano con l'effetto può assolutamente uccidere il tuo fascino estetico. Tuttavia, nelle mani giuste, una combinazione dei suggerimenti sopra può risultare in un prodotto finale davvero nitido.
Il design sotto di David Fooks usa un sacco di lavoro di linea. Combina linee tratteggiate, linee continue, linee rette, linee curve, bordi e persino linee con un diamante alla fine tutto in questa piccola area. L'effetto complessivo non è disordinato o brutto, ma è piuttosto elegante e bello!
Il mio consiglio è di usare semplicemente cautela. Come ogni elemento di design, le linee possono essere usate per il bene o per il male. Usa il controllo quando necessario e guarda sempre il tuo design con e senza le linee aggiunte per assicurarti di aggiungere valore al design.
Ispirazione
Dai un'occhiata a questi grandi utilizzi della grafica di linea nel web design per ottenere alcune idee su come incorporarne alcuni nel tuo prossimo progetto.
CarbonAds
Per il record
Evan Eckard
Cool e la guida
Il ladro di ananas
DesignSwap
Caravan
Conclusione
Lo scopo di questa discussione era di incoraggiarti a dare una seconda occhiata al vecchio amico della linea e considerare attentamente dove puoi usare le linee per rafforzare i tuoi disegni esteticamente, strutturalmente o entrambi.
Se hai un design che fa un forte uso di linee semplici, lascia un commento qui sotto con un link in modo che possiamo verificarlo! Fateci anche sapere cosa ne pensate degli esempi sopra.