ALL COURSES 75% OFF Black November Deals!
ENGLISH

The awards of design, creativity and innovation on the internet

Magazine for designers and web developers
13 Collect

Case Study: LIONS GOOD NEWS 2020 by SHIFTBRAIN

Article by SHIFTBRAIN in Web Design -

We created LIONS GOOD NEWS 2020 to commemorate the 10th anniversary of The Cannes PR Lions*. The Cannes Lions International Creativity Festival, normally held every June, was canceled in 2020, however, even in the thick of the pandemic, people bravely rose up with the 10 creative cases, listed here, with their relationship to award-winning work of the past 10 years.

*PR department of Cannes Lions

Desktop Homepage for Lions Good News
Desktop Homepage for Lions Good News

Design points

Representation of the time axis

One of the most important things to focus on when designing a website, was to show the key message that truly new things can only come from history. To do this, we expressed how 10 year’s worth of past cases bring context to the present.

First, we looked into how to best express the past and future on the same screen. From a number of proposals, we chose the following two key features.

  • By making the tone not fresh and modern, but rather nostalgic, it lets the viewer feel as if they're looking through a timeless bird’s-eye-view.
  • Expressing time itself via the visual depth of the information, by utilizing color and monochrome contrasting.

We proceeded by designing each element to give it an overall nostalgic impression. For the typeface, we chose a wonderful serif typeface inspired by 20th century signs called "Moret". The typeface evokes an overall sense of nostalgia and strength, and greatly contributed to the creation of the world view.

Typography text with Cannes logo
Typography

The UI of each article was made evocative of a monochrome news paper. In pursuit of a more nostalgic and realistic texture, we carefully added wrinkles and noise to the paper. Then, in the backgrounds of the top page and the past cases section of the article page, monochrome-processed photographs were placed along with animation to drift off into a space with depth.

Image with focus on texture that simulates an old paper
Texture
Two images from the Homepage that compare the old and the new look and feel
Past & Present

10 uniqueness

Another big point we focused on was expressing the various cases that were born in the special chaos of 2020, and the uniqueness of the perspective that unravels them.

That's why we decided to create unique key graphics for all 10 articles. With the goal of making each one stand out while maintaining readability, the two designers secured their own colors, typography and layouts while working with a minimal set of rules.

White background with color elements to represent all the layouts of the pages
Layout

Development

Introduction

  • Concept

    We made an animation based on the concept of newspaper pages being blown by the wind around a cityscape, and reaching people down below.

    White background with some color paper images that simulate the wind effect
    Wind
  • Wind blown effect

    The wind blown effect moves the paper left/right in order to give a sense of depth. In addition, it bends and shakes the paper based on the values of velocity and direction.

    As seen through the video, there are many parameters that have been carefully tweaked and adjusted until the effect looks natural, and is now open to the public.

  • Video of the production process

    Home opening animation.

Navigation

  • Infinite loop

    The 13 newspapers, which serve as the navigation, move left and right, and when one exceeds a certain point, it moves back to the opposite side to produce an infinite loop.

    Home opening animation.

  • Paper page flutter

    Paper flutter is controlled via movement speed of the navigation. Shadow was also calculated and added to improve texture. We used Shader for these effects.

    Home opening animation.

Technologies

Creative team

  • Producer: Masaya Yamamoto
  • Art Director, Designer: Hiroki Miyamoto
  • Designer: Masashi Fujiyoshi
  • Interactive Developer: Wongeun Heo
  • Project Manager: Mana Ohtake
  • Creative Director: Reietsu Hashimoto, Dentsu Inc.
  • PR Planner: Tadashi Inokuchi, Dentsu Public Relations inc.
  • Executive Producer: Daima Kawamura, DLX Inc.

About Us

SHIFTBRAIN is a development and production company that is mainly based in the digital sector.