Hvordan man bruger asymmetri og symmetri i design

Ethvert layout begynder med en tom side.

Derefter kommer designelementerne - et logo, menuer, tekstsektioner, fotografier, illustrationer osv.

Placeringen af elementer kan være afgørende for, hvor vellykket designet bliver. Derfor er en af de første ting, designere gør, når de begynder at arbejde på en ny side, at beslutte, hvordan elementerne skal placeres på den pågældende side.

Billedkilde: Andra C Taylor Jr

Der er to grundlæggende tilgange til at placere elementer på en side. Designere kan enten vælge en mere symmetrisk eller asymmetrisk placering af elementer.

Nu skal vi se på to effektive designprincipper, som ved første øjekast kan virke for enkle og naturlige for os til, at vi ikke skal tænke så meget over dem. Men vi gør klogt i ikke at undervurdere deres muligheder og fordelene ved deres virkninger.

Når vi fordeler kompositoriske elementer jævnt omkring et centralt punkt eller en akse, skaber vi et symmetrisk design. Et godt eksempel på symmetri i naturen er sommerfuglen - dens højre og venstre side ligner hinanden meget (selv om de ikke er identiske).

Vi finder symmetri, når to spejlsider er nøjagtigt ens, da det skaber et perfekt spejlbillede. Stik en finger af din højre hånd op mod overfladen af dit badeværelsesspejl og se på den og dens spejlbillede fra en vinkel. Hvis vi antager, at vores spejle er rene, vil vi altid bemærke, at den rigtige højre hånd og dens spejlbillede (som vendes, så det ligner en venstre hånd) er perfekt symmetriske.

Heldigvis er symmetrisk design ikke afhængig af identisk spejling. Det er kun vigtigt at komme tæt på effekten - nøjagtighed er ikke nødvendig. Husk, at du nemt kan manipulere brugerens øje uden at bekymre dig om geometrisk perfektion som en overvejelse i dit design.

Omvendt er asymmetri fraværet af enhver form for symmetri. Når vi laver et design, der består af elementer, som vi har fordelt ujævnt omkring et centralt punkt eller en akse, har vi derfor et asymmetrisk design. Vi kan udnytte asymmetri og bruge den til at henlede opmærksomheden på områder i designet eller til at formidle dynamik eller bevægelse.

Som i biologien er elementer ligesom celler eller dele af et økosystem. I sidste ende skal vi huske på, at opbygning af balance, hvilket vi kan gøre ved hjælp af symmetri, giver et "sundt" og mere effektivt design.

I denne artikel vil vi se på, hvordan symmetri og asymmetri fungerer i design. Vi vil gennemgå de grundlæggende teknikker, tips og bedste praksis for hver tilgang.

Hvad er symmetri?

Billedkilde: Faye Cornish

I lang tid blev symmetri (formel balance) anset for at være designets guldstandard. Præferencen for at vælge et symmetrisk layout er især tydelig i arkitekturen. Et godt eksempel på dette er en af verdens smukkeste bygninger - Taj Mahal. Taj Mahal har mange egenskaber, der gør den så æstetisk tiltalende, men dens symmetriske balance er en af de vigtigstedem.

Fordelene ved at bruge symmetri i design er ikke opstået ud af den blå luft, ligesom mange andre designprincipper. Det er opstået på baggrund af Gestaltprincipperne, en teori om menneskelig adfærd, der beskriver, hvordan den menneskelige hjerne strukturerer og arrangerer visuelle data.

Vores hjerne skaber naturligt orden ud fra de ting, vi ser. Det er derfor, at symmetri er så kraftfuldt. Symmetrisk design er et design, der har orden og stabilitet og derfor er let at se på.

Typer af symmetri

Billedkilde: Vincent van Zalinge

Der findes tre typer symmetri: refleksionssymmetri, rotationssymmetri og translationssymmetri.

Refleksion Symmetri

Det er nok det første, folk tænker på, når de hører ordet "symmetri". Det er også kendt som spejleffekten, og refleksionssymmetri opstår, når alt er spejlet omkring en central akse.

Aksen kan have en hvilken som helst orientering - den kan være vandret, lodret, diagonal og alt derimellem, så længe det, der er på den ene side af aksen, spejles eller reflekteres på den anden side.

Designere bruger ofte refleksionssymmetri til at give lige stor vægt til begge sider eller til at skabe en underholdende visuel effekt.

Rotationssymmetri

Denne type symmetri opstår, når alt roterer omkring et fælles centrum. Rotationssymmetri kan forekomme ved enhver vinkel eller frekvens, så længe der er et fælles centrum, som alt roteres omkring, og elementerne er lige langt fra hinanden omkring et centralt punkt.

Rotationssymmetri er ret almindelig i virkeligheden, f.eks. stråler armene på en søstjerne ud fra midten, og loftsmalerierne i mange kirker anvender også rotationssymmetri.

Webdesignere indarbejder rotationssymmetri i deres arbejde for at skildre bevægelse (f.eks. for at aflede fremskridt eller bevægelse) eller for at visualisere data på en fascinerende måde.

Translations-symmetri

Denne type symmetri opstår, når et element gentages forskellige steder i rummet, samtidig med at dets generelle eller nøjagtige orientering bibeholdes. Translationsymmetri kan ske i alle retninger, så længe elementets orientering bibeholdes.

Den samme genstand flyttes flere gange med lige store intervaller. Et hegn er et godt eksempel på translationssymmetri.

Korrekt brug af translationssymmetri kan skabe rytme i designet. Webdesignere bruger ofte translationssymmetri som et passivt element til at skabe baggrundsmønstre. Men i nogle tilfælde er det muligt at bruge translationssymmetri som et aktivt element, der formidler et budskab.

Forsøg ikke at opnå perfekt symmetri

Når det drejer sig om design, er symmetri ikke det samme som identisk spejling. Perfekt symmetri er sjælden, både i webdesign og i virkeligheden.

Når vi tænker på vores omgivelser, er de fleste naturlige genstande og skabelser omkring os ikke absolut symmetriske. Vi er f.eks. vant til at tænke på vores ansigt og krop som to spejlende dele. Men venstre side af ansigtet er ikke absolut identisk med højre side.

Designere kan skabe symmetri ved at lege med brugerens opfattelse af layoutet, og det er helt i orden at have små variationer på hver side, så længe seerne får en fornemmelse af symmetri i det færdige produkt.

Hvad er asymmetri?

Billedkilde: Kajetan Sumila

Asymmetri er naturligt nok fraværet af symmetri. I naturen kan vi se asymmetri næsten overalt, f.eks. i træets grene eller skyernes form, for blot at nævne nogle få.

I design bruges asymmetri ofte til at skabe visuel spænding. Samtidig kan asymmetri være et vanskeligt koncept at mestre, fordi forholdet mellem elementerne i et asymmetrisk design bliver mere komplekst. Det kan være svært at skabe et helt, sammenhængende design.

Det er derfor, at mange designere vælger forudsigelige symmetriske layouts, men designere, der mestrer asymmetri, har større frihed til at udtrykke sig.

Symmetri og balance

Mange designere mener, at balance kun kan opnås ved symmetrisk indretning.

Det sker, fordi udtrykket "asymmetri" antyder manglende balance. Selv om definitionen af asymmetri er mangel på symmetri, er det ikke mangel på balance, som nogle fejlagtigt antager - design, der mangler symmetri, skal stadig være afbalanceret.

Med andre ord, uanset hvilket layout du skaber, uanset om det er symmetrisk eller asymmetrisk, er det vigtigt at opnå balance, fordi en ubalanceret komposition føles ubehagelig for beskueren.

En god teknik til at mestre balancen (både symmetrisk og asymmetrisk) er at tænke på, at hvert element på en side har en visuel vægt. Visuel vægt afhænger af elementets størrelse (mindre objekter kan veje mindre end større objekter) og visuelle egenskaber såsom kontrast (kontrastelementer kan veje mere end neutrale elementer).

Designerne skal lege med vægten af elementerne, indtil de når en effektiv balance.

Det er naturligvis ret nemt at opnå balance i et symmetrisk layout. Det eneste, du skal gøre, er at lægge samme vægt på højre og venstre del af en side.

Når det drejer sig om asymmetrisk design, kan opgaven være vanskeligere. Du skal måske have flere små ting på den ene side for at afbalancere en stor genstand på den anden side.

Van Goghs Stjernenatten er et glimrende eksempel på asymmetrisk balance. Van Gogh skaber en balance ved at bruge objekter af forskellig størrelse og ved at lege med farver og kontraster.

En anden type balance omfatter:

• Mosaikbalance (eller krystallografisk balance) er et resultat af kaos eksempler på balance. Tænk på Jackson Pollack-malerier. Kompositionen mangler tydelige fokuspunkter, og elementerne har en ensartet vægtning. Manglen på hierarki fører til visuel støj ved første øjekast. På en eller anden måde fungerer det hele dog sammen.

Generelt gælder de samme principper om balance, som vi har i malerier, for webdesign.

En formel for perfekt balance

"Kan jeg måle balance?" er et ret almindeligt spørgsmål blandt designere. I forsøget på at finde et svar på dette spørgsmål søger mange designere efter en specifik formel, der gør det muligt for dem at beregne, om alt er i balance. Dårlig nyhed: Der findes ingen formel til at beregne balance. God nyhed: Vi kan bruge et effektivt værktøj til at afgøre, om en komposition er afbalanceret eller ej - vores egne øjne.

Erfarne designere er i stand til at bemærke ubalancerede layouts med et blik. Men for at nå dette mål skal du træne dit øje ved at arbejde på praktiske projekter og ved at lade dig inspirere af andre designeres arbejde. Jo mere du gør det, jo mere vil du stole på din egen dømmekraft, når du skal træffe en designbeslutning.

Symmetri vs. asymmetri

Billedkilde: Zachary Shakked

Når du skal designe et layout, skal du i sidste ende beslutte, om du vil skabe et symmetrisk eller asymmetrisk design. Der er ikke noget universelt svar på dette spørgsmål - valget afhænger af projektets specifikke forhold. Lad os se, hvordan symmetri og asymmetri kan bruges i design.

Når symmetri fungerer bedst

Her er et par generelle tilfælde, hvor det er bedre at følge en symmetrisk tilgang til layoutdesign:

• Du søger en mere seriøs æstetik (du ønsker at formidle klassicisme)
• Du ønsker at forbedre genkendelsen og genkaldelsen (symmetriske former gør det lettere at huske oplysninger).
• Du ønsker at skabe mere orden og struktur
• Du ønsker ikke at tænke så meget over arrangementet af elementer, men du ønsker stadig at opnå balance (symmetriske layouts er i sagens natur stabile og afbalancerede).

Lad os nu se på, hvordan disse tilfælde ser ud i virkeligheden.

Formidling af en følelse af tillid

Symmetriske layouts fungerer godt til design, der skal give en aura af tillid. Det er ikke overraskende, at mange virksomheder, der prioriterer tillid, bruger symmetri i deres design. Mange bilproducenter bruger symmetri i deres design for at skabe en følelse af stabilitet.

Symmetrisk design er forudsigeligt. Hvis du designer et websted, der kræver stabilitet (f.eks. et websted for en bank eller et forsikringsselskab), kan et symmetrisk design derfor være det rigtige valg for dig.

En side har et enkelt interaktionsobjekt

Symmetri fungerer godt på sider, der har et enkelt interaktionsobjekt. Et typisk eksempel er login- eller tilmeldingssiden. Ved at placere et vigtigt interaktionsobjekt eller en vigtig besked i midten har du et fokuspunkt centreret på siden.

Google Search-siden er et godt eksempel på et symmetrisk layout med et enkelt interaktionsobjekt.

En side har to (eller flere) lige vigtige muligheder

Symmetrisk design giver dig mulighed for at henlede opmærksomheden på alle områder af en side på samme måde. Et typisk eksempel er en onlinebutik, der sælger produkter til både kvinder og mænd. Symmetri hjælper designere med at levere to lige vigtige budskaber på samme plads.

Når asymmetri fungerer bedst

Symmetri opfattes normalt som stabilt og harmonisk, men for nogle mennesker kan stabilitet være forudsigeligt og kedeligt, mens asymmetrisk layout har tendens til at være mere interessant og dynamisk.

Vælg asymmetri, når:

• Du er klar til at bruge ekstra tid på at arrangere elementer for at finde unikke måder at opnå balance på
• Du søger et mere legende layout for at formidle brugernes interesse
• For at få layoutet til at skille sig ud.

I dag, hvor brugerne har så mange forskellige muligheder at vælge imellem, skal et websted være noget særligt for at skille sig ud fra alle de andre og reducere afvisningsraten. Når designere mestrer asymmetri, skaber de mere mindeværdige produkter.

Billedkilde: Olia Gozha

At formidle dynamik

Når webdesignere bruger udtrykket "dynamisk", henviser de til et design, hvor beskuerens øje bevæger sig rundt og gennem designet. Asymmetriske designs kan fremkalde følelser af bevægelse. Derfor bruger mange sportsbrands asymmetriske layouts og asymmetri i individuelle elementer (f.eks. logoet).

Til at tiltrække opmærksomhed

Asymmetri fanger opmærksomheden. Et korrekt asymmetrisk layout bringer automatisk beskuerens øje til fokuspunkterne - blikket falder naturligt på de kritiske dele af designet først. Ved at placere og justere elementer på en side kan du lede øjet hen til de forskellige områder.

Når du vælger fokuspunkter, skal du huske, at det primære mål med ethvert design er kommunikation. Med hver webside, du designer, fortæller du en historie til dine besøgende, så sørg for at vælge fokuspunkter, der hjælper dig med at fortælle denne historie på den mest effektive måde.

Her er et par ting, der gør det muligt at tiltrække opmærksomhed:

• Kontrast. Kontrast kan bruges både til at fremhæve et bestemt element og til at skjule det. Ved at øge kontrasten for et bestemt element får du det til at skille sig ud. Omvendt kan du ved at sænke kontrasten få et element til at forsvinde i baggrunden.
• Whitespace: Brug whitespace til at isolere et element fra et andet
• Bevægelse. Det menneskelige øje er udviklet til at være opmærksom på objekter i bevægelse
• Retningsangivelser: Øjet følger retningsangivelser (en retningsangivelse kan f.eks. være en pil, der peger i en bestemt retning).
• Menneskelige ansigter: Øjet følger øjenbanen på billedet, så den besøgende på et websted vil kigge i samme retning som en person i designet.

Kombiner symmetri og asymmetri i designet

Billedkilde: Artem Kniaz

Symmetri er ikke altid en enten/eller-beslutning. Det er muligt at skabe de mest indtagende og æstetisk tiltalende designs ved at kombinere symmetri og asymmetri.

Du kan opdele layoutet i mindre sektioner og forsøge at opnå en symmetrisk eller asymmetrisk balance i hver sektion. Du kan f.eks. have et symmetrisk layout, hvor asymmetrien bruges til at skabe interessepunkter og organisere et visuelt hierarki inden for en gruppe af ensartede elementer.

Symmetri (eller mangel på samme) kan være et effektivt værktøj i designerens værktøjskasse. Symmetri fremkalder naturligt en følelse af orden, mens asymmetri på den anden side kan hjælpe designere med at opnå unikhed og karakter i designet. Ved at kombinere de to kan man skabe design, der er unikke og mindeværdige for seerne.

Sådan bruger du Vectornators formværktøj til at skabe balance

Når det gælder om at mestre balancen mellem asymmetri og symmetri, er det brugen og placeringen af de former, du bruger i dine designs, der gør den største forskel. For eksempel opnås balance fra øjenretning ved at lege med den visuelle retning i designet ved hjælp af former.

Pegede figurer eller figurer, der flyder til et punkt i billedet, kan alle bruges til øjeblikkeligt at flytte brugerens opmærksomhed til et ønsket område.

Derfor er det vigtigt at have et innovativt formværktøj, der sikrer, at dine designs tager form, som du ønsker det.

Vectornators formværktøj giver dig mulighed for at skabe de nemmeste foruddefinerede geometriske former, såsom rektangler, cirkler, polygoner og lige linjer, men også stjerner og spiraler.

Her er en trin-for-trin-guide til, hvordan vores værktøj fungerer.

Sådan tegner du færdiglavede figurer

Hvis du vil tilføje en hvilken som helst form på lærredet, skal du holde og trække et vilkårligt sted på lærredet, mens du har valgt værktøjet Shape Tool. Du skal derefter holde en anden finger på lærredet for at gøre formens bredde og højde lige store. Dette giver dig mulighed for at tegne en perfekt firkant eller cirkel.

Hvis du vil tegne rektangler, cirkler, linjer og spiraler, skal du placere blyanten (eller fingeren) der, hvor du vil have det øverste venstre hjørne af din form. Polygoner og stjerner tegnes automatisk fra midten af din form.

Sådan redigerer du hjørneradiusen

Ethvert hjørnepunkt i en vektorform kan have skarpe eller afrundede hjørner, og i Vectornator kan du bruge hjørneradiusregulatoren til at justere ethvert hjørne i en form.

Hvis du vil ændre radius på hjørnerne af din form, skal du blot trække din finger eller blyant på hjørneradiusen i fanen stil.

Hvis du vil ændre et enkelt hjørnepunkt i din form, skal du vælge det med nodeværktøjet og derefter føre fingeren langs skyderen for hjørneradius for at justere det.

Sådan redigerer du hjørneradiusen for en polygon

Du kan justere radius på hjørnerne af din form ved at bruge menuen "Hurtige handlinger", når du vælger din form. Du skal trykke på ikonet for hjørneradius i menuen og derefter glide til venstre og højre for at ændre værdien.

Hvordan man tegner lige linjer

Aktiver Linjeværktøjet ved at vælge linjeikonet på værktøjslinjen. Placer blyanten eller fingeren der, hvor du vil have linjen til at begynde, og træk derefter til det sted, hvor linjen skal slutte. Hold en anden finger på lærredet for at fastgøre linjen horisontalt, vertikalt eller i intervaller på 45°.

Sådan skaber du stjerner

Det er nemt at lave stjerner i Vectornator ved hjælp af stjerneværktøjet. For at aktivere det skal du blot trykke på formikonet i værktøjslinjen og derefter vælge stjernen. For at tegne en ny stjerne skal du blot trykke på det sted, hvor du ønsker, at stjernens centrum skal være.

Til højre for stjerneværktøjet finder du en skyder, som giver dig mulighed for at kontrollere antallet af punkter i din stjerne. Det tal, der vises i skyderen, svarer til antallet af punkter.

Når du tegner med stjerneværktøjet, aktiverer du et par bevægelser, som hjælper dig med at ændre formens punkter og retning:

• Ændre pigernes retning - Hold og træk op og ned for at ændre retningen af stjernens pigge
• Ændre stjerneformen - Mens du tegner din stjerne, skal du holde en anden finger inde for at redigere stjernens spidsradius ved at trække fingrene.

Hvordan man tegner spiraler

Spiraler i Vectornator kan oprettes ved hjælp af spiralværktøjet. For at aktivere det skal du blot trykke på spiralikonet inde i værktøjslinjen.

Til højre for spiralen kan du styre dens aftagende værdi. Aftagende værdi angiver det beløb, hvormed hver vinding af spiralen skal aftage i forhold til den foregående vinding.

Hvis du vil tegne en ny spiral, skal du holde blyanten nede og trække den et hvilket som helst sted på lærredet. Placer din stylus (eller finger) der, hvor du vil have linjen til at begynde, og træk derefter fra bunden til toppen eller omvendt for at angive dens retning.

Konklusion

En afbalanceret komposition føles rigtig, stabil og æstetisk tiltalende.

Selv om nogle af elementerne kan være fokuspunkter og tiltrække dit øje, er der ikke ét område i kompositionen, der tiltrækker dit øje så meget, at du ikke kan se de andre områder.

Balancering af en komposition indebærer at arrangere både positive elementer og negativt rum på en sådan måde, at intet område af designet overdøver andre områder. Alt fungerer sammen og passer sammen i en sømløs helhed. De enkelte dele bidrager til deres sum, men forsøger ikke at blive til summen.

En ubalanceret komposition kan føre til spændinger. Når et design er ubalanceret, dominerer de enkelte elementer helheden, og kompositionen bliver mindre end summen af dens dele. I nogle projekter kan ubalanceret være det rigtige for det budskab, du forsøger at kommunikere, men generelt er det bedst at have afbalancerede kompositioner.

Symmetri er smukt. Det er sådan de fleste af os ser det. Symmetri fører til en følelse af harmoni og tiltalende æstetik. Symmetri forbindes også ofte med formelt og statisk. Asymmetri, derimod, selv om den ikke har nogen iboende skønhed, opfattes ofte som mere spændende og dynamisk.

Succesfulde grafiske designere ved, at nøglen til effektiv kommunikation er at beherske det visuelle koncept om balance. Når dine designs er i balance, hvilket kan ske med både symmetriske og asymmetriske designs, vil de opnå større enhed, og dit publikum vil bruge mindre energi på at optage informationen.

Det er ikke svært at forstå symmetri versus asymmetri, men det kan være svært at få det helt rigtigt i starten. Men hvis du bruger et førende værktøj som Vectornator, vil det give dig mulighed for at designe alt, hvad du kan forestille dig, op til 30 % hurtigere. Du kan skabe sofistikerede illustrationer, spektakulære layoutmockups og afbalancerede visuelle billeder på farten, når du vil.

Du kan redigere, tilpasse eller endda oprette dine egne pensler. Hver penselstrøg er trykfølsom, så hele tegneoplevelsen føles som pen på papir. Prototyper og mockups har aldrig været hurtigere, og infografikker er en leg. Mulighederne er bogstaveligt talt uendelige.

Som ordsproget siger: "Balance er ikke noget, man finder, men noget, man skaber". Så få gang i dine kreative safter, og kom i gang med at skabe balancen mellem dine perfekt symmetriske og ufuldstændigt asymmetriske designs.