Over the past few weeks, I’ve been deep into structuring a web product : from design decisions to motion. Let’s talk about front-end.
Here’s a clear breakdown of the tools and choices involved.
1. Starting Fast with a Boilerplate
I used ShipFast as a base.
It’s a pre-built Next.js starter that already includes authentication, payments, and a clean project structure. Instead of rebuilding common features, it lets you focus on product logic and user experience.
In short : less setup, more execution.
How is it going ? Built in less than 24h once boilerplate (+ time to understand how to use it for frontend) and currently going well (not the definitive version of course) :
2. Design Principles
The interface followed a few strict rules:
- Clarity over decoration
- Strong visual hierarchy
- Minimal elements
- One clear primary action
The goal was simple: reduce friction and make the experience understandable in seconds.
Moodboard :
The idea was to ask to Grok actual websites built with Shipfast and chose over the found one. Also, I found this amazing inspiration on Behance :
https://www.behance.net/gallery/229799615/MEWVERSE-Landing-page-UXUI-design
3. Visual System
The visual identity stayed intentionally simple:
- Strong contrast
- Limited color palette
- Clean typography (Nunito)
- Consistent spacing
This makes the interface readable across both web and video formats. A solid graphic system usually relies on a few core elements:
- Logo → simple, recognizable, scalable
- Color palette → limited (1 primary, 1–2 accents, neutrals)
- Typography → one clear font family max (e.g. Nunito)
- Spacing system → consistent margins and rhythm
- UI components → buttons, cards, inputs with the same logic
- Tone of imagery → illustration, motion, or photo style defined early
The key is consistency. A good visual identity is less about aesthetics and more about recognition and clarity. User experience included.
4. Motion & Storytelling Tools
Moodboard inspiration : Spotify & Qonto.
Two tools were tested for motion :
Motion Vid AI Useful for rapid visual exploration. Good for generating early concepts quickly.
Remotion A React-based framework for programmatic video. More control over timing, animation, and structure. Better suited for precise, production-ready output.
In practice :
- Motion Vid → speed and exploration
- Remotion → control and consistency
- Finally : Claude + Grok + Capcut, in less than twelve hours after iterations, here is the satisfying final result :
5. Key Takeaway
Speed comes from constraints.
Using a solid boilerplate, a strict design system, and the right motion tools reduces decision fatigue and keeps the focus on execution.
And we don’t forget the words of the week going to *drum rolls* Jack Friks
Techie yours,
Angéline