Design notes — 04 / Dermatology

Design decisions.

This is one of six fictional demonstration practices created by MedPresence. It shows how deliberate design, patient-centred communication and compliance-focused quality assurance can strengthen patient trust. This page explains the decisions behind the experience.

№ 1 · Concept

The metaphor arrived first: skin is a landscape — terrain that records every season. So the site is art-directed like a warm print magazine about that landscape: cream paper (#f6efe6), film grain, terracotta ink, drop caps, two-column prose with a column rule, and Roman-numeral "spreads."

№ 2 · The living topography

The hero's contour map is generated live, every frame:

• A terrain field is built from six drifting plane waves summed together — cheap to compute, organic to look at, and never the same twice.
• A marching-squares algorithm extracts twelve iso-lines from the field each frame — exactly how real topographic maps and medical imaging software draw contours.
• Line color deepens from sand to terracotta with "altitude," and the whole terrain drifts slowly, like dunes over decades — capped at 30fps so it sips, not gulps, the battery.

№ 3 · Typography

• Newsreader (a variable optical-size serif made for long-form editorial) carries the voice — especially its italics.
• Karla handles captions and body labels, letter-spaced like photo credits in a magazine.
• Details that sell the print feel: a drop cap, a column rule, contour-ring ornaments on each treatment card (CSS border-radius blobs that slowly rotate), and figure captions under the hero.

№ 4 · The treatments rail

Treatments are laid out as horizontally-snapping magazine spreads (scroll-snap-type: x mandatory) with drag-to-scroll on desktop — reading sideways, like flipping pages.

№ 5 · Shipping

Pure static HTML/CSS/JS — no framework, no build step, no image files. Deployed to Netlify, whose pretty-URL resolution serves this page at /guide. All motion honours prefers-reduced-motion.

Why this works for patients

Every choice above serves the same goals: a committed art direction that signals care and craft, procedural visuals that stay light and fast on mobile, honest fictional-practice disclosures, reduced-motion support, and a clear path from curiosity to consultation. The same discipline — patient trust, clinical positioning, mobile clarity, accessibility, PDPA-aware consent and MMC/KKLIU-ready copy — is what MedPresence brings to real practices.

Fictional demonstration site · Produced for MedPresence · 2026