OPSIS EYE CLINIC

OPSIS — Eye Clinic, Thessaloniki

Concept project. OPSIS and Dr. Myrto Anagnou are fictional. We created this site to show what we can build for a healthcare brand. It doesn't represent a real business and gives no medical advice.

The brief

We set ourselves a brief: an independent ophthalmology practice on Nikis Avenue in Thessaloniki. The site needed to feel as careful as the care it offers, work in both Greek and English, and turn visitors into booked appointments.

Medical websites tend to look alike: stock photos of smiling doctors, blue gradients, a contact form. We wanted to see how far a clinic website could go while staying clear and trustworthy.

The idea

The name comes from the ancient Greek ὄψις, meaning sight, so the "O" in the wordmark is an eye.

The iris is drawn entirely in code, not taken from a photo: around 1,600 fibres, crypts and a collarette. It follows the cursor, and its pupil tightens as the cursor gets closer, like a penlight during an exam. Scrolling zooms you through the pupil and into the site.

Design system

• Colour from the exam room. The palette comes from the slit lamp: the cobalt blue of its filter light, and the yellow-green of fluorescein dye glowing under it. Eye-chart white and a deep blue-black complete it.
• Typography. Unbounded, a wide display face, echoes the letters of an eye chart. Literata gives warm, readable body text. JetBrains Mono handles measurements and labels. Greek headlines use Roboto Flex at full width, so both languages carry the same visual weight.
• Technical drawing. Dashed guides, dimension lines and measurement markers show what happens in the chair: corneal topography, eye pressure and an OCT scan of the retina.

Key features

• Scroll storytelling. Scenes tied to scrolling: the zoom through the pupil, a statement revealed word by word, and a three-step diagram of the exam.
• Myopia simulator. A prescription slider blurs an eye chart and a line drawing of the White Tower. Drag it to 0.00 and the city comes into focus.
• Bilingual by design. A full Greek version with correct unaccented capitals, Greek dates and decimal commas. The site switches to Greek automatically for Greek-language browsers.
• Booking that respects reality. Appointment times come from the clinic's hours, including the Greek split schedule with an afternoon break. Each exam's length is taken into account, and weekends are blocked.
• Live status. A badge shows whether the clinic is open right now, based on Thessaloniki time.
• Local character. The Thermaikos gulf, the Vardaris wind, and patient reviews from Kalamaria, Ano Poli and Toumba.

Build

• One HTML file with no framework and no build step, so it loads fast and can be hosted anywhere.
• Canvas rendering for the iris, and plain JavaScript for the scroll scenes, language switching and booking.
• Responsive from phone to desktop, with a full-screen mobile menu.
• Accessible: visible keyboard focus, a native dialog for booking, screen-reader announcements for changing text, and support for reduced motion.

Result

A clinic website people remember, which still does the basics well: clear services, transparent prices, opening hours, directions and a simple booking flow.

We made you look closely at a clinic that doesn't exist. Imagine what we could do for one that does.