Pathé

Multi-screen website for a Cinema Multiplex

For the opening of their first two multiplexes in Belgium, Pathé wanted a website that could support the current intricacies of the multiple locations of their theaters as well as allow futur developments into a complete cinema group platform

The website also needed to be multilingual as they are aiming at the national market

After analyzing the existing traffic (80% mobiles / 20% desktop) we started on a mobile-first approach
And since we're starting the design from the smallest screen to the biggest,
we also decided to use an atomic design strategy

Because… why not challenge ourselves in the process?

Atomic Design

We start the design from the smallest elements (atoms) to build reusable components (organisms) and to develop a consistant design throughout the pages once the templates have been agreed on

We merge the existing brand guidelines with the requirements of a new media
+ interactivity & animations

The frame

Where we design static elements such as the navigation, menus, header and footer

« Desktop frame

Multi-levels menus and navigations, wrapped in a responsive layout

Mobile frame

Focuses on the essential functions, adaptive from narrow phone screens to wider tablets

Adaptive image grids

To display the movie posters we designed multiple sets of grid to fit multiple screens widths and to allow some variations in the page flow depending on the available space