madian / journal / how-i-design-a-landing-page
Craft

How I design a landing page.

Notes on the UI and UX choices behind Maktoob's landing page, where modern tooling speeds up the drafts, and which decisions still belong to a human.

§ 01

The hardest page to design.

Most landing pages exist to sell a product the visitor came looking for. Maktoob's exists to ask a visitor to back the work they already read. That difference is a UX problem, not a marketing one, and a page that does not feel it will quietly fail at its job for years.

On a site like this, the landing page is not a marketing surface in front of the product. The landing page is the product. Everything above the fold is the conversion mechanism, the brand voice, the trust building, and the primary action, all happening at once. Treating it as anything less is the most expensive design mistake a publisher can make.

§ 02

The funnel is the layout.

Every interface is a funnel if you look at it the right way. On a landing page the funnel is the layout itself. Where the primary action sits on first scroll. The first sentence under the masthead. The proof between the hero and the call, which has to be the publication's actual work, not stock imagery. What the page looks like on a second visit, when the visitor is already half-convinced.

A good landing page earns the next click instead of demanding it.

Trust is structural, not decorative. A correctly placed primary action with no trust framing around it converts worse than an awkwardly placed action with the right evidence around it. That is a UX call, not a visual one, and the difference is almost always visible only in production.

§ 03

AI as a draftsman, not the architect.

The AI tooling I use today, design-to-code agents, prompt-driven layout generators, prototyping models, has collapsed the cost of producing a credible draft from a week to an afternoon. I lean on it constantly. I do not let it make the taste calls.

DRAFT 01DRAFT 02DRAFT 03TASTE FILTERSHIP
Three drafts, one taste filter, one ship lane.

The taste call is which draft sounds like the publication speaking in its own voice. Miss that and the page reads like a generic SaaS marketing site. A publication that sounds like every other site loses readers in production for years, and nobody flags it because nothing is obviously wrong.

§ 04

Character through small physics.

An interface has to have a body. Buttons that depress when pressed. Amount selectors that settle into a choice instead of snapping into it. Numbers that count up as they enter the viewport. None of that is decoration. Without it the page reads like a form, and forms do not move anyone to act.

§ 05

The handover artefact is the prototype.

A deck is a polite way to defer disagreement. A clickable prototype forces it into the room. The publisher signed off inside the prototype, not after a Loom, and three changes that would have hidden inside a slide caught fire in twenty minutes of clicking through.

§ 06

Premium is what you remove.

The last pass on the page was a series of cuts. No carousel of past pieces. No parallax. No video hero. What stayed was an unmissable primary action, three plain lines explaining the why, and the same masthead the reader already trusts when they pick up the publication. The page reads as if the publication is speaking to the reader directly, which is the only kind of premium a publisher can afford.

AI generates options. Taste picks one. The taste call still belongs to the engineer.