ANDREA BACCOLINI
Web designer

CSSAward nominated
CSS Design Award nominated
CSS Reel Award nominated

USARE L’ASIMMETRIA NEL WEB DESIGN

Argomenti: ,

Autore: Andrea Baccolini

L'asimmetria nel web design
Ott
24
2012

Traduzione dell’articolo “CREATING OFF-CENTER BALANCE: USING ASYMMETRY IN WEB DESIGN” del blog “CODROPS

 
L’asimmetria è semplicemente l’assenza di simmetria.
Ma l’asimmetria non è la mancanza di equilibrio e armonia.
Asimmetria e asimmetrico possono creare un senso di tensione e di energia, ma anche un senso di armonia compositiva, a seconda dell’uso.
Mentre la maggior parte della gente pensa prima alla simmetria come un fenomeno che si verifica naturalmente, basti pensare all’uomo vitruviano di Leonardo da Vinci o l’aspetto del volto di un animale, anche l’asimmetria è un fenomeno naturale in modi diversi.

Gli esseri umani, ad esempio, tendono ad essere prevalentemente sinistra o destra.
Gli usi del design asimmetrico possono essere ampi.
Spesso la tecnica viene utilizzata per creare un senso di caos e confusione.
Asimmetria può enfatizzare il movimento o l’azione.
Essa è più frequentemente utilizzata per stabilire una sensazione di dominanza e per creare un punto focale sullo schermo.
Non c’è un modo giusto o sbagliato nella progettazione asimmetrica o simmetrica.
Alcuni siti possono anche avere un mix di ciascuno.

 

USO DEL DESIGN ASIMMETRICO

imgasimmetry

imgasimmetry

Quali tipi di progetti possono beneficiare di un design asimmetrico?
Semplicemente, quasi tutti di loro.
La tecnica — quando eseguita bene — aggiunge una grande quantità di contrasto e dimensione a progetti.
La chiave è dare un buon equilibrio agli elementi della struttura.
Prestare particolare attenzione a disporre gli elementi in modo che corrispondano al tono del vostro progetto, con l’equilibrio o non.
In web design, la maggior parte della conversazione intorno alla simmetria si riferisce alla simmetria orizzontale o alla asimmetria.
Asimmetrico può creare equilibrio o movimento.
Più comunemente le  tecniche di design asimmetrico sono usate in combinazione con elementi di simmetria.
Pensare a un sito Web con una barra laterale 350 pixel, ad esempio.
Subito si è creata una struttura asimmetrica perché il corpo del sito Web e della sidebar sono di diverse larghezze.
Il posizionamento di foto spesso sono scentrate, creando un elemento di asimmetria.

 

IMMAGINI E TESTI

imgasimmetry

imgasimmetry

Un modo per creare un senso di equilibrio è la coppia, a differenza di elementi come immagini e testo.
Questa è una tecnica comune utilizzata da numerosi designer.
Il trucco è come mettere insieme i due elementi.
Ci vuole più di una foto e poche parole.
“L’umore” dell’immagine e testo (anche il carattere tipografico) dovrà essere complementare.
Uno degli elementi chiave nella realizzazione di questa tecnica è il collegamento tra il testo e l’immagine.
Le parole e le immagini “dicono” la stessa cosa?
Essi sono progettati in tale modo che sembrano collegate?
I pesi dei caratteri rispecchiano il peso dell’immagine?

 

IMMAGINI E SPAZI

imgasimmetry

imgasimmetry

Lo spazio è accoppiato con un elemento pesante (immagini o testo) per creare un senso di peso o di movimento.
Il vuoto dello spazio contrasta con la pienezza di tutto il resto della pagina.
Guardate la direzione che puntano gli elementi nell’immagine.
C’è un volto alla ricerca a sinistra? Che crea una sensazione di movimento che sposta un utente da sinistra a destra nella pagina.
C’è un picco di montagna? il punto direzionale muoverà l’occhio di un visitatore dal basso verso l’alto.
Un altro modo per determinare asimmetria è creare delle porzioni isolate dell’area visualizzabile.
Barre laterali e il blocco di colore sono semplici modi per farlo. (Comunemente quando si utilizza questo concetto, l’aspetto generale è asimmetrico anche se il disegno ha un distinto senso di simmetria all’interno di ogni sezione del sito).

 

IL COLORE

imgasimmetry

imgasimmetry

L’ asimmetria può essere creata anche con le scelte di colore.
Contrasti netti in tonalità – bianco / nero, per esempio, o opposti sulla ruota dei colori – possono dare un senso di equilibrio e anche di caos.
Modelli di colore asimmetrici possono essere anche naturali e hanno un strano senso di equilibrio tra loro.
In molte specie, gli animali maschi avranno marcature di colore quasi perfettamente simmetricche mentre le femmine le hanno raramente.
(Si pensa che questo fenomeno, che si verifica naturalmente, serve ad aiutare i maschi “più attraenti” ad avere più femmine e prole).
le combinazioni di colori equilibrate sono basate sui principi della ruota dei colori.
Combinare e fare selezioni di colore che cadono al di fuori di queste combinazioni classiche portano meno simmetria e armonia di colore.
Esperimento con sfondi che contrastano con le immagini o testo in alto. Asimmetria immediato nasce dall’abbinamento sfondo pallido, beige con tipo neon viola – un abbinamento raramente usate. Un’altra tecnica comune è di creare un elemento con un sacco di colori e accoppiarlo con un elemento che contiene poco o nessun colore.

 

CONCLUSIONE

Il design asimmetrico può essere difficile e meraviglioso.
Amo l’elemento della sorpresa che l’asimmetria crea se ben realizzata.
Alcuni dei migliori siti sono l’equilibrio tra immagini e testo che creano un tracciato visivo dalla figura alle parole sullo schermo.

Traduzione dell’articolo “CREATING OFF-CENTER BALANCE: USING ASYMMETRY IN WEB DESIGN” del blog “CODROPS

 

USARE L’ASIMMETRIA NEL WEB DESIGN ultima modifica: 2012-10-24T11:50:12+00:00 da Andrea Baccolini

Articolo scritto o tradotto da Andrea Baccolini

Web designer freelance di Padova.
Specializzato in siti internet moderni, convalidati W3C e responsive.
Realizza temi per il CMS Wordpress. Indicizzazione sui motori di ricerca.

Ultimi articoli della stessa categoria:

COMMENTA QUESTO ARTICOLO!

Per favore compila il captcha (richiesto):

Andrea Baccolini | Web designer Copyright 2012 - 2017 © Responsive design - Seguimi su Facebook e su Google+ - CF:BCCNDR76P08D325K.