6 tips voor het ontwerpen met lijnen
Vandaag gaan we kijken naar een van de eenvoudigst mogelijke ontwerpelementen: een lijn. We zullen leren hoe we lijnen correct hanteren en wat we moeten vermijden bij de implementatie ervan.
Het toevoegen van een paar eenvoudige lijnen aan een ontwerp kan structuur en grafische flair geven aan een verder saai ontwerp. Het is een doodeenvoudige truc die, wanneer effectief gebruikt, het effect heeft van het toevoegen van een laag afwerking aan je ontwerp.
Verken Envato Elements
# 1: gebruik een onderstreping
We beginnen met de meest eenvoudige truc in het typografie-playbook: een onderstreping. Een onderstreepte kop voelt zwaarder aan en zorgt voor een duidelijkere scheiding tussen de kop en het lichaam. Onthoud dat dit noodzakelijkerwijs positieve of negatieve kenmerken zijn, maar neutraler zijn; je moet beslissen of hun aanwezigheid goed of slecht is op basis van de look waar je voor gaat.
Merk op hoe de lijn niet alleen als scheidingsteken tussen de twee elementen fungeert, maar ook helpt bij het definiëren van de breedte van de kolom.
Een ding dat me irriteert met onderstrepingen is de visuele puinhoop die ontstaat wanneer je letters hebt met een afdaler die in de regel crasht. Er is geen officiële regel hiertegen, maar ik vind gewoon dat het een beetje te storend is en de aandacht van de kijker naar de verkeerde plaatsen leidt.
Dus hoe pakken we dit probleem aan? De gemakkelijkste optie is natuurlijk om gewoon te vermijden dat je afdalingen en onderstrepingen samen gebruikt, maar dat is naar mijn smaak een beetje te beperkend. Wat ik in plaats daarvan meestal doe, is de onderstreping handmatig maken door een lijn te tekenen (in plaats van simpelweg op de onderstrepingstoets te klikken) en vervolgens de delen van de lijn te maskeren die in mijn afdalingen botsen.
Zoals je in het bovenstaande voorbeeld kunt zien, is dit veel leuker dan het vorige voorbeeld en bevat het veel minder visuele complexiteit. Als je een klein stukje gestrande lijn na de laatste 'g' niet leuk vindt, kun je de onderstreping gewoon stoppen bij de laatste afdaler (alleen van toepassing als de laatste letter een afdaler bevat).
Verleng het
Houd er rekening mee dat een onderstreping niet hoeft te voldoen aan de breedte van de tekst. Soms is het een interessante verklaring om de onderstreping helemaal over of zelfs buiten de pagina uit te breiden.
Als je de onderstreping verlengt, bedenk dan manieren waarop je plezier kunt hebben met de lijn in de negatieve ruimte. Je kunt het wat turbulentie geven, het in een vorm buigen, wat je maar wilt!
Onderstaande ontwerper beëindigde de uitgebreide onderstreping met en sloot af met een punt. Hierdoor voelt het zich verbonden met alle inhoud aan de rechterkant en voegt het een leuke maar subtiele interesse toe aan de duidelijke lijn.
# 2: Breek de lijn op
Trap niet in de val om altijd een ononderbroken lijn te trekken. U kunt streepjes, stippen, driehoeken, sterren en alles wat u maar kunt bedenken gebruiken om de lijn te creëren die u wilt en toch wordt hetzelfde doel bereikt.
Bekijk hoe deze ontwerper een gestippeld linnen heeft gebruikt dat is uitgelijnd met het midden van een kop om een duidelijk gedeelte te creëren. Hoewel de tekst hier in het midden is uitgelijnd, voelt het ontwerp gerechtvaardigd aan omdat de lijnen de visuele grenzen van de kop functioneel verlengen naar de linker- en rechterrand van de kolom.
# 3: Flankeer het type
Als je voor een formeel thema gaat, kan het herhalen van de onderstreping bovenaan je kop een printgevoel in oude stijl creëren. Ik denk altijd aan een krantenkop als ik deze stijl zie.
Als u het gevoel van formaliteit wilt verminderen, moet u de lijnen op verschillende manieren spreiden, zodat het er minder gestructureerd uitziet. Dit is ook een handig effect om een gevoel van beweging op een statische pagina te creëren.
# 4: Ga verticaal
Tot dusver hebben we ons gericht op horizontale lijnen, maar verticale lijnen kunnen worden gebruikt om een echt creatieve grafische interesse in een ontwerp te plaatsen. De onderstaande ontwerper overdreef de verticale lijnen in het lettertype zonder enige echte reden, behalve dat het er cool uitziet en een mooi, samenhangend thema creëert om op voort te bouwen op de rest van de pagina.
Het is duidelijk dat een wat traditioneler gebruik van een verticale lijn zou zijn om simpelweg twee kolommen met inhoud te scheiden. Dit kan worden gebruikt in combinatie met type of afbeeldingen en stelt u in staat veel ruimte tussen uw kolommen te plaatsen zonder een lastige opening te hebben.
# 5: Ga diagonaal
Als u echt wilt dat uw pagina er gek uitziet, kantelt u uw inhoud diagonaal. Dit geeft meestal de indruk van een jong, opwindend ontwerp dat regels overtreedt en grenzen verlegt.
Het kantelen van uw inhoud kan er een beetje willekeurig uitzien, maar als u de lijnen in het kunstwerk verlengt, ziet het er opzettelijk uit en wordt het effect echt versterkt. Wees niet verlegen, draai de rotatie echt aan en rek die lijnen ver genoeg uit om een statement te maken.
Het diagonale effect is vooral geweldig voor retro-geïnspireerde ontwerpen zoals die hierboven.
# 6: Go Nuts
Dit is waar ik je moet vertellen om het rustig aan te doen. Een of twee eenvoudige lijnen kunnen veel aan uw ontwerp toevoegen en te ver gaan met het effect kan uw esthetische aantrekkingskracht absoluut tenietdoen. In de juiste handen kan een combinatie van bovenstaande tips echter resulteren in een echt scherp eindproduct.
Het onderstaande ontwerp van David Fooks gebruikt een hoop lijnwerk. In dit ene kleine gebied combineert hij stippellijnen, ononderbroken lijnen, rechte lijnen, gebogen lijnen, randen en zelfs lijnen met een diamant aan het uiteinde. Het algehele effect is niet rommelig of lelijk, maar in plaats daarvan behoorlijk stijlvol en mooi!
Mijn advies is om gewoon voorzichtig te zijn. Zoals elk ontwerpelement kunnen lijnen worden gebruikt voor goed of kwaad. Gebruik terughoudendheid indien nodig en kijk altijd naar je ontwerp met en zonder de toegevoegde lijnen om er zeker van te zijn dat je daadwerkelijk waarde toevoegt aan het ontwerp.
Inspiratie
Bekijk dit geweldige gebruik van lijnillustraties in webdesign om ideeën op te doen voor het opnemen van sommige in uw volgende ontwerp.
CarbonAds
Voor de goede orde
Evan Eckard
Cool en de gids
De ananas dief
DesignSwap
Caravan
Gevolgtrekking
Het doel van deze discussie was om u aan te moedigen om een tweede blik te werpen op onze oude vriend de lijn en zorgvuldig na te gaan waar u lijnen kunt gebruiken om uw ontwerpen zowel esthetisch, structureel als beide te versterken.
Als je een ontwerp hebt dat sterk gebruik maakt van eenvoudige lijnen, laat dan hieronder een reactie achter met een link zodat we het kunnen bekijken! Laat ons ook weten wat je van bovenstaande voorbeelden vindt.
