Cindy Nakhammouane
FolioFolds
FolioFolds is finalizing its design and beginning development... Stay tuned for updates!
Overview
From birthday cards to origami, FolioFolds is a web application for designing, assembling, and sharing interactive 3D mockups of unique printed forms. The platform supports complex folds, bindings, cutouts, and offers AR viewing capabilities.
Context
Product Design
Role(s)
Project Manager, Fullstack Developer, and UI/UX Designer
Skills
UI/UX Design, Fullstack Development, Web Development, Prototyping, User Testing
Tools
Figma, React, Next.js, Typescript, Three.js, WebGL
Import Images and PDFs, Select a Template, Then Start!
Users can import images, PDFs, select from a variety of templates, and customize their designs with intuitive tools.
Dynamically Fold your Pages Digitally
Handle paper folding with ease using intuitive gestures like pinch-to-fold and drag-to-unfold.
Create Unique Layouts and Binds
Move and resize elements freely to create unique layouts. Choose from various binding and page styles like spiral binds, stitched binds, textured paper, to glossy paper.
Cut Pages with Ease and Precision
Users can easily create cutouts and custom shapes on their pages using cutting tools inspired by paper cutter sliders.
Share & Publish Your Creations with the World
Creators can generate a share link or embed, allowing publications to live online like interactive artifacts — not static images or PDFs.
Project Breakdown
Problem
Designers want a tool to help display interactable printworks in 3D that's both intuitive and accessible to expert designers and casual users.
There is a need for a stream-lined way to construct complex 3D versions of printworks that provides accessibility. Here are key problems we identified:
Lack of Intuitive 3D Visualization for Printed Materials
Professional 3D and CAD tools struggle to capture the tactile complexity of print work and have too much technical depth for casual users.
Physical Prototyping Is Time-Consuming and Expensive
Physically prototyping folds, bindings, cutouts, and page structures often requires multiple physical mockups
Print Works Lose Impact When Shown Digitally
Traditional digital documentations (flat scans, photos, or videos) struggle to capture the dimensionality, tactility, and interactive discovery of physical publications.
Solution
Wanting a better way to showcase my design projects online, I designed FolioFolds, a web application that allows users to create and share interactive 3D mockups of printed works. The platform makes creating paper folds, cutouts, and bindings easier by provided tailored tools for paper engineering. Users can embedd finished piece into a website or view it in AR using their mobile devices. Publications can be flipped through manually or viewed through animated video, fostering a vibrant ecosystem of print design enthusiasts.
The Process
Inspiration and Research
Paper engineering and bookbinding have centuries of rich history and although the medium is more enriching in its physical form, exploring ways to convey these physical properties digitally can allow designers to share our work's potential more captivatingly as well as serve as a promising archival method.
I researched traditional techniques and modern digital tools to understand how people interact with physical publications and to find physical qualities I could replicate. The challenge then became:
How can we design a user friendly tool to construct prints in 3D that captures the tactility of traditional paper engineering?
Design Philosophy
The core design values for FolioFolds centered around simplicity, appreciation, and accessibility.
Simplicity and Intuitiveness
Simplicity was key to ensure that users of all skill levels could easily navigate the interface and create their own foldable publications without feeling overwhelmed by complex tools or features.
Digital Craft, Physical Sensibility
The UI design incorporates the aesthetic qualities of book art through its softness, tactility, and textures. The digital tools mimic traditional paper engineering techniques such as folding, while visually resembling current 3D modeling and design softwares. The gestures are reminiscent of handling real books (pinching, dragging, peeking, unfolding)
Celebration of Print Culture
FolioFolds elevates printed matter as living, interactive media, bridging the gap between physical craft and digital storytelling.
Prototyping and Designing Behaviors
I coded iterative UI prototypes to explore folding mechanics and 3D paper handling. It was important to nail how paper should move, react, and feel in a digital environment. Early explorations of binding systems included simple book bindings and hinge systems, gradually evolving into physics-informed page bends, easing curves, motion, weight, tension, and natural drag gestures.
Interaction and Usability Tests
I conducted informal testing sessions with design students, book artists, and casual users to refine usability and user flow. These sessions highlighted key needs: intuitive camera controls, clear affordance for flipping and unfolding, and a forgiving learning curve for newcomers.
Based on feedback, I streamlined gesture input, introduced subtle visual prompts, and optimized transitions for clarity and comfort. The iterative feedback loop ensured the interface remains approachable for beginners while still offering creative depth for expert users.
Technologies
The following tools make up the core technology stack for FolioFolds:
Three.js
Three.js powers the real-time 3D rendering and interaction system, enabling detailed page-turn animations, fold mechanics, and material effects.
React + Next.js
React + Next.js provide a modern web architecture with component-based UI, server-side rendering, and fast client-side transitions.
TypeScript
TypeScript ensures strong type-safety across rendering logic, UI components, and scene data, preventing errors and improving maintainability as the tool scales.
WebGL + Shader Programming
WebGL and custom shader logic enable realistic paper behavior, bends, shadows, lighting, texture mapping, and subtle material effects that mimic physical print.
WebXR / AR
WebXR enables augmented reality viewing, allowing users to place and explore digital publications in physical environments through supported devices.
Node.js / Express (Future scaling)
Node.js and Express are part of the planned backend expansion for cloud asset handling, collaboration tools, publication sharing, and persistent project storage.
Vercel Deployment
Vercel is used for fast deployment, preview environments, and CI/CD automation, ensuring seamless updates and reliable hosting for interactive WebGL experiences.
Go back to the top