Reverse engineering world-class design to level up my UI skills. This weekend: Ogaki (beauty) and Groth (interior design). Replicated both in Figma, now moving to Framer to master their interactions. You can't fake understanding when you're rebuilding from scratch.
The Context:
While advancing my Framer skills, I realised I needed to go deeper into the fundamentals: typography hierarchy, colour psychology, layout composition, and visual design systems.
My strategy? Find conversion-driven designs and reverse engineer them. Study why elements are positioned the way they are. Understand how typography creates information hierarchy. See how layout influences user behaviour. Then replicate them completely to feel every decision.
This Weekend's Deep Dive:
Ogaki (Beauty Industry): Experimental layouts that break conventional grids. Groth (Interior Design): Typography as the primary design system.
What Makes Ogaki Fascinating:
Their layout approach is unconventional. They're creating visual rhythm through intentional asymmetry and negative space. But where they really shine is in interaction design.
I've replicated the designs in Figma first to understand the static layout choices. Now I'm taking them into Framer to break down each interaction, understanding what makes them work at both a technical and psychological level.
What Makes Groth Powerful:
They've built their entire visual system around typography. The restraint in their colour palette (mostly black, white, earth tones) forces your attention onto the type hierarchy and spatial composition.
When you rebuild a design first in Figma, then implement it in Framer, you can't skip the hard questions:
- Why does this font size create the right emphasis?
- How does this spacing affect visual flow and scannability?
- What makes this interaction feel intuitive versus gimmicky?
- How does this layout guide where users look first?
- Why does this colour choice influence decision-making?
The Figma phase forces you to understand the static design decisions: typography, layout, hierarchy. The Framer phase is where you learn how motion and interaction elevate the experience.
Both sites prove that minimalism is strategic, not stylistic. Every element earns its place. White space creates focus. Typography establishes hierarchy. Layout directs behaviour. Colour triggers emotion.
The Pattern I'm Seeing:
Conversion-driven design isn't accidental. These sites understand:
→ User psychology and cognitive load
→ Visual hierarchy and F pattern scanning
→ Colour theory in conversion optimisation
→ How micro interactions reduce friction
→ The relationship between aesthetics and trust
What's Next:
Taking both designs from Figma into Framer. Going especially deep on Ogaki's interaction system to understand how they've orchestrated animations to feel so cohesive.