top of page
Golden Ratio, Divine Proportion, Design System, UI kit, Figma, Figma Design System,

The Golden Ratio

Design System + Plugins

  • Writer's pictureMichael Ruocco

Revamping Cinematic Posters for an Extra Splash of Drama.

Updated: May 30, 2023

Get the poster right and it can sell thousands or push people happily to gigs, festivals, museums, theatres or cinemas. The more visually arresting your poster is, the more buy-in you’ll receive. Simple economics.


But as with selling or promotion via a static poster, there are so many things to get right and wrong with typography, tone and the poster’s focal point, right down to your selection of colours and graphics.


So what we're going to do is recreate a popular film poster using the Golden Ratio to see if we can add something more to the outcome. Let's therefore, have a look at James Bond 007, or more specifically, Daniel Craig's James Bond 007, from his first outing in Casino Royale to his last outing in No time to die. We'll break down some of the obvious graphical moments plus some not so obvious and then after, we'll redesign No time to die, using the Golden Ratio.




Casino Royale.


Let's start with the typography. The font, a sans serif, says ‘finesse’. It does not dominate, in fact, I would go as far to say it looks weak. You could quite easily remove it, and it wouldn’t make much difference to the tone of the poster.


Bond is positioned slightly left (our POV) and looking to his right. Calm and collected.


The words ‘Casino Royale’ are ‘moving’ to our right from a perceived left position as is the 'gun' & number 7 combination.


He has a stack of chips on his left but there is ‘misdirection’ in his eyes with him glancing to the right. The gun is pointing 'away' (towards us?), with him clearly laying the weapon down, alluding to the (perceived) fact that he's not in any imminent danger. To round things off, his watch is partially covered by an impeccable cuff whilst the date and web address are centre aligned and tucked in nicely to the underside blurred curve of the gun.


All in all, this is a passive almost subtle graphical entry into the world of 007. They haven't forced anything upon us and yet as always, there's the ever promise of bond'esque action.





No time to die.

The font is a ‘stencil’ font, military styled - Futura Black. Its position is front and centre, shouting as to what this film is about. This font style has long-reaching implications well known to represent Armed forces around the world.

The words, 'no' and 'time' start at one X position whilst 'to' and 'die' start at other X positions, making it 3 different starting X positions for the headline and making it hard to scan, quickly.


The colours they've chosen are blue and gold, although the gold actually looks rusty which suggests ageing which could be symbolic of Craig's final outing as ‘Bond.’ Not 100% on that. Sounds totally believable though so I'll stick with it :)


The small copy plus date (this sort of copy was known as 'fly shit' in the 1980's) is positioned bottom and centred, and using a much less expressive font (compared to the heading) of Futura Medium. Its position and weight comparatively calm everything. Bond’s clothes, his aggressive approach and his gun in hand, set the tone for this movie, perfectly.


Two totally different film posters, same character throughout. Both did well to set the tone for their respective films.


Let’s now recreate no time to die with the Golden Ratio to see whether we can improve it.





Why it works harder...


Every graphical element is placed according to a golden ratio grid line* (see below)


Bond sits nicely into a Golden Rectangle on the right, opening up the space on the left for the headline simultaneously allowing for much needed balance.


‘NO TIME TO DIE’ now sits in harmony with Bond rather than dominating Bond. The two are working nicely together giving us a previously, unreached symmetry.


The CAP HEIGHT on ‘NO’ to the baseline on ‘DIE,’ sits on two horizontal golden ratio lines and we've reduced the number of starting X positions of the headline from 3 to 2 (nothing golden ratio about that though, just basic typography).


‘007’ is sitting off a grid line whilst the gun points nicely to his physique or more importantly, his arms. Maybe, it also points to the position of his heart; one shot and it's over ...


The date, logo, website address, sit nicely on two horizontal grid lines.


The feel of this poster is totally different and yet we’ve used all the same elements. We’ve opened up the design to allow more symmetry, harmony and balance.

If you look at the original poster design...


It was all a little too aggressive; big shouty-centred words splashed across the poster not working in harmony with anything else.


Bond himself, had been cut off above the knees. His position in the poster frame is centred (no ratio) and it was all about Bond had ‘arrived’ ergo the promise of the action is now etc...





In our new design, he’s far more weighted meaning he shares the poster with the other elements. In other words, they are in a 'relationship', they are interconnected; headline, bond, secondary typography and background, all working together toward the 'whole' design.


We've also got all of Bond's body in the shot so now, he’s on his way to us, alluding to the action that’s to come - he's perfectly weighted.


The typography now compliments Bond’s position rather than dominates.


His face and body are 'cross-sectioned' by horizontal Golden Ratio lines (a trick we learnt from Leonardo da Vinci) from the top of his eyebrows to the bottom of his nose to the bottom of his neck, to his chest, his waistline and then his knees.


His gun holster sits on a vertical and horizontal crossover line.


This is the power of the Golden Ratio.


Designs appear more natural, more harmonious and more balanced. This is because we react in a physically and sensing way, either consciously or unconsciously, to the perception of the Golden Ratio.


People therefore don't just see designs, they feel them. Not a bad way to spend the afternoon when you consider all you have to do is follow a few lines*. If you want more tips on how to design with the golden ratio, sign up to our FREE newsletter and joining 7000+ others every saturday morning.

*The Golden Ratio Grid is currently available in our Golden Ratio Design System AND as a plug-in Figma where you can try it out for free for 7 days.

Its also available for Sketch and Photoshop on our PLUG IN page.



253 views0 comments

Comments


Golden Ratio, Divine Proportion, Design System, UI kit, Figma, Figma Design System,

The Golden Ratio

Design System + Plugins

bottom of page