01 · Het merk
De foto's voeren het woord
MB Photography is de fotografie van Morris Houtzager. Vooral sport: voetbal, waterpolo en basketbal, dichtbij de actie en midden in de wedstrijd. Het merk is er om dat werk te laten zien, niet om zichzelf.
"Meer foto's, het laatste werk en een shoot boeken: stuur een berichtje via Instagram."
Foto's eerst
Het werk staat centraal. Alles eromheen is rustig en stapt opzij.
Eén actie
Wie meer wil, stuurt een berichtje via Instagram. Er is geen tweede weg.
Simpel
Weinig kleuren, één lettertype, korte zinnen. Bij twijfel: weglaten.
02 · Stem
Kort. Eenvoudig. Zonder jargon.
MB Photography praat zoals Morris praat: vriendelijk, direct en in gewone woorden. De foto's doen de rest.
"Fotografie door Morris Houtzager"Ondertitel naast het logo
"Bekijk meer op Instagram"Knop in de kop van de site
"Werk van MB Photography"Label onder de foto's
Wel doen
- Korte zinnen. Snel tot de kern.
- Gewone woorden die iedereen snapt.
- De naam voluit: MB Photography, met een spatie en twee hoofdletters.
- Foto's beschrijven zoals je ze ziet, ook in de alt-tekst.
Niet doen
- Vakjargon of Engelse termen waar een Nederlands woord bestaat.
- Grote beloftes of overdreven bijvoeglijke naamwoorden.
- Varianten van de naam, zoals MBPhoto, M.B. Photography of mbphotography.
- Meer dan één oproep tegelijk.
03 · Logo
Het beeldmerk
Een blauwe M die vloeiend doorloopt in een witte B, schuin geplaatst op een donker vlak. Het origineel is leidend: de vectorversie is daar nauwkeurig op nagemaakt. Gebruik altijd de bestanden hieronder en teken het logo nooit zelf na.
Logo met naam
De naam staat altijd in Familjen Grotesk Bold, naast het beeldmerk of als groot woord onderaan een pagina. Het beeldmerk is 56 px bij een naam van 26 px (mobiel 44 px bij 20 px).
Zo gebruik je het logo
Wel: houd rondom minstens een kwart van de logobreedte vrij.
Niet: draaien. De schuine stand zit al in het logo.
Niet: andere kleuren geven of een filter erover leggen.
Niet: het losse beeldmerk op een foto of drukke achtergrond.
04 · Kleur
Papier, inkt en één blauw
Een rustig palet zodat de foto's de kleur leveren. Klik op een kleur om de code te kopiëren.
Website
Logo
App-icoon
Contrast
Blauw op nacht is alleen voor het logo. Als tekst is het onleesbaar. Gebruik op donker altijd papier of wit voor tekst.
05 · Letter
Eén lettertype: Familjen Grotesk
Een grotesk met karakter, van groot woordmerk tot kleine footer. Er komt geen tweede lettertype bij. Het font is zelf gehost; externe fonts laadt de site niet.
Familjen Grotesk
Vrij te gebruiken onder de SIL Open Font License. Variabel van 400 tot 700.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 &@↗→
Schaal
Eerste getal is desktop, tweede mobiel. Grote koppen krijgen een negatieve letterafstand; kleine tekst nooit.
06 · Ruimte & vorm
Strakke foto's, ronde knoppen
Foto's krijgen rechte hoeken en kleine tussenruimtes, zodat ze samen één beeld vormen. Knoppen zijn volledig rond. Schaduwen gebruiken we niet.
Afstanden (px)
6101216 ★202432 ★405664120★ De zijmarge van de pagina: 16 px op mobiel, 32 px op desktop. Foto's staan 6 px (mobiel) of 10 px (desktop) uit elkaar.
Hoeken
07 · Fotografie
Midden in de wedstrijd
Actie van dichtbij: duels, emotie, licht van de lichtmasten. Foto's tonen we in hun eigen verhouding, zonder kaders, afgeronde hoeken of filters erover.
Werk van MB Photography
Formaten
Wel doen
- Foto's in hun eigen verhouding laten, niet bijsnijden voor het raster.
- Een alt-tekst die beschrijft wat je ziet.
- Metadata (locatie, camera) eruit halen vóór publicatie.
- Webversies van 640 en 960 px breed (WebP).
Niet doen
- Tekst, logo of watermerk over een foto.
- Kaders, schaduwen of afgeronde hoeken.
- Filters die de kleuren van het moment veranderen.
- Originelen online zetten.
08 · Bouwstenen
Wat mbphoto.nl gebruikt
Een paar onderdelen, telkens hetzelfde. Hover op een link of knop: hij wordt iets lichter (opacity 0,7).
Pill-link
Lijn van 1,5 px in inkt. Rechtsboven in de kop van de site.
border: 1.5px solid #0b0b24; border-radius: 40px; padding: 10px 18px; font: 600 15px "Familjen Grotesk";
Hoofdknop
Vol vlak in inkt. Eén per pagina, voor de enige actie. Op mobiel over de volle breedte.
background: #0b0b24; color: #f3f2ee; border-radius: 40px; padding: 18px 26px; font: 600 17px "Familjen Grotesk";
Icoonknop
De pill-link op mobiel: rond, 44 bij 44 px, met een label voor schermlezers.
width: 44px; height: 44px; border: 1.5px solid #0b0b24; border-radius: 40px; aria-label="Instagram"
Merkblok
Logo met naam en ondertitel, linksboven op elke pagina.
logo 56px · gap 16px naam 700 26px −0.02em ondertitel 400 15px #4d4c55
Fotoraster
Drie kolommen op desktop, twee op mobiel. Foto's houden hun verhouding.
grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; /* mobiel: 2 kol, 6px */
Woordmerk-afsluiter
De naam heel groot onderaan de pagina, puur als decoratie.
font-size: clamp(68px, 14.5vw, 186px); font-weight: 700; line-height: 0.8; letter-spacing: -0.055em;
09 · Toepassingen
Waar het merk staat
Drie plekken, één huisstijl.
mbphoto.nl
De website met het werk en de weg naar Instagram.
Bekijk ↗
Het laatste werk en de plek om een shoot te boeken. Profielfoto: het logo op donker vlak.
@mb_photography_mbp ↗
De app
Voor het plannen van opdrachten en de administratie. Op het beginscherm met het app-icoon.