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

Setting Sail on the Sea of Design: Our Initiation into the Golden Ratio Design System

Updated: May 18, 2023





I had the idea rattling around for a while. The Golden Ratio inside a design system. Something natural, more harmonious with more purpose, proportion and more beauty.


Over the last 6 to 7 years with the advent of the all-consuming design system, those great design moments have almost been non-existent. A new prescriptive approach had been dropped whilst simultaneously removing us, the designer from the process. And with the whispers of their paymasters in their ears, designers haven’t really put up that much of a fight. Staying employed in a very chaotic world is far more important than seeing your hard-fought design visible on a MVP Vodafone app. We just want to be paid well, to last a few months and have something nice to put in our books. And if Google are doing a design system via material design, who are we to argue. Just get it done and get it out.


‘Do you want a stakeholder baffling design system, bereft of any admirable potential award-winning design? Absolutely! ‘Do you want me to show you what I can do but then you show me what I’m allowed to do? Look no further.

Is a design system the best we can do as designers? Surely, our profession is to show our clients what's possible rather than them telling us what is possible? Everything is in place – check Everything looks the same – check Everything is on the grid, sterile and prescriptive – check Does everything look like Bill gates signed it off? – check Have you ever truly stood in front of a design system and really stared? It’s baffling. Going from one page to another I could not imagine what I can do until I’m shown what some poor soul had to do before they’d jumped.


Most recently, a design system I was involved with had 250 pages and 19 pages of buttons. Let me repeat that… 250 pages and NINETEEN pages of buttons.


It’s a factory line of the same outcome. An endless field of coloured wireframes masquerading as final UI is not why we got into design.

Evangelists hark from Brad Frosts’ highest; Atoms, molecules, organisms, atoms molecules organisms, pushing the uninitiated to it’s flat earth edges and constantly reminding them that everything you do comes from here and never, ever, look left or right.


You may have found yourself nodding unconsciously at the principles of Atomic design, but did you ever stop to notice how soulless your output is? It may have been conversational but everything ends, everything changes but most importantly, everything needs to evolve. And that's what got me thinking...


Breaking new ground: How the Golden Ratio Design System came about.

I am a freelance product designer. Always have been. 30 years so far. My job hasn’t really changed as much as my titles have. I’m still using the latest tools and still peddling my portfolio to the highest bidder but it's something I love so I’m quite lucky in that respect. I've written a book about the subject, had a school teaching the subject and been everything from web banner builder to ECD to CEO and lecturer on the subject. We are and should be all things to all clients. That’s how freelancers earn and that’s how they learn.

It was late 2020, my book had just been released on Amazon to rapturous acclaim (none) and the war chest had dropped considerably whilst I put pen to digital paper over 9 months. Post that for four months, I built an eCommerce shop selling high-end furniture with a friend who was selling high-end furniture (for someone else) and thought he’d give it via me, a ‘go’.


Unfortunately, no one told us a singular cargo ship would fall over and block up the entire world, which put the cost of delivery crates of (high end) furniture up by five.


Our original battle plan had a flaw and my sly attempt to make pots of money without the universe noticing came crashing down before I’d sold one piece of not even low-end furniture.


The phone rang.


'Perhaps it was time to get back to work,' I heard my accountant whisper in my ear.


‘There’s talk of a design system approach (sigh). Clients locked the design ’in’ and they want to move from Photoshop to Figma. Fancy it?’ ‘Photo-what?’ I checked the date – 2020. Like Marty McFly without the cool car.


‘Photoshop?’ ‘Don’t ask,’ came the reply. A quick check of the bank account- ‘Yep - I’ll take it.’ ‘Great. I’ll send you over at £550 per day. They’ve already seen your work and would love you to starts Monday.’ I’d been booked into a company called BRANDFUEL. A great experiential bunch south of the London water so when Monday came around, I got my skates on and at 88mph, I was at Brandfuel’s HQ.


I was introduced to a huge chap called Jimmy who within 5 minutes told me had bad knees, caught Covid twice, looked much better in his twenties and was dying for a ride in a WW2 Lancaster Bomber. Not a bad start to a Monday morning.


He was an old advertising sort. A relic of the Jurassic 90s with his dungarees, converse all stars (yellow), shiny head and goatee beard.


He showed me their Photoshop nightmares and I showed him Figma and in two days we were sailing along nicely.


However, the more I created the more I knew we were heading into a storm; newly created files were a breeze of course, in Figma. 'Design' had already been established and it was more the ‘churn and burn’ exercise than a design exercise, with nothing but clear seas and London skies ahead.


It was when we had to return to Photoshop, to change previously assembled files that things slowed to a 90s crawl and after wading through .psd treacle for one particularly large file, I thought it might be a good idea to go back and redo the whole journey in Figma.


‘What does that actually mean?’ said Jimmy, slightly sad that we could be leaving the 1990's for a second time in his life.


‘Another pair of hands,’ I said. ‘Who’s? Not that you would know Nathan Saunders if you ran into him on one of those electric scooters near Hyde Park.


He and I worked together back in the early 2000’s. Nathan was retouching for Y&R, one of those huge London advertising dinosaurs from before the internet that never paid much attention to the internet and got rubbed out by the internet in just the same fashion.


I was there as a freelance designer working on the Lego account. Mainly we took the piss out of each other over a period close to two years, I had ginger hair he had no hair, you could probably imagine the sheer quality of that 24-month interaction.


Anyway, after I was removed, he called me mostly never until 2015 when I was running a UI/UX school. After an initial two-hour session of tips and tricks to change his skills from advertising to digital, he decided to call me EVERY NIGHT FOR SIX WEEKS in a vain attempt to understand what the hell I had been talking about.


Thankfully, he stopped calling.


Six weeks and 3 days later he secured his first role as a UI Designer. What I remembered though, was his persistence.


There are two types of designers in the world; stable and chaos. I’m chaos.


I hate the process and pixel perfection right out of the gate, grids and padding and all the right colours, scales, and doing things all the ways non-designers understand. Theres no room for discovery, the what it could be's, the possibilities.


Design is an iterative process. It's 100% making all the wrong choices before the right ones show up. It can’t be ‘time-boxed,’ ‘swim-laned,’ ‘road-mapped,’ and whatever other awful bs you want to describe it as.


The design left to designers would be a thing of harmony, proportion, and beauty. It's only when non-designers get involved that design starts gazing out of the window, dreaming of design.


But allow it to flourish, to be anything you want it to be or it wants to be and it can reveal one perfect, beautiful design moment. Lock that down, expand, get buy-in from your team, and you’ll start getting more ‘wow’ moments than ‘is it done’ moments.


Pretty soon, you’ll have design forums waxing lyrical about your designs but more importantly, customers will be engaging with it.


Anyway...


The decision to bring Nathan to Brandfuel’s table was inevitable and after he had sorted out mine and their mess, I started thinking about an old idea I’d had and partially started.


I had the Golden Ratio Design System half-built some 18 months ago but I had lost the file when my teenage daughter hounded me for my old laptop and, somewhere between the old and the new, the file disappeared.


‘I’m thinking of building a new kind of design system.


One that removes the shackles of 12 column grids, sterile prescriptive design restraints, that sort of thing etc. It’s based around the Golden Ratio, every element designed with golden ratio proportions. Are you interested? It won’t take long (1 year later...). Two weeks­, tops.’ ‘Sure,’ he said not knowing exactly what he was in for.


We discussed a plan, outcomes, and divided up the work.


‘We’ll get some of the basics built; buttons, colours, typography and then we’ll create a few designs from those and then they’ll tell us what parts are missing we then expand that and build.’ Pure, precise, laser-focused logic. Who says we can’t do this in two weeks?.


The next year, Nathan started at 6am, stopping only at 9am to work at Brandfuel. At 5pm then he was back on the system till 10pm.

And that’s when things started to show up....


66 views2 comments
Golden Ratio, Divine Proportion, Design System, UI kit, Figma, Figma Design System,

The Golden Ratio

Design System + Plugins

bottom of page