REDE GLOBO:
LIVRO DA MARCA
CLIENT
Rede Globo
SERVICES / TECHNOLOGY / SOLUTIONS
Globo is the largest broadcast television network in Brazil and the second largest in the world. On top of its 122 owned and affiliated stations, Globo broadcasts internationally through TV Globo International and subscription services.
Rede Globo - Brandbook
CREATIVE CHALLENGE
Currently, the network works with over 115 different brands and has more than 50 years of history. Considering the sheer volume of content that has been produced and all the changes that took place over those 50 years, Globo felt that it was time to give the brand’s essence a bodily form through an accessible and intuitive guide.
DEVELOPMENT
From the translation of the visual vocabulary a Brand Book website was born. Its interfaces and interactions were based on four pillars: the White, the Circle, the Colors, and the Motion. A total of 12 chapters were developed to explore all types of communication the company engages in, titled: The Brand, The Identity System, Brand Volume, The Logos, The Colors, The Fonts, On Air, Print, Digital, Signs, Photography, and Illustration.
TECHNICAL CHALLENGE
Achieve a pleasing result that managed to combine design, usability, and performance into a robust web-based platform with a large volume of contents and several internal pages managed via CMS, with quality interactivity and animations.
RESULT
To build the home page, we created 14 fullscreen covers—some with full HD videos while others with WebGL interactions—accompanied by a sidebar showing animated and dynamic SVG. Users can navigate using the index and an auto hide menu that shows when they hover over it.
For this, on top of the smart layout, we developed an optimized pre-loader that loads the 3 first videos, the required assets and all of the CMS content and queues all others. Since users are able to skip sections browsing the side menu, we created a system where the queued video loads up first, displaying a thumbnail with the first frame and playing it once it’s been loaded.
We chose to have the CMS content loaded and stored in-memory instead of each page command to prevent overloading the server with too many requests and thus consume less bandwidth. For the cover page transitions and to avoid using up too much memory, we created a status controller with just three cover pages, rotating all the fourteen covers through the three spaces. This way, visitors can scroll them up or down.
Working with just three cover pages led to another issue since some WebGL video contents require a unique canvas with a render function. To solve this, we created a second, event-based controller for the canvas. We used a single static, fixed canvas in HTML with a render function, based on a 16.7 millisecond interval to get animations to run at 60 fps.
Note that we had all WebGL interactions and animations run from the GPU rather than the CPU. This allowed significant performance gains even for setups with standard video cards.