2. Vormgeving - Basisprincipes en Compositie

• Marketing
• MBO
• Studiejaar 1

Vormgeving

Basisprincipes en Compositie

Hoe haal je deze module?

Tijdens de lessen werk je aan verschillende opdrachten. Om deze module te behalen moet je alle opdrachten gemaakt hebben en tijdens de toetsweek een eindopdracht inleveren.

Je bent geslaagd als je een 5.5 behaald. 

Aan het einde van de les...

... ken je de basisprincipes van vormgeving

... weet je wat er bedoeld wordt met compositie

... kan je drie vormen van compositie benoemen

... heb je kennis gemaakt met verschillende ontwerptools

... kan je op basis van de theorie een social media banner maken

"Over smaak valt

niet te twisten"

Toch vinden veel mensen dezelfde ontwerpen "mooi". Hoe kan dat?

Vorm volgt functie

 Een ontwerp wordt gebaseerd op de beoogde functie of het uiteindelijk gebruik.

"Vorm volgt Functie"

Dit is in essentie een ontwerpfilosofie die zijn oorsprong vindt in de architectuur en industrieel ontwerp van de late 19e en vroege 20e eeuw. Het stelt dat de vorm van een object, gebouw of inrichting in de eerste plaats moet voortvloeien uit en gerelateerd moet zijn aan de beoogde functie of het beoogde doel ervan. Simpel gezegd, design kan en mag niet louter alleen maar mooi zijn, het moet vooral dienen om een specifieke functie te vervullen. Het is de taak van de ontwerper om deze vorm en functie harmonieus samen te voegen tot een samenhangend geheel.

Design principles

"Design principles", of ontwerpprincipes, zijn richtlijnen voor het ontwerp van je product. Het zijn dus afspraken die je (als bedrijf) opstelt over de vormgeving.

Maar er zijn een aantal basisregels die je kunt inzetten...

Basis ontwerpprincipes:

• Hiërarchie
• Balans
• Contrast
• Groeperen
• Beweging
• Patronen
• Consistentie
• Ruimte
• Gevoel
• Kijkrichting

Hiërarchie

Hiërarchie leidt het oog: wat wil je dat mensen eerst zien?

https://www.frankwatching.com/archive/2024/09/09/10-design-principes/

Balans

Contrast

Groeperen

Beweging

Patronen

Consistentie

Ruimte

Gevoel

Kijkrichting

Kijkrichting (bonus)

Wat is compositie?

Compositie is de manier waarop elementen zoals tekst, beeld, en kleur worden gerangschikt in een ontwerp om balans, harmonie en visuele aantrekkingskracht te creëren.

Maar hoe doe je dat?

Hoe doe je dat?

Door het toepassen van ontwerpprincipes, zoals:

• Balans en hiërarchie

en dit te gebruiken in compositie principes, zoals:

• De gulden snede
• Regel van derden

De Gulden snede

Een van de beroemdste verhoudingen in wiskunde en in design dateert al van de oude Grieken.

De gulden snede (ook wel 'divina proportia’ of 'sectio aura’ genoemd), is een verhouding tussen twee getallen die ongeveer gelijk is aan 1,618 ook wel aan getoond met Griekse "phi" of  φ.

Hoe gebruik je de gulden snede in je ontwerp?

Je kunt de gulden snede toepassen bij het verdelen van je kolommen. 

Stel je website is 1280px breed en je wilt een banner maken met twee kolommen:

• Kolom a maak je: 1280 : 1,681 (φ)  ≈ 790px
• Kolom b maak je: 1280 - 790 = 490px

Vlak a maak je vierkant, de hoogte van de banner

is dus 790px;

Teken een voorbeeld op het bord

en het plaatsen van elementen (compositie)

• Focuspunt
• Visuele stroom
• Visuele hiërarchie
• Visuele balans

Voorbeeld lettergrootte:

Basistekst: 16px 

Hoofdkop: 16 x 1,618 ≈ 26px

De regel van derden

De regel van derden is een compositierichtlijn waarbij je onderwerp in het linker of rechter derde deel van een afbeelding wordt geplaatst, waardoor het overige twee derde deel meer open blijft.

Focuspunten vind je op de plaats waar de lijnen kruizen.

Teken op het bord een raster van twee horizontale en twee verticale lijnen.

Plaats elementen in de vlakken, focuspunten liggen ook op de kruising.

Opdracht 1/2: Compositie ontdekken

1. Zoek online naar foto's bijvoorbeeld op www.freepik.com
2. Open de afbeelding in Canva (of ander beeldbewerkingsprogramma)
3. Kijk of je de Gulden Snede eroverheen kan leggen (zie teams) of de Regel van derden eroverheen kan tekenen.
4. Verplaats de afbeelding om wel aan een van beide richtlijnen te voldoen.

Herhaal dit, maar dan met screenshots van banners of complete homepages.

Wat valt op?

Transparante overlay van de gulden snede is te vinden in Teams:

Modulair Onderwijs CRTL > Vakgroep Marketing >

Commercie Marketing Modules > Module Vormgeving > Werkbestanden

Opdracht 2/2: Composities toepassen

Ontwerp een eenvoudige social media banner voor een fictief product of dienst. 

Gebruik:

• De regel van derden voor de plaatsing van een hoofdbeeld en tekst.
• De gulden snede om een balans te creëren tussen de elementen in het ontwerp.

Zijn er nog vragen?