Horisontell harmoni. Det är en av de saker som du verkar bara märka när den saknas. Horisontell harmoni är förhållandet mellan element över en design. Det är mer än linjer och regler; det är också ett osynligt rutnät skapar en känsla av plats för designelement.
Hur kan du skapa horisontell harmoni? Medan vissa tekniker är enklare än andra är det inte ett överväldigande koncept. Det tar bara lite planering. Genom att tänka på saker som ett grunnlinje, är mellanslag mellan textlinjer, placering av element och den övergripande estetiska horisontella harmonin bara en del av konstruktionsprocessen.
Grunder för baslinjen
Baslinjenät, ett populärt designverktyg i tryckta projekt, pratar mindre om webbdesign. Anledningen är enkel: Många webb (och digitala) projekt har en enda kolumn med text.
Gränssnittet är en imaginär linje som sitter på. Varje bokstav i texten vilar på det här rutnätet så att flera kolumner av typen stämmer upp. (Detta håller kolumnerna från att ha en skarp utseende.)
Gränssnittsnätverk kan fungera för nästan alla typografiska ändamål och de flesta designprogram innehåller verktyg för att skapa grunderna för grunnlinjen. Detta blir lite svårare online men det finns också CSS-baslinjer, bland annat ett bra exempel från Smashing Magazine.
Gränssnittet fungerar bara när det tillämpas på varje kolumn i layouten, där typen börjar och slutar på samma plats (vanligen den övre och nedre delen av en sida). Dessutom appliceras grunnlinjen normalt på hela sidan i ett digitalt projekt och spridningen (eller vända sidor) i utskriftsprojekt.
Grunderna för grunnlinjer skiljer sig från linjehöjder eller ledande specifikationer, främst på grund av att ett grunnlinje dikterar var bokstäver vilar. Nätet kan tvinga linjer att skriva för att vara närmare varandra eller åtskilda mer avlägset. (I Adobe InDesign kommer till exempel ett grunnlinje att åsidosätta ledande, tvinga text att leva på lämpligt rutnät.)
Vad som är bra om ett grunnlinje är textens renhet. När allt justeras på ett organiserat sätt, är resultatet bokstäver som är lätt att läsa och titta på. Det finns inga kränkande känslor. Det finns anledning till att böcker, tidningar och tidskrifter (som är beroende av flera kolumner text på en sida) har gjort det i flera år.
Ledtråd: Ange ett grunnlinje
- InDesign: På menyn Redigera väljer du Inställningar och sedan Grids. Du kan ställa in en färg för grunnlinjen där grid börjar (överst på sidan eller toppmarginalen) och inkrement (gridens längd). Snap till Guides kommer att gälla baslinjen.
Ledande
Ledande, mängden utrymme mellan linjer av typ, är ett annat viktigt verktyg när du skapar harmoni över sidan eller skärmen. Texten ska ha konsekvent ledning.
Tänk på det här sättet: Om punkt 1 är 14 punktstyp med 16 punkter som leder och stycke 2 är 14 punktstyp med 12 poäng som leder, kommer det att leda till att läsaren blir orolig. Denna förändring är svår på ögat och kan göra en utmaning att läsa. Detta gäller även med en enda kolumn med text.
Speciellt i tryckta projekt är kombinationen av konsekvent ledande och ett komplementärt grunnlinje perfekt. Denna koppling säkerställer att typen stämmer från kolumn till kolumn och har en konsekvent känsla från topp till botten.
Håll utrymme konsekvent
Mängden utrymme mellan element är lika viktigt. Finns det en rad utrymme mellan stycken? Vad sägs om mellan rubrik och huvudtext? Eller ett foto och texten runt den?
Bestäm distansregler som arbetar med ditt baslinje och ledande specifikationer för att säkerställa att utrymmena runt elementen är konsekventa. Det är lättast att skapa och upprätthålla överensstämmelse med dessa utrymmen om de också är inställda att arbeta med dina typspecifikationer.
Ta det ett steg längre och överväga det vertikala utrymmet också - rännbredd, textomslag och marginaler. Dessa utrymmen bör också vara en del av ditt konsekventa distansschema.
Line It Up
Texten är 14 poäng? Bygg element som ska matcha.
När du har en bra känsla för texten i ett projekt kommer andra element att komma till spel. Dessa element bör också ligga på ditt osynliga rutnät. Text, foton, linjer, knappar och alla andra designelement ska alla fungera tillsammans när man tittar på dem över sidan eller skärmen.
Det kan ta lite planering. När det gäller bilder, skissa ut placeringar och hur varje vilar på det horisontella gallret. Fotoramens botten ska ligga på baslinjen med text och stoppa i linje med toppen av stora bokstäver för perfekt harmoni.
Tänk på små bitar, som knappar eller navigationselement, på samma sätt. Med små delar övervägs de vertikala höjderna för dessa objekt för att matcha textens ledning eller en multipel av den. (Kom bara ihåg att överväga ytterligare avstånd mellan linjer.)
Tänk i block
Om allt detta grunnlinje och ledande har huvudet att spinna, kan det vara enklare att tänka på ett rutnät i block. Skolpapper som du använt i grundskolan kan vara den perfekta skisspennan för denna applikation. (Adobe-programvarusuiten har också ett rutnätläge som du kan applicera på bakgrunden när du skissar digitalt.) Planera ditt designprojekt så att varje bit passar inom ett visst antal block.
Texten är till exempel två kvarter höga. Andra element kommer att motsvara flera textstycken, vilket gör bilder åtta block höga och knappar fyra block höga. Avstånd mellan element är också två kvarter, vertikalt och horisontellt. (Hämta bilden?)
Ledtråd: Ange ett dokumentnät
- InDesign: Under InDesign-menyerna Redigera (i Windows) väljer du Inställningar och sedan Grids. Du kan ställa in en färg för rutnätet, ange horisontellt och vertikalt mellanrum och indelningar. Rutenettet kan ställas in för att visas bakom eller framför objekt i layouten.
- Photoshop: Under Photoshop-menyn Redigera (i Windows) väljer du Inställningar, sedan Guider, Grid & Slices. Ange specifikationen för varje rader, inklusive färg, avstånd och underavdelningar.
Horisontell tänkande på vertikala projekt
Horisontell harmoni är inte bara något att tänka på när man arbetar med projekt som sträcker sig över ett långt utrymme, det kan vara lika viktigt i vertikalt orienterade projekt.
Tänk på hur viktigt horisontell harmoni är för en webbplats med parallaxrullningsfunktioner. Varje skärm? måste arbeta i horisontell harmoni medan du rör dig upp och ner. En mobilwebbplats, som ofta ses i vertikal orientering, behöver flyttas på ett sätt som är meningsfullt.
Detsamma gäller även för mindre utskriftsprojekt. Titta på en etikett på en dryckesbehållare. Texten är sannolikt satt i ett rutnät som slingrar runt behållaren.
Slutsats
Horisontell harmoni är överallt. Nyckeln till det är att du verkligen inte ser det. Projekt kommer bara att känna sig rätt när det är där och känner lite av när det inte är det.
Som designer är det viktigt att tänka på nät och anpassning under hela designprocessen. Slutresultatet av en design är att skapa något som är läsbart, användbart och effektivt. Horisontell harmoni kan hjälpa dig att uppnå detta.