Asymmetrisk balans i webbdesign
När jag först täckte tanken på symmetriska mönster här på Webdesigner Depot Jag hade ingen avsikt att gräva in begreppet asymmetrisk design.
Men ju mer jag tänkte på det, desto mer kände jag mig tvungen att täcka ämnet för att kontrastera några av de idéer som rör sig kring symmetriska mönster.
I asymmetrisk design hittar vi mönster som innehåller element som inte skapar en spegelbild. Oftast är dessa asymmetriska mönster i själva verket balanserade, men bara inte genom helt liknande halvor.
Denna typ av design är faktiskt mycket lättare att komma med, med tanke på det mesta innehållet låter sig inte till perfekt symmetri.
Låt oss överväga en rad olika webbplatser som sätter denna designmetod på jobbet och kanske upptäcker några idéer som kan påverka ditt eget designarbete.
Introduktion till användningen av asymmetri
Bully Entertainment
Som en introduktion till begreppet asymmetrisk design ger denna dramatiska design en ganska bra utgångspunkt. Medan det verkligen inte finns någon anledning att denna design inte kan omkonfigureras för att skapa en perfekt symmetri, skulle det inte fungera nästan lika bra. De stora, rikligt illustrerade mönsterna kompenserar texten på hemsidan vackert. Deras storlek säkerställer att de är extremt synliga och de är den främsta visuella drivkraften i designen. Denna naturliga balans mellan ett enda stort element och ett mer tätt packat alternativ är ett mycket vanligt förhållningssätt.
Jorge Rigabert
Denna layout presenterar en ganska standard webblayout. En liten sidokolumn som innehåller nyckelnavigering, ihopkopplad med en mycket större kolumn för innehållet på webbplatsen. Detta är kanske en av en handfull standard layouter som används dagligen av designers. Jag tror att mycket av designprocessen i detta fall sker semi automatiskt. Tänk på sidofältet i detta fall som balanserar asymmetriskt innehålls kolumnen. Sidofältet har en mörkare färg som hjälper till att kompensera den lättare innehållskanalen. Utan den mörkare bakgrunden kommer sidofältet sannolikt att gå vilse och inte skona ut nästan lika bra.
Bilder för att balansera text
En annan ganska vanlig metod för webbdesign som slutar vara ett asymmetriskt designelement är parning av text med bilder. Som du ser i proverna nedan har var och en en stor bild. Denna bild är parad på något sätt med ett block av text. Denna kombination är extremt vanlig.
Tricket är ganska uppenbart, bara se till att de två kompletterar varandra på något sätt. Eftersom dessa två element vanligtvis skapar en ögla för ögonen är det viktigt att de på något sätt arbetar tillsammans. Det uppenbara sättet är att få bilden bokstavligt att illustrera eller visa vad texten talar om. En annan vanlig taktik är att få bilden att utvidga den idé som presenteras i texten.
Här är några prover att överväga.
Cake Sweet Cake
Denna design är säkerligen välbalanserad, men den använder sig av flera asymmetriska element för att uppnå detta. Lägg märke till den stora bilden av en tårta i kombination med texten. Bildmaterialet är ganska uppenbart, men grundläggande viktigt. I detta fall informerar kakan oss inte bara om att det här är en kakaffär, men vilken speciell stil de kan erbjuda. Kombinera detta med den klargörande texten som är associerad med den och du har en vacker darn clear försäljningslek. Detta är allt för att inte ens nämna den oerhört välsmakande designen som denna webbplats är inpackad i.
Mer soda
Detta exempel använder också asymmetriska designelement baserat på en stor bild kombinerad med ett block av text. I det här fallet är anslutningen nästan inte så tydlig. Det finns inget uppenbart försäljningselement involverat. I stället blir bilden mer dekorativ och skapar en övergripande stilstil för webbplatsen. Enligt min mening är det lite mindre funktionellt, men det är verkligen svårt att säga utan att veta exakt hur effektiv webbplatsen är. Det verkar som om ett visuellt som detta har ett enstaka mål att locka dig att gräva lite mer för att se vad de handlar om. En sorts teaser, om du vill.
Adaptiv webbdesign
Som du säkert har tänkt på är detta mönster ungefär lika vanligt som färgen blå. Jag vågar spekulera på att nästan varje sajt slutar att sätta ett visuellt verktyg som detta för att fungera vid någon tidpunkt. Jag tror att denna gemensamma plats natur gör det ett ämne väl värt att diskutera. Ofta hittar jag mest inspiration och nya idéer från att ompröva saker jag gör om och om igen utan tanke.
Denna enkla webbplats främjar en bok. Och självklart är huvudelementet som du landar på en stor bild av boken. Kombinera detta med det stora textblocket och du har ett välbalanserat område som innehåller alla kritiska element. Viktigast av allt är det färdigt med ett öga i åtanke. Kontinuiteten i detta område är enkel och fläckig. Ögonen flyter lätt igenom den och konsumerar den kritiska informationen. Det är inte förvirrande, eller komplicerat, eller smart eller knepigt. Tillvägagångssättet är enkelt och tydligt.
Bakgrund och bakgrundselement
Ett nytt tillvägagångssätt för asymmetrisk design är att utnyttja bakgrundselement som asymmetriskt balanserar förgrunden. Denna typ av tillvägagångssätt skapar en intressant dynamik där bakgrunden tjänar mer av en funktionell roll som en del av innehållet, och ändå är det fortfarande en del av webbplatsens bakgrund. Oftast görs detta genom enkla överlappningar som skapar djupets illusion. Här är några prover att överväga.
Peter McLeavey Gallery
Galleriets webbplatser är en perfekt demonstration av denna idé. Här tjänar bakgrundselementet många roller. Först till punkten i detta avsnitt skapas en asymmetrisk balans med den stora grå cirkeln i förgrunden. Denna visuella kombination skapar två områden som får ögonen att studsa fram och tillbaka. Detta är enligt min mening en bra sak.
Elementet till vänster innehåller de viktigaste varumärkena och länkar till webbplatsens innehåll, medan bakgrundselementet informerar dig om webbplatsens sammanhang. Du tittar på ett galleri, och det blir rikligt uppenbart inom några sekunder av landning på webbplatsen. Jag älskar att ett sådant informativt element som bakgrunden kan också spela en viktig roll i webbplatsens design och övergripande stil. Speciellt när det echo så perfekt med produktens sammanhang erbjuder webbplatsen. Ett så enkelt tillvägagångssätt, men mycket effektivt.
Aleksandar Grkinic
Det här enkla om mig sidan omfattar också denna enkla idé där ett bakgrundselement balanserar en förgrunds en asymmetriskt. I det här fallet är dock bakgrunden inte helt klar. Och det här är vad jag verkligen älskar om det. Illusionen av djupet är helt där, och utan någon form av överlappning är det faktiskt svårt att bestämma vad bakgrunden egentligen är. Jag antar att vi kan argumentera för att personen hoppar inte alls i bakgrunden. Oavsett är den asymmetriska balansen klar. Och utan den vackra kombinationen av olika element skulle sidan inte existera. Designen är på många sätt rent baserad på begreppet asymmetrisk balans. Ofta verkar det som att extremt enkla mönster kan se extra ut med vackra kontraster som det här.
Robert Dabi
I det här fallet spelar bakgrunden en intressant roll i designen, men producerar inte de asymmetriska elementen vi hittills sett. Enligt min åsikt är den stora visuellt klart en förgrundsdel av designen. Vad jag älskar är dock hur det subtly blurs denna linje med något så enkelt som skuggan under bilden. Detta slår samman det med bakgrunden och skapar en vacker dynamik. Självklart är den stora bilden asymmetriskt balanserad med kopian bredvid den. Gå igenom sidorna på webbplatsen och du kommer glatt att hitta att bakgrunden ändras och sammanfogar med bilderna på väldigt intressanta sätt. En fantastisk design som känns frisk, ren och super slät. Verkar som en bra presentation för en portfölj till mig.
Tio mer mönster
Nedan har jag lämnat tio ytterligare mönster som använder sig av asymmetriska element. Som jag redan har nämnt kunde jag placera många webbplatser i den här kategorin. Så, i denna artikel har jag noggrant utvalda konstruktioner som jag anser utnyttja tillvägagångssättet på lite atypiska och kreativa sätt. Tänk på varje design i ljuset av detta ämne och jag hoppas att du kommer att få några nya idéer för att inspirera din nästa design.
Greenluv
Andersson Wise
Prognos
13 fruar
Raffles Institution
Urban Svensson
Carousel
Purlize
Bussar på bryggeriet
Humaan
Slutsats
Balans är en grundläggande del av designprocessen, och användningen av asymmetriska element är lika grundläggande. Jag älskar alltid att gräva tillbaka till grunderna för designen, eftersom jag tycker att jag alltid förstår det på ett nytt sätt som påverkar det arbete jag gör. Det finns otaliga sätt att närma sig saker och bryta våra mönster kan ofta leda till nya och nya mönster som föryngrar vår passion för våra jobb.
Vilka är dina favorit asymmetriska webbdesigner? Vem gör något annorlunda med asymmetri? Låt oss veta i kommentarerna!