Surf print shop
mood board

References for a new website that shows and sells surf and travel prints. Clean, warm white, lots of space. The photos do the talking, the motion makes browsing a pleasure, and the buying page stays calm.

01

The look

No single site has it. The look comes from several: one photograph at a time on white from Gursky and Meyerowitz, a white frame and simple menu from Hardman, a full screen opening from Ray Collins, galleries from Koreski and Strohl, and motion from Photoyoshi. These 3 were picked first.

Benjamin Hardman home page
Benjamin Hardman. Slim white header, one huge photo. benjaminhardman.com
Jeremy Koreski home page
Jeremy Koreski. Tight grid on white, small menu down the side. jeremykoreski.com
Ray Collins home page
Ray Collins. The wave fills the whole screen, menu sits on top. raycollinsphoto.com
02

White space

Established photographers whose sites are almost entirely white. One photograph at a time, a small menu, a small caption. The photograph is the only thing asking for attention.

Andreas Gursky home page
Andreas Gursky. Menu top left, one photograph, a caption in the corner. andreasgursky.com
Joel Meyerowitz home page
Joel Meyerowitz. Name and a short menu on the left, one photograph on white. joelmeyerowitz.com
Rinko Kawauchi home page
Rinko Kawauchi. A pale side panel with a tiny menu, the photograph filling the rest. rinkokawauchi.com
Edward Burtynsky home page
Edward Burtynsky. The print shown as an object in its frame, beside a plain offer of the edition. edwardburtynsky.com
Alec Soth home page
Alec Soth. Prints hanging in a gallery, a reminder that the photos end up on a wall. alecsoth.com
Michael Kenna home page
Michael Kenna. One photograph centred on white, and nothing else. michaelkenna.com
03

Galleries

Most of these photographs will be landscape. Wide frames sit best in rows rather than tall columns: 2 to a row, or 1 across the page, with plenty of white between them. Every frame shown whole, never cropped to fit.

Alex Strohl prints page
Alex Strohl prints. Big frames, title and price underneath. alexstrohl.com
Benjamin Hardman print store
Benjamin Hardman store. One wide photo across the top, then prints in a row with title and starting price. store.benjaminhardman.com
Ryan Struck home page
Ryan Struck. White, series listed down the side, tight grid. ryanstruck.com
04

Motion

Motion is where the site comes alive, and it should feel calm rather than busy. Each clip shows one idea and runs for under 30 seconds.

Photoyoshi. Faded photos come into colour as you browse. The pick. photoyoshi.com
Demo site: opening. The name builds, then the page scrolls into photos and big lists.
Demo site: click to grow. A photo grows into its own page and shrinks back on close.
Demo site: from a tilted photo. The same effect from a scattered, tilted image.
Demo site: hover list. Photos appear, follow the mouse and fade into each other.
Avagyan. The name builds letter by letter, then a white magazine grid. avagyanphoto.com
Almira Kho. A collage that reshuffles as you scroll. almirakho.com
Ethan Wong. A photo fading slowly behind the menu. ethanwong.photography

Demo site clips from this video.

05

Details worth borrowing

Type, lists and the photo page from the demo site. Its photos are portraits. Ours will mostly be landscape, so the photo page would run the picture across the top with the details beneath, rather than side by side.

Geist typeface sample
Type. Geist, free, set bold with the letters pulled tight.
Demo site hover list
Big list. For us, places: Raglan, Piha, Gisborne, Bali.
Demo site profile view
Photo page. Big name, short story, facts in a neat list.
Demo site home page
Home. Big name, small line beside it, lots of white.
06

The buying page

Once the photo has grown in, everything goes still. Size, price and the buy button are all that compete for attention.

Benjamin Hardman print page
Benjamin Hardman. White page, sizes as plain buttons in centimetres and inches, and a frame choice of oak, white or print only. store.benjaminhardman.com
Alex Strohl print page
Alex Strohl. The print shown framed on a shelf, one line of story, and the edition sizes listed underneath. alexstrohl.com
Magnum print page
Magnum. Size, finish as small swatches, then folded sections for paper, framing, refunds and shipping. Plenty of detail without clutter. store.magnumphotos.com
Jeremy Koreski Gallery print page
Jeremy Koreski Gallery. Side menu, a big photo, size and paper in 2 menus, and the delivery time beside the button. jeremykoreskigallery.com
07

Notes

The site has 2 jobs: show the photographs at their best, and sell prints.

Beautiful

  • Large photos, with nothing crowding them.
  • Landscape frames shown whole, never cropped.
  • Fast, and as good on a phone as on a big screen.
  • Calm motion while browsing.

Sells prints

  • One click from any photo to buying it.
  • Sizes, paper and price clear at a glance.
  • See the print on a wall before buying.
  • Numbered editions with a certificate for larger sizes.
  • A short story with each shot.

Ideas to try

  • Open on one photograph, full screen.
  • Click a photo and it grows into its own page.
  • Browse by place: Raglan, Piha, Gisborne.
  • Everything goes still at the point of buying.