Als je naar een ander land verhuist (waar ze niet dezelfde taal spreken als jij), is een van de eerste dingen die je waarschijnlijk zou doen, beginnen met het leren van de taal. Misschien begin je er zelfs al lang voor je verhuizing mee, als voorbereiding op het kunnen communiceren met de mensen die je binnenkort buren zult noemen.

Communicatie is een essentieel onderdeel van het leven en als webdesigners doen we dat bij elk nieuw ontwerp.
Wat gebeurt er als woorden niet volstaan? Als je wilt dat iemand in een bepaalde richting kijkt, kun je in die richting wijzen. We hebben allemaal een grammatica ontwikkeld om te communiceren met fysieke gebaren en we communiceren evenveel, zo niet meer met lichaamstaal dan met verbale taal.

Web- en grafische ontwerpers communiceren visueel. Een kleurenschema met donkerblauw als dominante kleur geeft bijvoorbeeld een heel andere boodschap af dan wanneer de dominante kleur warm roze is. Kleur is een van de manieren waarop we visueel communiceren. Het is een van de bouwstenen van de visuele grammatica, die gewoonlijk zo wordt gedefinieerd dat ze omvat:

• lijnen
• vormen
• kleur
• textuur
• waarde
• ruimte
• vorm/volume/massa

We hebben het in het verleden gehad over kleurentheorie en kleurbetekenis en over het gebruik van witruimte in het ontwerp. Vandaag wilde ik het hebben over lijnen. Welke soorten lijnen staan ons ter beschikking? Wat communiceren verschillende lijnen? De volgende keer zullen we het over vormen hebben en daar enkele van dezelfde vragen over stellen.

De grammatica van lijnen

Een lijn is een punt uit voor een wandeling.
-Paul Klee

Een lijn verbindt twee punten met elkaar. Het is ook het pad dat door een bewegend punt wordt afgelegd. Lijnen kunnen dik of dun zijn. Ze kunnen lang of kort zijn. Ze kunnen verticaal, horizontaal of diagonaal zijn. Ze kunnen effen zijn of gestippeld of gestippeld. Lijnen kunnen gebogen of recht zijn of combinaties van beide. Er is een eindeloze variatie in wat wij als een lijn beschouwen.

Lijnen kunnen letterlijk of impliciet zijn. Teken een reeks van 3, 4 of 5 punten en je geest zal de lijn tussen die punten invullen.

Elke manier waarop we een lijn tekenen of weergeven, geeft haar unieke kenmerken. Dikke lijnen hebben een andere betekenis dan dunne lijnen. Een gebogen lijn zendt een andere boodschap uit dan een scherpe rechte lijn.

Typen lijnen

Er zijn verschillende soorten lijnen die door hun gebruik worden gedefinieerd.

• Contourlijnen worden gebruikt om randen aan te geven. Ze creëren grenzen rond of in een object. De meeste lijnen die je tegenkomt zijn contourlijnen. In webdesign zijn dit bijvoorbeeld de randen die je rond een object of een groep objecten aanbrengt
• Scheidingslijnen kunnen ook randen definiëren, maar wat ze onderscheidt van contourlijnen is dat ze ruimte verdelen. De lijnen tussen tekstkolommen zijn scheidingslijnen, evenals de lijnen die menu-onderdelen van elkaar scheiden.
• Decoratielijnen worden gebruikt om een object te verfraaien. Cross-hatching is een voorbeeld van het gebruik van decoratie lijnen om schaduw en vorm toe te voegen aan een object. De lijn onder graag gelezen tekst is een decoratielijn, evenals de lijnen die worden gebruikt om een gebloemde achtergrondafbeelding te maken.
• Gebaarlijnen zijn snelle en ruwe ononderbroken lijnen die worden gebruikt om vorm en beweging vast te leggen. Ze worden over het algemeen gebruikt bij het bestuderen van de vorm en beweging van de menselijke vorm. Je zult waarschijnlijk geen gebaarlijnen gebruiken (gebaseerd op de technische definitie) in een webontwerp, maar je kunt zeker patronen van lijnen maken om beweging aan te geven of een vorm op te bouwen

De betekenis van verschillende soorten lijnen

Zoals ik hierboven al zei, zijn er veel verschillende manieren waarop we een bepaalde lijn kunnen beschrijven en elke manier geeft een lijn unieke kenmerken. Wat betekenen deze kenmerken en wat communiceren ze? (.doc)

Dunne lijnen zijn breekbaar. Ze lijken gemakkelijk te breken of om te vallen. Ze suggereren broosheid en stralen een elegante kwaliteit uit. Ze zijn delicaat en stralen een vluchtige sfeer uit.

Dikke lijnen daarentegen lijken moeilijk te breken. Ze suggereren kracht en leggen de nadruk op nabijgelegen elementen. Dikke lijnen zijn gedurfd en maken een statement.

Horizontale lijnen zijn evenwijdig aan de horizon (vandaar de naam). Ze zien eruit alsof ze liggen, in rust zijn, slapen. Ze suggereren kalmte en rust, een ontspannen comfort.

Horizontale lijnen kunnen niet omvallen. Ze accentueren de breedte. Ze zijn stabiel en veilig. Ze brengen een afwezigheid van conflict, een rustgevende vrede over. Horizontale lijnen worden door hun verbinding met de horizon geassocieerd met aardgebonden dingen en idee.

Verticale lijnen staan loodrecht op de horizon. Ze zijn gevuld met potentiële energie die vrij kan komen als ze omvallen. Verticale lijnen zijn sterk en onbuigzaam. Ze kunnen stabiliteit suggereren, vooral als ze dikker zijn. Verticale lijnen accentueren de hoogte en brengen een gebrek aan beweging over, wat meestal als horizontaal wordt gezien.

Ze strekken zich uit van de aarde tot aan de hemel en zijn vaak verbonden met religieuze gevoelens. Hun lengte en formaliteit kunnen de indruk wekken van waardigheid.

Diagonale lijnen zijn onevenwichtig. Ze zijn vervuld van rusteloze en ongecontroleerde energie. Ze kunnen lijken te stijgen of te dalen en brengen actie en beweging over. Hun kinetische energie en schijnbare beweging creëren spanning en opwinding. Diagonale lijnen zijn dramatischer dan horizontale of verticale lijnen.

Diagonale lijnen kunnen ook solide en onbeweeglijk lijken als ze iets omhoog houden of in rust zijn tegen een verticale lijn of vlak.

Gekromde lijnen zijn zachter dan rechte lijnen. Ze zwaaien en draaien sierlijk tussen eindpunten. Ze zijn minder vastomlijnd en voorspelbaar dan rechte lijnen. Ze buigen, ze veranderen van richting. Gebogen lijnen drukken een vloeiende beweging uit. Ze kunnen rustig of dynamisch zijn, afhankelijk van de mate waarin ze gebogen zijn. Hoe minder actief de kromming, hoe rustiger het gevoel.

Zigzaglijnen zijn een combinatie van diagonale lijnen die op punten op elkaar aansluiten. Ze nemen de dynamische en energieke kenmerken van diagonale lijnen over. Ze creëren opwinding en intense beweging. Ze brengen verwarring en nervositeit over omdat ze snel en vaak van richting veranderen. Ze kunnen gevaar en vernietiging impliceren als ze afbreken.

Lange, perfect gelijke lijnen voelen kunstmatig aan. De natuur is niet perfect recht. Als er variatie aan een lijn wordt toegevoegd, wordt deze minder kunstmatig en meer natuurlijk.

Streep- en stippellijnen zijn impliciete lijnen. Ze zijn onvolledig en laten voorwerpen passeren. Een dikke, verticale stippellijn of streepjeslijn is nog steeds een sterke lijn, hoewel niet zo sterk als de lijn volledig massief zou zijn.

Lijnpatronen

Een reeks lijnen vormt een patroon. Deze lijnpatronen brengen betekenis over naast de betekenis van de afzonderlijke lijnen.

Parallelle lijnen van gelijke breedte en spatiëring creëren een statisch en ordelijk effect. Het maakt niet uit of de lijnen horizontaal, verticaal of diagonaal zijn. Zelfs in gebogen lijnen schept de herhaling orde, echter een meer dynamische dan rechte lijnen. Niet te vergeten hoe de reeks gebogen lijnen, hoewel meestal statisch, toch een gevoel van beweging creëert.

Door de spatiëring tussen lijnen van gelijke dikte te variëren, kunnen we beweging overbrengen. Als de afstand tussen lijnen van dezelfde dikte willekeurig is, krijgen we een dynamisch effect met weinig orde. Wanneer we zowel de afstand als de dikte variëren, wordt het effect chaotischer en wanordelijker.

Lijnpatronen kunnen worden opgebouwd om schaduwen en textuur te creëren. Waarde kan worden gecontroleerd door het gebruik van lijnen. Lijnen kunnen worden gecombineerd om vormen te vormen. Lijnen kunnen worden opgebouwd uit letters of een willekeurige vorm die achter elkaar worden geplaatst.

Hoe gebruik je lijnen in webdesign

We gebruiken lijnen om informatie en ontwerpelementen te organiseren, te verbinden en te scheiden. Je kunt lijnen gebruiken om beweging over te brengen en textuur te creëren. Lijnen geven nadruk en definiëren vorm. Ze kunnen worden gebruikt om stemming en emotie over te brengen.

Bedenk eens een website en alle plaatsen waar lijnen worden of kunnen worden gebruikt. Wanneer je elementen van een ontwerp op één lijn brengt, creëer je een impliciete lijn die deze elementen ordent en verbindt. Je kunt de relatie verder benadrukken met een echte lijn.

Je voegt randen toe rond verschillende elementen in je ontwerp om ze te groeperen en duidelijk te scheiden van andere elementen op de pagina.

Lijnen worden gebruikt om header van content te scheiden en content van footer. Ze worden gebruikt om de pagina te verdelen in kolommen en rijen met informatie. Rasterlijnen kunnen zelfs de structurele lijm zijn die je hele ontwerp bij elkaar houdt.

Ontwerpen is het beheersen van ruimte en lijnen worden vaak gebruikt om die ruimte te definiëren. We kunnen echte of impliciete lijnen gebruiken in combinatie met de gestalt-principes van continuïteit, uniforme verbondenheid, nabijheid, parallellisme, gemeenschappelijk gebied, en zelfs sluiting.

Samenvatting

Lijnen zijn een essentiële bouwsteen in ons visuele vocabulaire. In combinatie met vormen, kleur, waarde, textuur, ruimte en vorm geven ze ons een visuele grammatica die we kunnen gebruiken om te communiceren.

Ze lijken eenvoudig. U had mij niet nodig om u te vertellen wat een lijn is toen u begon met het lezen van dit bericht en toch zijn we hier zo’n 2000 woorden verder en hebben we nauwelijks de oppervlakte geraakt van wat lijnen kunnen doen. Als we dat zouden willen, kunnen lijnen het oppervlak creëren en de kras weergeven.

Zoiets eenvoudigs als een lijn kan een eindeloze combinatie of verscheidenheid hebben en door die verscheidenheid verschillende betekenissen, concepten, thema’s overbrengen.

Even meer als we lijnen combineren tot patronen, kunnen we extra informatie en betekenis overbrengen. We kunnen lijnen gebruiken om texturen en vormen te creëren, wat ons naar de volgende post leidt.

De volgende keer gaan we verder met het opbouwen van onze visuele grammatica met een bespreking van vormen.

Download een gratis voorbeeld uit mijn boek, Design Fundamentals.