Angéline Poitout.Open to collaboration (opens in a new tab)

WRITING

Building faster : Design, stack & motion tools

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 :

snowball.club (opens in a new tab)

businessideasdb.com (opens in a new tab)

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 (opens in a new tab)

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 (opens in a new tab) & Qonto (opens in a new tab).

Two tools were tested for motion :

Motion Vid AI (opens in a new tab) Useful for rapid visual exploration. Good for generating early concepts quickly.

Remotion (opens in a new tab) 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

All writing