Laser by Barco Website Design

Laser by Barco Website Design and Webflow Development

Project Overview

Laser by Barco needed an immersive, visually driven website that could communicate the impact of its laser cinema projection technology to exhibitors, channel partners and cinema-goers. The site had to feel cinematic in itself, using motion, video and interaction to reflect the brand it was representing, while still remaining fast, responsive and easy to navigate across devices.

The project covered the complete website workflow, from UI/UX design in Figma to full responsive development in Webflow, including custom animations, an interactive brand timeline and video-driven storytelling sections.

My Role

I worked as the website designer and Webflow developer for the project, responsible for the site from initial concept through to final build.

My responsibilities included:

Designing the website UI/UX in Figma Planning the visual and motion direction for a video-led, cinematic experience Structuring feature sections to explain technical product benefits clearly Designing the interactive brand history timeline Building the complete website in Webflow Implementing layered video backgrounds for desktop and mobile Creating custom interactions and scroll-based animations Building the interactive, drag-based timeline component Optimizing video and image assets for performance Testing and refining the site across desktop, tablet and mobile

The Challenge

The website needed to do two things at once: explain a technical product (laser projection versus traditional lamp-based projection) in a way that felt exciting rather than dry, and represent a global, market-leading brand with a visual quality that matched its position in the industry.

This meant working with heavy video assets without sacrificing load performance, translating five distinct product benefits (brightness, color, contrast, 3D and sustainability) into a clear and visually consistent structure, and designing an interactive timeline that could hold over a decade of company milestones without feeling cluttered or overwhelming. The site also needed to showcase partner cinema chains and technology products in a way that felt credible to both exhibitors and channel partners, while remaining fully responsive across screen sizes.

Design in Figma

The design phase focused on building a visual language strong enough to carry a video-first, cinematic site.

I designed the hero concept around full-screen looping video, with a lighter, optimized version planned specifically for mobile. For the feature section, I created a consistent card and tab structure so that brightness, color, contrast, 3D and sustainability could each be explored individually without breaking the visual rhythm of the page.

I also designed the interactive timeline as a horizontally scrolling, drag-based component, and planned the partner logo showcase, technology product cards and footer sections to keep the site visually consistent from top to bottom.

Webflow Development

Once the design was finalized, I built the site fully in Webflow.

Video-Driven Hero I implemented layered background and intro video sequences, with separate optimized video versions for mobile to protect load times and performance.

Interactive Feature Sections I built the tabbed brightness, color, contrast, 3D and sustainability sections with custom interactions, so users could move between benefits without leaving the section.

Interactive Timeline I developed the draggable company history timeline, mapping each milestone year to its own visual entry and making the component fully usable on both desktop and touch devices.

Partner and Technology Sections I built the partner cinema chain logo showcase and the technology product cards, along with the embedded video and channel partner and exhibitor call-to-action sections.

Animations and Interactions Scroll-based entrance animations, hover states and section transitions were added throughout to keep the experience polished without slowing the site down.

Responsive Development and QA Every section was tested and adjusted across desktop, tablet and mobile, with particular attention paid to how video, the timeline and the feature tabs behaved on smaller screens.

Project Outcome

The finished website gives Laser by Barco a site that matches the ambition of the brand it represents: cinematic, video-led and built to clearly communicate a technical product to a non-technical audience.

The final website is:

Fully responsive across desktop, tablet and mobile Built around an immersive, video-driven visual identity Structured to explain complex product benefits clearly Home to a fully interactive, drag-based company timeline Optimized to keep heavy video content performant Consistent in design language from hero to footer

Tools and Skills

Figma Webflow UI/UX Design Responsive Web Design Interaction and Motion Design Video Optimization Cross-Device Testing