Idag ska vi titta på ett av de enklaste möjliga designelementen: en linje. Vi lär oss att använda linjer ordentligt och vad som ska undvikas när de implementeras.
Lägga till några enkla linjer i en design kan ge struktur och grafisk känsla till en annars tråkig design. Det är ett dött enkelt trick som, när det används effektivt, har till följd att du lägger till ett lager av finish din design.
# 1: Använd en underlinje
Vi börjar med det mest grundläggande tricket i typografiboken: en understruk. En understruken rubrik känns tyngre och ger en mer bestämd separation mellan huvudet och kroppen. Tänk på att dessa är nödvändigtvis positiva eller negativa attribut men är mer neutrala; du måste bestämma när deras närvaro är bra eller dåligt baserat på det utseende du ska gå för.
Lägg märke till hur linjen inte bara fungerar som en separator mellan de två elementen men hjälper också att definiera kolonnens bredd.
En sak som buggar mig med understrykning är den visuella roten som skapas när du har bokstäver som innehåller en nedstigning som kraschar in i raden. Det finns ingen officiell regel mot detta men jag tycker bara att det är lite för distraherande och vägnar betraktarens intresse för alla felplatser.
Så hur hanterar vi problemet? Det enklaste alternativet är självklart att bara undvika att använda descenders och understryker tillsammans, men det är lite för begränsande för min smak. Istället gör jag det som jag brukar göra är att skapa underlaget manuellt genom att dra en rad (i motsats till att bara klicka på underknappen), och maskera sedan de delar av raden som kraschar i mina nedstigningar.
Som du kan se i exemplet ovan är detta mycket trevligare än föregående exempel och innehåller mycket mindre visuell komplexitet. Om du inte gillar den lilla strängen efter den sista g? Du kan helt enkelt stoppa underlaget vid sista nedstigningen (gäller endast där sista bokstaven innehåller en nedstigning).
Förläng det
Tänk på att en understrukning inte behöver överensstämma med textens bredd. Ibland gör det ett intressant uttalande att utvidga underlaget hela vägen över eller till och med utanför sidan.
Om du förlänger underlaget, tänk på hur du kan ha kul med raden ut i det negativa rummet. Du kan ge det lite turbulens, böj det i en form, allt du vill!
Designern nedan avslutade den utökade underskriften med och avslutades med en punkt. Detta gör att det känns kopplat till något innehåll till höger och lägger till något fint men subtilt intresse för slättlinjen.
# 2: bryta upp linjen
Falla inte i fällan för att alltid dra en solid linje. Du kan använda streck, prickar, trianglar, stjärnor och allt annat du kan tänka dig för att skapa den linje du vill ha och det gör fortfarande samma mål.
Kolla in hur den här formgivaren använde ett prickat linne som ligger mitt i en rubrik för att skapa en klar del. Även om texten är centrerad här, känns designen motiverad eftersom linjerna funktionellt sträcker sig de visuella gränserna för rubriken till kolumns vänstra och högra kanter.
# 3: Flank Typ
Om du går på ett formellt tema kan du upprepa en gammal stilutskriftskänsla genom att upprepa underskriften högst upp i rubriken. Jag tänker alltid på en tidningshuvud när jag ser den här stilen.
Om du vill minska känslan av formalitet, stagger linjerna på olika sätt så det ser mindre strukturerat ut. Detta är också en praktisk effekt för att skapa en känsla av rörelse på en statisk sida.
# 4: Gå vertikal
Hittills har vi fokuserat på horisontella linjer men vertikala linjer kan användas för att infoga ett verkligt kreativt grafiskt intresse för en design. Designern nedan överdrivna de vertikala linjerna i typsnittet utan någon annan riktig orsak än att det ser ganska cool ut och skapar ett fint, sammanhängande tema som bygger på resten av sidan.
Självklart skulle en lite mer traditionell användning av en vertikal linje vara att helt enkelt separera två kolumner innehåll. Detta kan användas i kombination med antingen typ eller bilder och ger dig möjlighet att lägga mycket utrymme mellan dina kolumner utan att ha en besvärlig lucka.
# 5: Gå Diagonal
Om du verkligen vill att din sida ska bli galen, luta ditt innehåll diagonalt. Detta brukar ge intryck av ung, spännande design som bryter mot regler och driver gränser.
Att kanta ditt innehåll kan se lite slumpmässigt ut, men förlängningen av linjerna i illustrationen hjälper det att se avsiktligt och verkligen driver effekten. Var inte blyg i närheten av det, vrider verkligen rotationen och sträcker de linjerna tillräckligt långt för att göra ett uttalande.
Den diagonala effekten är särskilt stor för retro-inspirerade mönster som den ovanstående.
# 6: Gå Nötter
Det är här jag borde berätta för dig att ta det lugnt. En eller två enkla linjer kan lägga mycket på din design och gå för långt med effekten kan absolut döda din estetiska överklagande. I de rätta händerna kan en kombination av tipsen ovan resultera i en riktigt skarp slutprodukt.
Konstruktionen nedan från David Fooks använder ett ton linjearbete. Han kombinerar prickade linjer, fasta linjer, raka linjer, krökta linjer, gränser och jämn linjer med en diamant i slutet allt i detta lilla område. Den övergripande effekten är inte rörig eller ful men i stället är ganska stilren och vacker!
Mitt råd är att helt enkelt vara försiktig. Liksom alla designelement kan linjer användas för gott eller ont. Använd behärskning när det behövs och titta alltid på din design med och utan de tillförda linjerna så att du faktiskt lägger till värde för designen.
Inspiration
Kolla in dessa stora användningsområden av linjebilder i webbdesign för att få några idéer för hur man införlivar lite i din nästa design.
CarbonAds
För protokollet
Evan Eckard
Cool och Guide
Ananas tyven
DesignSwap
Husvagn
Slutsats
Syftet med denna diskussion var att uppmuntra dig att ta en titt på vår gamla vänlinjen och noga överväga var du kan använda linjer för att stärka dina mönster antingen estetiskt, strukturellt eller båda.
Om du har en design som starkt använder enkla rader, lämna en kommentar nedan med en länk så vi kan kolla in det! Låt oss också veta vad du tycker om exemplen ovan.