Come usare Balance in Web Design
Raggiungere l'equilibrio nel web design richiede un po 'di riflessione, sforzo e abilità, ma ne vale assolutamente la pena. Il bello dell'equilibrio, che può essere applicato alla più ampia categoria di design nel suo insieme, è che mantiene ciò che crei dall'essere un disordine eccessivo e sovraccarico che non riesce a servire l'esperienza dell'utente. In altre parole, l'equilibrio nel web design fa in modo che voi, come designer, siate colpiti da quel delicato punto di moderazione. Non troppo, ma non troppo poco. Non troppo rumoroso, ma non troppo sottile. Mantiene in armonia il tuo intero progetto pur continuando a raggiungere tutti gli obiettivi di usabilità dei tuoi clienti. Questa è un'abilità da mettere decisamente nella cassetta degli attrezzi del tuo designer! In questo articolo, vedremo come è possibile incorporare un buon equilibrio nei siti Web dei clienti.
Equilibrio simmetrico
Uno degli esempi più comuni di bilanciamento che si incontra quando si naviga nei siti Web è la simmetria, anche se non si può rendersene conto, perché è presentato in modo così trasparente. La simmetria è piacevolmente attrattiva per gli occhi e crea un design esteticamente ben organizzato e armonioso. Il bilanciamento simmetrico viene definito posizionando gli elementi equamente su entrambi i lati di un asse centrale orizzontale o verticale. In altre parole, entrambi i lati di una linea di immersione immaginaria attraverso il centro della pagina sono essenzialmente immagini speculari l'una dell'altra. Mentre alcuni critici possono cancellare questo tipo di equilibrio come noioso o prevedibile, ha comunque resistito alla prova del tempo e rimane uno dei modi migliori per mostrare equilibrio nel web design.
Il sito di Cisco ha optato per questo approccio collaudato, testato e vero al design. Nota come il sito è perfettamente bilanciato sul suo asse verticale. Se hai preso una linea immaginaria e l'hai divisa nel mezzo della homepage di Cisco, noterai quanto segue:
- Lo stesso numero di elementi nella barra di navigazione (inclusa l'icona di ricerca) su entrambi i lati
- Il titolo e la sottotesta sono ugualmente lunghi su entrambi i lati
- Il pulsante di invito all'azione è perfettamente centrato
- Lo stesso numero di elementi sotto la voce "Attività rapide" su entrambi i lati
Anche se il sito potrebbe non essere il sito più terribilmente eccitante di sempre, non deve essere perché l'azienda vende apparecchiature di rete. Inoltre, il sito è utilizzabile e funzionale, entrambe le caratteristiche che i suoi clienti possono apprezzare. Diamo un'occhiata ad altri due esempi di simmetria:
IWC Schaffhausen , l'orologiaio svizzero, ha un sito che presenta un equilibrio orizzontale e simmetrico. Se dividiamo la pagina lungo un asse centrale nel mezzo, entrambi i lati hanno simmetria.
La stessa cosa vale per il Sito Web dell'app Beanstalk . Caratterizzato da un design semplice e minimale, l'asse centrale si trova al centro della pagina iniziale, lasciando le due metà della pagina con un bilanciamento orizzontale e simmetrico.
Equilibrio asimmetrico
L'opposto polare della simmetria, anche l'equilibrio asimmetrico è possibile. Non lasciatevi ingannare dal fatto che l'asimmetria significa mancanza di equivalenza tra le parti! Come vedrai presto, il bilanciamento asimmetrico realizza anche un sistema di contrappesi nel design ... semplicemente non in modi che potresti aspettarti. L'asimmetria può essere rappresentata in diversi modi su una pagina web. Ad esempio, una metà dello schermo, verticalmente o orizzontalmente, potrebbe vantare un elemento più intenso mentre l'altra metà potrebbe avere elementi più sottili. Nonostante questa disuguaglianza, sia nella forza che nei numeri, l'equilibrio è creato dalla giustapposizione degli elementi contraddittori. In questo modo, l'asimmetria può essere veramente bella, forse più della semplice simmetria, perché gioca sul concetto di dissomiglianza per creare equilibrio. Questo è un paradosso del design, ma che funziona così bene su qualsiasi sito. L'equilibrio asimmetrico è quindi più interessante e stimolante della simmetria prevedibile. Evoca temi di modernismo, energia e meraviglia. I progettisti dovrebbero prendere nota, tuttavia, che la creazione di asimmetria su una pagina richiede più lavoro rispetto alla simmetria regolare. Dopotutto, devi rappresentare relazioni tra elementi di design più complicati.
Honda ci offre un chiaro esempio di asimmetria nel web design. Sotto la piega, sulla sua homepage, l'azienda utilizza un design basato su carte, ma questo produce un aspetto un po 'disordinato che, mentre visivamente accattivante e colorato, crea una mancanza di uguaglianza su entrambi i lati di un asse centrale verticale o orizzontale. Per prima cosa, le carte stesse hanno sempre lunghezze diverse, orizzontalmente, e non riescono a essere sempre raggruppate in una colonna o riga uniforme. Questo crea una grande asimmetria che è molto interessante da guardare. È quasi come un piccolo labirinto sulla homepage della compagnia automobilistica! Ci sono anche altri esempi interessanti:
Typographisme è un caso perfetto per l'asimmetria nel web design. Il suo sito presenta due elementi che sono asimmetrici. Sia il logo TG che il timbro verde nell'angolo in alto a destra creano asimmetria.
Duplo 'l'asimmetria è più cruda. Il suo sito vanta un design a elementi flottanti che non si allineano in modo coerente con l'altra metà, indipendentemente dal fatto che l'asse centrale sia verticale o orizzontale. Nel complesso, produce un aspetto accattivante che è interessante da comprendere.
Equilibrio radiale
L'equilibrio radiale è piuttosto semplice. Come suggerisce il nome, l'equilibrio radiale si verifica quando tutti gli elementi di un disegno su una pagina emanano in punti equidistanti da un punto centrale unificante. Quindi se divideste la pagina verticalmente o orizzontalmente lungo un asse centrale, gli elementi di entrambi i lati sarebbero ugualmente lontani o vicini al punto centrale. Alcuni degli esempi più basilari di equilibrio radiale sono cose come i raggi di sole che provengono da un punto centrale o uno stagno che ha un gruppo di increspature sulla sua superficie. Ciò che rende questa forma di equilibrio più speciale è che l'effetto radiante procede in entrambe le direzioni: così come l'attenzione si allontana dal punto centrale, essa riconduce anche a esso a causa del centro comune. Per questo motivo, mantenere un punto focale è facile.
Il miglior esempio di bilanciamento radiale - che è piuttosto raro sui siti Web, specialmente sulle home page - lo è Video blog . È l'epitome dell'equilibrio radiale, poiché tutto si irradia verso l'esterno dal punto centrale del tipo bianco di "Vlog.it".
Tutti i tipi di equilibrio
Ormai, dovrebbe essere abbastanza ovvio che tutti i tipi di equilibrio hanno alcuni legami comuni. Ci sono fattori uniformi che appaiono costantemente in qualsiasi disegno che presenti un equilibrio interessante e interessante. L'equilibrio nel web design è tutto intorno a te. È probabile che tu abbia trascurato di apprezzarlo in tutti i diversi siti che hai visitato durante la tua vita; ma questo è solo perché l'equilibrio non è la prima cosa che pensi quando navighi in qualsiasi sito. Tuttavia, l'equilibrio è importante per la progettazione del sito. Non fornisce solo tocchi estetici interessanti dal punto di vista visivo. Può anche aiutare l'utente a rendere più facile l'assorbimento delle informazioni visive su un sito, il che non significa migliorare la navigazione del sito. I progettisti possono sforzarsi di includere un migliore equilibrio nel loro web design prestando particolare attenzione all'armonia, ai contrappesi e all'equidistanza. Il risultato finale di un buon equilibrio paga dividendi indicibili per i tuoi clienti e l'esperienza dell'utente.