Progressive disclosure
Drag to add detail. Each step answers what the one before left open.
I design products and then I build them, from the first sketch to the code that ships.
This site is organised around the ideas behind that work. Each idea is shown on its own first, then in the product where it shipped.
Good interfaces show the next step and keep everything else one tap away.
Disclosure, shipped
The Hujjaaj flight card: a one-line summary per leg, with the full routing a tap away.
Only the next step
A chat with no keyboard. Every reply is a pre-written step towards booking a lesson.
A few clear choices
Three sizes of the same box. Pick one and the box and the price answer straight away.
Direct manipulation
When the choice is a range, give it a handle. Drag to split the nights between Makkah and Madinah; the total always adds up.
Movement should tell you what changed, and where things went.
Springs, not timelines
Drag the card and let go. Then switch to Timeline and try again.
Momentum
Drag or flick Nextayah's wheel: it carries your throw on to the nearest card, and each landing rings its own note.
Choreography
The ornament draws itself in order: rules first, then every stroke, then the nodes with a small overshoot. Only then does it start to move.
Layering, light and shadow show what you can touch and what matters most.
Elevation
Pull the layers apart and move the light. The shadows show what sits on top.
Light at the edge
A rim that is faint at the top and full at the base, with light falling inward the way it does on real glass.
Light that listens
The edge, alive. It swells with loudness, shifts colour with pitch and never settles into a loop. Turn on the microphone and it follows you.
Typography sets the pace of reading, not just the look of the words.
Measure and spacing
Change the line length and the space between lines, in English or Arabic.
Type as material
Nextayah's pearl material, on a word and on its buttons. Press and hold one to watch the reflection shift.
Identity
The Tamr mark, drawn stroke by stroke from the original brand sheet.
Data is easier to understand when it looks like something you already know.
Data as atmosphere
Scrub through today in London. The sky follows the real prayer times.
In the app
Awqaat does the same with photographs of the sky, crossfading between one prayer and the next.
Pitch as steps
A melody rises and falls, so Nextayah draws it as steps: the reciter's line first, then yours. Matching the steps is the whole exercise.
Well-structured code lets a product change what's behind it without changing what you see.
Ports and adapters
Switch the source. The data changes shape; the card doesn't.
Adapters, shipped
Motamer's trip builder, running on its mock flight and curated hotel adapters.
It should work with a keyboard, a screen reader, or with motion turned off.
Semantics
The Hujjaaj flight card again, with a live transcript of what a screen reader announces. Try pressing Tab.
Preferences
One switch reduces motion across the whole site.
Projects
The shipped pieces above come from these products. Each has a case study with its story and the rest of its code.
Day by day
Every day of commits since 2019, coloured by the product that got the most work.