Les 5 - Interactiviteit en Responsiviteit

Vormgeving
Interactiviteit en Responsiviteit
1 / 20
volgende
Slide 1: Tekstslide
MarketingMBOStudiejaar 1

In deze les zitten 20 slides, met tekstslides.

time-iconLesduur is: 90 min

Onderdelen in deze les

Vormgeving
Interactiviteit en Responsiviteit

Slide 1 - Tekstslide

Deze slide heeft geen instructies

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

Slide 2 - Tekstslide

Deze slide heeft geen instructies

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. 

Slide 3 - Tekstslide

Deze slide heeft geen instructies

Aan het einde van de les...
... weet je wat een hero banner is
... weet je wat responsiviteit is in vormgeving en waarom dit belangrijk 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








Slide 4 - Tekstslide

Deze slide heeft geen instructies

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

Slide 5 - Tekstslide

Deze slide heeft geen instructies

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

Slide 6 - Tekstslide

Deze slide heeft geen instructies





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 reageert de banner op verschillende schermformaten?
  3. Worden er interactieve elementen gebruikt?
Opdracht 1/2: Analyse van hero-banners
timer
10:00

Slide 7 - Tekstslide

Deze slide heeft geen instructies

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

Slide 8 - Tekstslide

Deze slide heeft geen instructies

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!


Slide 9 - Tekstslide

šŸ”¹ 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.

Slide 10 - Tekstslide

Deze slide heeft geen instructies

Slide 11 - Tekstslide

Deze slide heeft geen instructies

Desktop resoluties
Tablet resoluties
Mobiele resoluties
Data Nederland 2024-2025

Slide 12 - Tekstslide

Maar let op: dit kan per doelgroep verschillen!

Voor desktop geldt bovendien dat niet iedereen zijn venter volledig breed heeft.
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

Slide 13 - Tekstslide

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. 

Slide 14 - Tekstslide

Deze slide heeft geen instructies

Slide 15 - Tekstslide

Deze slide heeft geen instructies

Weet je nog? Vorm volgt functie
Interactiviteit en beweging trekt de aandacht en ziet er vaak mooi uit.

Maar let op!
Te veel beweging en interactiviteit leidt juist af. Het kan er ook voor zorgen dat de bezoeker minder snel kan navigeren en de laadtijd langer duurt. Hierdoor wordt je website dus minder gebruiksvriendelijk.


Slide 16 - Tekstslide

Deze slide heeft geen instructies

Introductie tot Figma
Zie "Teams-kanaal" voor een korte handleiding

Slide 17 - Tekstslide

Deze slide heeft geen instructies

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 en ondertitel (max. 10 woorden)
  • Call-to-Action (CTA) knop
  • Maak een tweede versie die interactiviteit weergeeft (bv. hover effect)

Slide 18 - Tekstslide

Deze slide heeft geen instructies

Slide 19 - Tekstslide

Zijn er nog vragen?

Slide 20 - Tekstslide

Deze slide heeft geen instructies