När hör du rutnät, vad är det första som kommer att tänka på? För de flesta designers är det ofta ett horisontellt baserat koncept med kolumner över kanfasen. Detta gäller speciellt när man tänker på webb- och digitala designprojekt.
Men hur är det med vertikala galler? Det är lika viktigt att skapa flöde upp och ner på sidan också. Och det finns ett antal sätt att göra detta med rutnät.
Varför använda ett vertikalt galler?
Om du inte redan tänker på vertikala galler i dina designprojekt kanske du undrar varför detta är viktigt. Ett vertikalt galler hjälper till att uppnå vertikal rytm och harmoni på sidan.
Rutnätet hjälper till att ställa in och fastställa regler för designen, antingen tryckta eller digitala. Denna struktur gör det lättare för dig att rita och ge riktlinjer för avstånd, elementplacering och limning av text och andra objekt på duken. Ett vertikalt rutnät skapar också ett rytmiskt mönster och flöde för en webbplats när användarna bläddrar. (Detta kan vara särskilt viktigt på mindre enheter.)
Den övergripande effekten är en design som om du skissar ut den trådlösa stilen, har en blick med flöde. Elementen är åtskilda bra, övergångar är lätta att se och förstå och varje annorlunda del av konstruktionen känns målmedveten och del av planen.
Titta bara på wireframe ovan. Du kan rita linjer över skissen så att varje element rader upp i samma plan. Detta visuella flöde är precis vad du vill uppnå.
Rader för text
Ett vertikalt rutnät är särskilt viktigt när det gäller text. Den kan användas på flera sätt för att skapa flöde i kopia. Allt kommer ner till ditt grunnlinje.
Gränssnittet är en imaginär uppsättning av lika stora horisontella linjer - tänk det reglerade pappret du använde i klassskolan - den texten stämmer överens med. Bokstartens botten (grundlinje) vilar på dessa linjer, så att det finns lika stort mellanrum mellan textrader och textkolumner också i linje med varandra.
Här är ett par applikationer:
- Skapa två kolumner och behåll din typ på baslinjen.
- Använd matte för att justera all typ, oavsett storlek till baslinjans skala.
Men hur gör du det? Det börjar med lite? Typografi matematik.? (Konceptet är ungefär detsamma för utskrift eller digitala projekt.)
- Välj teckensnitt och storlek för kroppstext.
- Ställ in räckvidden eller mängden av avstånd mellan textrader.
- Använd samma andel för annan avstånd i konstruktionen.
- Du kan också använda multiplar av grunnlinjen för element också. Så om din kroppstext är 16 poäng, kan större text vara storlek vid två gånger linjens höjd.
Denna baslinjematiker gör något annat också. Det hjälper dig att skapa typografi hierarki eftersom varje ny nivå av text staplas i proportion till andra nivåer av text.
Galler för skärmar eller paneler
Vertikala galler är ett av de viktigaste verktygen i sida-vid-sida-design, till exempel webbplatser med parallellrullningsfunktioner. Varje sida måste ha samma storlek och ha samma känsla så att varje ny sida känns som en kontinuerlig del av samma historia och estetik.
De flesta designers gör det här med färg eller en aning av animering för att göra skärmar? Snap? på plats med varje rullning. När elementen är inriktade i perfekt vertikal orientering kan varje skärm ses samtidigt och är inte halv på, halv av skärmen. Detta vertikala rutnät skapar rätt harmoni och bidrar till korrekt läsbarhet och en önskvärt användarupplevelse.
Ramverket för denna stil av design är beroende av bra vertikalt flöde. Element måste placeras på liknande sätt som användaren rullar. Typ bör falla i ett liknande kolumnformat och storleken och avståndet mellan bokstäver och element ska vara konsekventa från skärm till skärm.
Dessa små signaler är tråden som håller en användare fokuserad och skapar visuell förståelse och flöde från en bit information till nästa.
Grids for Cards
Kortdesign är ett av årets mest populära och trendiga element, och de fungerar tack vare ett vertikalt galler. Det vertikala gallret hjälper dig att skapa ett kort som har en distinkt känsla, korrekt avstånd och bekvämt utrymme för flera element i en enda behållare.
Tänk på alla ställen att använda ett vertikalt galler med ett kort:
- Spacing mellan kort i en design. (Ett kort per skärm på mobila enheter).
- Interna gränserna för kortet mellan element som bilder, text eller knappar.
- Storleksanpassning för varje element.
- Texthierarki och dimensionering.
Grids för e-handel
Vertikala (och horisontella) nät är ett populärt alternativ för e-handelswebbplatser på grund av det tydliga organisatoriska flödet. Objekt kan placeras sida vid sida så att användare kan jämföra och göra val innan de köper.
Titta noga och du kommer troligen att finna att resten av webbplatsramen också följer samma vertikala rytm. Den subtila nätanvändningen är bekväm och kommer att göra kunderna lungna, lita på designen tack vare trevlig organisation och förhoppningsvis göra ett köp.
Grids för övergripande organisation
Bara för att du använder ett rutnät behöver du inte ha ett murverk eller nätbaserat utseende. Använd rutnätet i flera och halvor för att skapa intressanta kombinationer av element som faller i harmoni.
Och gärna bryta gallret varje gång i taget. Ibland kommer du att hamna i en situation där gallret flera bara inte ser rätt ut, särskilt när det gäller att skriva saknade uppstigningar eller descenders. Det är ok att fudge det lite då. Kom ihåg, även om du använder ett rutnät och det ser roligt ut, kommer det att störa harmoni och flöde. Gör de visuella korrigeringar och justeringar efter behov.
Slutsats
Så varför är vertikal rytm och ett nät så viktigt? När det gäller text, hjälper det att hålla en användare trött på att läsa. För andra element skapar det en distinkt känsla av harmoni och flöde.
Människor gillar organisationen av natur och vill att mönster är lätt att förstå vid en blick. Ett bra rutsystem kan hjälpa dig att uppnå det med lätthet. När nätet är etablerat är elementplaceringar, storlekar och former lättare att föreställa sig eftersom du kan passa dem till ramen du redan har skisserat.
Bildkälla: baldiri.