Whitespace
A cutting-edge visual language
Librum evolved from turning pages to building knowledge.
The challenge
How do we elevate static interfaces into engaging, fluid experiences?
How can animation add clarity and delight without overwhelming the user?
How can animation add clarity and delight without overwhelming the user?
The goal
Our primary goal was to:
Design interfaces enriched with interactions and animations that feel natural, purposeful, and intuitiv
Design interfaces enriched with interactions and animations that feel natural, purposeful, and intuitiv
The approach
We broke the exploration into three layers of interaction:
Micro-interactionsButton presses, toggles, loading states.Subtle feedback loops that confirm user actions.
Transitions Page changes, modal openings, navigation flows. Using motion to provide continuity and orientation for the user.
Delightful Details Hover effects, animated illustrations, playful feedback moments. Enhancing emotional connection with the interface.4. Design Exploration
Principles we followed:Motion should communicate, not distract.Every animation must have a functional purpose (feedback, hierarchy, guidance).Consistency in timing and easing to ensure a smooth visual language.Tools & Prototyping:
Created high-fidelity prototypes in Figma and After Effects.Tested key interactions with users to measure clarity and perceived smoothness.
Micro-interactionsButton presses, toggles, loading states.Subtle feedback loops that confirm user actions.
Transitions Page changes, modal openings, navigation flows. Using motion to provide continuity and orientation for the user.
Delightful Details Hover effects, animated illustrations, playful feedback moments. Enhancing emotional connection with the interface.4. Design Exploration
Principles we followed:Motion should communicate, not distract.Every animation must have a functional purpose (feedback, hierarchy, guidance).Consistency in timing and easing to ensure a smooth visual language.Tools & Prototyping:
Created high-fidelity prototypes in Figma and After Effects.Tested key interactions with users to measure clarity and perceived smoothness.
Design process
Whitespace delivered a set of interaction-rich design patterns:
Animated onboarding flow that eased users into the experience.
A consistent motion system (durations, easing curves, delay ranges).
Reusable component animations (cards flipping, expandable lists, progress indicators).
Animated onboarding flow that eased users into the experience.
A consistent motion system (durations, easing curves, delay ranges).
Reusable component animations (cards flipping, expandable lists, progress indicators).
Outcome
Librum evolved into a full learning platform where reading, note-taking, and organizing happen in one ecosystem.Early testers reported:
Faster workflow (no need to jump between multiple apps).
Clearer mental model of their study/research materials.
Reduced friction in retrieving both notes and references.
Faster workflow (no need to jump between multiple apps).
Clearer mental model of their study/research materials.
Reduced friction in retrieving both notes and references.
Homepage snippet
