HBO presents Steven Soderbergh's latest project, Mosaic.

2018

Client HBO
Agency Reaktor, NYC 
Role Design Lead (visual and concept design)

 

HBO asked Reaktor to deliver a design concept to promote their latest show, Mosaic, directed by Steven Soderbergh.

Mosaic is a “choose your own path” interactive watching experience, the audience can use an app to move through different story lines of the show. Our brief, armed with only a few images and later on a logo, was to design a single page website to build anticipation leading up to the premier of the show.  

HBO_brandHBO_brand

DESIGN CONCEPT

The visual design needed to reflect the mood and tone of the story and also communicate the unique interactive nature of the project. By breaking the screen into fragments using a tile effect we were able to play with transparency, motion and imagery to achieve exactly that.

A mix of show photography, accompanied with generous white space, a strict grid and carefully considered typography inspired by movie posters all add to the overall final look and feel.       

We explored several options as we worked with the HBO team. The screens below show some of the different variations around layout, scale and colour.  

HBO_screens1HBO_screens1

Designing for a new show brand and also communicating it's format as an interactive experience was a very exciting design challenge. Both HBO and Steven Sodenbergh were extremely happy with the speed and quality of the design's delivered by the Reaktor team. The website can be viewed here (USA only).  

[unex_ce_button id="content_v7bjytddn,column_content_vh2fhjbj2" button_text_color="#000000" button_font="light" button_font_size="13px" button_width="content_width" button_alignment="left" button_text_spacing="0px" button_bg_color="#ffffff" button_padding="20px 60px 20px 60px" button_border_width="1px" button_border_color="#ebebeb" button_border_radius="0px" button_text_hover_color="#000000" button_text_spacing_hover="0px" button_bg_hover_color="#ffffff" button_border_hover_color="#bd10e0" button_link="http://philipreadman.com/how-do-you-define-engagement/" button_link_type="url" button_link_target="_self" has_container="" in_column="1"]Prev[/ce_button]
[unex_ce_button id="content_v7bjytddn,column_content_66j0yipmp" button_text_color="#000000" button_font="light" button_font_size="13px" button_width="content_width" button_alignment="center" button_text_spacing="0px" button_bg_color="#ffffff" button_padding="20px 60px 20px 60px" button_border_width="1px" button_border_color="#ebebeb" button_border_radius="0px" button_text_hover_color="#000000" button_text_spacing_hover="0px" button_bg_hover_color="#ffffff" button_border_hover_color="#bd10e0" button_link="http://www.philipreadman.com" button_link_type="url" button_link_target="_self" has_container="" in_column="1"]Home[/ce_button]
[unex_ce_button id="content_v7bjytddn,column_content_a6aziodo0" button_text_color="#000000" button_font="light" button_font_size="13px" button_width="content_width" button_alignment="right" button_text_spacing="0px" button_bg_color="#ffffff" button_padding="20px 60px 20px 60px" button_border_width="1px" button_border_color="#ebebeb" button_border_radius="0px" button_text_hover_color="#000000" button_text_spacing_hover="0px" button_bg_hover_color="#ffffff" button_border_hover_color="#bd10e0" button_link="http://philipreadman.com/indeath/" button_link_type="url" button_link_target="_self" has_container="" in_column="1"]Next[/ce_button]