Journal · · Hotel Aurelia
Building Hotel Aurelia’s Digital Experience with MadeByCat
How Hotel Aurelia’s website is structured for direct booking confidence, clear rooms and destination information, considered UX/UI, responsive development, accessibility and performance.
MadeByCat supported the design and development of Hotel Aurelia’s digital experience. This journal entry documents how the site is put together: the reasoning behind its structure, the interface decisions, and the technical choices that keep it usable across devices.
Everything described here can be checked on the site itself. There are no performance scores, no traffic numbers and no third-party endorsements in this text, because those are not things the pages themselves can prove.
Direct booking confidence
The reservation page opens directly on the booking form rather than on another marketing hero. A guest who arrives with intent can begin immediately, without scrolling past imagery they have already seen elsewhere on the site.
Dates are chosen on a calendar that marks stays as available, limited or unavailable, so a guest learns about a closed date while they are still choosing, not after submitting a request. Beneath the form, short information panels cover check-in and check-out, the cancellation approach, dining arrangements and experiences, and a concierge email address is given for anything the form cannot answer.
The intention is confidence rather than pressure: no countdown timers, no scarcity messaging, no invented savings claims. The booking path is the calmest screen on the site by design.
Information architecture: rooms, destination, guest information
The site is organised around the questions guests actually ask in sequence. Rooms describes where you sleep, Gastronomy what you eat, Experiences how you spend the day, Weddings how the property hosts a private celebration, and Reservation how you request a stay.
Each of these lives on its own route with its own heading and breadcrumb trail, so a visitor arriving from search lands on a page that explains itself and offers a clear way back to the homepage.
A season switch runs across the whole experience. Choosing summer or winter changes the hero, the room presentation, the dining concepts and the experiences shown, so a guest planning a winter stay is not reading about a summer one. The switch is available in the header and in the mobile menu, and the choice follows the visitor between pages.
UX and UI decisions
The interface is deliberately narrow in its vocabulary: a serif display face for headlines, a single sans-serif for navigation and body copy, and a restrained palette of ink, cream and champagne gold. Earlier iterations mixed more typefaces; reducing that mix made the hierarchy easier to read at a glance.
Motion is used to reveal rather than to decorate. Sections fade and rise as they enter view, panels in the daily-rhythm sequence expand on hover to show their description, and the hero uses full-frame video with a text overlay dark enough to keep white type legible.
Content that would crowd a screen is progressively disclosed instead of removed. On the homepage room card, for example, the list of what is included is collapsed on small screens and open on the desktop layout, so the photograph is never buried under text.
Responsive development
The layout is built mobile-first with the desktop composition treated as an enhancement rather than the baseline. Navigation collapses into a full-screen menu with numbered links, language and season controls, and a reservation call to action, all styled to match the footer so the two feel like one system.
Where a desktop control does not survive translation to a phone, it is replaced rather than shrunk. Room categories become a single-line dropdown on small screens instead of a row of pills that would otherwise overflow, and secondary labels such as the slider’s previous and next captions are dropped on mobile in favour of the arrows alone.
Tap targets in the mobile menu and header are sized generously, and the header itself lightens to a translucent surface once the page is scrolled so navigation stays readable over both dark and light sections.
Accessibility
The site is fully bilingual in Turkish and English, with the language choice remembered between visits so returning guests are not switched back unexpectedly.
Icon-only controls — the menu, the language switch, the season switch — carry accessible labels, the breadcrumb trails are marked up as navigation with the current page identified, and headings are used in order rather than chosen for their size.
Motion respects the operating system preference: when a visitor asks for reduced motion, reveal animations and hover transforms are switched off and the content is shown in its final state. The custom pointer treatment is limited to devices with a real mouse, so touch users keep standard behaviour.
Performance
The build is a single compiled front end with no client-side data fetching on first paint, so the first thing the browser has to do is render text and imagery rather than wait on a request.
Media is kept to the few pieces that carry the story. Video is muted and looped, poster frames stand in until playback begins, and imagery is reused across seasons where the same photograph is appropriate rather than loading a second near-identical asset.
Animation work is done with transforms and opacity so it stays on the compositor, and animations are suspended entirely while the language is switched, which keeps that transition from replaying the page introduction.
Working with MadeByCat
MadeByCat supported the design and development of Hotel Aurelia’s digital experience, from the information architecture through to the interface, the responsive behaviour and the front-end build. Their studio work can be seen at madebycat.com.