Design for Developers

Design for Developers 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. t t t t 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 Four Hierarchy Contrast

type-scale.com

You’ll read this last. You’ll read this 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 their differences did I see the true power they all share deep inside. I see now that the circumstances of one’s birth are irrelevant. It is what you do with the 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 the inside. I see now that the circumstances of one’s birth are circumstances of one’s birth are irrelevant. It is what you do with the gift of life that determines who you are. irrelevant. It is what you do with the 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 their differences did I see the true power they all share deep inside. I see now that the circumstances of one’s birth are irrelevant. It is what you do with the 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 the inside. I see now that the circumstances of one’s birth are circumstances of one’s birth are irrelevant. It is what you do with the gift of life that determines who you are. irrelevant. It is what you do with the 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 their differences did I see the true power they all share deep inside. I see now that the circumstances of one’s birth are irrelevant. It is what you do with the 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 the inside. I see now that the circumstances of one’s birth are circumstances of one’s birth are irrelevant. It is what you do with the gift of life that determines who you are. irrelevant. It is what you do with the 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 their differences did I see the true power they all share deep inside. I see now that the circumstances of one’s birth are irrelevant. It is what you do with the 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 the inside. I see now that the circumstances of one’s birth are circumstances of one’s birth are irrelevant. It is what you do with the gift of life that determines who you are. irrelevant. It is what you do with the 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 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, its This 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 r r r r own reality, a temporal tipping point.

Time travel People assume that time is a st People 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, its r r own reality, a temporal tipping point.

Time travel People 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, its r r own reality, a temporal tipping point.

Time travel Time travel People 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 time There are fixed points throughout time where things must stay exactly the way they are. Whatever happens here will create its own timeline, its This 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. r r r r 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, its This 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. r r r r Proximity

Colour

Choosing colours Where do you start?

Start with one Choose your main colour and then build on it.

Wisdom Calm Growth Energy Enthusiasm Passion Light Power Wealth Stability Health Happiness Warmth Strength Clean Mystery Royalty Wisdom Harmony Warmth Success Love Spacious Elegance Power Trust Safety Logic Creativity Warning Cold Mourning Luxury Confidence Nature Joy Excitement Anger Pure Stable Magic Depth Refreshing Fun Optimism Excitement Simple Confidence

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 for division 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.00 Save

Parmo Guy T-Shirt £25.00 Add to Basket Save

Parmo Guy T-Shirt £25.00 Add to Basket Save

Parmo Guy T-Shirt Very Cruel Tee Gimme Tee Pat Every Pup Tee £25.00 £30.00 £30.00 £30.00 Add to Basket Save Add to Basket Save Add to Basket Save Add to Basket Save

Filter by Colour Sort by Style Recommended Balance Parmo Guy T-shirt Very Cruel Tee Gimme Tee Pat Every Pup Tee £25.00 £30.00 £30.00 £30.00 Add to Basket Save Add to Basket Save Add to Basket Save Add to Basket Save

Balance Proximity

Self Destructive Tee £30.00 Add to Basket Save

How can we improve our designs? let’s refine!

Madison Avenue, Chaddesden, Derby prev 1/10 Guide Price: £200,000 Type: Semi-detached Bedrooms: 2 Bathrooms: 1 Request details Agent: Purple Bricks 01332 215175 next

1 / 10 prev Madison Avenue, Chaddesden, Derby 1/10 next GUIDE PRICE Madison Avenue, Chaddesden, Derby £200,000 Guide Price: £200,000 Type: Semi-detached Bedrooms: 2 Bathrooms: 1 Agent: Purple Bricks 01332 215175 Request details T YP E BE D RO OM S BAT H RO O MS Semi-detached 2 1 01332 215175 🙂 Request Details 😍

Would you like to delete this file? Yes No *This is an irreversible action

Would you like to delete this file? Yes No *This is an irreversible action 😞 This is an irreversible action Would you like to delete this file? Cancel Delete 😌

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

Choose your plan Basic 15GB – £10 per month Regular 30GB – £15 per month Choose your plan BASIC 15 REGULAR GB £10 / MONTH 30 PRO GB £15 / MONTH Pro 60GB – £20 per month 😞 🤩 60 GB £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 might come 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 in r 3, 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 might come 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 in 3, 6 or 12. r 🤑