Preview image. Unlock full-res
Dark horizontal process section with serif heading, intro copy, and numbered steps linked by a dotted wave path over candid photos.
Summary
A process explainer that lays numbered steps in a horizontal row, each with a portrait photo, oversized step number, and short description, connected by a subtle dotted wave.
Visual description
Black field with top-left heading "Our process" in white mixed serif and sans, a small white dot accent beside the title, and a gray intro paragraph about partnering with charities. Below, steps arranged left to right: each module has a tall rounded-corner candid photo, a large thin white step number (01, 02, partial 03), a white step title ("Learn", "Challenge"), and gray body copy. A faint wavy line of small white dots threads between the steps to suggest progression. Step 01 shows a woman laughing at a wooden table; step 02 shows a woman with glasses at a laptop in conversation.
Key takeaway
Oversized outline-style step numbers give hierarchy without heavy UI chrome. The dotted wave path adds motion and sequence between photo cards that would otherwise feel like a flat row. Candid workplace photos make an abstract process feel collaborative rather than corporate.
Reuse notes
Strong for agencies, consultancies, or nonprofits explaining a phased engagement model. Horizontal layout will need carousel or vertical stack on mobile. Requires three or more strong portrait photos with consistent rounding. Works best on dark backgrounds with restrained gray body copy.
