Design asimmetrico Creazione di layout belli e bilanciati

Come ti senti riguardo al design asimmetrico? Quella domanda semplice a volte può innescare un sacco di dibattito tra i progettisti. Il design asimmetrico può essere una delle tecniche più complicate da portare a termine, ma una volta eseguita correttamente, si ottengono disegni belli e accattivanti.

Mentre la definizione di asimmetria è la mancanza di simmetria o uguaglianza tra due metà; non è una mancanza di equilibrio come alcuni assumono erroneamente. I progettisti possono utilizzare l'asimmetria per creare equilibrio e armonia anche se due lati del design non si specchiano. Ecco come iniziare.

Perché l'asimmetria?

L'asimmetria può essere uno dei concetti più interessanti nel tuo kit di strumenti di progettazione. È una tecnica che attira l'attenzione che è interessante e stimolante.

Può essere difficile da usare, ed è per questo che alcuni designer stanno lontano da progetti completamente asimmetrici. Ma tu non devi. Usare l'asimmetria è qualcosa che ogni designer può fare; ci vuole solo pianificazione

Il miglior punto di partenza è mescolare e abbinare concetti simmetrici e asimmetrici all'interno di un progetto di design. Se si rompe il disegno in sezioni più piccole ci saranno parti che contengono diversi tipi di bilanciamento. (Pensa a pannelli in siti a scorrimento parallasse o alla progettazione di un'immagine all'interno dell'area di disegno.)

Pensa al motivo per cui stai usando anche l'asimmetria. Sapere cosa si vuole realizzare con la grafica aiuterà a determinare come utilizzare al meglio le tecniche per realizzarlo. L'asimmetria è attiva e attira l'attenzione; può essere pesante ma naturale. E una volta che hai qualcosa sulla tela, fidati del tuo istinto. Sembra giusto o si sente?

Raggiungere l'equilibrio è quella magia intermedia. Un buon design asimmetrico include l'equilibrio in modo che nessuna parte del progetto sia troppo pesante per il resto. È possibile creare un equilibrio compensando gli elementi con lo spazio, creando enfasi con il movimento, comprendendo il peso, aggiungendo attenzione al colore e usando una griglia per l'allineamento e l'organizzazione.

Utilizzando lo spazio

Una delle asimmetrie dei luoghi sta davvero iniziando a fiorire nella tendenza del design minimalista. Con i progettisti che utilizzano così tanto spazio, è facile bilanciare un oggetto o un'immagine semplice con uno sfondo bianco o scuro più grande.

L'atto di bilanciamento tra lo spazio bianco o negativo e gli elementi nel disegno dovrebbe creare contrasto. Ciò dirigerà il movimento dell'occhio attraverso il design.

Esempio: Ike Kligerman Barkley usa il bilanciamento high-drama per attirare gli utenti. La spinta direzionale dell'immagine nell'angolo in basso dello schermo rispetto al nome e la navigazione nell'angolo opposto fanno sì che l'occhio si spalanchi tra gli elementi, quasi sfidandoti a non guardare. L'immagine ti dà un'idea del motivo per cui hai trovato il sito web e la struttura minima incoraggia a fare clic sui collegamenti.

Enfatizzare il movimento

Pensa a una gomma che rotola giù da una collina. Puoi immediatamente percepire il movimento. Lo stesso accade quando si progetta questo movimento in modo asimmetrico.

  • L'occhio si muoverà naturalmente dalla parte più grande, più pesante dello schermo, alla parte più leggera.
  • L'occhio seguirà segnali direzionali come una freccia o una forma che sembra puntare in una particolare direzione.
  • L'occhio seguirà il percorso degli occhi nell'immagine dello schermo, in modo che un utente guardi nella stessa direzione e la persona nel disegno.
  • Il flusso direzionale si inclinerà da sinistra a destra, a meno che non ci sia un potente tiro verso un'altra direzione.

Esempio: Leen Heyne Fine Jewelry utilizza il movimento per attirare l'attenzione sul prodotto in primo piano. Le forme geometriche puntano letteralmente l'occhio nella giusta direzione, creando nel contempo una sensazione che il braccialetto (o l'anello) potrebbe semplicemente rotolare attraverso la tela. Questa influenza direzionale fa anche qualcos'altro: punta l'uso sulle frecce di navigazione per passare alla pagina successiva.

Aggiungi Focus con Colore

I modelli di colori asimmetrici sono solitamente ricchi di contrasto e combinazioni di colori. Pensa a tonalità brillanti contro il nero o una fotografia tonica che ha in grassetto la tipografia bianca in cima. Il contrasto di colore elevato sarà focalizzato e il peso visivo a specifiche parti del design.

Combinazioni di colori asimmetriche possono essere create usando la ruota dei colori. Optare per abbinamenti di colori e combinazioni che non rientrano nelle tradizionali regole del colore per una sensazione di asimmetria. Considera i colori che vengono usati raramente per l'impatto. Usa il colore per evidenziare e enfatizzare altri elementi nel contorno asimmetrico. Il colore funziona molto bene con elementi come forme geometriche, tipografia o anche sullo sfondo per fungere da punto focale secondario per raggiungere l'equilibrio.

Esempio: L'agenzia HLK usa il colore per realizzare un design che è quasi simmetrico e ti fa pensare di nuovo. La sottolineatura blu e il pulsante creano una messa a fuoco semplice con un'asimmetria che si contrappone al sottile menu di hamburger e alle icone di branding nelle prime curve.

Non dimenticare la griglia

Mentre non si utilizza una griglia per creare immagini speculari, è comunque una parte vitale del processo di progettazione. Utilizzare una griglia per creare asimmetria ti aiuterà a raggiungere l'equilibrio e l'organizzazione.

Considera ogni elemento sulla griglia come faresti con qualsiasi altro progetto. Le cose riposano in un certo modo in orizzontale e in verticale? C'è un peso compensato su entrambi i lati della tela: da sinistra a destra e dall'alto verso il basso.

Pensa alla griglia come a una scala: per ogni elemento che aggiungi a un lato, qualcosa sull'altro lato deve compensarlo. Per creare un'asimmetria immediata, considera una griglia di colonne con un numero dispari di colonne; su un lato della griglia crei elementi che sono uguali a una larghezza di colonna, dall'altro raddoppiano.

Esempio: BrightByte Studio utilizza una griglia colonnare che mantiene gli elementi allineati e organizzati in un mix di elementi simmetrici e asimmetrici. (Ma il primo che vedi è probabilmente il testo allineato a sinistra nel mezzo dello schermo: questo uso di una griglia crea un equilibrio innato tra gli elementi.Si noti come la navigazione verso il basso e i collegamenti nella parte superiore della pagina cadono in linea così come lo spazio occupato dal testo principale e dagli elementi di navigazione.

Crea peso

L'asimmetria è radicata nell'idea che qualcosa sia così pesante? che sarai attratto da esso prima. Determina quale parte della tua immagine avrà quel peso visivo. Può essere un'immagine o una tipografia o anche uno spazio bianco.

Bilancia l'elemento pesante con il contrasto: un elemento più leggero, qualcosa che attira l'attenzione degli utenti in un modo diverso. Il peso funziona al meglio quando combinato con le altre tecniche sopra, in modo che l'oggetto ponderato non superi il design e ti porti attraverso di esso.

Esempio: Cranes of Cambridge utilizza una foto accattivante come il? Peso? del design. È bilanciato da due elementi, uno che non si potrebbe nemmeno notare all'inizio. Il testo e il logo più leggeri sono significativamente più leggeri? rispetto alle persone nell'immagine, facendoti guardare dalle persone al testo (anche seguendo il movimento implicito dei loro occhi). È anche compensato da una navigazione colonnare pensata che ti aiuta a trascinarti attraverso lo schermo.

Conclusione

L'asimmetria può essere una tecnica di progettazione bella e armoniosa. Mentre le tendenze del design si sono concentrate recentemente su molta simmetria, è probabile che ci sia uno spostamento verso una parte di questo? Squilibrato? design equilibrato. È visivamente intrigante e aiuta a indirizzare gli utenti attraverso un design con sottigliezza.

L'asimmetria ha anche un impatto e funziona particolarmente bene come un concetto che viene utilizzato con simmetria nell'ambito di un progetto completo. Sperimenta con l'asimmetria e ti innamori di questa tecnica di design dinamico.