A Webflow website for a rooftop has to do two things at once: make people want to book before they have read the menu, and stay fast, readable and well ranked. The Cé La Vi website, in Singapore, is a good example of that balance. This case study explains what māhie built, then what a restaurant, bar or hotel can take from it for its own Webflow restaurant website with strong art direction.
What this article covers, and what it does not. It relies only on public information: the project presentation on mahie.io and the client's website. It contains no results figures, no traffic data and no internal details. The advice in the following sections is method recommendations, not an account of decisions made on this project.
Cé La Vi: a rooftop at the top of Marina Bay Sands
Cé La Vi is an iconic rooftop in Singapore, perched at the top of Marina Bay Sands. The venue is built on the view, the atmosphere and the image, which is exactly the kind of address whose website must extend the experience from the very first screen.
For this kind of venue, guests often discover the place on mobile, from Instagram, a Google search or a recommendation. The website therefore has a precise role: convey the universe, then let the visitor take action without friction.
The brief: a website that matches the address
The need, as summarised on mahie.io, fits in one sentence: a custom, animated, highly visual Webflow website that reflects the rooftop. Three keywords go with the project: Webflow, art direction and animations.
This need is typical of venues with a strong identity (rooftops, beach clubs, destination restaurants, hotels). A generic website template is not enough: the visual identity, the rhythm of the pages and the transitions are part of the product.
What māhie delivered
According to the public project presentation, māhie designed and built a custom Webflow website, animated and highly visual, faithful to the Cé La Vi universe. The project is listed under Webflow, Art direction and Animations, and the site is live online (celavi.com).
māhie is a Webflow Partner agency and has built more than 70 websites. Among the website services described on mahie.io: custom showcase sites that are animated, highly visual and faithful to your art direction, integrated booking, multi-language support for an international clientele, and a simple back office so your teams can edit menus and events themselves.
What we do not detail. This article does not say which features were enabled on the Cé La Vi site (languages, booking tool, back office), nor what results were achieved. That information is not part of the public project presentation.
How an animated Webflow site works, in broad strokes
Webflow is a website builder that lets you design each page precisely, without starting from a fixed template, and publish it as designed. For an animated site, the general principle is as follows.
- Art direction first. Images, typography, colours and page rhythm are defined before building. Animation serves that identity; it does not replace it.
- Animations that serve the journey. A useful animation guides the eye towards action: discover the atmosphere, see the menu, book. An animation that slows the page or hides a button is one animation too many.
- Content editable without a developer. Webflow lets you structure content so the team can edit the things that change often (menus, events) without touching the layout.
- A page designed for mobile. Most visitors to a rooftop arrive on a phone. The design is therefore checked on a small screen, not only on desktop.
What a restaurant or rooftop can take from it
Here is how to apply this logic to your own website, whether it runs on Webflow or not.
Start from identity, not features. Before choosing effects, write in three lines what your venue should make people feel. Every animation, photo and transition must serve that sentence. If an animation does not, remove it.
Keep the path to action always visible. A very visual site loses its effectiveness if booking is hard to find. Keep a booking button visible on every screen, mobile and desktop, with a clear label. To connect a booking engine, our guide on the SevenRooms widget on Webflow covers the options.
Optimise images and limit simultaneous effects. Rooftop websites rely on large images and video. Compress them, choose web-appropriate formats, do not load everything at once, and avoid stacking animations on the same screen. Test on a mid-range phone on a mobile network: that is the experience many of your guests have.
Respect accessibility and motion preferences. Some people ask their device to reduce animations. Provide a calmer version that stays readable and usable. Keep sufficient contrast for text placed over images.
Get the SEO basics right. An animated site still needs to rank. Check at least:
- a unique title and description for each page;
- clear headings (one H1 per page, then H2s);
- real text (address, opening hours, menu, description) and not only images or animations;
- alt text on important images;
- a readable version of the menu, on which you can read our article on the online menu: HTML or PDF.
If your clientele is international, also think about the multilingual version of the site, a topic covered in our article on multilingual sites and hreflang tags.
Measure what matters. A website needs steering. Define the actions to track (click on "Book", completed booking, private event enquiry) and check them regularly. Without measurement, you cannot tell whether the design works.
Preparing the brief for a Webflow site for a venue with a strong identity
A project like this is largely decided before the first mock-up. Here is what we advise gathering before starting, whichever agency you work with.
- Your visual references: sites, images and moods you like, and what you want to avoid.
- Your photo and video material: a highly visual site depends on image quality. If it does not exist yet, plan a shoot before launch, not after.
- Your priority journeys: book a table, request a private event, view the menu, find directions. Rank them, because they decide the hierarchy of every page.
- Your recurring content: who updates menus, events and opening hours, and how often. This determines the structure of the back office.
- Your languages: decide from the start whether the site must exist in several languages, as it changes how pages and content are organised.
- Your existing tools: booking engine, newsletter, CRM, measurement tools. They should be connected to the site from the design stage.
The more precise this framing, the more the art direction can express itself without compromising usability.
A last point on timing: bring your photographer, your developer and the person who will run the site into the project early. When the people who produce the images, build the pages and update the content have not talked to each other, the result is a beautiful site that nobody can maintain.
Checklist: launching a Webflow site for a rooftop or a restaurant with a strong identity
- One sentence of intent describing the atmosphere to convey.
- Art direction approved before building: colours, typography, photos, tone.
- A booking button visible on every screen, mobile and desktop.
- Optimised images and animations limited to what serves the journey.
- A reduced-motion version for people who ask for it.
- Real text on every page, clear headings, a unique description per page.
- Content your team can edit (menus, events) without a developer.
- A test on a real phone before launch.
- Measured actions: booking click, completed booking, event enquiries.
Webflow website for a rooftop or restaurant: frequently asked questions
Why choose Webflow for a restaurant or rooftop website?
Webflow lets you design custom, highly visual, animated pages while leaving the team free to edit content such as menus and events. It suits venues with a strong visual identity. The choice still depends on your needs and your team.
Is an animated site compatible with good Google rankings?
Yes, provided you keep real text on the pages, clear headings, optimised images and fast pages on mobile. An animation must neither hide content nor slow down display. Always test on a phone.
Can you add booking to a Webflow site?
Yes. A booking engine such as SevenRooms can be connected to a Webflow site through a link or a pop-up. The link is the simplest and lightest method. Our dedicated guide explains both options and booking tracking.
What does this article contain about the Cé La Vi project?
It uses only the public project presentation: a custom, animated, highly visual Webflow website for this Marina Bay Sands rooftop. It gives no figures on results and no internal details, and the advice is method recommendations.
Need a Webflow website that matches your venue?
A rooftop, a beach club, a destination restaurant or a hotel deserves a site that extends its universe without sacrificing performance. māhie is a Webflow Partner agency and has built more than 70 websites for restaurants and hotels.
- Custom showcase sites, animated and faithful to your art direction.
- Integrated booking, with SevenRooms or your own tool.
- Multilingual site for an international clientele.
- Simple back office, so you can edit menus and events yourself.
- Pages designed for speed and search visibility.
Explore our Web offer, browse our projects, then Contact māhie.
