Portfolio | Websites ontworpen en gebouwd door YSPV

Selected Digital Work

Author

Websites en softwareEditie 2026

YSPV

YSPVEditie 2026

Selected
Digital Work.

Een selectie websites en software, ontworpen en gebouwd door YSPV.

4 projecten · echte schermafbeeldingen · beknopte ontwerpnotities

Inhoud

Over dit boek

Elk project staat hier zoals het gebouwd is: de echte schermen, wat er gemaakt is en de keuzes erachter.

Alle beelden zijn echte schermafbeeldingen, vastgelegd op de websites zelf. Er staan geen mockups van verzonnen schermen in.

01

Een genummerde noot hoort bij het punt met hetzelfde nummer op het beeld.

Fig. 1.1

Klik op een projectbeeld om het groot te bekijken, op desktop en mobiel.

Blader met de knoppen onder het boek, door op een pagina te klikken of te tikken, door te vegen of met de pijltjestoetsen.

Hoofdstuk 01Website · Maritieme expertise

Avduyev Surveys

Website voor een onafhankelijke maritieme surveyor in de havens van Gent, Antwerpen, Zeebrugge en Vlissingen. Een scrollverhaal met 3D-havenscènes en een kaart van het Schelde-estuarium.

Opdrachtgever: Avduyev Surveys
Status: Opgeleverd
Talen: Nederlands en Engels

Ontwerpnotities bij fig. 1.1

01
Taalwissel tussen Nederlands en Engels. Elke Engelse tekst is afgeleid van de Nederlandse bron.
02
Annotaties in de scène bij de commandobrug, de dekbelading en de diepgangsmerken, zoals een surveyor het schip bekijkt.
03
Een procedureel opgebouwde 3D-scène van de haven, gewoon in de browser.
04
Een monospace voor technische gegevens.

Fig. 1.1De homepage op desktop en op een telefoon.

Hoofdstuk 01Website · Maritieme expertise

Fig. 1.2Sectie Werkgebied: vier havens met hun coördinaten, naast een 3D-kaart van het Schelde-estuarium met Zeebrugge, Vlissingen, Gent en Antwerpen.

01
Vier havens met hun coördinaten.
02
Een kaart van het Schelde-estuarium die zich bij het scrollen intekent, met de verbindingen tussen de havens.

Aanpak

Ik bouwde de site rond een scrollverhaal. Procedureel opgebouwde 3D-scènes van havens en een nauwkeurige kaart van het Schelde-estuarium tonen waar het bedrijf actief is. Elke Engelse tekst is afgeleid van de Nederlandse bron, zodat beide talen inhoudelijk gelijk blijven.

Fig. 1.3Sectie over droge bulklading met een 3D-scène van een bulkschip aan de kade.

Functionaliteiten

01
Scrollgestuurde 3D-scènes van havens en ladingtypes
02
Kaart van het Schelde-estuarium met Gent, Antwerpen, Zeebrugge en Vlissingen
03
Taalwissel tussen Nederlands en Engels
04
Kwaliteitsniveaus op basis van de grafische kaart, met een terugvaloptie voor toestellen zonder GPU-versnelling

Lees het volledige hoofdstuk

Hoofdstuk 02Website · Profsport, boksen

Lee Ingelrest

Website voor de Gentse profbokser en Belgisch kampioen halfzwaargewicht. Drietalig, met een gecontroleerd palmares, partners en een shop die klaarstaat voor lancering.

Opdrachtgever: Lee Ingelrest
Talen: Nederlands, Engels en Spaans

Ontwerpnotities bij fig. 2.1

01
Een taalmenu in het Nederlands, Engels en Spaans.
02
Zijn naam in schuine outline-letters over een gevechtsbeeld.
03
Schuine panelen vertalen de dynamiek van de ring naar de lay-out.
04
Onder de hero loopt een rode band met kerncijfers.
05
Alleen bevestigde resultaten: elke titel en elk gevecht is getoetst aan openbare bronnen zoals BoxRec.

Fig. 2.1De homepage op desktop en op een telefoon.

Hoofdstuk 02Website · Profsport, boksen

Fig. 2.2Sectie Elk gevecht met kerncijfers en een tijdlijn van overwinningen en verliezen.

01
Elk gevecht op een tijdlijn, met kerncijfers erboven.

Aanpak

Elke titel en elk gevecht op de site is getoetst aan openbare bronnen zoals BoxRec. Alleen bevestigde resultaten verschijnen. Lee’s eigen foto’s en video’s vormen het beeldmateriaal.

Fig. 2.3Sectie Gewonnen en verdedigd met twee titelkaarten.

Functionaliteiten

01
Taalmenu in het Nederlands, Engels en Spaans
02
Sleep- en swipebare carrousel met partnerlogo’s
03
Shoppagina met wachtlijst, klaar om te activeren met Stripe Payment Links
04
Instagramteasers opgebouwd uit echte animaties van de site

Lees het volledige hoofdstuk

Hoofdstuk 03Website · Profsport, boksen

Mogmad Youssoupov

Website voor een Belgische profbokser en Beneluxkampioen: palmares, media, persartikels en een sponsoringpagina met een keuzehulp in stappen.

Opdrachtgever: Mogmad Youssoupov
Talen: Nederlands

Ontwerpnotities bij fig. 3.1

01
Grote smalle koppen in zwart en goud.
02
Een video in de hero.
03
Het palmares in één oogopslag, opgebouwd uit openbare bronnen.
04
Een aparte sponsoringpagina met een keuzehulp in stappen.

Fig. 3.1De homepage op desktop en op een telefoon.

Hoofdstuk 03Website · Profsport, boksen

Fig. 3.2Recordsectie met het professionele record in grote cijfers.

01
Het professionele record, in grote cijfers.

Aanpak

Het palmares is opgebouwd uit openbare bronnen. Persartikels zijn pas opgenomen na controle.

Fig. 3.3Sectie Laatste resultaten met recente gevechten.

Functionaliteiten

01
Pagina’s voor palmares, over, media, sponsoring en contact
02
Overzicht van elk gevecht als grafiek
03
Sponsoringformulier in meerdere stappen, gebaseerd op de prijslijst
04
Perssectie met gecontroleerde artikels

Lees het volledige hoofdstuk

Hoofdstuk 04Website · Maritieme inspecties

Pliev Inspecs

Website voor een onafhankelijk maritiem inspectiebedrijf: surveys, schade-expertises en expert witness, met sectoren, werkwijze en een interactieve kaart van de havens in de Benelux.

Opdrachtgever: Pliev Inspecs
Talen: Nederlands en Engels

Ontwerpnotities bij fig. 4.1

01
Taalwissel tussen Nederlands en Engels.
02
Een deeltjesveld met sonarlijnen in de hero. Het pauzeert zodra de hero uit beeld is.
03
Twee duidelijke acties: een inspectie aanvragen of de diensten bekijken.
04
De kern in drie cijfers: 24/7 inzetbaar, 100% onafhankelijk, actief in de Benelux.

Fig. 4.1De homepage op desktop en op een telefoon.

Hoofdstuk 04Website · Maritieme inspecties

Fig. 4.2Sectie Actief in uw regio: een kaart van de Benelux-havens met markeringen die je kunt aanklikken voor details.

01
Klik op een haven op de kaart en de markering licht op.
02
Per haven verschijnen de coördinaten, een korte beschrijving van de inzet en een knop om een inspectie aan te vragen.

Aanpak

Na meerdere ontwerprondes kreeg de site een technische vormgeving die past bij het werk. De inhoud staat in vier genummerde hoofdstukken: diensten, sectoren, werkwijze en regio. Interactie maakt het werkterrein concreet, zonder de informatie te verstoppen.