A presentation at Middlesbrough Front End 2024 in in Middlesbrough, UK by Lex Lofthouse
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 🤑
Have you ever found yourself not just having to build the product, but in the absence of an actual designer, you’re the one who ends up having to throw together a design for it too? Want to gain the magic design powers to transform that average screen into a beautiful interface?
People have often told me they’d never be able to design interfaces because it’s too subjective and a completely different mindset to coding. Well I’m here to tell you that UI design isn’t as complex as it looks when you’ve got the right tools to hand – and it really isn’t a magical dark art, I promise!
In this talk, I will help you understand some of the main design principles that you can apply across UI design. Such as Typography, Emphasis, Hierarchy, Layout, Spacing, Size, Depth and Colour.
We’ll be discussing these principles and, through visual demonstrations and examples, show how you can implement these principles across typical UI components such as forms, cards, dashboards and other interface elements.
Whether you’re the ‘dev-signer’ or you’re just somebody who would like to learn some fundamental design skills to widen your knowledge – you should then leave feeling well equipped with new design skills to apply day to day!
for free. You
can too.