Ett nät är grunden för nästan vilken webbdesign som helst. Dessa osynliga linjer bidrar till att skapa rytmiskt utrymme och visuellt flöde, så varje projekt har en känsla av organisation och harmoni.
Men du behöver inte hålla fast vid gallret 100 procent av tiden. Du kan till och med bryta gallret från tid till annan utan att göra en total röra. Så här gör du det, samtidigt som du håller en webbplats som är ett nöje att använda!
Förstå Grid Systems
Innan du kan bryta gallret måste du förstå varför det finns. Oavsett vilken typ av system du använder är nätet en grundläggande del av designprocessen. Grids hjälper dig att bestämma var du ska placera element, hur element kan bryta eller stapla på olika skärmstorlekar och i allmänhet hjälpa till att hålla saker organiserade.
Nätet är en osynlig grund som hjälper dig att designa något som känns organiserat, rent och enkelt för användarna att följa.
Designers har använt grids ganska mycket för alltid. Gå tillbaka och titta på gamla tidningar och böcker - texten är uppradad i kolumner. Även gamla skrifter på tabletter inkluderar denna harmoniska struktur.
Galler kan göra följande:
- Håll innehållet organiserat och flödande. Användare används för att element som raderar horisontellt och vertikalt och följer det från vänster till höger (och bakåt), övre och nedre läget.
- Gör designarbetet mer effektivt eftersom du bara ser var du ska placera element och mellanslag mellan dem.
- Hjälp en webbplats att se konsekvent från sida till sida.
- Skapa precis rätt utrymme mellan element så att designen fortfarande är ryddig.
- Balansen är mindre utmanande. Följ rutnätet och elementen kommer nästan att falla på plats när du skala element inom de inställda parametrarna.
Så varför skulle du ens tänka på att bryta gallret?
Att bryta gallret kan lägga extra betoning på ett visst element. Det är en av de designregler som när sparsamt brutna kan förbättra betydelsen av ett projekt. Vid brytning av gallret är det viktigt att följa många av de andra reglerna? av designen. (Använd bara det här tricket för att få ut det mesta av det.)
Skapa lager
Layoutelementen gör att du kan flytta från nätet samtidigt som du behåller enheten i designen. Eftersom elementen berör och korsar planerna känns de som en del av samma enhet.
Denna teknik har blivit ganska populär nyligen, tack vare materialdesignpåverkan och fler designers som tar chanser med element på skärmen. Det kan dock vara knepigt; element som överlappar på något sätt måste förbli skilda för att kunna fungera effektivt.
Cmmnty gör det med en bred linje och text, vilket skapar en sorts offsetbalans med typografi och vitt utrymme. Du kan nästan se flera små galler i designen, till exempel navigering och inriktning av textelement till vänster men inget konsistent mönster. Denna brytning av gallret är perfekt balanserad och lätt för användaren att förstå.
Design Purposeful White Space
En anledning att röra sig bort från vägen för ett rutnät är att skapa mer vitt utrymme med större tonvikt på rätt ställe. Det kan vara att markera textelement eller branding eller en stjärnbild.
En sak som ofta misstas för att flytta ut nätet är udda justeringar. Medan sömlös anpassning kan vara en integrerad del av att använda ett nätsystem - horisontellt eller vertikalt - kan elementen anpassas när de flyttas från nätet.
När du bryter gallret för att lägga till vitt utrymme, överväga att hålla allt annat i anpassning. Det kommer att hjälpa till att skapa ett elementskluster som drar ögat, som text och uppmaning från Surfers Against Sewage, med tillräckligt med utrymme som elementet känns viktigare än andra. Exemplet ovan fungerar fantastiskt eftersom utrymmet hjälper till att dra användare till uppmaningen till handling.
Sätt in delar i en behållare
När elementen finns på något sätt känns de tillsammans även när gallret är trasigt. Detta kan innefatta att du använder en färgad bakgrund, lägger in element i lådor eller läggningstext på ett foto eller en video, till exempel exemplet ovan.
Det fina med något behållarelement är att det ger en signal till användarna att allt i det här sammanhanget är relaterat på något sätt. Elementen länk.
Att gå ut ur gallret i ett behållarmönster är ett visuellt intressant sätt att bryta upp det som ofta slutar se ut som ett spelkort. Många behållarstilar slutar med en perfekt symmetrisk design; Att gå ut ur gallret är ett surefire sätt att lägga gnista på designen och bryta monotonen.
Spela med specifika element
Det bästa sättet att gå från gallret är med en enkel detalj. Om hela designen saknar ett nät system, kommer du sannolikt att sluta med en röra. (Och det är precis vad vi försöker undvika.)
Börja med ett bakgrunds- eller accentelement för att dra uppmärksamhet. Coola swashes eller intressanta former är ett bra ställe att börja. Överväg att lägga till en djärv färg för att markera elementet.
Landet av Nod gör detta effektivt med tjocka vinklade linjer för att visa användare där stor försäljning finns på hela webbplatsen. Dessa linjer finns ibland i bilder och ibland korsar vita utrymmen i bilder. Variansen är visuellt intressant och säkerställer att enstaka rasterbrytning är ovanlig nog att dra uppmärksamhet, men matchar resten av konstruktionen nog för att känna att den hör hemma.
Flytta runt
Använd rörelse och rörelse för att ta element från gallret, eller kanske bara skift det lite. Enkla animeringar eller element som fungerar i samverkan med video kan göra att ett rutnät verkar mindre rasterliknande.
Detta koncept fungerar riktigt bra med mönster som fokuserar på ett enda element.
Tyngdpunkten i Trippeo, ovan, är reseutgiften grafisk. Det ändrar inte platsen i hela webbdesignen. Men allt annat runt det rör sig, från videon på startskärmen till information om appen som zoomar in med användbar klickbar parallaxrullning.Detta element rymmer resten av en off-balance, off-grid stil design med modern whimsy och stil.
Skapa en illusion av att bryta gallret
Du kan bryta gallret utan att bryta det alls.
Använd ett litet vertikalt rutnät för att skapa intressanta kombinationer av former och anpassningar medan du bor på rutnätet (även om det inte ser ut som det).
Det fina med att inte bryta gallret för att skapa denna typ av design är att du behåller alla fördelarna med en nätbaserad design samtidigt som du gör något som är lite annorlunda. De bästa alternativen inkluderar ofta mönster som fungerar i rutorna från tre, fem, sju etc. - så att formerna aldrig exakt raderar upp, men alltid känns lika.
Marche Notre Dame, ovan, använder detta koncept för att visa upp bilder från sin plats. Rutenettet, rutmönster används vertikalt och horisontellt för att skapa en collage med precis rätt vita utrymme. Det här är ett bra sätt att bryta ut ur samma gammala murverk för foton som verkar vara praktiskt taget överallt.
Slutsats
Att bryta gallret är inte alltid lätt att göra. Många gånger kan det sluta bli ganska röra.
De bästa användningarna appliceras på en sida eller uppsättning av element för att hålla konstruktionen från att gå ur hand. Detta är också användbart när du tänker på lyhördhet och hur man hanterar element som kanske inte passar bra på mindre skärmar eftersom du inte kommer att ha så många oddities att hantera.
Att bryta gallret - när det är klart - kan vara ett roligt och engagerande sätt att prova något annat.