Inhoudsopgave
Een volledige gids om de basis van visueel ontwerp te leren.
De hamvraag: wat is het geheim van een goed ontwerp?
We kunnen hier filosofisch over doen, maar over het algemeen ligt het spreekwoordelijke 'geheim' van een goed ontwerp in de manier waarop je je visuele elementen organiseert, in relatie tot je canvas en met elkaar. In feite hebben we zojuist lay-outontwerp beschreven. Dat, als je erover nadenkt, overal is waar je kijkt.
Neem bijvoorbeeld de lay-out van een tijdschrift. Het ontwerp volgt een klassiek rastersysteem (over rasters gaan we zo alles leren). Alles is meestal links, rechts en onderaan uitgelijnd. Vooral de kolommen hebben een duidelijke rechte uitlijning die de pagina niet alleen visueel aantrekkelijk maakt, maar ook gemakkelijk te lezen en gezaghebbend. De grote koppen trekken de aandacht van de kijker.aandacht, terwijl de ondertitel als contrast in grootte een visuele hiërarchie van informatie creëert.
Linda Gaom, Behance
Al deze kwaliteiten maken het paginaontwerp schoon, gestructureerd en gemakkelijk leesbaar, en ze zijn in overeenstemming met de tips waar we het nu over gaan hebben. Maar laten we eerst meer begrijpen over het layoutontwerp zelf.
Wat is lay-out ontwerp?
Lay-out ontwerp betreft de rangschikking van grafische elementen om de aandacht van de lezer te trekken en een bepaalde boodschap op een visueel aantrekkelijke manier over te brengen.We hebben het hier dus niet over logo ontwerp, maar over het ontwerp van drukwerk, zoals kranten, tijdschriften, posters, en hun digitale tegenhangers, evenals web, app, of UX/UI ontwerp.
Het woord "lay-out" geeft ons veel hints. Het betekent een rangschikking van vooraf bepaalde elementen op een pagina.
Als een lay-out effectief is, ziet hij er goed uit en leidt hij de kijker naar de boodschap die het ontwerp probeert over te brengen. Inzicht in lay-out is daarom essentieel voor het maken van boeiende, effectieve, gebruiksvriendelijke en aangename composities.
Als een lay-out zijn boodschap niet goed overbrengt aan het publiek, of met andere woorden, niet goed "leest", is het ontwerp niet effectief, hoe trendy het er ook uitziet. Op het gebied van lay-outontwerp gaat inhoud boven trends en gimmicks.
Het doel van lay-out ontwerp
Om een boodschap snel over te brengen
Lay-out ontwerp legt de relatie tussen grafische elementen om een soepele stroom van oogbewegingen te bereiken voor maximale effectiviteit en impact.
Om evenwicht te creëren
Het gebruik van de principes van lay-out ontwerp is de meest eenvoudige manier om een gevoel van evenwicht en symmetrie te creëren in uw ontwerpprojecten zonder saai te worden.
Om samenhang te creëren
Lay-out helpt u de vele elementen van uw ontwerp op een gemakkelijk verteerbare, samenhangende en logische manier te ordenen.
Om schoonheid te creëren
Evenwicht en structuur creëren van nature schoonheid. Als uw lay-outontwerp correct is uitgevoerd, wordt het automatisch visueel aantrekkelijk voor de kijker. Hoe minder moeite de kijker moet doen om een boodschap te begrijpen, hoe aantrekkelijker uw ontwerp zal overkomen.
Ontwerper door Frank Philippin voor zijn boek 'I Used to Be a Design Student: Then - Now.' Bron: DesignBoom
De elementen van lay-out ontwerp
Tekst
Dit omvat niet alleen de tekst of paragrafen, maar ook koppen, subkoppen, kop- en voetteksten. Uw keuze van typografie, kleur en grootte zal verschillende effecten hebben op hoe uw lay-out zal overkomen bij uw publiek.
Afbeelding
De meest voorkomende soorten afbeeldingen zijn foto's, illustraties of infografieën.
Vormen
Vormen kunnen geometrisch zijn, die zeer hoekig zijn, of ze kunnen organisch zijn en de natuurlijke wereld nabootsen. Ze kunnen ook abstract zijn. Abstracte vormen zijn het afgelopen jaar erg trendy geweest, omdat we hebben gezien dat webdesigners ze hebben verwerkt in complexe en uitgestrekte composities.
Vormen kunnen een afbeelding vervangen of worden gebruikt om grafische elementen aan een pagina toe te voegen, tekst te markeren of de ruimte tussen andere visuele elementen af te bakenen.
Witte ruimte
Elk lay-outontwerp heeft een bepaalde hoeveelheid witruimte, zodat uw elementen kunnen ademen en op zichzelf kunnen staan.
De gouden principes van lay-outontwerp
Je zult merken dat de principes van layout ontwerp veel van de fundamentele principes van design volgen. Zoals kleurgebruik op een bepaalde manier, typografie, herhaling, contrast, hiërarchie en balans.
Principe #1. Gebruik rasters
Rasters helpen ontwerpers verschillende ontwerpelementen zoals tekst en afbeeldingen zo te plaatsen dat ze er samenhangend en gemakkelijk te volgen uitzien.
Ze zorgen voor orde, voorkomen dat elementen elkaar overstemmen, en bovenal corrigeren rasters je uitlijning, waardoor je werk schoner en professioneler aanvoelt.
Zie ook: Hoe digitale kunstdiefstal te vermijden
Bron: hgmlegal.com
De anatomie van roosters
U denkt misschien dat het gewoon verticale en horizontale lijnen zijn, maar een raster bestaat uit verschillende onderdelen. Vele zelfs. Hier volgt de belangrijkste terminologie die u moet kennen in een basisraster:
- Formaat is de volledige oppervlakte van je uiteindelijke ontwerp. Dus als je iets ontwerpt voor drukwerk, is het formaat de pagina, en als je een webdesigner bent, is het formaat de webpagina of het browservenster.
- Marges zijn de opzettelijke lege ruimten tussen het formaat en het ontwerp.
- Stroomlijnen Flowlines zijn de horizontale lijnen die uw lay-out in parallelle secties scheiden. Flowlines helpen bij de leesbaarheid van uw ontwerp en leiden de lezer om de inhoud correct te volgen.
- Modules zijn de blokken die gevormd worden door de horizontale lijnen en verticale stroomlijnen van elk raster. Als je erover nadenkt, zijn het de bouwstenen van elk raster. Al je verticale modules creëren je kolommen, terwijl al je horizontale rasters je rijen creëren.
- Regio's zijn groepen van verbonden modules, verticaal of horizontaal. Er zijn geen regels voor hoe u deze organiseert.
Bron: Radversity
Soorten roosters
Lay-out roosters werden voor het eerst gebruikt om handschriften op papier te ordenen.
Ze dateren al uit de 13e eeuw, toen de Franse kunstenaar Villard De het rastersysteem samenvoegde met de gulden snede om gedrukte pagina's met marges te produceren. Dit rastersysteem zie je tot op de dag van vandaag, zoals de meeste gedrukte boek- en tijdschriftlay-outs bewijzen. Uitgevers, redacteuren en ontwerpers geven de voorkeur aan standaardrasters, niet alleen omdat ze er goed uitzien, maar ook omdat lezers gewend zijn aanbepaalde ontwerpelementen op een bepaalde plaats verwachten.
Roosters kunnen op twee manieren worden ontworpen: symmetrisch of asymmetrisch. Symmetrische roosters volgen een middellijn, waarbij de verticale en horizontale gebieden gelijk zijn aan elkaar; en kolommen hebben dezelfde breedte.
In een asymmetrisch rooster Zoals de naam al aangeeft, zijn de marges en de kolommen niet allemaal identiek.
Op basis van deze indeling zijn er vijf hoofdtypen opmaakroosters die wereldwijd worden gebruikt en waarop u kunt vertrouwen:
Roosters voor manuscripten zijn het meest voorkomende soort raster voor documenten. Ze scheiden de kop- en voettekst en de marges, en creëren in feite een rechthoek binnen het formaat (of de pagina) die de grenzen van uw tekst aangeeft. Ze vormen de basis voor tijdschriften, kranten en boeken. Het is dus waarschijnlijk de lay-out waarmee u het meest vertrouwd bent.
Bron: UXplanet
Bron: Radversity
Kolom roosters Een typisch tijdschrift gebruikt kolomrasters om tekst te scheiden in gemakkelijk te lezen secties. Maar ze zijn ook erg populair voor websites. Je kunt alles gebruiken, van twee tot zes rasters. Meer is mogelijk, maar niet gebruikelijk. Een heel belangrijk ding over kolomrasters is dat de afstand tussen de kolommen, of de goten, even ver van elkaar zijn.andere.
Symmetrische kolommenrasters worden bijvoorbeeld gebruikt door kranten, terwijl een asymmetrisch kolommenraster de voorkeur geniet bij webdesign.
Bron: UX Planet
Bron: Radversity
Modulaire roosters zijn vergelijkbaar met het kolommenraster, maar ze houden ook rekening met de horizontale stroomlijnen. Dit type raster is nodig wanneer u verschillende elementen in uw lay-out moet organiseren en de kolommenrasters gewoonweg niet volstaan.
Modulaire rasters hebben modules van gelijke grootte, wat het heel gemakkelijk maakt om uw ruimtelijke zones op verschillende manieren te visualiseren.
Bron: UX Planet
Bron: Radversity
Zie ook: Hoe ontwerp je achtergronden?Basisnetwerken Een basislijn is de lijn waarop de tekst rust als je typt, en de afleiding is de afstand tussen twee basislijnen. Vraag je je af hoe groot je koppen of subkoppen moeten zijn?
Basislijnrasters zijn er om uw tekst een vloeiend ritme te geven.
Bron: UX Planet
Bron: Fragaria
Hiërarchische roosters lijken minder op een raster dan al hun tegenhangers. Toch zijn ze erg nuttig bij het organiseren van ontwerpelementen in hun volgorde van belangrijkheid. Hiërarchische rasters kunnen gebaseerd zijn op modulaire rasters, of je kunt zelfs je eigen raster maken. Websites gebruiken dit raster veel, vooral digitale tijdschriften en kranten vertrouwen meer op hiërarchische rasters in plaats van kolomrasters in hun overgang naar het worden vandigitaal.
Bron: UX Plane
Principe #2. Gebruik negatieve ruimte
Wij denken vaak dat leegte, stilte of gebrek aan kleur een slechte zaak is. Maar we staan er niet bij stil dat zij de solide basis vormen van het contrast.
Negatieve ruimte, ook wel witte ruimte genoemd, is dat gebied in uw ontwerp dat geen eigenlijke elementen bevat. Het is het gebied dat leeg blijft. Het omringt niet alleen uw activa, het creëert ook de noodzakelijke banden tussen hen. Daarom is negatieve ruimte een terecht ontwerpelement en heeft het een enorme invloed op hoe effectief uw lay-outontwerp is.
Goede versus slechte negatieve ruimte
Negatieve ruimte helpt verschillende gebieden in uw ontwerp te scheiden, terwijl uw lay-out ook kan ademen. Het helpt bij visuele hiërarchie en visueel evenwicht; het legt de focus van de gebruiker op de kernelementen; het vermindert het niveau van afleiding; en ten slotte voegt het stijl en elegantie toe aan uw ontwerp.
Onervaren ontwerpers kunnen de neiging hebben om zoveel mogelijk van hun canvas op te vullen, door tekst op te schalen of een logo of afbeelding op te blazen. Maar door je elementen de ruimte te geven, kan de kijker bepaalde informatie sneller en gemakkelijker oppikken.
Als alles schreeuwt om de aandacht van je kijker, wordt er niets gehoord.- Aaron Walter, "Design for emotion
Een gemakkelijke manier om uw negatieve ruimte te bepalen is door een modulair raster te gebruiken. Door dat op uw ontwerp te leggen, kunt u dan gemakkelijk visualiseren welke modules leeg kunnen blijven, en welke moeten worden ingevuld.
Ontwerper door Brunswicker, Bron: Codesignmag.com
Principe #3. Kies één enkel aandachtspunt
Heeft een klant je ooit gevraagd het logo groter te maken? En daarna de kop nog groter?
Je kunt niet alles benadrukken. Dat doet het doel van een goed ontwerp teniet. Net als tijd, is focus relatief. Wil een element opvallen, dan moet een ander als achtergrond dienen. Sommige elementen moeten andere domineren, zodat je ontwerp een visuele hiërarchie vertoont.
Het brandpunt in een ontwerp is het element met het grootste visuele gewicht. Het is het element dat het eerst de aandacht trekt, meer dan al het andere in uw lay-out.Een brandpunt kondigt uw publiek aan waar hun kijkreis op uw ontwerp begint. Het is dus het begin van het verhaal dat u vertelt.
Dit kan meestal worden bereikt door een grote afbeelding of een grote bron van typografie te gebruiken. Merk op hoe effectief het onderstaande focuspunt is
Ontworpen door Braulio Amado voor Bloomberg Businessweek, Bron: Het is leuk dat
Maar terwijl een brandpunt de aandacht van uw publiek zal trekken, zal de volgende regel helpen die aandacht te sturen.
Principe #4. Denk aan nabijheid en doorstroming
Het principe van nabijheid is eenvoudig: zorg ervoor dat elementen die met elkaar te maken hebben bij elkaar worden geplaatst.
Nauwe nabijheid geeft aan dat de visuele activa met elkaar verbonden zijn en één visuele eenheid vormen die uw lay-out helpt organiseren.Cluster dus alleen ontwerpactiva die een relatie met elkaar hebben, en gebruik informatievakken op uw ontwerp om uw publiek te leiden naar het stuk relevante inhoud dat zij moeten consumeren. Dit wordt ook wel het stroomprincipe genoemd.
Bron: Satori Graphics
Een ontwerp met een goede flow leidt het oog van de kijker gemakkelijk door de lay-out, van element naar element. Uw focuspunten trekken het oog en worden de rustplaats, terwijl andere elementen richting geven.
Een eenvoudige manier om dit te begrijpen is bijvoorbeeld het voorbeeld van onze website. Afbeeldingen zijn duidelijk gescheiden van de tekst, net als de oproepen tot actie, zodat de aandacht van de kijker van de ene cluster van informatie naar de volgende navigeert.
Principe #5. Gebruik contrast
Zorg voor voldoende contrast in je ontwerp.
Contrast helpt je ontwerp te organiseren en zorgt voor de broodnodige hiërarchie en legt de nadruk op wat belangrijk is.Meer dan dat, een goed gebruik van contrast voegt ook visuele interesse toe aan uw ontwerp. Laten we eerlijk zijn, een layout waar alles dezelfde grootte, vorm of kleur heeft, gaat er saai uitzien. Contrast maakt dingen pittiger.
Je eerste gedachte is misschien kleurcontrast, zoals warm versus koel, donker versus licht, blauw versus oranje. Maar hoewel kleur een zeer essentieel principe van contrast is, zijn er ook contrasten van type, uitlijning en grootte. En vergeet niet dat contrast ook relatief is. Het heeft alleen betekenis in nevenschikking met andere elementen.
Hier zijn enkele voorbeelden van lay-outs die deze regel op een slimme en mooie manier gebruiken. Let op het contrast in typografie, kleur en zelfs het contrast in de grootte tussen elementen.
Bron: Afstemmingsactieplan IAG
Principe #6. Herhaling, patroon, ritme
Bij herhaling denken we aan steeds hetzelfde element.
Maar het is anders in design. Het is zeker niet zo saai als dat. Wanneer het goed gebruikt wordt, kan herhaling je ontwerp juist versterken.
Probeer een motief te identificeren en te hergebruiken in uw hele lay-out, zodat verschillende gebieden verbonden voelen en deel uitmaken van dezelfde compositie. Het zal uw ontwerp helpen een thema te hebben. Door elementen te herhalen, levert u niet alleen volgens de verwachtingen van uw publiek, maar verbetert u ook de gebruikerservaring. Consequent zijn zorgt ervoor dat de gebruikers zich meer op hun gemak voelen.
U kunt dit doen door vormen of symbolen te herhalen. Of zelfs een kleurenschema, een lettertype, en dezelfde stijl in het algemeen.
Een goede gewoonte is om een lettertype met een grote familie te gebruiken. Beperk het aantal verschillende patronen, lijngewichten/-stijlen en kleuren, en herhaal deze overal. Probeer ook de stijl van afbeeldingen en grafieken hetzelfde te houden. Gebruik bijvoorbeeld illustraties van dezelfde kunstenaar.
Bron: Thepentool.co
Dit zijn de zes principes die u zullen helpen uw ontwerp te organiseren en een schonere, professionelere en evenwichtigere lay-out te bereiken.
Maar je reis eindigt hier niet. Grafisch ontwerp is geen exacte wetenschap en het moet niet beperkt blijven tot tips en principes. Zoals op alle gebieden van creatie is er geen harde vuistregel. Door op subtiele manieren van deze tips af te wijken, voeg je diepte en variatie toe aan je ontwerpen.
Toch zijn ze een goed uitgangspunt en we moedigen u aan ze eens te proberen. En laat ons weten hoe ze hebben gewerkt!
Vectornator downloaden om te beginnen
Breng uw ontwerpen naar een hoger niveau.
Bestand downloaden
