0%

AdamRoberts

Design &Engineering

Thanks! I'll be in touch within the day.

Leave your details

Photoscoper is the brand of award winning nature photographer, David Roberts; yes, my dad. And it’s a project that’s allowed me to experiment and evolve.

Everything inside this project, I created from scratch. Brand, Design, UX flows, Web development, Sound, 3D, Animations, WebGL. I poured a lot into this and I’m so happy to take home my first FWA Site of the Day.

Role:

Digital director, Designer, Developer

Tags:
Design DirectionStrategyBrandingUI/UX3D Modelling3D AnimationPrototypingFront-endReactGatsbyDatoCMSGSAPThreejsSnipcart
Year:

2023

Agency:

Freelance

Branding Identity

Branding Typography

Website Loading introduction

Part of my creative direction, I wanted to make sure the visual aesthetic was connected to nature, with some playfulness to it as well.

From the initial loading screen, I take users on a journey with a key phrase “Taking control in the wild”, which connects to anticipating a shot.

I created every single element from scratch, the camera was made in Blender and I explored Video, Image sequence and Webgl to see which would be better for performance.

Website Homepage + Galleries

01

Brand Identity

I collaborated with Jeroen Van Eerden, a brilliant and well known identity specialist, to craft a unique mark that was a mixture of a camera / scope / animal.

02

Strategy

Working together with David, we figured out what pages we needed on the website and how his photos will be organised in the new structure.

I also created content flows (page stories) that act as low fidelity wireframes. Once this was set in stone, I started the design process.

Digital strategy with content flows, mapping out the content structure, UX and user journeys.

03

Digital/Visual Direction

Because this was essentially a redesign of the previous website, some parts of the overall thinking were done. However, I wanted to change things up a bit. So as usual, I explored different ways of doing navigation, page transitions, page loading sequences and other interactions.

Part of my process includes a phase where I would create some elements to get a rough idea on how things might come together. Mostly living in my head, I design out some ideas to find what works. Sometimes separated from teh bigger picture.

Digital UI elements for Photoscoper

04

Technology

There’s a number of things happening under the hood. Firstly, I built the experience with React and the Gatsby framework. The whole site is a static website, with content being pulled from a headless CMS (DatoCMS).

I created an interactive liquid effect on the homepage using Threejs.

And everything else is styled-components and GSAP. Beautiful combination!

Branding Aesthetic + 3D

Responsive Ensuring mobile responsiveness

Something that’s been on the back-burner and will launch in 2025, is the eCommerce side of the brand, where you can purchase his work.

We’re working out a way to deliver multiple options, whether it’s a purchase to download or purchase a print.

At this moment in time, Snipcart is the shop functionality that I’m opting to use, but we’re figuring the logistics printing out before we offer that feature, as well as collating images he’s allowed to sell.

eCommerce The Photoscoper Shop UI Design

Galleries Unique image exploration

Services Dog photography

Absolutely over the moon with the incredible work Adam created. I get so many compliments! Thank you.

- - David Roberts
Copyright 2025 • All rights reserved
Cases (0) • Archive (0)
  • Let's work together • Let's work together •
  • Let's work together • Let's work together •
  • Let's work together • Let's work together •
  • Let's work together • Let's work together •
  • Let's work together • Let's work together •
  • Let's work together • Let's work together •