Kun kuulin ensimmäisen kerran idean symmetriset suunnittelumallit täällä Webdesigner Depotilla minulla ei ollut aikomusta kaivaa käsitystä epäsymmetrisestä suunnittelusta.

Kuitenkin mitä enemmän ajattelin sitä, sitä enemmän tunsin joutuneen kattamaan aiheen vastakkain joitain symmetrisiä suunnittelumalleja kiertäviin ajatuksiin.

Epäsymmetrisessä suunnittelussa löydämme malleja, jotka sisältävät elementtejä, jotka eivät luo peilikuvaa. Nämä epäsymmetriset mallit ovat useimmiten tosiasiallisesti tasapainossa, muttei täysin täysin samanlaisia ​​puolia.

Tällainen muotoilu on itse asiassa paljon helpompaa, koska suurin osa sisällöstä ei riipu täydellisestä symmetriasta.

Katsotaanpa erilaisia ​​sivustoja, jotka tuovat tämän mallin toimintatapaan ja ehkä löytävät joitain ideoita, jotka voivat vaikuttaa oman suunnittelutyöstänne.

Johdanto epäsymmetrian käyttöön

Bully Entertainment

Asymmetrisen muotoilun johdannoksi tämä dramaattinen muotoilu antaa melko hyvän lähtökohdan. Vaikka ei todellakaan ole mitään syytä, että tätä mallia ei voitu muokata täydellisen symmetrian aikaansaamiseksi, se ei juuri toimi kovinkaan hyvin. Suuri, runsaasti kuvitetut mallit syrjäyttivät kotisivun tekstin kauniisti. Niiden koko varmistaa, että ne ovat erittäin näkyviä ja ne ovat suunnittelun tärkein visuaalinen vetovoima. Tämä luonnollinen tasapaino yhden suuren elementin ja tiheämmin pakattujen vaihtoehtojen välillä on hyvin yleinen lähestymistapa.

Jorge Rigabert

Tämä ulkoasu on melko tavallinen web-asettelu. Pieni sivupylväs, joka sisältää avaimen navigoinnin, yhdistettynä paljon suuremman sarakkeen sivustojen sisältöön. Tämä on ehkä yksi harvoista vakiokuvioista, joita suunnittelijat käyttävät päivittäin. Uskon, että suuri osa suunnitteluprosessista tapahtuu tässä tapauksessa semi automaattisesti. Tässä tapauksessa sivupalkki, joka epäsymmetrisesti tasapainottaa sisällön saraketta. Sivupalkissa on tummempi väri, joka auttaa sitä kompensoimaan kevyemmän sisältökanavan. Ilman tummaa taustaa sivupalkki olisi todennäköisesti kadonnut eikä erottunut melkein yhtä hyvin.

Kuvat tasapainottamaan tekstiä

Toinen melko tavanomainen lähestymistapa web-muotoiluun, joka päättyy epäsymmetrisenä muotoilun elementteinä, on tekstin yhdistäminen kuvien kanssa. Kuten alla olevissa näytteissä näet, jokaisella on suuri kuva. Tämä kuva on pariliitos jollain tavalla tekstin lohkolla. Tämä yhdistelmä on erittäin yleinen.

Temppu on melko ilmeinen, vain varmista, että kaksi täydentävät toisiaan jollakin tavalla. Koska nämä kaksi elementtiä yleensä luo silmukan, on tärkeää, että ne jotenkin toimivat yhdessä. Ilmeisin lähestymistapa on kuvauksen kirjaimellisesti kuvata tai näyttää, mitä teksti puhuu. Toinen tavallinen taktiikka on saada kuva laajentamaan tekstiin esitetty ajatus.

Tässä on joitain näytteitä harkitsemaan.

Kakku makea kakku

Tämä malli on varmasti tasapainoinen, mutta se käyttää useita epäsymmetrisiä elementtejä tämän saavuttamiseksi. Huomaa suuri kuva kakusta yhdistettynä tekstiin. Kuvat ovat melko ilmeisiä, mutta olennaisen tärkeitä. Tässä tapauksessa kakku ei vain kerro meille, että tämä on kakkuja, mutta mitä erityistä tyyliä he voivat tarjota. Yhdistä tämä asiaan liittyvä selventävää tekstiä ja sinulla on melko kauhea myyntipiste. Tämä ei edes mainitse uskomattoman maukasta suunnittelua, jonka tämä sivusto on kääritty.

Lisää soodaa

Tässä esimerkissä hyödynnetään myös epäsymmetrisiä elementtejä, jotka perustuvat suurta kuvaan yhdistettynä tekstilohkoon. Tässä tapauksessa yhteys ei ole läheskään yhtä selvä. Ei ole mitään selvää myyntiä. Sen sijaan kuva muuttuu koristeellisemmaksi ja luo sivuston yleisen tyyli. Mielestäni se on hieman vähemmän funktionaalinen, mutta on todella vaikea sanoa tietämättä, kuinka tehokas sivusto on. Näyttäisi siltä, ​​että tällaisella visuaalisella ilmiöllä on ainutlaatuinen tavoite houkutella sinua kaivaamaan hieman enemmän nähdäkseen, mistä he ovat. Eräänlainen teaser, jos haluat.

Adaptive Web Design

Kuten olet todennäköisesti jo selvittänyt, tämä kuvio on yhtä yleinen kuin väri sininen. Uskallan spekuloida, että lähes jokainen sivusto päätyy tekemään tällaisen visuaalisen työkalun toimimaan jossain vaiheessa. Mielestäni tämä yhteinen paikka luonne tekee siitä aiheen, josta kannattaa keskustella. Usein kertaa löydän eniten inspiraatiota ja tuoreita ideoita, kun tarkastelen asioita, joita teen jatkuvasti ilman ajatuksia.

Tämä yksinkertainen sivusto edistää kirjaa. Ja tietysti tärkein elementti, kun teet siihen, on suuri kuva kirjasta. Yhdistä tämä suuri tekstiryhmä ja sinulla on tasapainoinen alue, joka sisältää kaikki kriittiset elementit. Tärkeintä on, että se on päättynyt silmään tarttuvalla kutsulla toimintaan. Tämän alueen jatkuvuus on yksinkertainen ja paikallaan. Silmät kulkevat helposti sen läpi ja kuluttavat kriittiset tiedot. Se ei ole sekava tai monimutkainen tai älykäs tai hankala. Lähestymistapa on yksinkertainen ja selkeä.

Etualan ja taustan osat

Eräs uusi lähestymistapa epäsymmetriseen muotoiluun on käyttää taustatietoja, jotka asymmetrisesti tasapainottavat etualalla olevia. Tällainen lähestymistapa luo mielenkiintoisen dynamiikan, jossa tausta palvellaan enemmän toiminnallisella roolilla osana sisältöä ja on silti vielä osa sivuston taustaa. Useimmiten tämä tapahtuu yksinkertaisten päällekkäisyyksien avulla, jotka luovat syvyyden illuusion. Tässä on joitain näytteitä harkitsemaan.

Peter McLeavey Gallery

Tämä gallerian verkkosivusto on täydellinen esimerkki tästä ideasta. Tässä tausta-elementti palvelee monia rooleja. Ensinnäkin tämän jakson kohta luo epäsymmetrisen tasapainon suuren harmaan ympyrän kanssa etualalla. Tämä visuaalinen yhdistelmä luo kaksi aluetta, jotka aiheuttavat silmät pyörimään edestakaisin. Tämä mielestäni on hyvä asia.

Vasemmanpuoleinen elementti sisältää tärkeimmät tuotemerkit ja linkit sivuston sisältöön, kun tausta-elementti kertoo sivuston kontekstista. Katsot gallerian sivuston, ja tämä tulee runsaasti ilmeiseksi muutamassa sekunnissa laskeutumisesta sivustolle. Rakastan, että niin informatiivinen elementti kuin taustalla voi myös olla merkittävä rooli suunnittelussa ja yleinen tyyli sivuston. Varsinkin kun se kelpaa niin täydellisesti tuotteen sisällön kanssa, jota sivusto tarjoaa. Tällainen yksinkertainen lähestymistapa, mutta erittäin tehokas.

Aleksandar Grkinic

Tämä yksinkertainen minusta sivu sisältää myös tämän yksinkertaisen idean, jossa taustaelementti tasapainottaa etualalla yhden epäsymmetrisesti. Tällöin taustalla ei kuitenkaan ole täysin selvää. Ja minä todella rakastan sitä. Syvyyden illuusio on täysin siellä ja ilman minkäänlaista päällekkäisyyttä, on todella vaikea päättää, mitä taustaa todella on. Luulen, että voisimme väittää, että hyppääjä ei ole lainkaan taustalla. Epäsymmetrinen tasapaino on kuitenkin selvä. Ja ilman eri elementtien kaunista yhdistelmää sivu ei olisi olemassa. Suunnittelu perustuu monin tavoin puhtaasti epäsymmetrisen tasapainon käsitteeseen. Usein kertaa näyttää siltä, ​​että äärimmäisen yksinkertaiset mallit voivat näyttää poikkeuksellisilta, kuten kauniilla kontrastilla.

Robert Dabi

Tässä tapauksessa taustalla on mielenkiintoinen rooli suunnittelussa, mutta se ei tuota tähän mennessä nähtyjä epäsymmetrisiä elementtejä. Mielestäni suuri visuaalisuus on selvästi etualan muotoilun osa. Mutta mitä rakastan, se on, miten se hienosäätää tämä rivi niin yksinkertaisella kuin kuvan alapuolella oleva varjo. Tämä yhdistää sen tehokkaasti taustalla ja luo kauniin dynamiikan. Ilmeisesti suuri kuva on asymmetrisesti tasapainossa sen vieressä olevan kopion kanssa. Siirry sivuston sivujen läpi ja huomaat miellyttävän, että tausta muuttuu ja yhdistyy visuaalisesti hyvin kiinnostaviin tapoihin. Upea muotoilu, joka tuntuu tuoreelta, puhtaalta ja erittäin sileältä. Näyttää siltä, ​​että minulle on hauska esitys portfoliosivustolle.

Kymmenen muuta mallia

Seuraavassa olen esittänyt kymmenen muuta mallia, jotka käyttävät epäsymmetrisiä elementtejä. Kuten jo mainitsin, voisin sijoittaa paljon sivustoja tähän luokkaan. Joten tässä artikkelissa olen valinnut huolella valittuja malleja, joiden mielestäni käytän lähestymistapaa hieman epätyypillisillä ja luovilla tavoilla. Harkitse jokaisen mallin tämän aiheen valossa ja toivon, että saisit uusia ideoita inspiroimaan seuraavan mallinne.

Greenluv

Andersson Wise

Ennuste

13 vaimoa

Raffles instituution

Urban Svensson

Karuselli

Purlize

Bussit panimossa

Humaan

johtopäätös

Tasapaino on olennainen osa suunnitteluprosessia, ja epäsymmetristen elementtien käyttö on yhtä perustavaa laatua. Rakastan aina kaivaa takaisin suunnittelun perusasiat, sillä olen sitä mieltä, että aina ymmärrän sen uudella tavalla, joka vaikuttaa työn tekemiseen. On olemassa lukemattomia tapoja lähestyä asioita ja murtaa malleja voi usein johtaa tuoreita ja uusia muotoja, jotka nuorentavat intohimomme työpaikoistamme.

Mitkä ovat suosikki asymmetriset sivustosi mallit? Kuka tekee epäsymmetristä jotain erilaista? Kerro meille kommentit!