2019-06-25

Script for Modular Scale Presentation

Previous2019-06-12 Next2019-07

Last updated 4 years ago

Was this helpful?

2019-06-25

Script for Modular Scale Presentation

Hi there, I'm Drew Jones from the Nucleus Design System Team.

Today, I'd like to share with you one of our design system foundations, Modular Scale.

We have a number of foundations within the Design System. Accessibility, Colour and Typography are a few others.

As designers, we strive for beauty and rhythm in our work. Making things look right and feel right is an instinct. As developers we found ourselves searching for a way to capture the designers eye from within our code.

This lead us to research engineering, architecture and nature.

Within nature we found many beautiful patterns that are calculable.

The fibonacci sequence, maybe better known as the golden ratio. Is one where the next number is found by adding up the two numbers before it.

Scales are abundant within nature, the golden ratio can be found in the microscopic world of DNA, to the immense milky way spiral galaxy.

Harmonics and frequencies play their part, each individual colour has it's own frequency of light. Each note on a piano is carefully chosen.

Take a look at this diagram on the right, imagine it's a string of a guitar. At the very top it's showing the open string vibrating, on the second line it's showing the string pressed to the fretboard precisely in the middle, an octave higher. each node shown on the diagram illustrates a different harmonic.

Each note on this scale is a familiar sound.

Piano scale plays 🎶

We have taken lessons learnt from nature in the form of scales, frequencies and harmonics.

And applied them to our design system in order to be able to calculate and produce beauty and simplicity from our code.

So, where do we start?

Let's start by looking at the different scales from the world of music. I've added the Golden ratio here, to show how it fit's amongst these musical terms.

Here are these scales as their numerical representation as ratios. Some of these maybe familiar. Such as 3:4, a popular ratio of a photograph, there's 16:9, a widescreen TV.

We turn these ratios into their decimal fractions, which will allow us to include them in our code. There are many to choose from, so let's pick a few.

Here, we've chosen:

1.125, Major second
1.2, Minor third
1.25, Major third
and the Perfect fifth.

Let's focus on the Perfect fifth and show you how we've used this scale to inform the sizes of our viewports. Viewports is the term we use to describe the width of a browser window.

The smallest width of a modern smartphone is typically 320px.

We multiply 320 by 1.5, this equals 480

Multiply 480 by 1.5, equals 720

Multiply 1.5 again, is, 1080

You get the idea

This results in these six viewports; we've given them names based on the size of the playing areas of popular ball sports. Naming things in this way helps us to refer to these as unique entities. Nothing else in our design system is called a tennis court!

So, where did this idea originate from?

Back in 2010 while at Typekit, Tim Brown presented Modular Scale at Buildconf. And in 2011 he published an article on A List Apart, accompanied by the website - modularscale.com. He's now head of typography at Adobe.

Here's how we have applied it to our typography.

We've used three different scales to inform the size of our typography across a number of viewports.

Let's start with 1.25, the Major third. Which we've applied to the larger viewports.

Starting with two base numbers, 16 and 22. And multiply each by a scale of 1.25, the Major third.

Taking 16px and doing the sums, multiplying by 1.25

And then 22px and applying the same scale, 1.25

This results in a list of numbers that on first glance may seem random, but we know that we've calculated beauty here.

We order these from zero to twelve

Then using these numbers, choose which to apply to our typography.

This results, yet again in another naming metaphor, this time, chess pieces. With Pawn as our smallest heading up to King as our largest.

Here are our headings and paragraph sizes displayed in our font.

For the different viewports, we display our typography at the appropriate scale.

Pause

So; that's a glimpse into how we are using modular scale to inform the size of things within our design system. We've applied them to Viewports and Typography.

Also, Spacing, our icons and illustrations

Border radius and shadows.

We can use this technique on almost anything that requires a decision when asked "What size should this thing be?"

The benefit of implementing such a technique limits choice to the designer, which helps to keep things consistent. We can trust the system to maintain the relationship of size between things and we are confident that we are producing a harmonic visual experience.

I'd like to thank you for your time, I hope you found this presentation interesting and informative.

Smile 😁

Previous2019-06-12 Next2019-07

Last updated 4 years ago

Was this helpful?

Hi there, I'm Drew Jones from the Nucleus Design System Team.

Today, I'd like to share with you one of our design system foundations, Modular Scale.

We have a number of foundations within the Design System. Accessibility, Colour and Typography are a few others.

This lead us to research engineering, architecture and nature.

Within nature we found many beautiful patterns that are calculable.

The fibonacci sequence, maybe better known as the golden ratio. Is one where the next number is found by adding up the two numbers before it.

Scales are abundant within nature, the golden ratio can be found in the microscopic world of DNA, to the immense milky way spiral galaxy.

Harmonics and frequencies play their part, each individual colour has it's own frequency of light. Each note on a piano is carefully chosen.

Each note on this scale is a familiar sound.

Piano scale plays 🎶

We have taken lessons learnt from nature in the form of scales, frequencies and harmonics.

And applied them to our design system in order to be able to calculate and produce beauty and simplicity from our code.

So, where do we start?

Let's start by looking at the different scales from the world of music. I've added the Golden ratio here, to show how it fit's amongst these musical terms.

Here are these scales as their numerical representation as ratios. Some of these maybe familiar. Such as 3:4, a popular ratio of a photograph, there's 16:9, a widescreen TV.

We turn these ratios into their decimal fractions, which will allow us to include them in our code. There are many to choose from, so let's pick a few.

Here, we've chosen:

1.125, Major second
1.2, Minor third
1.25, Major third
and the Perfect fifth.

Let's focus on the Perfect fifth and show you how we've used this scale to inform the sizes of our viewports. Viewports is the term we use to describe the width of a browser window.

The smallest width of a modern smartphone is typically 320px.

We multiply 320 by 1.5, this equals 480

Multiply 480 by 1.5, equals 720

Multiply 1.5 again, is, 1080

You get the idea

So, where did this idea originate from?

Here's how we have applied it to our typography.

We've used three different scales to inform the size of our typography across a number of viewports.

Let's start with 1.25, the Major third. Which we've applied to the larger viewports.

Starting with two base numbers, 16 and 22. And multiply each by a scale of 1.25, the Major third.

Taking 16px and doing the sums, multiplying by 1.25

And then 22px and applying the same scale, 1.25

This results in a list of numbers that on first glance may seem random, but we know that we've calculated beauty here.

We order these from zero to twelve

Then using these numbers, choose which to apply to our typography.

This results, yet again in another naming metaphor, this time, chess pieces. With Pawn as our smallest heading up to King as our largest.

Here are our headings and paragraph sizes displayed in our font.

For the different viewports, we display our typography at the appropriate scale.

Pause

So; that's a glimpse into how we are using modular scale to inform the size of things within our design system. We've applied them to Viewports and Typography.

Also, Spacing, our icons and illustrations

Border radius and shadows.

We can use this technique on almost anything that requires a decision when asked "What size should this thing be?"

I'd like to thank you for your time, I hope you found this presentation interesting and informative.

Smile 😁