Hvordan mestre layoutdesign

En fullstendig guide for å lære det grunnleggende om visuell design.

Se også: Hvordan designe varer

Million-dollar-spørsmålet: hva er hemmeligheten bak godt design?

Vi kan gå filosofisk rundt denne. , men generelt sett ligger den velkjente 'hemmeligheten' til god design i måten du organiserer dine visuelle elementer, i forhold til lerretet ditt og med hverandre. I utgangspunktet har vi nettopp beskrevet layoutdesign. Som, når du tenker på det, er overalt hvor du ser.

Ta for eksempel layouten til et magasin. Designet deres følger et klassisk rutenettsystem (vi skal lære alt om rutenett på et minutt). Alt er vanligvis justert til venstre, høyre og nederst. Spesielt kolonnene har en distinkt begrunnet justering som gjør siden ikke bare visuelt tiltalende, men også lettlest og autoritativ. De store overskriftene tiltrekker seerens oppmerksomhet, mens underoverskriften kommer som en kontrast i størrelse for å skape et visuelt hierarki av informasjon.

Linda Gaom, Behance

Alle disse egenskapene gjør siden design rent, strukturert og lett å lese, og de er i tråd med tipsene vi skal snakke om neste gang. Men først, la oss forstå mer om selve layoutdesign.

Hva er layoutdesign?

Layoutdesign dreier seg om arrangementet av grafiske elementer for å tiltrekke leserens oppmerksomhet og formidle et bestemt budskap på en visuelt tiltalende måte .

Så vi snakker ikkehvilestedet, mens andre elementer gir retning.

En enkel måte å forstå dette på er ved å ta eksempelet med nettstedet vårt, for eksempel. Grafikk er tydelig atskilt fra teksten, og det samme er oppfordringene til handling, slik at seerens oppmerksomhet navigerer fra en klynge med informasjon til den neste.

Prinsipp #5. Bruk Contrast

Sørg for at du har nok kontrast i designet.

Contrast hjelper til med å organisere designet ditt og vil etablere et sårt tiltrengt hierarki og legge vekt på det som er viktig.

Mer enn det, god bruk av kontrast gir også visuell interesse gjennom hele designet. La oss innse det, en layout der alt har samme størrelse, form eller farge kommer til å se kjedelig ut. Kontrast krydrer ting.

Din første tanke kan være fargekontrast, for eksempel varm mot kjølig, mørk mot lys, blå mot oransje. Men selv om farge er et ekstremt viktig prinsipp for kontrast, er det også kontraster av type, justering og størrelse. Og husk, kontrast er også relativ. Det har kun mening i sammenstilling med andre elementer.

Her er noen eksempler på oppsett som bruker denne regelen på en smart og vakker måte. Legg merke til kontrasten i typografi, farger og til og med kontrasten i størrelsen mellom elementene.

Kilde: IAG Reconciliation Action Plan

Prinsipp #6. Repetisjon, mønster, rytme

Når vi tenker på repetisjon, tenker viav det samme elementet om og om igjen.

Men det er forskjellig i design. Det er definitivt ikke så kjedelig som det. Når den brukes riktig, kan repetisjon faktisk styrke designet ditt.

Prøv å identifisere og gjenbruk et motiv gjennom hele oppsettet ditt, slik at ulike områder føles koblet sammen og del av samme komposisjon. Det vil hjelpe designet ditt med å få et tema. Ved å gjenta elementer leverer du ikke bare i henhold til forventningene til publikum, men du vil også forbedre brukeropplevelsen. Å være konsekvent gjør at brukerne føler seg mer komfortable.

Du kan gjøre dette ved å gjenta former eller symboler. Eller til og med et fargevalg, et skriftsnitt og den samme stilen generelt.

En god vane å sette seg inn i er å bruke en skrifttype med en stor familie. Begrens det forskjellige antallet mønstre, linjevekter/stiler og farger, og gjenta hele veien. Prøv også å holde stilen på bilder og grafikk den samme. Bruk for eksempel illustrasjoner av samme kunstner.

Kilde: Thepentool.co

That's it. Dette er de seks prinsippene som vil hjelpe deg å organisere designet og oppnå en renere, mer profesjonell og balansert layout.

Men reisen din slutter ikke her. Grafisk design er ikke en eksakt vitenskap, og den bør ikke begrenses til tips og prinsipper. Som det er sant på alle områder av skapelsen, er det ingen streng tommelfingerregel. Å bryte ut av disse tipsene på subtile måter vil legge til dybde og variasjondesignene dine.

Likevel er de et flott utgangspunkt, og vi oppfordrer deg til å prøve dem. Og la oss få vite hvordan de fungerte!

Last ned Vectornator for å komme i gang

Ta designene dine til neste nivå.

Last ned fil om logodesign her. Men utformingen av trykt materiale, som aviser, magasiner, plakater og deres digitale motstykker, samt web-, app- eller UX/UI-design.

Ordet «layout» gir oss mange hint. Det betyr et arrangement av forhåndsbestemte elementer på en side.

Når en layout er effektiv, ser den bra ut, og den veileder seeren til å forstå budskapet designen prøver å formidle. Å forstå layout er derfor nøkkelen til å skape engasjerende, effektive, brukervennlige og behagelige komposisjoner.

Hvis en layout ikke formidler budskapet sitt godt til publikum, eller med andre ord, det "leser ikke godt" ", vil designet være ineffektivt uansett hvor trendy det ser ut. Når det gjelder layoutdesign, erstatter innhold trender og gimmicker.

Formålet med layoutdesign

For å formidle et budskap raskt

Dette er nøkkelen. Layoutdesign etablerer forholdet mellom grafiske eiendeler for å oppnå en jevn flyt av øyebevegelser for maksimal effektivitet og effekt.

For å skape balanse

Å bruke prinsippene for layoutdesign er den enkleste måten å lage en følelse av balanse og symmetri i designprosjektene dine uten å bli kjedelige.

For å skape sammenheng

Layout hjelper deg med å ordne de mange elementene i designet på en lettfordøyelig, sammenhengende og logisk måte.

Å skape skjønnhet

Balanse og struktur skaper naturlig skjønnhet.Hvis layoutdesignet ditt er gjort riktig, vil det automatisk bli visuelt tiltalende for seeren. Jo mindre innsats seerne trenger å legge ned for å forstå et budskap, jo mer attraktivt vil designet ditt virke.

Designer av Frank Philippin for sin bok "I Used to Be a Design Student: Then - Nå.' Kilde: DesignBoom

The Elements of Layout Design

Text

Dette inkluderer ikke bare tekstens brødtekst eller avsnitt, men også overskrifter, underoverskrifter, topptekster og bunntekster. Ditt valg av typografi, farge og størrelse vil oppnå ulike effekter på hvordan layouten vil oversettes til publikum.

Bilde

De vanligste bildene er fotografier, illustrasjoner eller infografikk.

Former

Former kan være geometriske, som er veldig kantete, eller de kan være organiske, som etterligner den naturlige verden. De kan også være abstrakte. Abstrakte former har vært veldig trendy det siste året, ettersom vi har sett webdesignere som har tatt dem inn i komplekse og vidstrakte komposisjoner.

Former kan erstatte et bilde. Eller de kan brukes til å legge til grafiske elementer på en side, fremheve tekst eller avgrense rommet mellom andre visuelle elementer.

White space

Ethvert layoutdesign vil ha en viss mengde mellomrom som lar elementene dine puste og skiller seg ut på egenhånd.

The Golden Principles of Layout Design

Du vil legge merke til at prinsippeneav layout design følger mange av de grunnleggende prinsippene for design. Som å bruke farger på en bestemt måte, typografi, repetisjon, kontrast, hierarki og balanse.

Prinsipp #1. Bruk Grids

Grids hjelper designere med å plassere ulike designelementer som tekst og bilder på en måte som ser sammenhengende ut og lett å følge.

De gir en følelse av orden, de hindrer elementer i å overvelde hverandre , og viktigst av alt, rutenett vil også korrigere justeringen. Få arbeidet ditt til å føles renere og mer profesjonelt.

Kilde: hgmlegal.com

The anatomy of grids

Du tror kanskje det bare er vertikale og horisontale linjer, men et rutenett består av flere deler. Mange, faktisk. Her er den viktigste terminologien du trenger å vite i et grunnleggende rutenett:

• Format er hele området for det endelige designet. Så hvis du designer noe for trykk, er formatet siden, og hvis du er en webdesigner, er formatet nettsiden eller nettleservinduet.
• Marger er de tilsiktede tomme mellomrommene mellom formatet og designet.
• Flytlinjer er de horisontale linjene som skiller layouten din i parallelle seksjoner. Flytlinjer hjelper med lesbarheten til designet ditt og veileder leseren til å følge innholdet riktig.
• Moduler er blokkene som dannes av de horisontale linjene og vertikalestrømningslinjer for ethvert rutenett. Hvis du tenker på det, er de byggesteinene i ethvert rutenett. Alle de vertikale modulene dine lager kolonnene dine, mens alle de horisontale rutenettene dine lager radene dine.
• Regioner er grupper av tilkoblede moduler, enten vertikale eller horisontale. Det er ingen regler for hvordan du bestemmer deg for å organisere disse.

Kilde: Radversity

Typer grids

Layout-nett ble først brukt til å arrangere håndskrift på papir.

De dateres tilbake til så tidlig som på 1200-tallet, da den franske kunstneren Villard De slo sammen rutenettsystemet med det gylne snitt for å produsere trykte sideoppsett med marger. Du kan se dette rutenettsystemet den dag i dag, som de fleste trykte bok- og magasinoppsett beviser. Utgivere, redaktører og designere foretrekker å bruke standard rutenett, ikke bare fordi de ser bra ut, men fordi leserne har begynt å forvente at visse designelementer skal være på et bestemt sted.

Grid kan utformes på to måter: symmetrisk eller asymmetrisk. Symmetriske rutenett følger en senterlinje, der de vertikale og horisontale områdene er lik hverandre; og kolonner har samme bredde.

I et asymmetrisk rutenett , som navnet antyder, er ikke margene og kolonnene identiske.

Basert på denne klassifiseringen er det fem hovedtyper av layoutrutenett som brukes over hele verden som du kan stole på:

Manuskriptrutenett er den vanligste typen rutenett for dokumenter. De skiller topptekst, bunntekst og marger, og lager i utgangspunktet et rektangel inne i formatet (eller siden) som gir grensene til teksten din. De er basen for magasiner, aviser og bøker. Så det er nok oppsettet du er mest kjent med.

Kilde: UXplanet

Kilde: Radversity

Se også: Hvorfor verdens kjærlighet til Mumindalen stikker dypt

Kolonnenett er en annen favoritt innen magasinpublisering. Et typisk magasinoppsett bruker spalter for å skille tekst inn i lettleste deler. Men de er veldig populære for nettsteder også. Du kan bruke alt fra to opp til seks rutenett. Mer er mulig, men ikke vanlig. En veldig viktig ting med søylenett er at avstanden mellom søylene, eller takrennene, er like avstand fra hverandre.

Symmetriske søylenett brukes for eksempel av aviser, mens et asymmetrisk søylenett foretrekkes i webdesign .

Kilde: UX Planet

Kilde: Radversity

Modulære rutenett ligner på kolonnenettet, men de står også for de horisontale strømningslinjene. Denne typen rutenett er nødvendig når du skal organisere ulike elementer i layouten din og kolonnenettene rett og slett ikke er nok.

Modulære rutenett har like store moduler som gjør det veldig enkelt å visualisere romsonene dine på forskjellige måter.

Kilde: UXPlanet

Kilde: Radversity

Baseline grids er fantastisk for tekstbaserte komposisjoner. En grunnlinje er linjen der teksten hviler når du skriver, og foran er avstanden mellom to grunnlinjer. Lurer du på hvor stor overskriften eller underoverskriftene dine bør være?

Grunnlinjenett er her for å gi teksten en flytende rytme.

Kilde: UX Planet

Kilde: Fragaria

Hierarkiske rutenett ser mindre ut som et rutenett enn alle deres motparter. Ikke desto mindre er de veldig nyttige når du organiserer designelementer i rekkefølge av betydning. Hierarkiske rutenett kan være basert på modulære rutenett, eller du kan til og med lage dine egne. Nettsteder bruker dette rutenettet mye, spesielt digitale magasiner og aviser har en tendens til å stole mer på hierarkiske rutenett i stedet for kolonnenett i overgangen til å bli digital.

Kilde: UX Plane

Prinsipp #2. Bruk negativ plass

Vi tror ofte at tomhet, stillhet eller mangel på farger er en dårlig ting. Men vi vurderer ikke hvordan de er det solide grunnlaget for kontrasten.

Også kalt hvitt rom, negativt rom er det området i designet ditt som ikke har noen faktiske elementer. Det er området som står tomt. Det omgir ikke bare eiendelene dine, det skaper også de nødvendige båndene mellom dem. På grunn av det er negativ plass et rettmessig designelement og har en enorm innvirkning på hvor effektiv layouten din erdesign er.

God vs dårlig negativ plass

Negativ plass vil hjelpe å skille ulike områder i designet ditt, samtidig som det lar layouten din puste. Det hjelper med visuelt hierarki og visuell balanse; det setter brukerens fokus på kjerneelementene; det reduserer nivået av distraksjon; og til slutt gir det stil og eleganse til designet ditt.

Uerfarne designere kan ha en tendens til å fylle ut så mye av lerretet som mulig, ved å skalere opp tekst eller blåse opp en logo eller et bilde. Men å gi elementene rom gjør det mulig for seeren å plukke på visse informasjonssignaler raskere og mer komfortabelt.

Hvis alt skriker etter seerens oppmerksomhet, blir ingenting hørt.

– Aaron Walter, 'Design for emotion'

En enkel måte å bestemme det negative rommet på er å bruke et modulært rutenett. Ved å plassere det på toppen av designet ditt, kan du enkelt visualisere hvilke moduler som kan forbli tomme, og hvilke som bør fylles ut.

Designer av Brunswicker, Kilde: Codesignmag.com

Prinsipp #3. Velg et enkelt knutepunkt

Har en klient noen gang bedt deg om å gjøre logoen større? Og så for å gjøre overskriften enda større?

Man kan ikke legge vekt på alt. Det overvinner poenget med god design. Akkurat som tid er fokus relativt. For at ett element skal skille seg ut, må et annet fungere som bakgrunn. Noen elementer må dominere andre for at designet ditt skal viseset visuelt hierarki.

Fokuspunktet i et design er det ene elementet med størst visuell vekt. Det er elementet som tiltrekker blikket først, mer enn noe annet i layouten din.

Et samlingspunkt vil kunngjøre til publikum hvor deres seerreise starter på designet ditt. Så det er begynnelsen på historien du forteller.

Dette kan vanligvis oppnås ved å bruke et stort bilde eller en stor typografikilde. Legg merke til hvor effektivt fokuspunktet nedenfor er

Designet av Braulio Amado for Bloomberg Businessweek, Kilde: Det er hyggelig at

Men mens et fokuspunkt vil trekke oppmerksomheten til publikum i, den neste regelen vil hjelpe den.

Prinsipp #4. Tenk på nærhet og flyt

Prinsippet om nærhet er enkelt. Sørg for at elementer som er relatert til hverandre er plassert sammen.

Nærhet indikerer at de visuelle ressursene er koblet sammen og blir en visuell enhet som hjelper deg med å organisere layouten din.

Så kun klynge designelementer som har et forhold til hverandre, og bruk lommer med informasjon om designet for å veilede publikum til det relevante innholdet de trenger å konsumere. Dette kalles også flytprinsippet.

Kilde: Satori Graphics

Et design med god flyt vil lede seernes blikk gjennom hele layouten, fra element til element, med letthet. Dine fokuspunkter vil trekke øyet og bli