Asymmetrisk balance i webdesign
Da jeg først dækkede ideen om symmetriske designmønstre her på Webdesigner Depot Jeg havde ikke til hensigt at grave ind i begrebet asymmetrisk design.
Men jo mere jeg tænkte på det, desto mere følte jeg mig tvunget til at dække emnet for at kontrastere nogle af de ideer, der drejede sig om symmetriske designmønstre.
I asymmetrisk design finder vi design, der indeholder elementer, der ikke skaber et spejlbillede. Ofte er disse asymmetriske designs faktisk afbalancerede, men bare ikke gennem helt ensartede halvdele.
Denne form for design er faktisk langt lettere at komme forbi, i betragtning af at det meste indhold ikke gør sig til perfekt symmetri.
Lad os overveje en række websteder, der sætter denne design tilgang til arbejde og måske opdage nogle ideer, der kan påvirke dit eget design arbejde.
Introduktion til brugen af asymmetri
Bully Entertainment
Som en introduktion til begrebet asymmetrisk design giver dette dramatiske design et ret godt udgangspunkt. Selv om der virkelig ikke er nogen grund til, at dette design ikke kan omkonfigureres for at skabe en perfekt symmetri, ville det bare ikke fungere næsten lige så godt. De store, rigt illustreret design udligner teksten på hjemmesiden smukt. Deres størrelse sikrer, at de er yderst synlige, og de er den største visuelle drivkraft i designet. Denne naturlige balance mellem et enkelt stort element og et tættere pakket alternativ er en meget almindelig tilgang.
Jorge Rigabert
Dette layout præsenterer et forholdsvis standard weblayout. En lille sidekolonne, der indeholder nøgle navigation, parret med en meget større kolonne for indholdet af websteder. Dette er måske en af en håndfuld standard layouts, der bruges dagligt af designere. Jeg tror, at meget af designprocessen i dette tilfælde sker semi automatisk. Overvej sidebjælken i denne sag, som asymmetrisk afbalancerer indholdskolonnen. Sidebjælken har en mørkere farve, som hjælper den med at kompensere for den lettere indholdskanal. Uden den mørkere baggrund vil sidebaret sandsynligvis gå tabt og ikke skille sig ud næsten også.
Billeder til at afbalancere tekst
En anden ret standard tilgang til webdesign, der ender med at være et asymmetrisk designelement, er parring af tekst med billeder. Som du vil se i nedenstående prøver, har hver et stort billede. Dette billede er parret på en eller anden måde med en blok af tekst. Denne kombination er meget almindelig.
Tricket er ret indlysende, bare sørg for de to komplementer hinanden på en eller anden måde. I betragtning af at disse to elementer normalt vil skabe en sløjfe for øjnene, er det vigtigt, at de på en eller anden måde arbejder sammen. Den mest oplagte tilgang er at få billedet bogstaveligt at illustrere eller vise, hvad teksten snakker om. En anden fælles taktik er at få billedet til at udvide ideen i teksten.
Her er nogle eksempler at overveje.
Cake Sweet Cake
Dette design er helt sikkert velafbalanceret, men det gør brug af flere asymmetriske elementer for at opnå dette. Bemærk det store billede af en kage kombineret med teksten. Billedet er ret indlysende, men fundamentalt vigtigt. I dette tilfælde informerer kagen ikke kun os om, at dette er en kagebutik, men hvilken bestemt stil de kan tilbyde. Kombiner dette med den afklarende tekst, der er forbundet med den, og du har en smuk darn klar salgsplads. Dette er ikke engang at nævne det utroligt velsmagende design, dette websted er pakket ind i.
Mere soda
Dette eksempel benytter også asymmetriske designelementer baseret på et stort billede kombineret med en tekstblok. I dette tilfælde er forbindelsen næsten ikke så klar. Der er ikke noget indlysende salgselement involveret. I stedet bliver billedet mere dekorativt og skaber en generel stilfølelse for webstedet. Efter min mening er det lidt mindre funktionelt, men det er virkelig svært at sige uden at vide præcis, hvor effektiv webstedet er. Det ser ud til, at et visuelt som dette har et entydigt mål om at lokke dig til at grave lidt mere for at se, hvad de handler om. En slags teaser, hvis du vil.
Adaptive Web Design
Som du sikkert har fundet ud af, er dette mønster omtrent lige så almindeligt som farven blå. Jeg ville turde spekulere på, at næsten hvert websted ender med at sætte et visuelt værktøj som dette til at arbejde på et tidspunkt. Jeg tror, at denne fælles sted natur gør det et emne værd at diskutere. Ofte finder jeg mest inspiration og friske ideer fra at genoverveje ting jeg gør igen og igen uden at tænke.
Dette enkle websted fremmer en bog. Og selvfølgelig er hovedelementet som du lander på det et stort billede af bogen. Kombiner dette med den store tekstblok, og du har et velafbalanceret område, som indeholder alle de kritiske elementer. Vigtigst er det færdigt med et iøjnefaldende opfordring til handling. Kontinuiteten i dette område er simpel og spot on. Øjnene flyder let igennem det og forbruger den kritiske information. Det er ikke forvirrende, eller kompliceret, eller klog eller vanskelig. Tilgangen er enkel og klar.
Forgrunds- og baggrundselementer
En frisk tilgang til asymmetrisk design er at gøre brug af baggrundselementer, der asymmetrisk balancerer forgrunden. Denne type tilgang skaber en interessant dynamik, hvor baggrunden tjener mere en funktionel rolle som en del af indholdet, og alligevel er det stadig en del af webstedets baggrund. Ofte sker dette gennem enkle overlapninger, der skaber illusionen af dybden. Her er nogle eksempler at overveje.
Peter McLeavey Gallery
Galleriets hjemmesider er en perfekt demonstration af denne ide. Her tjener baggrundselementet mange roller. Først til dette punkts punkt skaber den en asymmetrisk balance med den store grå cirkel i forgrunden. Denne visuelle kombination skaber to områder, der får øjnene til at hoppe frem og tilbage. Dette er efter min mening en god ting.
Elementet til venstre indeholder den vigtigste branding og links til webstedets indhold, mens baggrundselementet informerer dig om sammenhængen på webstedet. Du kigger på et galleri side, og dette bliver overflødigt indlysende inden for få sekunder landing på stedet. Jeg elsker, at et sådant informativt element, da baggrunden også kan spille en stor rolle i webstedets design og overordnede stil. Især når det ekko så perfekt sammen med produktets kontekst, tilbyder webstedet. Sådan en simpel tilgang, men meget effektiv.
Aleksandar Grkinic
Denne enkle om mig side omfatter også denne enkle idé, hvor et baggrundselement afbalancerer en forgrundsgrundlag en asymmetrisk. I dette tilfælde er baggrunden imidlertid ikke helt klar. Og det er det jeg virkelig elsker om det. Illusionen af dybden er helt der, og uden nogen form for overlapning er det faktisk svært at bestemme, hvad baggrunden faktisk er. Jeg antager, at vi kunne argumentere for, at den person, der hopper, ikke er i baggrunden overhovedet. Uanset hvad er den asymmetriske balance klar. Og uden den smukke kombination af forskellige elementer ville siden ikke eksistere. Designet er på mange måder udelukkende baseret på begrebet asymmetrisk balance. Ofte forekommer det, at meget enkle designs kan se ekstraordinært ud med smukke kontraster som dette.
Robert Dabi
I dette tilfælde spiller baggrunden en interessant rolle i designet, men producerer ikke de asymmetriske elementer, vi har set hidtil. Efter min mening er det store visuelle klart en forgrundsdel af designet. Hvad jeg elsker er dog, hvordan det subtly blurs denne linje med noget så simpelt som skyggen under billedet. Dette fusionerer det effektivt med baggrunden og skaber en smuk dynamik. Det store billede er naturligvis asymmetrisk afbalanceret med kopien ved siden af det. Gå gennem siderne på webstedet, og du vil glædeligt finde ud af, at baggrunden ændres og fusionerer med billederne på meget interessante måder. Et fantastisk design, der føles frisk, ren og super glat. Virker som en god præsentation for en porteføljeside for mig.
Ti mere designs
Nedenfor har jeg givet ti yderligere designs, der gør brug af asymmetriske elementer. Som jeg allerede har nævnt kunne jeg placere en masse websteder i denne kategori. Så i forbindelse med denne artikel har jeg omhyggeligt udvalgt design, som jeg føler benytter sig af tilgangen på lidt atypiske og kreative måder. Overvej hvert design i lyset af dette emne, og jeg håber du får nogle nye ideer til at inspirere dit næste design.
Greenluv
Andersson Wise
Vejrudsigt
13 Hustruer
Raffles Institution
Urban Svensson
Karrusel
Purlize
Busser på bryggeriet
Humaan
Konklusion
Balance er en grundlæggende del af designprocessen, og brugen af asymmetriske elementer er lige så grundlæggende. Jeg elsker altid at grave tilbage i det grundlæggende design, da jeg finder, at jeg altid forstår det på en ny måde, der har indflydelse på det arbejde, jeg gør. Der er utallige måder at nærme sig til ting, og at bryde vores mønstre kan ofte føre til friske og nye designs, der forynger vores passion for vores job.
Hvad er dine yndlings asymmetriske website designs? Hvem laver noget anderledes med asymmetri? Lad os vide i kommentarerne!