Hur man behärskar layoutdesign

En fullständig guide för att lära sig grunderna i visuell design.

Miljonfrågan: Vad är hemligheten bakom bra design?

Vi kan bli filosoferande om detta, men i allmänhet ligger hemligheten bakom bra design i hur du organiserar dina visuella element i förhållande till din målarduk och till varandra. I princip har vi just beskrivit layoutdesign, som när du tänker på det finns överallt där du tittar.

Ta till exempel layouten i en tidning. Designen följer ett klassiskt rutnätssystem (vi kommer att lära oss allt om rutnät om en minut). Allt är vanligtvis uppställt till vänster, höger och längst ner. Kolumnerna har särskilt en tydlig rättvisande uppställning som gör sidan inte bara visuellt tilltalande, utan också lättläst och auktoritativ. De stora rubrikerna drar till sig betraktarens blick.uppmärksamheten, medan underrubriken är en kontrast i storlek för att skapa en visuell hierarki av information.

Linda Gaom, Behance

Alla dessa egenskaper gör siddesignen ren, strukturerad och lättläst, och de stämmer överens med de tips som vi kommer att prata om härnäst. Men först ska vi förstå mer om själva layoutdesignen.

Vad är layoutdesign?

Vi talar alltså inte om logotypdesign här, utan om utformning av tryckt material, som tidningar, tidskrifter och affischer, och deras digitala motsvarigheter, samt webb-, app- eller UX/UI-design.

Ordet "layout" ger oss många ledtrådar: det betyder ett arrangemang av förutbestämda element på en sida.

När en layout är effektiv ser den bra ut och vägleder betraktaren att förstå det budskap som designen försöker förmedla. Att förstå layout är därför viktigt för att skapa engagerande, effektiva, användarvänliga och tilltalande kompositioner.

Om en layout inte förmedlar sitt budskap på ett bra sätt till publiken, eller med andra ord, om den inte "läses bra", kommer designen att vara ineffektiv, oavsett hur trendig den ser ut. När det gäller layoutdesign är innehållet viktigare än trender och gimmicks.

Syftet med layoutdesign

Att förmedla ett meddelande snabbt

Detta är nyckeln. Layoutdesign fastställer förhållandet mellan grafiska tillgångar för att uppnå ett smidigt flöde av ögonrörelser för maximal effektivitet och effekt.

Att skapa balans

Att använda principerna för layoutdesign är det enklaste sättet att skapa en känsla av balans och symmetri i dina designprojekt utan att det blir tråkigt.

För att skapa sammanhållning

Layout hjälper dig att ordna de många elementen i din design på ett lättsmält, sammanhängande och logiskt sätt.

Att skapa skönhet

Balans och struktur skapar på ett naturligt sätt skönhet. Om din layoutdesign är korrekt utformad kommer den automatiskt att bli visuellt tilltalande för betraktaren. Ju mindre ansträngning betraktaren behöver göra för att förstå ett budskap, desto attraktivare kommer din design att verka.

Formgivare av Frank Philippin för hans bok "I Used to Be a Design Student: Then - Now" Källa: DesignBoom

Elementen i layoutdesign

Text

Detta omfattar inte bara textkroppen eller punkterna, utan även rubriker, underrubriker, rubriker och sidfötter. Ditt val av typografi, färg och storlek kommer att få olika effekter på hur din layout kommer att uppfattas av din publik.

Bild

De vanligaste typerna av bilder är fotografier, illustrationer och infografik.

Former

Former kan vara geometriska, som är mycket kantiga, eller organiska, som efterliknar naturen. De kan också vara abstrakta. Abstrakta former har varit mycket trendiga under det senaste året, och vi har sett webbdesigners som har införlivat dem i komplexa och omfattande kompositioner.

Former kan ersätta en bild eller användas för att lägga till grafiska element på en sida, markera text eller avgränsa utrymmet mellan andra visuella element.

Vita ytor

Varje layoutdesign har en viss mängd vitt utrymme som gör att dina element kan andas och stå ut på egen hand.

De gyllene principerna för layoutdesign

Du kommer att märka att principerna för layoutdesign följer många av de grundläggande principerna för design, t.ex. att använda färger på ett visst sätt, typografi, upprepning, kontrast, hierarki och balans.

Princip nr 1: Använd rutnät

Raster hjälper formgivare att placera olika designelement som text och bilder på ett sätt som ser sammanhängande och lätt att följa.

De ger en känsla av ordning, hindrar element från att överrösta varandra och, viktigast av allt, rutnätet korrigerar också din inriktning, vilket gör att ditt arbete känns renare och mer professionellt.

Källa: hgmlegal.com

Anatomi av rutnät

Du kanske tror att det bara är vertikala och horisontella linjer, men ett rutnät består av flera delar. Många, faktiskt. Här är den viktigaste terminologin du behöver känna till i ett grundläggande rutnät:

• Format Om du designar något för tryck är formatet sidan, och om du är webbdesigner är formatet webbsidan eller webbläsarfönstret.
• Marginalerna är de avsiktliga tomma utrymmena mellan formatet och designen.
• Flödesledningar är de horisontella linjerna som delar upp layouten i parallella sektioner. Flödeslinjerna bidrar till läsbarheten i designen och hjälper läsaren att följa innehållet på rätt sätt.
• Moduler är de block som bildas av de horisontella linjerna och de vertikala flödeslinjerna i varje rutnät. Om du tänker efter är de byggstenarna i varje rutnät. Alla vertikala moduler skapar kolumnerna, medan alla horisontella rutnät skapar raderna.
• Regioner är grupper av sammankopplade moduler, antingen vertikalt eller horisontellt. Det finns inga regler för hur du väljer att organisera dem.

Källa: Radversity

Typer av rutnät

Layoutgaller användes först för att ordna handskrift på papper.

De går tillbaka så tidigt som till 1200-talet, då den franske konstnären Villard De kombinerade rutnätssystemet med det gyllene snittet för att skapa tryckta sidlayouter med marginaler. Du kan se detta rutnätssystem än idag, vilket majoriteten av tryckta böcker och tidskrifter visar. Förläggare, redaktörer och designers föredrar att använda standardrutnät, inte bara för att de ser bra ut, utan också för att läsarna har vant sig vid att använda dem.förväntar sig att vissa designelement ska finnas på en viss plats.

Nät kan utformas på två sätt: symmetriskt eller asymmetriskt. Symmetriska rutnät följer en mittlinje, där de vertikala och horisontella områdena är lika stora som varandra, och där kolumnerna har samma bredd.

I en asymmetriskt rutnät Som namnet antyder är marginalerna och kolumnerna inte alla identiska.

Baserat på denna klassificering finns det fem huvudtyper av layoutgaller som används världen över och som du kan lita på:

Rutor för manuskript är den vanligaste sortens rutnät för dokument. De skiljer rubrik, sidfot och marginaler åt och skapar i princip en rektangel inuti formatet (eller sidan) som avgränsar texten. De är basen för tidskrifter, tidningar och böcker. Så det är förmodligen den layout du är mest bekant med.

Källa: UXplanet

Källa: Radversity

Kolonngaller är en annan favorit inom tidningsutgivning. I en typisk tidningslayout används kolonngaller för att dela upp texten i lättlästa avsnitt. Men de är också mycket populära på webbplatser. Du kan använda allt från två upp till sex galler. Det är möjligt att använda fler, men det är inte vanligt. En mycket viktig sak med kolonngaller är att avståndet mellan kolumnerna, eller rännorna, är lika långt från varandra.andra.

Källa: UX Planet

Källa: Radversity

Modulära rutnät liknar kolumngallret, men tar även hänsyn till de horisontella flödeslinjerna. Den här typen av rutnät behövs när du måste organisera olika element i layouten och kolumngallret helt enkelt inte räcker till.

Källa: UX Planet

Källa: Radversity

Grundläggande rutnät är fantastiska för textbaserade kompositioner. En baslinje är den linje där texten vilar när du skriver, och ledningen är avståndet mellan två baslinjer. Undrar du hur stor din rubrik eller dina underrubriker ska vara?

Källa: UX Planet

Källa: Fragaria

Hierarkiska rutnät ser mindre ut som ett rutnät än deras motsvarigheter. De är ändå mycket användbara när man organiserar designelement i deras ordning. Hierarkiska rutnät kan baseras på modulära rutnät eller så kan du till och med skapa dina egna. Webbplatser använder detta rutnät mycket, särskilt digitala tidskrifter och tidningar tenderar att förlita sig mer på hierarkiska rutnät än kolumnrutnät när de övergår till att blidigital.

Källa: UX Plane

Princip nr 2: Använd negativa utrymmen

Vi tror ofta att tomhet, tystnad eller färglöshet är något dåligt, men vi tänker inte på att de utgör kontrastens fasta grund.

Bra och dåligt negativt utrymme

Negativt utrymme hjälper till att separera olika områden i din design, samtidigt som det låter layouten andas. Det hjälper till med visuell hierarki och visuell balans, det sätter användarens fokus på de centrala elementen, det minskar distraktionen och slutligen ger det stil och elegans till din design.

Oerfarna formgivare kan ha en tendens att fylla ut så mycket som möjligt av sin canvas genom att skala upp texten eller förstora en logotyp eller bild. Men om du ger dina element utrymme kan betraktaren snabbare och bekvämare ta till sig vissa informationssignaler.

- Aaron Walter, "Design för känslor

Ett enkelt sätt att bestämma det negativa utrymmet är att använda ett modulärt rutnät. Genom att placera det ovanpå din design kan du enkelt visualisera vilka moduler som kan förbli tomma och vilka som bör fyllas ut.

Designer by Brunswicker, Källa: Codesignmag.com

Princip nr 3: Välj en enda fokuspunkt

Har en kund någonsin bett dig att göra logotypen större och sedan rubriken ännu större?

Du kan inte betona allting, det skulle motverka syftet med bra design. Precis som tid är fokus relativt. För att ett element ska sticka ut måste ett annat fungera som bakgrund. Vissa element måste dominera andra för att din design ska visa en visuell hierarki.

En fokuspunkt visar din publik var deras resa börjar i din design. Det är alltså början på den historia du berättar.

Detta kan vanligtvis uppnås genom att använda en stor bild eller en stor typografisk källa. Lägg märke till hur effektiv fokuspunkten nedan är.

Designad av Braulio Amado för Bloomberg Businessweek, Källa: Det är trevligt att

Men även om en fokuspunkt drar till sig publikens uppmärksamhet, kan nästa regel hjälpa till att styra den.

Princip nr 4: Tänk på närhet och flöde

Principen om närhet är enkel: se till att element som är relaterade till varandra placeras tillsammans.

Sätt därför bara ihop designobjekt som har ett samband med varandra och använd informationsfickor i designen för att guida publiken till det relevanta innehåll som de behöver ta del av. Detta kallas också för flödesprincipen.

Källa: Satori Graphics

En design med ett bra flöde leder betraktarens öga lätt genom hela layouten, från element till element. Dina fokuspunkter drar ögat till sig och blir en viloplats, medan andra element ger riktning.

Ett enkelt sätt att förstå detta är att ta vår webbplats som exempel. Grafiken är tydligt åtskild från texten, liksom uppmaningarna till åtgärder, så att betraktarens uppmärksamhet navigerar från ett kluster av information till nästa.

Princip nr 5: Använd kontraster

Se till att det finns tillräckligt med kontraster i din design.

Dessutom ger en bra användning av kontraster visuellt intresse i hela designen. En layout där allt är av samma storlek, form eller färg kommer att se tråkig ut. Kontraster ger mer liv åt det hela.

Din första tanke kanske är färgkontraster, som varm kontra kall, mörk kontra ljus, blå kontra orange. Men även om färg är en mycket viktig kontrastprincip finns det också kontraster i form av typ, inriktning och storlek. Kom ihåg att kontraster också är relativa. De har bara betydelse om de ställs i relation till andra element.

Här är några exempel på layouter som använder den här regeln på ett smart och vackert sätt. Lägg märke till kontrasterna i typografi, färger och till och med kontrasterna i storleken mellan elementen.

Källa: IAG:s handlingsplan för försoning

Princip #6. Upprepning, mönster, rytm

När vi tänker på upprepning tänker vi på samma element om och om igen.

Men det är annorlunda när det gäller design. Det är definitivt inte så tråkigt som det är. När det används på rätt sätt kan upprepning faktiskt stärka din design.

Försök att identifiera och återanvända ett motiv i hela layouten så att olika områden känns sammanhängande och som en del av samma komposition. Det hjälper din design att få ett tema. Genom att upprepa element levererar du inte bara enligt publikens förväntningar, utan du förbättrar också användarupplevelsen. Att vara konsekvent gör att användarna känner sig mer bekväma.

Du kan göra detta genom att upprepa former eller symboler, eller till och med en färgskala, ett typsnitt och samma stil i allmänhet.

En bra vana är att använda ett typsnitt med en stor familj. Begränsa antalet olika mönster, linjestyrkor/stilar och färger och upprepa dem genomgående. Försök också att hålla stilen på bilder och grafik densamma, till exempel genom att använda illustrationer av samma konstnär.

Källa: Thepentool.co

Detta är de sex principer som hjälper dig att organisera din design och få en renare, mer professionell och balanserad layout.

Men resan slutar inte här. Grafisk design är inte en exakt vetenskap och bör inte begränsas till tips och principer. Som på alla områden av skapandet finns det ingen fast tumregel. Om du bryter av dessa tips på subtila sätt kommer din design att få djup och variation.

De är dock en bra utgångspunkt och vi uppmanar dig att prova dem och berätta hur de fungerade!

Ladda ner Vectornator för att komma igång

Ta din design till nästa nivå.