Interactive Learning for DoF: Design how newbie photographers play and learn depth of field calculation
Course
2018
Advisor
Depth of field, known as DoF, is the most important concept in photography. However, the concept itself is hard to understand for newbie. That is why I made an interactive visualization simulation of the section of lights to explain how focus works and the depth of field calculation. By learning the concept of DoF, students can know how to adjust the factors to get a photo (maybe a portrait) with the perfect focus.
This is an individual work.
Some knowledge required before learning - students should know about convex lens.
play + learn
Try the demo here→
Or, see the code in D3.js here→.
Step 1 - Goal + Exam
Define useful main objectives for learning and create an exam.
Describe, Recall, Predict
The student/viewer will be able to describe the reason DoF exists for a camera.
The student/viewer will be able to recall what are the factors of DoF and their correlations. (For example, the bigger the aperture, the shorter the DoF)
The student/viewer will be able to predict when factors changes, what will happen to focus of a photo taken by the camera - will the background be more clear or blur?
The student/viewer don't need to calculate values precisely using formula or recall typical value combinations.
Select, Open answer
Open answer: If one day the main sensor can be bigger because of new technology (the upgrade of 35mm film to 350mm or 3500mm), will DoF dismiss? Why?
Multiple choice: What can you do to change the current Dof while taking a photo? (a) replace with another len (b) move the item further (c) adjust the aperture radius (d) dim down the light.
Open answer: If you want to capture your friend standing in front of a waterfall, however now what you preview are a clear friend image and a blur waterfall. You want the background to be clear enough, what can you do? If you have several solutions, which one will you take?
Step 2 - Sketch + Structure
Using four chapter and three interactive diagram in different levels, users could understand the concept and play around.
What Is A Perfect Portrait?
Specify the answer that base on the needs to include the background (like a beautiful lake or mountain), or to impress the person itself. Provide some examples.
Intro To Focus
Explain why focus happens, what is acceptably sharp. Provide a quick interactive diagram and let the user to adjust the distance of a point to help keep focus.
The Usage Of DoF
Explain DoF and the factors of DoF calculation. Provide a playable diagram with focal, aperture and focus plain distance.
Testing
Provide a flexible diagram with all parameters and a rating result (good or bad). Show the calculation formula and the cheatsheet.
Step 3 - visualization accessment
From the design aspect, I analyzed the visualization with the types, limitations and two Es.
Data, Chart, Filter
Data (typical values for all options and combination) is from real manufacturers. No classical chart (bar, line, etc) or user-defined filtering.
Design Limitation
Preview is not real due to lacking of scaling, shaking, dimming, etc. This is only for telling a story and a theory about focus only, not an inspiring science thing.
Expressiveness + Effectiveness
Expressiveness is great - Even though the model has been abstracted, the information are all there. Effectiveness is good - the blur preview benefit the effectiveness. However, it can only show one combination of the factors. Users can’t track its trends with value changes or see a table for all combinations immediately. But from a design aspect, it may be a heavy load for the user to learn all the combinations.
prev
← Sketch Clip
next selected project
DocPill →