Web Design
MoodFrame "How It Works"
A dark-themed "How It Works" section featuring three distinct steps—Upload, AI Analysis, and Result—presented through clean typography and vibrant, abstract UI components.
About
A "How It Works" section exploration for MoodFrame — a fictional AI SaaS concept. Three steps: Upload, AI Analysis, Result. Dark background, clean type, vibrant abstract UI components that represent each stage without defaulting to screenshots or generic icons.
Ava's own design work. The brief was self-set: take the most templated section in SaaS web design and find out what happens when you treat the visual components as the main event.
What I Find Inspiring About This
"How It Works" is where most SaaS sites go quiet. Three numbered boxes, thin icons, a sentence each. The section exists to reassure, so designers play it safe — and it reads like every other site in the category.
The dark background raises the stakes. On white, abstract UI components float. On dark, they glow. The color has somewhere to come from. Each of the three steps gets a component that carries its own visual logic — Upload feels different from Analysis feels different from Result — without any of them needing to be a literal screenshot of software that doesn't exist yet.
That last constraint is the interesting one. Designing UI components for a fictional product means the components are the product, at least on this page. They have to be convincing enough to make someone believe the thing works. Abstract but not arbitrary — every shape and color is doing persuasion work.
