Sådan mestrer du layoutdesign

Sådan mestrer du layoutdesign
Rick Davis

En komplet guide til at lære det grundlæggende i visuelt design.

Millionspørgsmålet: Hvad er hemmeligheden bag godt design?

Vi kan filosofere over dette spørgsmål, men generelt set ligger den berømte "hemmelighed" bag godt design i den måde, du organiserer dine visuelle elementer i forhold til dit lærred og i forhold til hinanden. Vi har i bund og grund lige beskrevet layoutdesign, som, når du tænker over det, er overalt, hvor du kigger hen.

Tag f.eks. layoutet i et magasin. Deres design følger et klassisk gitter-system (vi skal lære alt om gitter om lidt). Alt er som regel justeret til venstre, højre og nederst. Især kolonnerne har en tydelig justeret justering, der gør siden ikke kun visuelt tiltalende, men også letlæselig og autoritativ. De store overskrifter tiltrækker beskuerens opmærksomhed.opmærksomhed, mens underoverskriften er en kontrast i størrelse for at skabe et visuelt hierarki af information.

Linda Gaom, Behance

Alle disse kvaliteter gør sidedesignet rent, struktureret og letlæseligt, og de er i overensstemmelse med de tips, som vi vil tale om næste gang. Men lad os først forstå mere om selve layoutdesignet.

Hvad er layoutdesign?

Layoutdesign vedrører arrangementet af grafiske elementer med henblik på at tiltrække læserens opmærksomhed og formidle et bestemt budskab på en visuelt tiltalende måde.

Vi taler altså ikke om logodesign her, men om design af trykte materialer som aviser, magasiner, plakater og deres digitale modstykker samt web-, app- eller UX/UI-design.

Ordet "layout" giver os en masse antydninger. Det betyder en anordning af forudbestemte elementer på en side.

Når et layout er effektivt, ser det godt ud, og det hjælper beskueren til at forstå det budskab, som designet forsøger at formidle. Forståelse af layout er derfor nøglen til at skabe engagerende, effektive, brugervenlige og tiltalende kompositioner.

Hvis et layout ikke formidler sit budskab godt til publikum, eller med andre ord, hvis det ikke "læses godt", vil designet være ineffektivt, uanset hvor trendy det ser ud. Inden for layoutdesign er indhold vigtigere end trends og gimmicks.

Formålet med layoutdesign

At formidle et budskab hurtigt

Dette er nøglen. Layoutdesign etablerer forholdet mellem de grafiske elementer for at opnå en jævn strøm af øjenbevægelser for at opnå maksimal effektivitet og effekt.

At skabe balance

At bruge principperne for layoutdesign er den mest enkle måde at skabe en følelse af balance og symmetri i dine designprojekter på uden at blive kedelig.

At skabe sammenhængskraft

Layout hjælper dig med at arrangere de mange elementer i dit design på en let fordøjelig, sammenhængende og logisk måde.

At skabe skønhed

Balance og struktur skaber naturligt skønhed. Hvis dit layoutdesign er udført korrekt, vil det automatisk blive visuelt tiltalende for beskueren. Jo mindre besvær beskueren skal bruge for at forstå et budskab, jo mere attraktivt vil dit design virke.

Designer af Frank Philippin til hans bog "I Used to Be a Design Student: Then - Now". Kilde: DesignBoom

Elementerne i layoutdesign

Tekst

Dette omfatter ikke kun tekstens krop eller afsnit, men også overskrifter, mellemrubrikker, overskrifter og sidefødder. Dit valg af typografi, farve og størrelse vil få forskellige virkninger på, hvordan dit layout vil blive opfattet af dit publikum.

Billede

De mest almindelige typer billeder er fotografier, illustrationer og infografikker.

Se også: De bedste online animationskurser for alle niveauer

Figurer

Former kan være geometriske, som er meget kantede, eller de kan være organiske og efterligne naturen. De kan også være abstrakte. Abstrakte former har været meget trendy i det seneste år, og vi har set webdesignere inkorporere dem i komplekse og omfattende kompositioner.

Figurer kan erstatte et billede, eller de kan bruges til at tilføje grafiske elementer til en side, fremhæve tekst eller afgrænse rummet mellem andre visuelle elementer.

Hvid plads

Ethvert layoutdesign vil have en vis mængde hvidt rum, der giver dine elementer mulighed for at ånde og stå frem i sig selv.

De gyldne principper for layoutdesign

Du vil bemærke, at principperne for layoutdesign følger mange af de grundlæggende principper for design, f.eks. at bruge farver på en bestemt måde, typografi, gentagelse, kontrast, hierarki og balance.

Princip nr. 1: Brug gitter

Raster hjælper designere med at placere forskellige designelementer som tekst og billeder på en måde, der ser sammenhængende ud og er let at følge.

De giver en følelse af orden, de forhindrer elementer i at overdøve hinanden, og vigtigst af alt vil gitre også korrigere din tilpasning, så dit arbejde føles renere og mere professionelt.

Kilde: hgmlegal.com

Anatomi af gitter

Du tror måske, at det bare er lodrette og vandrette linjer, men et gitter består af flere dele. Faktisk mange. Her er den vigtigste terminologi, du skal kende til i et grundlæggende gitter:

  • Format Hvis du designer noget til print, er formatet siden, og hvis du er webdesigner, er formatet websiden eller browservinduet.
  • Margener er de tilsigtede tomme rum mellem formatet og designet.
  • Flowlines er de vandrette linjer, der opdeler dit layout i parallelle sektioner. Flowlines hjælper med at gøre dit design lettere at læse og vejleder læseren til at følge indholdet korrekt.
  • Moduler er de blokke, der dannes af de vandrette linjer og lodrette flowlinjer i ethvert gitter. Hvis du tænker over det, er de byggestenene i ethvert gitter. Alle dine lodrette moduler skaber dine kolonner, mens alle dine vandrette gitre skaber dine rækker.
  • Regioner er grupper af sammenhængende moduler, enten vertikalt eller horisontalt. Der er ingen regler for, hvordan du vælger at organisere dem.

Kilde: Radversity

Typer af gitter

Layoutgitre blev først brugt til at arrangere håndskrift på papir.

De stammer helt tilbage fra det 13. århundrede, hvor den franske kunstner Villard De sammensmeltede gittersystemet med det gyldne snit for at fremstille trykte sidelayouts med margener. Du kan se dette gittersystem den dag i dag, hvilket de fleste trykte bog- og magasinlayouts viser. Forlæggere, redaktører og designere foretrækker at bruge standardgitre, ikke kun fordi de ser godt ud, men fordi læserne er kommet til atforventer, at visse designelementer skal være på et bestemt sted.

Gitter kan udformes på to måder: symmetrisk eller asymmetrisk. Symmetriske gitre følger en midterlinje, hvor de lodrette og vandrette områder er lige store, og hvor kolonnerne har samme bredde.

I en asymmetrisk gitter , som navnet antyder, er margenerne og kolonnerne ikke alle identiske.

Baseret på denne klassifikation er der fem hovedtyper af layoutgitre, der anvendes verden over, og som du kan stole på:

Manuskriptgitre er den mest almindelige form for gitter for dokumenter. De adskiller overskrift, sidefod og margener og skaber grundlæggende et rektangel inden for formatet (eller siden), der afgrænser din tekst. De er grundlaget for magasiner, aviser og bøger. Det er sandsynligvis det layout, du kender mest til.

Kilde: UXplanet

Kilde: Radversity

Raster i søjler er en anden favorit inden for magasinudgivelser. Et typisk magasinlayout bruger kolonnegitter til at adskille teksten i letlæselige afsnit. Men de er også meget populære til hjemmesider. Du kan bruge alt fra to op til seks gitre. Mere er muligt, men ikke almindeligt. En meget vigtig ting ved kolonnegitter er, at afstanden mellem kolonnerne, eller rendene, er lige langt fra hinanden.andre.

Symmetriske søjlegitter anvendes f.eks. i aviser, mens et asymmetrisk søjlegitter foretrækkes i webdesign.

Kilde: UX Planet

Kilde: Radversity

Modulære gitre ligner kolonnegitteret, men de tager også højde for de vandrette strømlinier. Denne type gitter er nødvendig, når du skal organisere forskellige elementer i dit layout, og kolonnegitteret simpelthen ikke er nok.

Modulære gitter har moduler af samme størrelse, hvilket gør det meget nemt at visualisere dine rumlige zoner på forskellige måder.

Kilde: UX Planet

Kilde: Radversity

Grundlæggende gitter er fantastiske til tekstbaserede kompositioner. En grundlinje er den linje, hvor teksten hviler, når du skriver, og forspring er afstanden mellem to grundlinjer. Spekulerer du på, hvor store dine overskrifter eller underoverskrifter skal være?

Grundlinjegitter er her for at give din tekst en flydende rytme.

Kilde: UX Planet

Kilde: Fragaria

Hierarkiske gitre ligner mindre et gitter end alle deres modstykker. Ikke desto mindre er de meget nyttige, når designelementer skal organiseres i deres rækkefølge af betydning. Hierarkiske gitre kan være baseret på modulære gitre, eller du kan endda oprette dine egne. Hjemmesider bruger dette gitter meget, især digitale magasiner og aviser har tendens til at stole mere på hierarkiske gitre end kolonnegitre i deres overgang til at blivedigital.

Kilde: UX Plane

Princip nr. 2: Brug negative rum

Vi tror ofte, at tomhed, stilhed eller mangel på farver er en dårlig ting, men vi tænker ikke på, at de er det solide fundament for kontrasten.

Negativt rum, også kaldet hvidt rum, er det område i dit design, som ikke har nogen egentlige elementer. Det er det område, der er tomt. Det omgiver ikke bare dine elementer, det skaber også de nødvendige bånd mellem dem. Derfor er negativt rum et retmæssigt designelement og har en massiv indvirkning på, hvor effektivt dit layoutdesign er.

Godt og dårligt negativt rum

Negativ plads hjælper med at adskille forskellige områder i dit design, samtidig med at det giver dit layout mulighed for at ånde. Det hjælper med visuelt hierarki og visuel balance; det sætter brugerens fokus på de centrale elementer; det reducerer distraktion; og endelig giver det stil og elegance til dit design.

Uerfarne designere kan have en tendens til at fylde så meget som muligt ud af deres lærred ved at forstørre teksten eller forstørre et logo eller et billede. Men hvis du giver plads til dine elementer, kan beskueren hurtigere og mere komfortabelt opfatte visse informationssignaler.

Hvis alt skriger efter din seers opmærksomhed, bliver intet hørt.

- Aaron Walter, "Design for følelser

En nem måde at bestemme dit negative rum på er ved at bruge et modulært gitter. Ved at placere det oven på dit design kan du nemt visualisere, hvilke moduler der kan forblive tomme, og hvilke der skal udfyldes.

Designer by Brunswicker, Kilde: Codesignmag.com

Princip nr. 3: Vælg et enkelt fokuspunkt

Har en kunde nogensinde bedt dig om at gøre logoet større? Og derefter at gøre overskriften endnu større?

Du kan ikke fremhæve alting. Det går ud over formålet med godt design. Ligesom tid er fokus relativt. For at et element skal skille sig ud, skal et andet element fungere som baggrund. Nogle elementer skal dominere andre for at få et visuelt hierarki i dit design.

Fokuspunktet i et design er det element, der har størst visuel vægt. Det er det element, der tiltrækker øjet først, mere end noget andet i dit layout.

Et fokuspunkt fortæller dit publikum, hvor deres rejse begynder i dit design. Det er således begyndelsen på den historie, du fortæller.

Dette kan normalt opnås ved at bruge et stort billede eller en stor kilde til typografi. Bemærk, hvor effektivt nedenstående fokuspunkt er

Designet af Braulio Amado for Bloomberg Businessweek, Kilde: Det er rart, at

Men mens et fokuspunkt vil tiltrække publikums opmærksomhed, vil den næste regel hjælpe dig med at styre det.

Princip nr. 4: Tænk på nærhed og flow

Princippet om nærhed er enkelt: Sørg for, at elementer, der er relateret til hinanden, placeres sammen.

Nærhed indikerer, at de visuelle elementer er forbundet og bliver en visuel enhed, der hjælper med at organisere dit layout.

Så klynge kun designelementer, der har en sammenhæng med hinanden, og brug lommer af information i dit design til at lede din målgruppe til det relevante indhold, som de skal bruge. Dette kaldes også flowprincippet.

Kilde: Satori Graphics

Et design med et godt flow vil lede beskuerens øje gennem layoutet fra element til element med lethed. Dine fokuspunkter vil trække øjet til sig og blive et hvilested, mens andre elementer giver retning.

En enkel måde at forstå dette på er f.eks. ved at tage vores websted som eksempel. Grafikken er klart adskilt fra teksten, og det samme gælder opfordringerne til handling, så beskuerens opmærksomhed navigerer fra den ene klynge af information til den næste.

Princip nr. 5: Brug kontraster

Sørg for, at der er nok kontrast i dit design.

Kontraster hjælper med at organisere dit design og vil skabe et tiltrængt hierarki og lægge vægt på det, der er vigtigt.

Derudover giver en god brug af kontrast også visuel interesse i hele designet. Lad os se det i øjnene, et layout, hvor alt har samme størrelse, form eller farve, vil se kedeligt ud. Kontrast giver mere krydderi.

Din første tanke er måske farvekontrast, f.eks. varm kontra kold, mørk kontra lys, blå kontra orange. Men selv om farve er et meget vigtigt kontrastprincip, er der også kontraster i form af skrifttype, justering og størrelse. Og husk, at kontrast også er relativ. Den har kun betydning, når den står i forhold til andre elementer.

Her er nogle eksempler på layouts, der bruger denne regel på en smart og smuk måde. Læg mærke til kontrasten i typografi, farver og endda kontrasten i størrelsen mellem elementerne.

Kilde: IAG-handlingsplan for forsoning

Se også: Hvordan man tegner en isbjørn

Princip nr. 6. Gentagelse, mønster, rytme

Når vi tænker på gentagelse, tænker vi på det samme element igen og igen.

Men det er anderledes i design. Det er bestemt ikke så kedeligt som det. Når det bruges korrekt, kan gentagelser faktisk styrke dit design.

Prøv at identificere og genbruge et motiv i hele dit layout, så forskellige områder føles forbundet og som en del af den samme komposition. Det vil hjælpe dit design med at få et tema. Ved at gentage elementer leverer du ikke kun i overensstemmelse med målgruppens forventninger, men du forbedrer også brugeroplevelsen. At være konsekvent gør brugerne mere trygge.

Det kan du gøre ved at gentage figurer eller symboler eller endda et farveskema, en skrifttype og den samme stil generelt.

En god vane er at bruge en skrifttype med en stor familie. Begræns antallet af forskellige mønstre, linjestyrker/stile og farver, og gentag dem hele vejen igennem. Prøv også at holde stilen på billeder og grafik ens. Brug f.eks. illustrationer af den samme kunstner.

Kilde: Thepentool.co

Det er de seks principper, der hjælper dig med at organisere dit design og opnå et renere, mere professionelt og afbalanceret layout.

Men din rejse slutter ikke her. Grafisk design er ikke en nøjagtig videnskab, og det bør ikke begrænses til tips og principper. Som det er tilfældet på alle områder af kreativitet, er der ingen faste tommelfingerregler. Hvis du bryder ud af disse tips på subtile måder, vil det give dine designs mere dybde og variation.

Ikke desto mindre er de et godt udgangspunkt, og vi opfordrer dig til at prøve dem, og lad os vide, hvordan de har virket!

Download Vectornator for at komme i gang

Løft dine designs til det næste niveau.

Hent fil



Rick Davis
Rick Davis
Rick Davis er en erfaren grafisk designer og billedkunstner med over 10 års erfaring i branchen. Han har arbejdet med en række kunder, fra små startups til store virksomheder, og hjulpet dem med at nå deres designmål og løfte deres brand gennem effektive og virkningsfulde visuals.Rick er uddannet fra School of Visual Arts i New York City og brænder for at udforske nye designtrends og -teknologier og konstant skubbe grænserne for, hvad der er muligt på området. Han har en dyb ekspertise inden for grafisk designsoftware og er altid ivrig efter at dele sin viden og indsigt med andre.Udover sit arbejde som designer, er Rick også en engageret blogger, og er dedikeret til at dække de seneste trends og udviklinger inden for grafisk designsoftware. Han mener, at deling af information og ideer er nøglen til at fremme et stærkt og levende designfællesskab, og han er altid ivrig efter at forbinde med andre designere og kreative online.Uanset om han designer et nyt logo til en klient, eksperimenterer med de nyeste værktøjer og teknikker i sit studie eller skriver informative og engagerende blogindlæg, er Rick altid forpligtet til at levere det bedst mulige arbejde og hjælpe andre med at nå deres designmål.