Equilibrio asimmetrico nel web design
Quando ho coperto per la prima volta l'idea di modelli di design simmetrici qui su Webdesigner Depot non avevo intenzione di scavare nella nozione di design asimmetrico.
Tuttavia, più ci pensavo, più mi sentivo in dovere di coprire l'argomento per contrastare alcune delle idee che ruotano attorno a schemi di design simmetrici.
Nel design asimmetrico troviamo disegni che contengono elementi che non creano un'immagine speculare. Molto spesso, questi disegni asimmetrici sono in effetti bilanciati, ma semplicemente non attraverso metà perfettamente simili.
Questo tipo di design è in realtà molto più facile da trovare, considerando che la maggior parte dei contenuti non si presta a simmetria perfetta.
Consideriamo una varietà di siti che mettono in pratica questo approccio al design e magari scopriamo alcune idee che possono influire sul tuo lavoro di progettazione.
Introduzione all'uso dell'asimmetria
Bully Entertainment
Come introduzione alla nozione di design asimmetrico, questo design drammatico fornisce un punto di partenza piuttosto piacevole. Mentre non c'è davvero alcuna ragione per cui questo progetto non possa essere riconfigurato per produrre una simmetria perfetta, non funzionerebbe quasi altrettanto bene. I grandi disegni riccamente illustrati compensano magnificamente il testo della pagina iniziale. Le loro dimensioni assicurano che siano estremamente visibili e sono la principale forza trainante visiva del design. Questo equilibrio naturale tra un singolo elemento di grandi dimensioni e un'alternativa più fitta è un approccio molto comune.
Jorge Rigabert
Questo layout presenta un layout web abbastanza standard. Una piccola colonna laterale che contiene la navigazione delle chiavi, abbinata a una colonna molto più grande per il contenuto dei siti. Questo è forse uno di una manciata di layout standard che vengono utilizzati quotidianamente dai progettisti. Credo che gran parte del processo di progettazione in questo caso avvenga in modo semi automatico. Considera la barra laterale in questo caso che equilibra in modo asimmetrico la colonna del contenuto. La barra laterale ha un colore più scuro, che aiuta a compensare il canale di contenuti più leggero. Senza lo sfondo più scuro, la barra laterale verrebbe probabilmente persa e non risaltare allo stesso modo.
Immagini per bilanciare il testo
Un altro approccio abbastanza standard al web design che finisce per essere un elemento di design asimmetrico è l'abbinamento del testo con le immagini. Come vedrai negli esempi qui sotto, ognuno ha un'immagine grande. Questa immagine è accoppiata in qualche modo con un blocco di testo. Questa combinazione è estremamente comune.
Il trucco è abbastanza ovvio, basta assicurarsi che i due si completino a vicenda in qualche modo. Dato che questi due elementi di solito creano un occhietto per gli occhi, è importante che in qualche modo lavorino insieme. L'approccio più ovvio è quello di far sì che l'immagine mostri o mostri letteralmente ciò di cui parla il testo. Un'altra tattica comune è quella di estendere l'immagine presentata nel testo.
Ecco alcuni esempi da considerare.
Torta dolce torta
Questo design è sicuramente ben bilanciato, ma utilizza diversi elementi asimmetrici per raggiungere questo obiettivo. Si noti la grande immagine di una torta in combinazione con il testo. L'immagine è abbastanza ovvia, ma fondamentalmente importante. In questo caso la torta non solo ci informa che questa è una pasticceria, ma quale particolare stile potrebbero offrire. Combina questo con il testo chiarificatore ad esso associato e hai una buona dose di vendite chiara. Questo non significa nemmeno menzionare il design incredibilmente gustoso in cui è avvolto questo sito.
Più Soda
Questo esempio utilizza anche elementi di design asimmetrici basati su una grande immagine combinata con un blocco di testo. In questo caso, la connessione non è così chiara. Non ci sono elementi di vendita ovvi coinvolti. Invece l'immagine diventa più decorativa e crea un senso generale di stile per il sito. Secondo me è leggermente meno funzionale, ma è davvero difficile dirlo senza sapere esattamente quanto sia efficace il sito. Sembrerebbe che una visuale come questa abbia un obiettivo singolare di indurti a scavare un po 'di più per vedere di cosa si tratta. Una specie di teaser, se vuoi.
Adaptive Web Design
Come probabilmente avete già capito, questo schema è comune quanto il colore blu. Oserei ipotizzare che quasi tutti i siti finiscano per mettere a punto uno strumento visivo come questo. Penso che questo luogo comune lo renda un argomento che vale la pena discutere. Spesso trovo la maggior ispirazione e idee nuove dal riconsiderare le cose che faccio ripetutamente senza pensarci.
Questo semplice sito promuove un libro. E naturalmente l'elemento principale su cui ti atterri è una grande immagine del libro. Combina questo con il grande blocco di testo e hai un'area ben bilanciata che contiene tutti gli elementi critici. Ancora più importante, è finito con un richiamo all'azione accattivante. La continuità di quest'area è semplice e puntuale. Gli occhi lo attraversano facilmente e consumano le informazioni critiche. Non è confuso, o complicato, o intelligente o ingannevole. L'approccio è semplice e chiaro.
Elementi in primo piano e sullo sfondo
Un nuovo approccio al design asimmetrico consiste nell'utilizzare elementi di sfondo che bilanciano in modo asimmetrico quelli in primo piano. Questo tipo di approccio crea una dinamica interessante in cui lo sfondo serve più di un ruolo funzionale come parte del contenuto, e tuttavia fa ancora parte dello sfondo del sito. Molto spesso ciò avviene attraverso semplici sovrapposizioni che creano l'illusione della profondità. Ecco alcuni esempi da considerare.
Peter McLeavey Gallery
I siti web di questa galleria sono una perfetta dimostrazione di questa idea. Qui l'elemento di sfondo serve molti ruoli. Innanzitutto, al punto di questa sezione crea un equilibrio asimmetrico con il grande cerchio grigio in primo piano. Questa combinazione visiva crea due aree che fanno rimbalzare gli occhi avanti e indietro. Questo, a mio avviso, è una buona cosa.
L'elemento a sinistra contiene il marchio principale e i collegamenti al contenuto del sito, mentre l'elemento di sfondo informa del contesto del sito. Stai guardando un sito di gallerie, e questo diventa abbondantemente ovvio in pochi secondi di atterraggio sul sito. Mi piace che un elemento così informativo come lo sfondo possa anche giocare un ruolo importante nel design e nello stile generale del sito. Soprattutto quando riecheggia perfettamente con il contesto del prodotto offerto dal sito. Un approccio così semplice, ma molto efficace.
Aleksandar Grkinic
Questo semplice A proposito di me pagina abbraccia anche questa semplice idea in cui un elemento di sfondo equilibra in primo piano uno in modo asimmetrico. In questo caso però, lo sfondo non è del tutto chiaro. E questo è ciò che mi piace davvero. L'illusione della profondità è totalmente lì, e senza alcun tipo di sovrapposizione, in realtà è difficile decidere quale sia effettivamente lo sfondo. Suppongo che potremmo obiettare che la persona che salta non è affatto sullo sfondo. Indipendentemente da ciò, l'equilibrio asimmetrico è chiaro. E senza la bella combinazione di diversi elementi la pagina non esisterebbe. Il design è, in molti modi, basato esclusivamente sul concetto di equilibrio asimmetrico. Spesso sembra che disegni estremamente semplici possano sembrare straordinari con bellissimi contrasti come questo.
Robert Dabi
In questo caso, lo sfondo ha un ruolo interessante nel design, ma non produce gli elementi asimmetrici che abbiamo visto fino ad ora. A mio parere, il grande visual è chiaramente un elemento in primo piano del design. Ciò che amo però è come sfumare sottilmente questa linea con qualcosa di semplice come l'ombra sotto l'immagine. Questo efficacemente lo fonde con lo sfondo e crea una bella dinamica. Ovviamente, l'immagine grande è bilanciata asimmetricamente con la copia accanto ad essa. Scorri le pagine del sito e scoprirai piacevolmente che lo sfondo cambia e si fonde con la grafica in modi molto interessanti. Un design straordinario che si sente fresco, pulito e super liscio. Sembra una buona presentazione per un sito di portfolio per me.
Dieci altri disegni
Di seguito ho fornito dieci disegni aggiuntivi che fanno uso di elementi asimmetrici. Come ho già detto, potrei inserire molti siti Web in questa categoria. Quindi, per gli scopi di questo articolo ho selezionato attentamente i progetti che ritengo utilizzino l'approccio in modi leggermente atipici e creativi. Considera ogni design alla luce di questo argomento e spero che otterrai alcune nuove idee per ispirare il tuo prossimo progetto.
Greenluv
Andersson Wise
previsione
13 mogli
Raffles Institution
Urban Svensson
Giostra
Purlize
Bus alla birreria
Farmaci Anti-
Conclusione
L'equilibrio è una parte fondamentale del processo di progettazione e l'uso di elementi asimmetrici è altrettanto basilare. Mi piace sempre ricomporre le basi del design perché trovo che lo capisco sempre in un modo nuovo che ha un impatto sul lavoro che faccio. Ci sono innumerevoli modi per affrontare le cose e rompere i nostri schemi può spesso portare a nuovi e freschi disegni che ringiovaniscono la nostra passione per il nostro lavoro.
Quali sono i tuoi design preferiti del sito web asimmetrico? Chi sta facendo qualcosa di diverso con l'asimmetria? Fateci sapere nei commenti!