about project
Overview
In Polish schools, the majority of children are unlikely to have the opportunity to use a microscope. If a school does have a microscope, it is usually only one, and its use is demonstrated by the teacher.
The project below presents the construction and operation of an optical microscope.
The project below presents the construction and operation of an optical microscope.
My task:
• research
• preparing a vector illustration of a microscope
• developing animations that are easy for the programmer to repeat
• UI/UX development
• testing
• preparing a vector illustration of a microscope
• developing animations that are easy for the programmer to repeat
• UI/UX development
• testing
My role:
Research
The best microscope for learning
We selected a light microscope with the help of expert biologists, which is the most commonly used type of microscope. It allows for observation at magnifications of up to 1500×, which enables you to observe the details of the structure of cells. The image visible in the microscope is enlarged and inverted.
The magnification of the image visible in the microscope is the result of two elements: the magnification of the eyepiece and the magnification of the objective lens. The magnification of the eyepiece is usually 10×, while the objectives have different magnifications. The lenses are placed on a turret, which allows them to be changed. Total magnification can be calculated by multiplying the magnification of the eyepiece and the magnification of the objective lens.
When using high magnification objectives (100× and more), it is necessary to use oil immersion. It is a special reagent whose presence improves the focusing of light, thus increasing the resolution and contrast of the obtained image. Failure to use oil at such high magnification results in a dark, blurry image. It is necessary to wipe the preparation thoroughly after completing observations or when returning to objective lenses with lower magnifications.
To avoid getting the objective lenses dirty or damaged, it is prohibited touch them with fingers. They are cleaned using special wipes that do not cause micro-scratches on the glass surface.
Illustration
Creating a workstation
It’s important to keep in mind the purpose of the illustration. I wanted to create an illustration that is both visually appealing and informative. This means that I had to focus on creating an illustration that accurately represents the components of a light microscope, while also making the illustration visually interesting.
Once I had completed my sketch, it was important to make sure that it is properly situated for the UI, that had to appear later. This included resizing and moving the microscope to the left.
While creating the illustration, I had to consider that not all effects available in Adobe Illustrator are translated to .svg format. To ensure that the illustration was compatible with .svg format, I opted for a realistic approach and used simple shapes filled with gradients only. I avoided using meshes or opacity modes.
Animation
Moving parts
During the illustration preparation, I considered the location of the moving parts. As I mentioned earlier, the animations had to be simple enough for the programmer to repeat them.
I decided to keep the lenses in the head of the mechanism the same size and move them 30 degrees during rotation. The slide removed from the cassette followed a straight line from the cassette to the microscope clip. The rest of the mechanisms, such as turning the coarse focus, moving the table up and down, or the clip to the sides, were easy to operate using only shifts.
All animations can be seen in demo version of the web app below.
UX Design
Architecture of the application
My next step was to design a user flow that would enable users to learn and have fun while using the app. We decided to split the learning process into two parts: getting familiar with a microscope and learning how to use it.
In addition to mechanisms that allow viewing the slide, we also incorporated other features into the app:
• immersion oil usage
• breaking the slide glass when moving the stage too close to objective lens
• cleaning and maintenance of the microscope parts
UI Design
Design system
The project necessitated designing a user interface that was legible against the microscope illustration’s background. However, it should not be too conspicuous since the student’s primary focus was to remain on the animated mechanisms and the preview of the displayed slide.
the app itself:
https://ep2019.contentplus.io/x/DAguK0Ixi?lang=pl