Screenshot of Photoyoshi

Photoyoshi

photoyoshi.com

a Tokyo photographer's portfolio that turns a contact-sheet grid of faded thumbnails into the page itself, with one giant Neue Haas category word ("Landscape") and a katakana wordmark anchoring an otherwise near-empty bone-white field.

Photography Photographer Portfolio niche

Design tokens

black
ink
off-white
stone
grey
red
magenta-wash
display
neue-haas-grotesk-display
body
neue-haas-grotesk-display
mono
none

Do / Don't

Reference it for

  • Contact-sheet-as-homepage: a dense grid of dimmed thumbnails that doubles as navigation, with most images held back so a few sing.
  • A single oversized category word (Neue Haas at 67.5px) used as the only display element on an otherwise empty field.
  • Barba-driven page transitions for a portfolio where reloads would break the calm.
  • Restraint as a flex: near-monochrome on warm off-white, one red accent kept almost entirely in reserve.
  • A WebGL grid layer treated as quiet texture, not spectacle.

Do not copy

  • The katakana wordmark フォトヨシ is the photographer's own mark; reproduce the technique with the client's name, not this glyph set.
  • Three.js for a thumbnail grid is a lot of weight for the effect; only reach for it if the shader interaction is genuinely the point.
  • The "/100Photos" counting conceit is this site's editorial frame; borrow the idea of a finite, numbered body of work, not the exact label.

Signature moves

contact-sheet grid as homepage and navigation

a dense grid of dimmed thumbnails is the page itself and doubles as navigation, with most images held back so a few sing, on a bone-white field (#f1efe7).

single oversized category word on an empty field

one oversized category word in a grotesque (Neue Haas at 67.5px) is the only display element on an otherwise near-empty bone-white field, with a small 10/14px supporting scale and one red accent kept in reserve.