Demo-overzicht — 10 strakkere indelingen

Tien manieren om het demo-overzicht (de homepage van omag.alialsof.nl) strakker te tonen — nu doordrenkt met de vormtaal uit de motion-rationale van MINSK: afgeronde 2:1-ruiten, lijnen op ±26,57° die zichzelf tekenen (gestreept onderweg, massief bij aankomst), de degradatieladder vol → lijn → chevron, chevron-cuts als doorkijk, en gecropte vormen die dichtbij voelen. Mockups zijn statisch; alleen de lijnen bewegen.
1

Eén deur

Radicaal simpel: één taak, één oranje knop. Huisstijl: een outline-ruitveld als watermerk (de grootste ruit wordt door de rand gecropt — "dichtbij"), en boven de titel de meest uitgeklede merkvorm van de degradatieladder: drie chevrons.

› › ›

Professioneel omgaan met
emotie en agressie

De e-learning demo van Kudding & Partners
Open de demo ›
M1 BegrijpenM2 JezelfM3 Handelen M4 VeiligheidM5 Nazorg
Benieuwd hoe we hier kwamen? Bekijk het proces ›  ·  demo-data resetten
2

Split-screen met chevron-doorkijk

Links de demo in merkblauw, rechts het proces. Huisstijl: de scheiding is geen rechte lijn maar een chevron-inkeping (de doorkijk-signatuur van de site), het blauwe vlak heeft het witte ruitveld-watermerk van de portaal-login, en elke procesrij krijgt een 2:1-ruitje in sectorkleur.

de demo

Portaal als voordeur,
vijf modules erachter

Inlog Kudding of klant, unieke deelnemerslinks, ±75 slides.

Open het portaal ›
M1M2M3M4M5

Het proces

20 werkvorm-varianten verkenning
10 cover-varianten verkenning
10 groepen-layouts verkenning
Het lijnenspel motion
Tijdlijn-editor gereedschap
Demo-data resetten ⟲
3

Rijenlijst

Rijen scannen beter dan kaarten. Huisstijl: de tekstchips zijn vervangen door afgeronde 2:1-ruiten in de drie merkkleuren (outline = verkenning, vol = motion/gereedschap — de degradatieladder als statustaal), en de pijlen zijn dubbele chevrons.

De integrale demo

Portaal als voordeur — inlog K&P of klant, deelnemerslinks openen de e-learning.

M1M2M3M4M5
Open het portaal ›
20 werkvorm-variantenhieruit zijn de werkvormen gekozen›› 10 cover-variantende galerij waaruit de cover komt›› 10 groepen-layoutsde gekozen combi zit in het portaal›› Het lijnenspellijnen die zichzelf tekenen, isometrisch›› Tijdlijn-editorwaarmee de cover-intro is getuned››
4

Tabs als visual device

Eén vlak, drie tabbladen, pagina opent op Demo. Huisstijl: het paneel volgt de "assistent"-anatomie uit de rationale — afgerond kader, titel in themakleur, en een grote open ruit die achter het kader langs schuift als anker. De actieve tab draagt een vol ruitje.

De demo Het proces Gereedschap

De demo

Portaal als voordeur

Inlog Kudding (Ali = beheer, Maria = groepen) of klant; unieke deelnemerslinks openen de e-learning.

Open het portaal ›   Rechtstreeks naar module 1
M1 BegrijpenM2 JezelfM3 HandelenM4 VeiligheidM5 Nazorg
5

Presentatiepad

Het demopad als knoppenrij in presentatievolgorde. Huisstijl: onder de stappen tekent een isometrische lijn zichzelf van start naar ✓ (op ±26,57°, met afgeronde bochten), over een gestreepte routelijn — gestreept is onderweg, massief is aangekomen. De scheidingstekens zijn chevrons.

Presentatiepad
Portaal›› M1 Begrijpen›› M2 Jezelf›› M3 Handelen›› M4 Veiligheid›› M5 Nazorg›› ✓ geslaagd in portaal
proces: werkvormencoversgroepenlijnenspeltijdlijn-editor
6

Hero met module-stepper

De merk-hero van de portaal-login, met de vijf modules als stappenlijn. Huisstijl: ruitveld + chevron-cut in de hero; de stepper is een zelf-tekenende isometrische lijn — massief oranje tot M1 (geland: volle ruit met krimpende slagschaduw), gestreept ijsblauw daarna (nog onderweg: outline-ruiten, M2 zweeft nog).

demo

Professioneel omgaan met emotie en agressie

Portaal, deelnemerslinks en vijf modules — alles in één demo.

Open het portaal ›
› Het proces — hoe we hier kwamen 5 verkenningen · demo-data resetten
7

Sidebar

Zelfde app-gevoel als het portaal: navigatie links, inhoud rechts. Huisstijl: het actieve item krijgt een oranje chevron én de oranje kantstreep; onderin de navigatie schuift een gecropte outline-ruit half uit beeld (dichtbij-effect).

De integrale demo

Portaal als voordeur: inlog K&P of klant, unieke deelnemerslinks openen de e-learning.

Open het portaal ›
M1M2M3M4M5
8

Kaarten, maar gedisciplineerd

Twee formaten, één regel tekst, drie kolommen. Huisstijl: elke demokaart draagt een sectorkleur-bovenrand (zoals de login-kaarten van het portaal), sectiekoppen krijgen een ruitje, en de proceskaartjes een 2:1-ruit-dot in plaats van een tekstchip.

De demo

De integrale demo

Portaal als voordeur, inlog K&P of klant, deelnemerslinks.

Openen ›

De vijf modules

±75 slides, doorgelinkt via de brug-slides.

M1M2M3M4M5
Het proces
20 werkvorm-variantenverkenning
10 cover-variantenverkenning
10 groepen-layoutsverkenning
Het lijnenspelmotion
Tijdlijn-editorgereedschap
⟲ Demo-data resetten
9

Verhalende tijdlijn

Het resultaat bovenaan, de weg ernaartoe eronder. Huisstijl: de degradatieladder vertelt de tijd — het verste verleden is het meest uitgekleed (chevrons), daarna outline-ruiten, en het resultaat is een volle blauwe ruit. De rail is gestreept: de route zoals hij getekend werd.

het resultaat

De integrale demo — portaal + vijf modules

Waar alle verkenningen hieronder toe hebben geleid.

Open de demo ›
‹‹Logo-studie & lijnenspelde vormtaal: isometrische lijnen, afgeronde ruiten
‹‹10 cover-variantende cover gekozen, intro getuned met de tijdlijn-editor
20 werkvorm-variantende werkvormen per slide-moment gekozen
10 groepen-layoutsde portaal-schermen aangescherpt
De integrale demoalles samengebracht: portaal, deelnemerslinks, m1–m5
10

Het portaal ís de homepage

Schaf de overzichtspagina af: bezoekers landen direct op het portaal. Huisstijl: exact de bestaande login-hero — ruitveld-watermerk, chevron-cut naar wit, kaarten met sectorkleur-bovenrand — plus één stille strook voor proces en reset.

Welkom bij de e-learning
Professioneel omgaan met emotie en agressie

Kies hoe je wilt inloggen.

Inloggen Kudding & Partners

LTI-verbindingen, klanten, deelnemers en groepen beheren.

Inloggen K&P ›

Inloggen klant

Je toegang bekijken en zien welke deelnemers geslaagd zijn.

Inloggen klant ›
proces & gereedschap: werkvormencoversgroepenlijnenspeltijdlijn-editor ⟲ demo-data resetten
Verkenning bij demo/index.html (het demo-overzicht, tevens de homepage van omag.alialsof.nl), op vormtaal gebracht met de motion-rationale van MINSK (Klantvraag/250324…Rationale_01.pdf) en content/huisstijl-en-motion.md. Combineren kan: bijv. split-screen (2) met de rijenlijst (3) rechts, of het presentatiepad (5) bovenin variant 8. Kies een nummer of combi, dan bouw ik hem als echte pagina.