5. Vormgeving - Interactiviteit en Responsiviteit

• Marketing
• MBO
• Studiejaar 1

Vormgeving

Interactiviteit en Responsiviteit

Waar gaat de module over?

Les 1 - Introductie tot online vormgeving

Les 2 - Basisprincipes en compositie

Les 3 - Kleurentheorie en toepassing

Les 4 - Typografie en Leesbaarheid

Les 5 - Interactiviteit en Responsiviteit

Les 6 - Doelgroep en Branding

Les 7 - Werken met verschillende formaten

Les 8 - Eindopdracht

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...

... weet je wat responsiviteit is in vormgeving en waarom dit belangrijk is

... weet je wat een hero banner is

... heb je een beeld van interactiviteit in banners

... ken je de voor- en nadelen van animaties in je banners

... heb je een introductie in Figma gekregen

... heb je een interactieve, responsieve hero banner gemaakt

Hero banner

Een hero-banner is de grote, visueel opvallende banner bovenaan een webpagina.

ONTDEK MEER

Het is het eerste wat een bezoeker ziet en heeft als doel om direct de aandacht te trekken en een boodschap over te brengen.

Kenmerken van een (goede) hero-banner

• Grote afbeelding of video van hoge kwaliteit
• Korte, pakkende tekst
  
• Call-to-Action (CTA)

• Responsief ontwerp
  
• Interactiviteit
  

Belangrijk hierbij:

• Snelle laadtijd!
• Functioneel

Responsief ontwerp

Omdat hero-banners op verschillende apparaten worden bekeken, moeten ze zich aanpassen aan het schermformaat.

• Beeldformaat aanpassen
• Tekstgrootte en positionering
• CTA-knop aanpassen
• Afbeeldingen slim schalen
• Testen!

🔹 Beeldformaat aanpassen:

• Desktop: Brede afbeelding (bijv. 1920x600 px).
• Mobiel: Kortere en hogere afbeelding (bijv. 1080x1080 px of 750x1334 px).

🔹 Tekstgrootte en positionering:

• Grote koptekst op desktop, compactere tekst op mobiel.
• Tekst centreren of verplaatsen afhankelijk van schermgrootte.

🔹 CTA-knop aanpassen:

• Op mobiel groter en beter klikbaar maken.
• Contrast verbeteren voor leesbaarheid.

🔹 Afbeeldingen slim schalen:

• Zorg dat de kern van de afbeelding altijd zichtbaar blijft.

🔹 Testen op verschillende schermen:

Gebruik de Chrome DevTools of Figma responsive preview.

https://gs.statcounter.com/screen-resolution-stats/all/netherlands

Desktop resoluties

Tablet resoluties

Mobiele resoluties

Data Nederland 2024-2025

Maar let op: dit kan per doelgroep verschillen!

Voor desktop geldt bovendien dat niet iedereen zijn venter volledig breed heeft.

Pixeldichtheid

Naast responsiviteit op schermbreedte, moet je ook rekening houden met pixeldichtheid. Schermen met een hogere pixeldichtheid (zoals retina schermen van Apple) geven per inch meer pixel weer (ppi).

Tips:

• Ontwerp altijd een versie die 2 of 4 keer zo groot is
• Gebruik "echte" tekst i.p.v. tekst in de afbeelding.
    als je een afbeelding met tekst uitvergroot wordt de tekst slecht leesbaar.

Voorbeeld blow-up van banner met tekst in de afbeelding. Vergelijk met het voorbeeld op slide 4

Interactiviteit in Hero-Banners

Een hero-banner kan interactieve elementen bevatten om de gebruikerservaring te verbeteren. 

Veelgebruikte interactieve elementen:

• Hover-effecten
• Animaties
• Video
• Slider
• Parallax-effect

Hover-effecten: Knop verandert van kleur of krijgt een schaduw als je eroverheen beweegt.

Animaties: Tekst die fade-in of een subtiele zoom op de achtergrondafbeelding.

Video of slider: Beweging trekt extra aandacht en geeft meer informatie.

Parallax-effect: Achtergrond beweegt langzamer dan de voorgrond bij scrollen.

Parallax-effect

Parallax scrolling is een speciale techniek, waarbij content (met name afbeeldingen) met verschillende snelheden (=parallax), verticaal en/of horizontaal en soms gecombineerd met extra animaties, over elkaar heen rollen (=scrollen). Hiermee wordt de illusie van diepte (3D) gecreëerd in een 2D beeld. 

Bezoek de volgende websites met hero-banners:

• www.rituals.com
• www.wwf.nl
• www.333travel.nl
• www.ticketmaster.nl

Beantwoord de volgende vragen:

1. Welke visuele elementen vallen op?
2. Hoe wordt de tekst geplaatst op desktop vs. mobiel?
3. Welke interactieve elementen worden gebruikt?
4. Hoe reageert de banner op verschillende schermformaten?

Opdracht 1/2: Analyse van hero-banners

Introductie tot Figma

Zie "Teams-kanaal" voor een korte handleiding

Opdracht 2/2: Ontwerp een hero-banner

Ontwerp een hero-banner voor de homepage van: lionkingbali.com

• Stap 1:  Kies een doel voor de banner
• Stap 2: Ontwerp de hero-banner in Figma

Desktopformaat:  1920 x 600 px

Mobiel formaat:    390 x 600 px

Elementen:

• Achtergrond (afbeelding of video)
• Pakkende titel (max. 10 woorden)
• Call-to-Action (CTA) knop
• Bonus: Voeg een hover-effect toe aan je button

Zijn er nog vragen?