Lopes Slot Design System
Atomic Elements – Trainingen & Cursussen
Centrale beheerpagina voor kleuren, typografie, spacing, componenten en lestemplates van Lopes Slot.
01 — Kleuren
De globale kleurvariabelen van het Lopes Slot Design System. Wijzig kleuren altijd via de globale variabelen en niet afzonderlijk per lesblok.
Primary
ls-color-primary
Secondary
ls-color-secondary
Accent
ls-color-accent
Surface
ls-color-surface
Text
ls-color-txt
Success
ls-color-success
Warning
ls-color-warning
Error
ls-color-error
Info
ls-color-info
02 - Typografie
De globale typografie van Lopes Slot. Pas lettertype, grootte en kleur altijd via de globale typografieclasses aan.
H1 — Hoofdtitel van een les
H2 — Titel van een lesonderdeel
H3 — Titel binnen een blok
Body — Dit is de standaard lopende tekst voor theorie, uitleg, voorbeelden en instructies binnen een les.
Small — Kleine ondersteunende tekst, labels en aanvullende informatie.
03 - Spacing
Vaste afstanden zorgen voor een rustig en consistent ontwerp. Gebruik deze spacingvariabelen in plaats van willekeurige pixelwaarden.
ls-space1
4 px
ls-space2
8 px
ls-space3
12 px
ls-space4
16 px
ls-space5
24 px
ls-space6
32 px
ls-space7
48 px
ls-space8
64 px
ls-space9
80 px
ls-space10
96 px
04 — Basis lesstructuur
Elke Lopes Slot-les wordt opgebouwd volgens dezelfde basisstructuur. Niet ieder extra component hoeft in iedere les gebruikt te worden.
- 1. Introductie
- 2. Leerdoelen
- 3. Video
- 4. Theorie
- 5. Praktijkvoorbeeld
- 6. Tip
- 7. Opdracht
- 8. Download
- 9. Samenvatting
- 10. Toets + navigatie
Aanvullende componenten: Belangrijk, Waarschuwing, Afbeelding, Vergelijking, Tabel en Oefening.
05 — Informatieblokken
Visuele blokken waarmee belangrijke, aanvullende of waarschuwende informatie binnen een les herkenbaar wordt gemaakt.
Belangrijk
Een professionele werkhouding betekent ook dat je verantwoordelijkheid neemt voor je eigen handelen. Als je een fout maakt, is het belangrijk om die eerlijk te melden en mee te werken aan een oplossing.
Let op
Controleer altijd of je de juiste versie van een document gebruikt voordat je ermee gaat werken.
Na deze les kun je:
Uitleggen wat een professionele werkhouding betekent
Benoemen waarom betrouwbaarheid belangrijk is.
Toepassen van professioneel gedrag in praktijksituaties.
Tip
Werk je een opdracht uit? Controleer altijd eerst wat precies van je wordt verwacht. Zo voorkom je fouten en werk je nauwkeuriger.
06 — Contentblokken
Componenten voor het verduidelijken, visualiseren en structureren van de lesinhoud.
Praktijkvoorbeeld
Een medewerker krijgt de opdracht om een klant terug te bellen. De medewerker noteert de afspraak, belt de klant op het afgesproken moment en registreert daarna wat er is besproken. Zo laat de medewerker zien dat hij betrouwbaar en verantwoordelijk werkt.
Ondersteunende tekst onder een afbeelding
Dit is een titel
Werknemer
Actie
Medewerker 1
Op tijd
Medewerker 2
Te laat
Vergelijking
Professioneel
Afspraken nakomen
Op tijd zijn
Werk controleren
Onprofessioneel
Afspraken vergeten
Te laat komen
Werk niet controleren
07 — Actief leren
Componenten waarmee de cursist de leerstof actief verwerkt, toepast en oefent.
Opdracht
Beschrijf een situatie waarin jij professioneel gedrag hebt laten zien. Leg uit wat je hebt gedaan en waarom dit professioneel was.
Oefening
Lees de situatie en bepaal welk gedrag professioneel is.
Een klant wacht al tien minuten op antwoord. Wat doe je?
08 — Afronding & vervolg
Componenten voor het afronden van de leerstof, aanbieden van materialen en begeleiden van de cursist naar het volgende onderdeel.
Samenvatting
Een professionele werkhouding betekent dat je betrouwbaar, verantwoordelijk en nauwkeurig werkt. Je houdt je aan afspraken, controleert je werk en neemt verantwoordelijkheid voor je handelen.
Goed gedaan!
Je hebt de basis van een professionele werkhouding geleerd. Bekijk de volgende les en oefen verder met de situaties uit de training.
Download
Download het werkblad en gebruik het tijdens de oefening.
09 — Complete les
LS – Les Basis is het standaard startpunt voor een nieuwe Lopes Slot-les. Dupliceer of voeg dit template in en vervang vervolgens de voorbeeldinhoud door de inhoud van de nieuwe les.
Template: LS – Les Basis
Gebruik: starttemplate voor iedere nieuwe les
Structuur: Introductie → Leerdoelen → Video → Theorie → Praktijkvoorbeeld → Tip → Opdracht → Download → Samenvatting → Toets + navigatie
10 — Gebruiksregels
Gebruik deze regels bij het bouwen en aanpassen van lessen. Zo blijft de volledige Lopes Slot Academy visueel consistent en technisch beheersbaar.
Gebruik altijd bestaande globale classes. Maak geen nieuwe class als er al een geschikte class bestaat.
Gebruik variabelen voor kleuren, fonts en spacing. Voer kleuren en afstanden zo min mogelijk handmatig in.
Wijzig ls-h1, ls-h2, ls-h3, ls-body en ls-small alleen centraal.
Gebruik opgeslagen LS-templates voor complete blokken. Bouw Tip, Waarschuwing, Tabel, Oefening enzovoort niet telkens opnieuw.
Gebruik LS – Les Basis als startpunt voor iedere nieuwe les.
Pas lokale styling alleen toe als het echt om een unieke uitzondering gaat.
Controleer iedere nieuwe of aangepaste les op desktop, tablet en mobiel.
Houd standaard 10 px boven- en ondermarge tussen visuele lesblokken aan.
Gebruik H1 maar één keer per lespagina.
Gebruik H2 voor hoofdonderdelen en H3 voor onderdelen binnen een blok.
Beheerregel: pas eerst het Design System aan en controleer daarna de gevolgen voor bestaande lessen voordat je een globale class definitief wijzigt.