Ways of Seeing

  • Type

    UI/UX, Product, Motion

  • Tools

    Sketch, AfterEffects

  • Duration

    Jan 2018 — Apr 2018

A collaborative website that dissects John Berger's theories in his television series and book, Ways of Seeing, through an interactive lens.

How Do We See

How do people interpret, or rather, "see" things so differently?

In Ways of Seeing, John Berger answers this question by outlining how we see and the reason why we should be more critical when questioning the nature of our seeing. Berger adapts the way he teaches his theories specific to the medium of choice — as through his book and television series. With advancements in technology and the ability to see visuals from a broader range, an interactive Ways of Seeing is needed.

“It is seeing which establishes our place in the surrounding world; we explain that world with words, but words can never undo the fact that we are surrounded by it. The relation between what we see and what we know is never settled.” — John Berger

Adjusting to the Medium

How can Berger's theories be translated into an interactive website?

The episodes use video and audio effectively to demonstrate how the medium shapes our way of seeing. The book has 7 chapters, but 4 are a mixture of both text and image, and 3 have just images.

Since the medium influences our perception, the website should reflect his theories by utilizing common interactive actions and tools that should be used to influence the user’s way of seeing. The collaborative aspect will allow people to understand the infinite variability of perception.

How It Works

1. Create your own way of seeing.
2. Browse other people's ways of seeing through their own creations archived in the system.

Site Structure

The website is structured around the first episode and chapter of Berger's theories. In this section, Berger outlines 6 actions that affect people's perceptions. The website will utilize a set of mini interactions that allows the user to interpret, and then the user to witness other users' interpretations.

1. Perspective
2. Context
3. Reproduction
4. Crop
5. Audio & Text
6. Sequencing

Visual Design

The visual style is based on the book and the television series, represented by the quality of the filmography in both the audio and video, the fashion, and some of the material discussed. Elements such as the off-white coloured paper from the book, the faded/muted and grainy images, and the sans-serif type were used as inspiration.


Perspective makes the eye the centre of the visible world, but the human eye can only be in one place at a time. When we look at a photograph, we are aware we are seeing from the photographer's perspective and they selected this sight from an infinity of other possible sights.

The user hovers around the screen to pick a perspective to create their interpretation of the apple. They are then asked to draw it. When the user submits their creation, they are then brought to the main screen once more, but is now able to hover around to see other people's interpretations of the apple based on their perspective of choice.


Formerly, the painting, like the human eye, could only be in one place at a time. Now with the development of the camera, the object or image could be viewed in a million different places at the same time. The viewers are now able to view it even in the comfort of their own homes, in very different, unintended contexts, with the viewer now seeing it in the context of their own lives.

The user is asked to enable their webcam for this interaction. The apple is now situated and viewed in the location of the user. Once the user takes the photo and uploads it to the site, they are able to view the apple in different geographic contexts which may influence their interpretations of the object.


The camera reproduces it, making it available in any size, anywhere, and for any purpose. The uniqueness of the original now lies in it being the original of a reproduction. The value is affirmed and gauged by the price it fetches on the market.

Using keyboard shortcuts, such as Command (or Control) C and V, the user is able to create as many reproductions of the original as they desire. As more reproductions are produced, the value of the original begins to increase and the value of the reproductions begins to decrease. The descriptors for the original begin to add and change as well to validate it as the original object.


Cropping isolates a part of the object from the whole and the detail becomes transformed. This causes the spectator's interpretation to be shaped by the one cropping the image.

The user is able to crop the image of the same apple to any section or dimension they desire. They are then led to a page where they can view crops created by other users to see how their perspectives differ.


The website currently only reflects the first episode and chapter of Berger's theories. I would like to expand on this project to investigate Berger's theories at a deeper level.

If expanded, the mobile and tablet experience would be designed differently from the desktop since it has unique interactive touch gestures which are specific to the medium. Newer technologies such as AR to actually situate the object within one's space would also be interesting to explore.

See more projects.

Leave me a message after the *beep*.

Got an interesting project in mind? Drop me a line for any freelance opportunities!

Or see me as a potential fit? I’m currently on the lookout for any internship or designer positions.

Let’s talk at bethmoy@live.com!

Typeset with love in: Chap, Silk Serif, IBM Plex Sans.