Master and Margarita

CLIENT: GOOGLE RUSSIA
ROLE: ILLUSTRATION AND ART DIRECTION

[unex_ce_button id="content_yqer8p3hi,column_content_j8md8iuz8" button_text_color="#ffffff" button_font="regular" button_font_size="14px" button_width="auto" button_alignment="center" button_text_spacing="1px" button_bg_color="transparent" button_padding="8px 28px 8px 28px" button_border_width="2px" button_border_color="#ffffff" button_border_radius="0px" button_text_hover_color="#ffdd30" button_text_spacing_hover="1px" button_bg_hover_color="#transparent" button_border_hover_color="#ffdd30" button_link="https://masterimargarita.withgoogle.com/" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]LAUNCH SITE[/ce_button]

Teleport yourself to the most iconic scenes from the infamous Russian novel

mm_header_imgmm_header_img

Enter the site and get launched into an IM chat with two characters from the book, Behemoth and Korovie. The characters ask you a series of questions, and your answers effect which scene you get 'transported' to.

chatchat

Bringing Bulgakovs world to life

The main challenge whilst illustrating the scenes was to modernise and give fresh perspective whilst staying true to the original story. Attention to detail was vital so everything is considered from the architecture to the hair-styles.

Nailing the compositions 

I set about sketching up black and white scamps of all 7 scenes. I had free reign when it came to deciding the compositions, POV and layouts.

Reading the book, watching the film and trawling through fan art inspired my decisions. I presented my ideas to Google and the wider team. It turns out the final illustrations aren't actually too different to the original scamps. 

Creating a sense of depth

I divided each composition into foreground, midground and background elements to create a strong sense of depth. Tricks like blurring, parallax and animation further elevated each scene.

perspective_croppedperspective_cropped

Subtleties and sprite sheets

Noise effects add a filmatic touch, animated elements draw the eye and awesome SFX enables the site to tell more of the story. Elements from each scene were seperated out and organised onto sprite sheets for the ninja dev squad.

pingping
[unex_ce_button id="content_eadil82ia,column_content_j8md8iuz8" button_text_color="#ffffff" button_font="regular" button_font_size="14px" button_width="auto" button_alignment="center" button_text_spacing="1px" button_bg_color="transparent" button_padding="8px 28px 8px 28px" button_border_width="2px" button_border_color="#ffffff" button_border_radius="0px" button_text_hover_color="#ffdd30" button_text_spacing_hover="1px" button_bg_hover_color="#transparent" button_border_hover_color="#ffdd30" button_link="https://masterimargarita.withgoogle.com/explore" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]EXPLORE THE SCENES[/ce_button]
[unex_ce_button id="content_wfodh4igb,column_content_eyi87gjtw" button_text_color="#ffffff" button_font="regular" button_font_size="14px" button_width="content_width" button_alignment="left" button_text_spacing="1px" button_bg_color="#0f0f0f" button_padding="60px 100px 60px 100px" button_border_width="0px" button_border_color="#000000" button_border_radius="0px" button_text_hover_color="#ffdd30" button_text_spacing_hover="1px" button_bg_hover_color="#161616" button_border_hover_color="#161616" button_link="http://www.ralphpeskett.co.uk/work/google-my-university/" button_link_type="url" button_link_target="_self" has_container="" in_column="1"]← PREVIOUS PROJECT[/ce_button]
[unex_ce_button id="content_wfodh4igb,column_content_lks5k9wa2" button_text_color="#ffffff" button_font="regular" button_font_size="14px" button_width="content_width" button_alignment="center" button_text_spacing="1px" button_bg_color="#0f0f0f" button_padding="60px 100px 60px 100px" button_border_width="0px" button_border_color="#000000" button_border_radius="0px" button_text_hover_color="#ffdd30" button_text_spacing_hover="1px" button_bg_hover_color="#161616" button_border_hover_color="#000000" button_link="http://www.ralphpeskett.co.uk/work/zooby-doo/" button_link_type="url" button_link_target="_self" has_container="" in_column="1"]NEXT PROJECT →[/ce_button]