My role
UX/UI, Visual design, Micro-interaction,
Motion, Website dev
Timeline
14 weeks / Sep 2024 - Dec 2024
Instructor
Dan Park (Google lead motion designer)
Molecular gastronomy is a cooking technique that uses the physical and chemical processes that occur during cooking to create new flavors, textures, and artistic dishes.
Context
Design and develop a conceptual dataset website for molecular gastronomy, blending interactive visuals with an innovative graphical user interface.
interaction
Home
Exploring different dish types.
Food discovery
Users can discover food through hover interactions.
Discover more details
Users can explore the techniques, chefs, and restaurants associated with the food.
Related food exploration
Users can view related food items and explore detailed information about them.
Research
What’s the characteristic of molecular gastronomy?
How to visualize molecular gastronomy?
How do existing molecular gastronomy platforms visualize this dataset?
Type 1:
These have some design details, but they feel like a generic dataset and visual style.
They haven't emphasized the experimental and futuristic of molecular gastronomy.
Type 2:
These are futuristic and showcase the tone of their food, but where is the scientific feeling?
Design iteration
Tone definition
Scientific
+
Experimental
Include abstract molecular patterns to enhance complexity and visual interest.
Embrace bold and unpredictable elements that feel intentionally out of place.
Use deep colors contrasted with bright touches to achieve a visually impactful design.
Refer to cooking methods as “experiments” and dishes as “formulas” for a scientific touch.
Lo-fi
After applying the images, the layout looks messy and does not feel scientific.
Lo-fi v2
Try to apply food images to the molecule shape so each molecule represents one dish. But it's hard to differentiate the meaning of the color and the dish.
Color and shape language
Create synesthesia by building a strong relationship between real dish types with color and shape.
Molecule wall
Create a molecule wall using shapes and colors.
Replace the rectangular molecules with hexagonal shapes to evoke a stronger connection to chemistry and scientific aesthetics.
Visual exploration
Detailed page visual exploration.
Motion design
Representation for different techniques.
Final design
Home page
Display one dish type at a time to avoid confusion. Showing all dish types simultaneously may lead to user misunderstanding.
