#StopWarInUkraine Save the children

The awards of design, creativity and innovation on the internet

Magazine for designers and web developers

Case Study: Designing the NABIS Films Experience

Article by We Are Fellows in Web Design -

Today we present a different Case Study from the last one we brought you, focussing not on the technical aspects of a project but on the design process.

We Are Fellows is a small creative studio in Hamburg, Germany, specializing in brand direction and digital design. They developed a dynamic identity system and a new website for NABIS, an independent film company based in Buenos Aires.

They created a new website providing maximum impact for video content while being easy to navigate. The one-page site is based on HTML5 and JavaScript and works as well on touch-based devices as it does on your notebook.

NABIS Case Study

Our site features some rather unique interface details and design decisions. From the very beginning of the design process, it was our goal to provide maximum room for NABIS' unique cinematography - its muted colours and calm storytelling. Showcasing all video content stretched to fit the browser window and starting the site with a film allowed us to do so. From here, we established some secondary design principles:

1. We think NABIS' films are worth our attention

If you click the "info" button during playback, the film will stop as its details are shown - you can read about the film or watch the film, but not both at once.

  • 2. There are two layers of information

    We separated video playback from the film overview, choosing to design the overview in a very straightforward, almost technical style that is reminiscent of scripts or film treatments.

  • 3. The site should be a seamless experience

    Any film you select to play from the overview will remember where it paused and continue playing when you return to it. It does so without page reloads or any other kind of interruption - the site slides open and playback starts. The same goes for the about section – it's just a scroll down the page.

  • 4. The site should work on any device

    That's why it's seamlessly responsive, with two dedicated media queries for tablets and smartphones, and optimized for iphones.

  • 5. Navigation by context

    By adhering to these principles and finding adequate solutions, we were able to create a site that works without a traditional navigation. Its interface is based on context: there are clear interface elements when you need them- and none when you don't. For example: the "info/pause" button turns into "play video" once it's paused, and the "about/contact" button is only visible in overview mode and turns into "back to films" when the about section is displayed.


    • Client: Nabis Film nabisfilm.com
    • Principal programmer: Alex Feyerke @espylaub
    • Creative Direction, Interaction Design and Visual Design: We Are Fellows