Historien är lika gammal som grafisk design själv: du har två olika avsnitt och du behöver ett sätt att visuellt separera dem. Som designer upptäcker jag ofta att jag återvänder till samma gamla ett eller två knep för att dra av det här. Varför inte blanda det lite?
Idag visar vi dig tio fantastiska sätt att skapa två distinkta delar av innehållet. Varje exempel är från en riktig webbplats så att du kan klicka igenom för att se den i aktion.
Kontrastkongen
Detta är ett av de enklaste och vanligaste sätten att separera två sektioner. Allt du gör är att hitta två färger som kontrasterar riktigt bra.
Detta görs oftast med vit eller nära ekvivalent utöver något riktigt mörkt som svart eller riktigt ljust som rött. Färgkontrast är ett av dina mest kraftfulla designverktyg, gör det skickligt och du får en iögonfallande design varje gång.
Den snabbt blekna
Den snabba försvinnningen är som motsatt av föregående exempel. Här istället för mycket kontrast och en hård linje har vi mycket liten kontrast och en mjuk separering.
Det här är perfekt för situationer där du vill lägga till en liten bit av visuell skillnad mellan två sektioner som fortfarande är mycket nära relaterade från en konceptuell synpunkt.
I exemplet ovan används snabbflaggan för att skilja ikoner från deras beskrivartekst. Återigen hör de två ihop och fungerar ändå bra med en liten skillnad.
The Notch
Haket kan kombineras med flera av de andra teknikerna men används vanligtvis med en hård linje som du ser i exemplet nedan. Den här är mer en punkt än en hack men en populär variant är att invertera triangeln så att den skär ner i det nedre lagret.
Haket är perfekt när du vill uppmärksamma något. Detta kommer vanligtvis i form av en horisontell samling av föremål med aktivt val. Triangeln förstås naturligtvis när du väljer olika objekt.
Skrapboken
Jag är inte säker på vem som startade det, men skilda separatorer som den nedan har blivit massivt populära under det gångna året eller två. Det är en elegant lösning som definitivt lägger till mer visuellt intresse än din typiska solida linje.
Tekniken föreslår inte nödvändigtvis ett scrapbook-tema, det är bara vad jag tycker om varje gång jag ser den. För variation, försök experimentera med punkthöjd, avstånd och rundhet. Du kan också gå med ett mindre vanligt mönster som en riven kant.
Cutoff
Detta exempel kommer faktiskt från samma webbplats som den sista, kudos till Colin Grist för en fantastisk webbplats. Kolla in hur han skiljer dessa två avsnitt:
Här använder han en hård linje, men istället för färgkontrast klipper han enkelt av en grafik. Lösningen är underbart enkel och fungerar väldigt bra. Om du rullar ner lite längre väljer han scenen bakåt, så det här är mer av en rand, men du kan definitivt använda den på något sätt.
Silhuetten
Den här är begreppsmässigt densamma som klippboken, du är i princip bara att bryta upp linjen så det är inte rakt och tråkigt. En grafik kommer dock att spela för att ge mycket mer visuellt intresse.
Jag gillar verkligen hur denna designer tog saker ett steg längre och skiktade byggnaderna i bakgrunden. Det gör separationen mycket mer komplex och imponerande. Ripa inte bara bort denna idé och gå med byggnader, saker om några andra former du kan försöka: berg, vatten, träd, etc.
Överlägget
Överlägget är ett annat sätt att skilja två sektioner på ett mycket subtilt sätt. Det är lite mer snyggt och vanligt än det snabbt blekna.
Detta kan enkelt åstadkommas i Photoshop med lageropacitet, men med CSS att göra det är det enkelt också. Se bara till att du förklarar din färg med hjälp av RGBa och ställa in det alpha-värdet på något som passar den nivå av öppenhet du ska gå för.
Overlay-tricket används vanligtvis på navigations- och andra menyrader, både i app- och webbsidans UI-design. Det är verkligen en solid teknik för nästan alla ändamål men och borde definitivt gå i din? Använd ofta? väska med tricks.
Härskaren (a.v.s. Tidslinjen)
Jag gillar verkligen det här och kommer definitivt att komma ihåg det för framtida projekt. Exemplet nedan använder det vertikalt, men det kan också vara horisontellt också.
Du kan använda denna teknik som ett enkelt statiskt element, men den här designern tog det ett steg längre. Stanna vid webbplatsen och bläddra ner för att se hur det blir ett dynamiskt navigationsverktyg. Mycket smidig!
I det här exemplet finns också en bonusteknik, märker den enkla, enkla pixel horisontella linjen. Om du går för en minimal design, är det ibland det bästa sättet att skilja två saker bara för att rita en rad! Hur mycket lättare kan det få?
Skivan
Jag debatterade ganska länge om vad jag skulle kalla den här. Är det en kudde, en damm, en puff, en skiva, en linje eller en vik? Jag vet inte vad du kallar det men det ser ganska cool ut.
Det finns flera variationer på denna idé. I grund och botten syftar de alla på att lägga lite dimensioner i innehållsavbrott och brukar involvera lite mer än någon smart skuggpositionering. Detta är perfekt för när du ska ha lite realism i din design.
Diskhon
Om detta inlägg har ditt huvud att spinna undrar vilken metod som ska användas för ditt nuvarande designprojekt, kom ihåg att du kan använda flera av dem!
Som med allt är det lätt att gå för långt men jag tror att ovanstående design är ett bra exempel på att använda flera av metoderna men ändå hålla det attraktivt och inte upptagen. Vi kan upptäcka färgkontrast, överlagringar, enkla linjer och scrapbookmetoden, allt i några hundra pixlar av utrymme!
Det finns definitivt något att säga om konsistens och repetition så se till att du inte bara använder något annat för varje avsnitt. Välj ett par olika metoder och upprepa dem flera gånger över designen.
Slutsats
Tja, det bryter upp våra tio exempel på hur man utformar innehållsavskiljare. Det kan tyckas lite trivialt nu, men lita på mig nästa gång du designar något du tänker på om det här inlägget och dina olika alternativ för att skapa visuell skillnad!
Lämna en kommentar nedan och låt oss veta vilka tekniker du använder regelbundet i dina mönster.