Design forDevelopers
Lex Lofthouse @ #MFE24

Lex Lofthouse

she/her@loftio

Hierarchy

Proximity

Contrast

BalanceHierarchy

ContrastProximity

Balance

Hierarchy

Proximity

Contrast

BalanceTypography

Choosing fonts
How do you choose the correct
fonts for your project?

Font pairings
One font for headings,
one font for paragraphs.
Hierarchy

Headings
Can be bold,
stylised, interesting...

Paragraphs
Needs to be easy to read,especially at smaller sizes.

Which fonts?
Your font choices should work
together and embody the brand.

OUR MISSION

Protecting you
against viruses
Keep unwanted bugs at bay with our virus protecting solutions.
It’s our mission to keep you safe.

OUR MISSION

Protecting you
against viruses
Keep unwan ed bugs a bay with our virus pro ecting solutions.

tttt

It’s our mission o keep you safe.

OUR MISSION

Protecting you
against viruses
Keep unwanted bugs at bay with our virus protecting solutions.
It’s our mission to keep you safe.

fontpair.co

20px
19px
18px
17px
16px

15px
14px

Heading One

12px
11px

Heading Three

10px
9px

Heading Two
Heading FourHierarchy
Contrasttype-scale.com

You’ll read this last.

You’ll readthis first.
Then you’ll read this bit of text next.
Then I bet you’ll read this smaller text next.

Only when they set aside their
Only when they set aside their
Only when they set aside theirdifferences did I see the true
power they all share deep
inside. I see now that thecircumstances of one's birth areirrelevant. It is what you do withthe gift of life that determines
who you are.

differences did I see the true

differences did I see the truepower they all share deep

power they all share deep

inside. I see now that theinside. I see now that thecircumstances of one's birth are

circumstances of one's birth areirrelevant. It is what you do withthe gift of life that determines
who you are.

irrelevant. It is what you do withthe gift of life that determines
who you are.

Only when they set aside their
Only when they set aside their
Only when they set aside theirdifferences did I see the true
power they all share deep
inside. I see now that thecircumstances of one's birth areirrelevant. It is what you do withthe gift of life that determines
who you are.

differences did I see the true

differences did I see the true

power they all share deep

power they all share deep

inside. I see now that theinside. I see now that thecircumstances of one's birth are

circumstances of one's birth areirrelevant. It is what you do withthe gift of life that determines
who you are.

irrelevant. It is what you do withthe gift of life that determines
who you are.

😐

Only when they set aside their
Only when they set aside their
Only when they set aside theirdifferences did I see the true
power they all share deep
inside. I see now that thecircumstances of one's birth areirrelevant. It is what you do withthe gift of life that determines
who you are.

differences did I see the true

differences did I see the true

power they all share deep

power they all share deep

inside. I see now that theinside. I see now that thecircumstances of one's birth are

circumstances of one's birth areirrelevant. It is what you do withthe gift of life that determines
who you are.

irrelevant. It is what you do withthe gift of life that determines
who you are.

😱

Only when they set aside their
Only when they set aside their
Only when they set aside theirdifferences did I see the true
power they all share deep
inside. I see now that thecircumstances of one's birth areirrelevant. It is what you do withthe gift of life that determines
who you are.

differences did I see the true

differences did I see the true

power they all share deep

power they all share deep

inside. I see now that theinside. I see now that thecircumstances of one's birth are

circumstances of one's birth areirrelevant. It is what you do withthe gift of life that determines
who you are.

irrelevant. It is what you do withthe gift of life that determines
who you are.

😍

Proximity
BalanceTime travel

Time travel

People assume that time is a st ict progression of

People assume that time is a st ict progression ofcause-and-effect.

cause-and-effect.

But actually, from a non-linear, non-subjective

But actually, from a non-linear, non-subjective

viewpoint, it's more like a big ball of wibbly-wobbly

viewpoint, it's more like a big ball of wibbly-wobbly

timey-wimey stuff.

timey-wimey stuff.

Fixed points in time
There are fixed points throughout time where things
must stay exactly the way they are.
This is not one of them. This is an oppo tunity!

Fixed points in time
There are fixed points throughout time where things
must stay exactly the way they are.

Whatever happens here will create its own timeline, itsThis is not one of them. This is an oppo tunity!

own reality, a temporal tipping point.

Whatever happens here will create its own timeline, itsrrrr

own reality, a temporal tipping point.

Time travel
People assume that time is a stPeople assume that time is a st ict progression of
cause-and-effect.
But actually, from a non-linear, non-subjective
viewpoint, it's more like a big ball of wibbly-wobbly
timey-wimey stuff.

Fixed points in time
There are fixed points throughout time where things
must stay exactly the way they are.
This is not one of them. This is an oppo tunity!
Whatever happens here will create its own timeline, itsrr

own reality, a temporal tipping point.

Time travel
People assume that time is a stict progression ofcause-and-effect.
But actually, from a non-linear, non-subjective
viewpoint, it's more like a big ball of wibbly-wobbly
timey-wimey stuff.

Fixed points in time
There are fixed points throughout time where things
must stay exactly the way they are.
This is not one of them. This is an oppo tunity!
Whatever happens here will create its own timeline, itsrr

own reality, a temporal tipping point.

Time travel

Time travelPeople assume that time is a st ict progression of

ict progression of

cause-and-effect.

cause-and-effect.

But actually, from a non-linear, non-subjective

But actually, from a non-linear, non-subjective

viewpoint, it's more like a big ball of wibbly-wobbly

viewpoint, it's more like a big ball of wibbly-wobbly

timey-wimey stuff.

timey-wimey stuff.

Fixed points in time
There are fixed points throughout time where things
must stay exactly the way they are.
This is not one of them. This is an oppo tunity!

Fixed points in timeThere are fixed points throughout time where things
must stay exactly the way they are.

Whatever happens here will create its own timeline, itsThis is not one of them. This is an oppo tunity!

own reality, a temporal tipping point.

Whatever happens here will create its own timeline, itsown reality, a temporal tipping point.

rrrr

Proximity

Time travel

Time travel

People assume that time is a st ict progression of

People assume that time is a st ict progression of

cause-and-effect.

cause-and-effect.

But actually, from a non-linear, non-subjective

But actually, from a non-linear, non-subjective

viewpoint, it's more like a big ball of wibbly-wobbly

viewpoint, it's more like a big ball of wibbly-wobbly

timey-wimey stuff.

timey-wimey stuff.

Fixed points in time
There are fixed points throughout time where things
must stay exactly the way they are.
This is not one of them. This is an oppo tunity!

Fixed points in time
There are fixed points throughout time where things
must stay exactly the way they are.

Whatever happens here will create its own timeline, itsThis is not one of them. This is an oppo tunity!

own reality, a temporal tipping point.

Whatever happens here will create its own timeline, its
own reality, a temporal tipping point.

rrrr

ProximityColourChoosing colours
Where do you start?

Start with one
Choose your main colour andthen build on it.

Wisdom

Calm

GrowthEnergyEnthusiasm

PassionLightPower

WealthStability

HealthHappiness

WarmthStrength

Clean

Mystery

Royalty

WisdomHarmony

WarmthSuccess

Love

SpaciousElegance

Power

Trust

SafetyLogicCreativity

Warning

Cold

Mourning

LuxuryConfidence

NatureJoyExcitement

Anger

Pure

Stable

Magic

Depth

Refreshing

Fun

Optimism

Excitement

SimpleConfidenceMain

Supporting

Neutrals

Main

Supporting

Neutrals

Hierarchy

Cool Shades

Warm Shades

colour.adobe.com

I don’t like Chicken Parmos
I LOVE Chicken Parmos! 😍

I don’t like Chicken Parmos
I LOVE Chicken Parmos! 😍

I hate Chicken Parmos
I LOVE Chicken Parmos! 😍

Inactive

ActiveLayoutSetting up a grid
12 column grids allow fordivision by 2, 3, 4 and 6

Balance

Repeating components
Apply repetition for familiarity in UI.

Where to start?
Building a component - start small

atomicdesign.bradfrost.com

Atoms

Molecules

Organisms

atomicdesign.bradfrost.com

Atoms

Molecules

Organisms

Parmo Guy T-Shirt£25.00atomicdesign.bradfrost.com

Atoms

Molecules

Organisms

Parmo Guy T-Shirt£25.00Parmo Guy T-Shirt£25.00atomicdesign.bradfrost.com

Atoms

Molecules

Organisms

Add to Basket

SaveAdd to Basket

SaveAdd to Basket

Parmo Guy T-Shirt£25.00Save

Parmo Guy T-Shirt£25.00Add to Basket

Save

Parmo Guy T-Shirt£25.00Add to Basket

SaveParmo Guy T-Shirt

Very Cruel Tee

Gimme Tee

Pat Every Pup Tee£25.00£30.00£30.00£30.00Add to Basket

Save

Add to Basket

Save

Add to Basket

Save

Add to Basket

SaveFilter byColour

Sort byStyle

Recommended

BalanceParmo Guy T-shirt

Very Cruel Tee

Gimme Tee

Pat Every Pup Tee£25.00£30.00£30.00£30.00Add to Basket

Save

Add to Basket

Save

Add to Basket

Save

Add to Basket

Save

Balance
ProximitySelf Destructive Tee£30.00Add to Basket

Save

How can we
improve ourdesigns?
let’s refine!

Madison Avenue,
Chaddesden, Derby

prev

1/10

Guide Price: £200,000
Type: Semi-detachedBedrooms: 2Bathrooms: 1

Request details

Agent: Purple Bricks
01332 215175

next1 / 10prev

Madison Avenue,
Chaddesden, Derby

1/10

next

GUIDE PRICE

Madison Avenue,
Chaddesden, Derby£200,000

Guide Price: £200,000
Type: Semi-detachedBedrooms: 2
Bathrooms: 1

Agent: Purple Bricks
01332 215175

Request details

T YP EBE D RO OM S

BAT H RO O MS

Semi-detached

2101332 215175

🙂

Request Details😍

Would you like todelete this file?
Yes

No*This is an irreversible action

Would you like todelete this file?
Yes

No*This is an irreversible action😞

This is an irreversible action

Would you like todelete this file?
CancelDelete😌

Choose your plan
Basic
15GB – £10 per month
Regular
30GB – £15 per month
Pro60GB – £20 per monthChoose your plan
Basic
15GB – £10 per month
Regular
30GB – £15 per month

Choose your planBASIC

15REGULAR

GB£10 / MONTH

30PROGB£15 / MONTH

Pro60GB – £20 per month

😞

🤩

60GB

£20 / MONTH

Paying later just got better
It’s interest free over 3 instalments, but 0% isn’t
the only way to pay.
With 6 or 12 instalments at 19% APR (va iable) you
get some wiggle room for bigger buys that mightcome along.

Getting started is easy

• Apply in minutes in the app. We’ll give you an
instant decision.

• You’ll go through the approval process – once
approved you’ll get your own credit limit.

• Spread a transaction over instalments. Choose inr3, 6 or 12.

Paying later just got better
It’s interest free over 3 instalments, but 0% isn’t
the only way to pay.

It’s interest free over 3 instalments, but 0% isn’t
the only way to pay.

With 6 or 12 instalments at 19% APR (va iable) you
get some wiggle room for bigger buys that mightcome along.

Getting started is easy

• Apply in minutes in the app. We’ll give you an
instant decision.

• You’ll go through the approval process – once
approved you’ll get your own credit limit.

• Spread a transaction over instalments. Choose in3, 6 or 12.

r🤑