Master Manual: interactive camera tutorial site

This site was designed and built (in HTML, CSS and Javascript) in 2018 while learning front end web development.

Beginner to intermediate photographers have a hard time transitioning from using Auto mode to fully understanding the manual settings on their complex mirrorless or DSLR camera systems. Main paint points discovered in user interviews: 

"The cameras instruction manual is impossible to read"
"There are too many buttons, who knows what they all do"
"Theres too much conflicting information online, I'd need something specific to my camera, but the instruction manual is too long and difficult to read"

The Solution

​Master Manual. An interactive site designed to help photographers master the manual settings on their mirrorless or DSLR cameras.


A fully responsive interactive site explaining every button on Sony a-frame camera bodies. Each button has a hotspot, click it and read an explanation of what that button does. Switching views on the left side enables you to really see every button, on any side of the body.

Homepage with clickable camera views

Additional Features

Gallery page allows you to click through example images and see an explanation of settings used to achieve that image. About tab explains a bit about how the site works, and a contact page allows users to ask any questions they might have or submit suggestions.

Gallery page with explination of settings

Fully Responsive

Works on any device type or size, or use at home or in the field.

Next Steps

The long-term plan would be to also incorporate other camera types, so this could directly serve photographers with other cameras who also want the convenience of seeing exactly what they see on their camera. We will also add features to help users pick the right lens for different situations, and explain the technical terms behind lens types and lengths.

Related Projects

Check out some other projects you might like

Want to work together?

Get in touch today.