blois.nl ticker studio
← Terug naar homepage Bekijk Eindoordeel
Design Verkenning: Tussen Hero & Philosophy

Alternatieven voor de bewegende ticker.

Je observatie klopt inhoudelijk en visueel: continu opzij schuivende tekstregels (marquees) voelen anno nu snel gedateerd en onrustig aan. Hieronder vind je een interactieve sandbox, 5 concrete alternatieven (van helemaal niets tot een data-meetlat), en inhoudelijk ontwerprichtlijnen.

Waarom voelt de bewegende marquee gedateerd aan?

De horizontale tekst-carrousel was tussen 2019 en 2022 een rage bij Web3-startups en hiphop/fashion agencies. Maar voor een informatieontwerper aan het science-policy interface (PBL) werkt constante perifere beweging averechts:

  • Aandachtslek: Het menselijk oog reageert instinctief op constante beweging. Terwijl een bezoeker je krachtige statement "Making complex information clear." leest, trekt de scrollende tekst daaronder steeds de focus weg.
  • Slechte leesbaarheid: Bezoekers moeten 'wachten' tot een woord voorbijkomt, of hun ogen zijwaarts meebewegen. Dat staat haaks op het principe van heldere, scanbare informatie.
  • Tijdloosheid: Hoogwaardige redactionele ontwerpen (zoals het New York Times visual journalism team, Bloomberg graphics, of Zwitserse typografie) gebruiken vrijwel nooit marquees. Ze vertrouwen op rust, compositie en sterke witruimte.
Snelle Samenvatting

Beste keuze: Optie 0 (Helemaal niets) geeft maximale redactionele rust en statuur.

Beste grafische knipoog: Optie 1 (De Data-Meetlat) refereert subtiel aan cartografie en meetassen zonder animatieruis.

Beste metadata-behoud: Optie 3 (Statische Tags) toont dezelfde kernwoorden in 1 oogopslag.

Interactieve Simulator

Test het direct in context

Klik op een variant om de overgang tussen Hero en Philosophy direct live te bekijken:

Huidige weergave: Optie 0: Helemaal niets
preview: blois.nl — overgang hero naar philosophy
100% schaal

Filip de Blois

Making complex information clear.

As an information designer at the PBL Netherlands Environmental Assessment Agency, I translate complex science and policy-related subjects into clear visualisations.

View work & CV on LinkedIn ↗ About me
Filip de Blois

Focus & Philosophy

Visualising Knowledge for Policy

Effective data visualisation at the science-policy interface is more than just making charts look appealing; it is about bridging the gap between complex research and actionable insight.

Co-authoring Visualising Knowledge: Lessons from 25 years of data visualisation for policymakers reflects my core approach...

Diepgaande Analyse

Overzicht van de 5 Alternatieven (+ Niets)

Elk alternatief met toelichting, psychologisch effect op de bezoeker, voor- en nadelen, en kant-en-klare code om direct in index.html te plaatsen.

Grafisch & Betekenisvol

Optie 1: De Data-Meetlat (Cartographic Scale / Ticks)

Een streep, maar dan met ambacht en vakinhoudelijke betekenis. In plaats van een willekeurige lijn toont dit een cartografische schaalverdeling met maatstreepjes (ticks) en subtiele coördinaten van Den Haag / PBL (52°04′ N • 04°18′ E).

Waarom dit past bij Filip
  • Hommage aan cartografie: Direct herkenbaar voor iedereen die met kaarten en ruimtelijke data werkt bij het PBL.
  • Volledig statisch: Geen bewegingsonrust; het is een stilstaand grafisch ankerpunt.
  • Hoogwaardig en uniek: Vrijwel geen enkele standaard portfoliosite heeft dit; het ademt maatwerk.
Aandachtspunt

Iets meer markup dan een lege regel, maar visueel heel bescheiden en plat.

Directe Weergave van het Element:
52°04′ N • 04°18′ E (THE HAGUE • PBL) LESSONS FROM 25 YEARS
Vervang regels 101-107 in index.html door: 
<!-- Optie 1: Data-Meetlat / Cartographic Scale -->
<div class="element-ruler-wrapper">
    <div class="max-w-7xl px-6 mx-auto">
        <div class="ruler-container">
            <div class="ruler-track">
                <span class="ruler-tick major accent" data-val="00"></span>
                <span class="ruler-tick"></span>
                <span class="ruler-tick"></span>
                <span class="ruler-tick"></span>
                <span class="ruler-tick major" data-val="25"></span>
                <span class="ruler-tick"></span>
                <span class="ruler-tick"></span>
                <span class="ruler-tick"></span>
                <span class="ruler-tick major accent" data-val="50"></span>
                <span class="ruler-tick"></span>
                <span class="ruler-tick"></span>
                <span class="ruler-tick"></span>
                <span class="ruler-tick major" data-val="75"></span>
                <span class="ruler-tick"></span>
                <span class="ruler-tick"></span>
                <span class="ruler-tick"></span>
                <span class="ruler-tick major accent" data-val="100"></span>
            </div>
            <div class="ruler-meta-row">
                <span class="coord-pill font-mono">
                    <span class="coord-dot"></span>
                    52°04′ N • 04°18′ E (THE HAGUE • PBL)
                </span>
                <span class="hidden sm-inline-block text-brand-muted">
                    ENVIRONMENTAL &amp; SPATIAL DATA VISUALISATIONS
                </span>
                <span class="text-white font-mono">
                    LESSONS FROM 25 YEARS
                </span>
            </div>
        </div>
    </div>
</div>
Klassieke Streep

Optie 2: Subtiele Accentstreep (Minimalist Hairline)

De meest pure invulling van "een streep". Een ragfijne horizontale lijn (haarfijn verloop) met in het midden een compacte badge met het neon accentpuntje of subtiele kernwoorden.

Voordelen
  • Minimalistisch: Creëert een duidelijke scheidslijn tussen de persoonlijke introductie en het inhoudelijke manifest.
  • Elegante ademruimte: Biedt net iets meer visuele geleding dan een lege scheiding.
Aandachtspunt

Voegt weinig extra inhoudelijke informatie toe; puur decoratief.

Directe Weergave van het Element:
PBL • SCIENCE • POLICY • DESIGN
Vervang regels 101-107 in index.html door: 
<!-- Optie 2: Subtiele Accentstreep (Minimalist Hairline) -->
<div class="element-hairline-wrapper">
    <div class="hairline-container px-6">
        <div class="hairline-side"></div>
        <div class="hairline-center">
            <span class="hairline-diamond"></span>
            <span>PBL • SCIENCE • POLICY • DESIGN</span>
            <span class="hairline-diamond"></span>
        </div>
        <div class="hairline-side"></div>
    </div>
</div>
Metadata in Rust

Optie 3: Statische Focus-Tags (Geen beweging)

Wil je de kernbegrippen (zoals Data Visualisation, Science-Policy Interface, Co-Organiser IDC) toch graag direct na de introductie tonen? Dan is deze optie de oplossing: dezelfde woorden, maar dan als rustige, statische pill-tags. In één oogopslag te lezen, zonder beweging.

Voordelen
  • Direct scanbaar: Bezoekers zien in 0.5 seconde wat je doet zonder te wachten tot de animatie voorbij schuift.
  • Subtiele interactie: Tags kunnen zacht oplichten bij hover, wat een prettig modern gevoel geeft.
Aandachtspunt

Neemt iets meer hoogte in beslag op kleine mobiele schermen omdat de tags op meerdere regels kunnen wikkelen.

Directe Weergave van het Element:
Data Visualisation Science-Policy Interface Co-Organiser IDC Visualising Knowledge Photography
Vervang regels 101-107 in index.html door: 
<!-- Optie 3: Statische Focus-Tags (Geen beweging) -->
<div class="element-tags-wrapper">
    <div class="max-w-7xl px-6 mx-auto">
        <div class="tags-container">
            <span class="static-tag highlight">
                <span class="tag-dot"></span>Data Visualisation
            </span>
            <span class="static-tag">Science-Policy Interface</span>
            <span class="static-tag highlight">
                <span class="tag-dot"></span>Co-Organiser IDC
            </span>
            <span class="static-tag">Visualising Knowledge</span>
            <span class="static-tag">Photography</span>
        </div>
    </div>
</div>
Redactioneel & Zakelijk

Optie 4: Zwitsers Metadataraster (Editorial Spec Sheet)

Geïnspireerd door hoogwaardige Zwitserse architectuur- en ontwerppublicaties. Een strakke 4-koloms strook die fungeert als een 'spec sheet': formeel, typografisch gestructureerd en gezaghebbend.

Voordelen
  • Formele autoriteit: Geeft direct inzicht in je institutionele rol (PBL), community rol (IDC) en disciplines.
  • Structurele schoonheid: Zeer strakke typografie en grid-discipline.
Aandachtspunt

Iets meer 'rapport-achtig' qua uitstraling, wat heel passend is voor beleid maar iets minder speels.

Directe Weergave van het Element:
01 / DOMEIN Science & Policy Interface Translating intricate research
02 / PRAKTIJK PBL Environmental Agency Assessment & scenarios
03 / INITIATIEF Co-Organiser IDC Annual conference community
04 / CRAFT Visual Craft & Photography Refining a keen visual eye
Vervang regels 101-107 in index.html door: 
<!-- Optie 4: Zwitsers Metadataraster -->
<div class="element-spec-wrapper">
    <div class="max-w-7xl px-6 mx-auto">
        <div class="spec-grid">
            <div class="spec-item">
                <span class="spec-label">01 / DOMEIN</span>
                <span class="spec-val">Science &amp; Policy Interface</span>
                <span class="spec-sub">Translating intricate research</span>
            </div>
            <div class="spec-item">
                <span class="spec-label">02 / PRAKTIJK</span>
                <span class="spec-val">PBL Environmental Agency</span>
                <span class="spec-sub">Assessment &amp; scenarios</span>
            </div>
            <div class="spec-item">
                <span class="spec-label">03 / INITIATIEF</span>
                <span class="spec-val">Co-Organiser IDC</span>
                <span class="spec-sub">Annual conference community</span>
            </div>
            <div class="spec-item">
                <span class="spec-label">04 / CRAFT</span>
                <span class="spec-val">Visual Craft &amp; Photography</span>
                <span class="spec-sub">Refining a keen visual eye</span>
            </div>
        </div>
    </div>
</div>
Functionele Navigatie

Optie 5: Functionele Sectie-Indicator (Section 02 ↓)

In plaats van een inhoudelijk element fungeert dit als een elegante interaction design-component: het vertelt de bezoeker wat er hierna komt (Hoofdstuk 02: Focus & Philosophy) met een subtiel pijl-icoontje dat uitnodigt tot verder scrollen.

Voordelen
  • Functioneel nut: Maakt de overgang naar de biografie en filosofie intuïtief en vloeiend.
  • Boek/Magazine gevoel: Voelt als een hoofdstukaanduiding in een mooi vormgegeven publicatie.
Aandachtspunt

Herhaalt deels de titel van de About-sectie die direct daaronder staat.

Directe Weergave van het Element:
02 Focus & Philosophy
↓
Vervang regels 101-107 in index.html door: 
<!-- Optie 5: Functionele Sectie-Indicator -->
<div class="element-indicator-wrapper">
    <div class="max-w-7xl px-6 mx-auto">
        <div class="indicator-row">
            <div class="indicator-left">
                <span class="indicator-pill">02</span>
                <span class="text-white font-bold">Focus &amp; Philosophy</span>
                <span class="hidden sm-inline-block text-brand-muted">• Visualising Knowledge for Policy</span>
            </div>
            <a href="#about" class="indicator-right">
                <span class="hidden sm-inline-block text-xs text-brand-muted">Scroll to explore</span>
                <span class="indicator-arrow">↓</span>
            </a>
        </div>
    </div>
</div>
Conclusie & Advies

Wat is het beste voor blois.nl?

Kijkend naar je rol als senior information designer bij het PBL en de rustige, esthetische sfeer van de site:

1e Keuze: Puur Niets (Optie 0)

Less is more. Haal de ticker gewoon weg. De hero slogan "Making complex information clear." krijgt daardoor maximale zeggingskracht, en de bezoeker glijdt naadloos door naar je filosofie en de 3 prachtige beeldkaarten eronder.

2e Keuze: De Data-Meetlat (Optie 1)

Als je toch een grafische scheiding wilt, kies dan voor de Data-Meetlat / Cartografische schaal. Het is inhoudelijk relevant, volledig statisch, en ademt het vakmanschap van kaarten en dataverdeling.

3e Keuze: Statische Tags (Optie 3)

Wil je de trefwoorden echt niet kwijt op die positie? Toon ze dan als statische pills. Dat lost het gedateerde gevoel van de animatie direct op, terwijl de informatie behouden blijft.

Wil je dat ik één van deze opties direct doorvoer in index.html? Laat gerust weten welke optie je voorkeur heeft!

Bekijk huidige live index.html →