Asymmetrisk balanse i webdesign
Da jeg først dekket ideen om symmetriske designmønstre her på Webdesigner Depot Jeg hadde ingen intensjon om å grave inn i begrepet asymmetrisk design.
Men jo mer jeg tenkte på det, jo mer følte jeg meg tvunget til å dekke emnet for å kontrastere noen av ideene som dreier seg om symmetriske designmønstre.
I asymmetrisk design finner vi design som inneholder elementer som ikke lager et speilbilde. Ofte er disse asymmetriske designene faktisk balansert, men bare ikke gjennom helt like halvdeler.
Denne typen design er faktisk langt lettere å komme forbi, i betraktning at det fleste innhold ikke gir seg til perfekt symmetri.
La oss vurdere en rekke nettsteder som setter denne designtilnærmingen til arbeid og kanskje oppdager noen ideer som kan påvirke ditt eget designarbeid.
Introduksjon til bruk av asymmetri
Bully Entertainment
Som en introduksjon til begrepet asymmetrisk design gir dette dramatiske designet et ganske fint utgangspunkt. Selv om det ikke er noen grunn til at dette designet ikke kunne omkonfigureres for å produsere en perfekt symmetri, ville det bare ikke fungere nesten også. De store, illustrert designene oppveier teksten til hjemmesiden vakkert. Deres størrelse sikrer at de er svært synlige og de er den viktigste visuelle drivkraften til designet. Denne naturlige balansen mellom et enkelt stort element og et tettert pakket alternativ er en svært vanlig tilnærming.
Jorge Rigabert
Denne utformingen presenterer et ganske vanlig web layout. En liten sidekolonne som inneholder nøkkelnavigering, parret med en mye større kolonne for innholdet på nettstedet. Dette er kanskje en av en håndfull standardoppsett som brukes daglig av designere. Jeg tror at mye av designprosessen i dette tilfellet skjer semi automatisk. Vurder sidebjelken i dette tilfellet som balanserer asymmetrisk innholdskolonnen. Sidebjelken har en mørkere farge, som hjelper den til å kompensere for den lettere innholdskanalen. Uten den mørkere bakgrunnen vil sidebaret trolig gå seg vill og ikke skille seg ut like godt.
Bilder for å balansere tekst
En annen ganske vanlig tilnærming til webdesign som ender med å være et asymmetrisk designelement er sammenkobling av tekst med bilder. Som du vil se i eksemplene nedenfor, har hver et stort bilde. Dette bildet er paret på en eller annen måte med en blokk med tekst. Denne kombinasjonen er ekstremt vanlig.
Trikset er ganske opplagt, bare sørg for at de to utfyller hverandre på en eller annen måte. Gitt at disse to elementene vanligvis vil skape en løkke for øynene, er det viktig at de på en eller annen måte samarbeider. Den mest åpenbare tilnærmingen er å få bildet bokstavelig å illustrere eller vise hva teksten snakker om. En annen vanlig taktikk er å få bildet til å forlenge ideen som presenteres i teksten.
Her er noen eksempler å vurdere.
Cake Sweet Cake
Denne utformingen er absolutt velbalansert, men den bruker flere asymmetriske elementer for å oppnå dette. Legg merke til det store bildet av en kake kombinert med teksten. Bildene er ganske åpenbare, men fundamentalt viktige. I dette tilfellet informerer kaken oss ikke bare om at dette er en kakebutikk, men hvilken spesiell stil de kan tilby. Kombiner dette med den avklarende teksten som er knyttet til den, og du har en ganske darn klar salgskonkurranse. Dette er ikke engang å nevne den utrolig velsmakende utformingen dette nettstedet er pakket inn i.
Mer Soda
Dette eksemplet benytter også asymmetriske designelementer basert på et stort bilde kombinert med en blokk med tekst. I dette tilfellet er forbindelsen nesten ikke så klar. Det er ingen åpenbart salgselement involvert. I stedet blir bildet mer dekorativt og skaper en generell følelsesstil for nettstedet. Etter min mening er det litt mindre funksjonell, men det er veldig vanskelig å si uten å vite nøyaktig hvor effektiv siden er. Det ser ut til at et visuelt som dette har et enestående mål å lokke deg til å grave litt mer for å se hva de handler om. En slags teaser, hvis du vil.
Adaptive Web Design
Som du sikkert har funnet ut, er dette mønsteret omtrent like vanlig som fargen blå. Jeg ville våge å spekulere på at nesten alle nettsteder slutter å sette et visuelt verktøy som dette for å fungere på et tidspunkt. Jeg tror dette felles sted naturen gjør det et emne vel verdt å diskutere. Ofte finner jeg mest inspirasjon og friske ideer fra å revurdere ting jeg gjør om og om igjen uten tanke.
Dette enkle nettstedet fremmer en bok. Og selvfølgelig er hovedelementet som du lander på det et stort bilde av boken. Kombiner dette med den store tekstblokken, og du har et godt balansert område som inneholder alle de kritiske elementene. Viktigst av alt er det ferdig med et iøynefallende kall til handling. Kontinuiteten i dette området er enkel og flekk på. Øynene flyter lett gjennom det og bruker den kritiske informasjonen. Det er ikke forvirrende, eller komplisert, eller smart eller vanskelig. Tilnærmingen er enkel og klar.
Forgrunns- og bakgrunnselementer
En ny tilnærming til asymmetrisk design er å benytte seg av bakgrunnselementer som asymmetrisk balanser forgrunnen. Denne typen tilnærming skaper en interessant dynamikk der bakgrunnen tjener mer av en funksjonell rolle som en del av innholdet, og likevel er det fortsatt en del av baksiden av nettstedet. Ofte gjøres dette gjennom enkle overlapninger som skaper en dybdebelysning. Her er noen eksempler å vurdere.
Peter McLeavey Gallery
Galleriets nettsider er en perfekt demonstrasjon av denne ideen. Her tjener bakgrunnselementet mange roller. Først til punktet i denne delen skaper det en asymmetrisk balanse med den store grå sirkelen i forgrunnen. Denne visuelle kombinasjonen skaper to områder som får øynene til å hoppe frem og tilbake. Dette er etter min mening en god ting.
Elementet til venstre inneholder hovedmerkene og koblingene til nettstedets innhold, mens bakgrunnselementet informerer deg om innholdet på nettstedet. Du ser på et galleri, og dette blir rikelig åpenbart innen få sekunder med landing på nettstedet. Jeg elsker at et slikt informativt element som bakgrunnen kan også spille en viktig rolle i utformingen og den generelle stilen til nettstedet. Spesielt når det ekko så perfekt med konteksten til produktet som nettstedet tilbyr. En slik enkel tilnærming, men veldig effektiv.
Aleksandar Grkinic
Denne enkle om meg siden omfatter også denne enkle ideen hvor et bakgrunnselement balanserer en forgrunns en asymmetrisk. I dette tilfellet er bakgrunnen imidlertid ikke helt klar. Og dette er det jeg virkelig elsker om det. Illusjonen av dybden er helt der, og uten noen form for overlapping, er det faktisk vanskelig å bestemme hva bakgrunnen egentlig er. Jeg antar at vi kunne argumentere for at personen hopper ikke er i bakgrunnen i det hele tatt. Uansett er den asymmetriske balansen klar. Og uten den vakre kombinasjonen av forskjellige elementer, ville siden ikke eksistere. Designet er på mange måter rent basert på begrepet asymmetrisk balanse. Ofte ser det ut til at ekstremt enkle design kan se ekstraordinært ut med vakre kontraster som dette.
Robert Dabi
I dette tilfellet spiller bakgrunnen en interessant rolle i designet, men produserer ikke de asymmetriske elementene vi har sett hittil. Etter min mening er det store visuelle klart et forgrunnselement i designet. Det jeg elsker skjønt, er hvordan det subtly blurs denne linjen med noe så enkelt som skyggen under bildet. Dette fusjonerer det effektivt med bakgrunnen og skaper en vakker dynamikk. Åpenbart er det store bildet asymmetrisk balansert med kopien ved siden av den. Trinn gjennom sidene på nettstedet, og du vil glede deg over at bakgrunnen endres og fusjonerer med bildene på svært interessante måter. Et fantastisk design som føles friskt, rent og superglatt. Virker som en darn god presentasjon for en porteføljeside til meg.
Ti flere design
Nedenfor har jeg gitt ti ekstra design som benytter seg av asymmetriske elementer. Som jeg allerede har nevnt, kunne jeg legge mange nettsteder inn i denne kategorien. Så, i denne artikkelen har jeg nøye utvalgte design som jeg føler benytter seg av tilnærmingen på litt atypiske og kreative måter. Vurder hvert design i lys av dette emnet, og jeg håper du vil få noen nye ideer til å inspirere ditt neste design.
Greenluv
Andersson Wise
Prognose
13 koner
Raffles Institution
Urban Svensson
Carousel
Purlize
Busser på bryggeriet
Humaan
Konklusjon
Balanse er en grunnleggende del av designprosessen, og bruken av asymmetriske elementer er like grunnleggende. Jeg elsker alltid å grave tilbake til grunnleggende design, da jeg finner at jeg alltid forstår det på en ny måte som har innvirkning på arbeidet jeg gjør. Det finnes utallige måter å nærme seg ting på og bryte våre mønstre kan ofte føre til ferske og nye design som forynger vår lidenskap for jobbene våre.
Hva er din favoritt asymmetriske nettside design? Hvem gjør noe annerledes med asymmetri? Gi oss beskjed i kommentarene!