Naar de inhoud
UNCODED
EN – English

Bushcraft Ben

Een site gebouwd als Bens eigen badge, in roet, been en messing, voor de spullen die hij meeneemt en de merken voor wie hij ze test.

Gebouwd voor Ben Verhoef (@bushcrafter_ben), een bushcrafter die outdoorspullen in het bos test. Nog niet op een eigen domein.

Sector
Outdoorcreator · Gear-tester
Jaar
2026
Diensten
Webdesign, Development, Content, Toegankelijkheid
Stack
Next.js, React, Tailwind CSS, TypeScript, Vercel

(01)Het idee

Bens werk leeft op Instagram, waar hij "Ben there" heet, en op een Linktree: vuur maken, koken op het kampvuur, dagen in het bos en de spullen die meegingen. Merken die hun gear getest willen hebben en volgers die willen kopen wat hij gebruikt, hadden geen vaste plek om te landen. De site moest hem in één oogopslag aan een merk verkopen, "welke brander is dat?" in één klik beantwoorden en op niemand lijken, ook niet op het groen en oranje van GRØNN Studio.

Ben Verhoef is al jaren bushcrafter en wildernis-survivalfan. Hij test outdoorspullen in het bos en deelt op Instagram als @bushcrafter_ben wat standhoudt, en daar heet hij Ben there. Merken sturen hem gear; volgers vragen waar ze het kunnen kopen. Tot nu toe was het antwoord een Linktree.

De site geeft elk van die vragen een pagina: de kit die hij meeneemt, de veldtests, en hoe een merk met hem samenwerkt. Elk feit erop, van het aantal volgers tot de bijschriften die hij citeert, komt van zijn eigen Instagram en Linktree op 30 september 2026.

Schermen

De homepage van Bushcraft Ben: de kop Ben there. in zware beenkleurige slabkapitalen met de tweede regel als outline, op roetzwart, naast zijn ronde badge met het motto eromheen, en een messingkleurige knop Work with Ben.
Ben there.: zijn Instagramnaam als kop, en zijn badge met het motto dat eromheen draait.
What's in the pack: drie gestikte kaarten (Fire, Cook and drink, Wear, carry and repair), elk item een regel met een vinkje, de naam en wat het is.
De kit als paklijst, in kaarten met een gestippelde steek.
Brands I work with: negen gestikte kaarten, van Überleben en Eberlestock, met een messingkleurig label Code BEN10, tot Polaris Benelux en NordicWolf.
Partners, elk met wat hij van ze gebruikt. De kortingscode staat in messing.
More from the woods: drie kaarten met citaten uit zijn Instagramposts over tamme kastanjes zoeken, Ray Mears ontmoeten en ochtendkoffie in het bos.
Zijn eigen bijschriften, geciteerd en gedateerd, elk met een link naar de post.
Work with Ben: waar zijn content gedeeld wordt, en How it works in drie genummerde stappen, van de eerste e-mail tot de gear die het bos in gaat.
Work with Ben: drie stappen voor merken, en een vaste prijs na het eerste gesprek.
De kitpagina in het donkere thema: beenkleurige tekst op verkoold hout, elk item met het merk onder de naam.
Dezelfde kit in het donkere thema, dat het apparaat van de bezoeker volgt.
De homepage op een telefoon: Ben there. gestapeld, zijn introductie, de knoppen Work with Ben en See the kit, en de badge eronder.
Op een telefoon schuift de badge onder de kop.
Een veldtest op een telefoon: een reel van 22 september 2026 gemarkeerd als betaalde samenwerking, over een survivalhengel gemaakt met een Leatherman Wave+ Alpha.
Veldtests markeren betaalde samenwerkingen zoals Instagram dat doet.

(02)Ontwerpkeuzes

Kleur

  • Night#12110EDe badgesecties: header, hero's, call to action, footer
  • Bone#EFE9DCDe achtergrond van de pagina, en letters op nacht
  • Paper#E4DCCABanden en kaarten
  • Ink#16140FTekst en lijnen
  • Brass#C8962EHet enige accent: knoppen, de merkenticker, codes
  • Brass ink#7C5712Messing als leesbare tekst op been

Typografie

  • Alfa Slab OneKoppen en het merk: zware slabkapitalen, zoals de letters op zijn badge.
  • IBM Plex MonoKickers, menu, knoppen en fotobijschriften: de stem van het veldboekje.
  • Source Serif 4Leestekst, rustig genoeg voor zijn langere bijschriften.

Kleur

Gesampled van zijn badge: het zwarte email, het beenkleurige garen en het messing van de kompasroos. Messing is het enige accent. Het eerste ontwerp was groen en oranje, wat te dicht bij de eigen kleuren van GRØNN Studio lag, dus het is opnieuw opgebouwd rond de badge.

Typografie

Alfa Slab One voor de koppen, zodat de pagina leest als de badge. IBM Plex Mono voor elk label, als aantekeningen in een veldboekje. Source Serif 4 om te lezen. Alle drie zelf gehost.

Vorm

Kaarten hebben een gestippelde steek 7px binnen de rand. Foto's zijn opgeprikte afdrukken met messingtape, nooit groter getoond dan hun bron. Nachtsecties omlijsten elke pagina; beensecties dragen de inhoud daartussen.

Beweging

Vonken stijgen op door de hero's, de mottoring draait één keer per minuut, de merkenticker scrolt en de cijfers tellen op als ze in beeld komen. Bij minder beweging stopt alles en wordt de ticker een gewone lijst.

(03)De aanpak

  1. 01

    Alles komt van zijn badge: roetzwarte secties met beenkleurige letters, gestikte stippellijnen rond de kaarten, het motto rond het embleem, en zijn foto's opgeprikt als afdrukken met een strookje messingtape.

  2. 02

    De homepage opent met zijn Instagramnaam, "Ben there.", de tweede regel als outline, met zijn echte cijfers en de datum erbij: 10,1k volgers, 1.257 posts en lid #564 van de Wild Geese Explorers Club.

  3. 03

    Veldtests citeren zijn eigen Instagrambijschriften, met de gear bij naam en betaalde samenwerkingen gemarkeerd zoals Instagram dat doet.

  4. 04

    Work with Ben legt samenwerken in drie stappen uit voor merken, naast een printbare mediakit en een contactformulier dat terugvalt op een vooraf ingevulde e-mail.

(04)De stack

Next.js 16
Elf statische pagina's, een sitemap, een gegenereerde social image en één kleine route voor het contactformulier.
React 19
Gedeelde onderdelen, zoals de gestikte kaart, de postkaart en de paginahero, hergebruikt op elke pagina.
Tailwind CSS 4
Elke kleur is een token, met een lichte en een donkere set die allebei WCAG AA halen.
TypeScript
Kit, partners en posts als getypte data, elk bestand met een notitie waar de feiten vandaan komen.
Playwright + axe
Elke pagina wordt gecontroleerd op toegankelijkheid, samen met een contrastaudit en een JavaScript-budget, voordat er iets live gaat.
Vercel
Hosting, met een preview voor elke wijziging.

(05)In de details

  1. 01

    Zijn woorden, gedateerd

    Veldtests citeren zijn eigen Instagrambijschriften, ingekort, elk met de datum en een link naar de post. Aantallen volgers en posts zeggen wanneer ze geteld zijn.

  2. 02

    Eerlijke links

    Betaalde samenwerkingen zijn gemarkeerd, affiliatelinks dragen rel="sponsored", en de kitpagina zegt in gewone woorden dat sommige links hem een commissie kunnen opleveren.

  3. 03

    Een formulier dat nooit doet alsof

    Het contactformulier slaat berichten op via een webhook. Zolang die niet is ingesteld, geeft het een vooraf ingevulde e-mail mee in plaats van "verzonden" te zeggen.

  4. 04

    Gemaakt voor merken

    Een mediakitpagina print direct naar pdf, en de homepage staat ook in het Nederlands op /nl.

(06) Het resultaat

Elf pagina's, waaronder Kit, Field tests, Work with Ben, een mediakit, de clubpagina en een Nederlandse homepage, in een licht en een donker thema die allebei WCAG AA halen.

Even kennismaken

Laten we iets
ongewoons bouwen.

Een gratis intakegesprek, zonder verplichtingen. Je gaat weg met een heldere scope en een vaste prijs.

Start een project