Practical UX / UI Design Tips – Ciarán Duffy

@theDuffy1
Practical UX – UI Tips
Gaza Sky Geeks
September 29, 2020

@theDuffy1
Intro
👋 I’m Ciarán
[kir–ron]

@theDuffy1
Intro
🇮🇪 → 🇩🇪

@theDuffy1
Intro
duff.work
Independent Design Consultant
sonderdesign.org

@theDuffy1
A Ratings Platform for the
Humanitarian Sector

@theDuffy1
Paper-Based Medical Records

@theDuffy1
UX for X-Ray Machines

@theDuffy1
A Chatbot for Refugees

@theDuffy1
0. COULD BE 1. SHOULD BE 2. WILL BE 3. ALPHA BUILD
GETTING THE IDEA RIGHTGETTING THE RIGHT IDEA
Credit: IDEO U

@theDuffy1
0. COULD BE 1. SHOULD BE 2. WILL BE 3. ALPHA BUILD
GETTING THE IDEA RIGHTGETTING THE RIGHT IDEA
UX Design UI Design
Credit: IDEO U

@theDuffy1
This Presentation
- Design Tool Stack
- Right Idea
- Idea Right

@theDuffy1
Design Tool Stack
UX - UI Prototyping Dev Handoff

@theDuffy1
No (or Low) Code Tools

@theDuffy1
🤔 Getting the right idea

@theDuffy1
Talk to Users
They’re going to be customers one day so you
need to understand their perspective

@theDuffy1
Observations & Insights
Observation: Smartphone users check Facebook an
average of 14 times per day

@theDuffy1
Good Insights
Context – Dilemma – Why – Motivation – Ideal

@theDuffy1
Good Insights
Insight: People have a fear of becoming disconnected,
missing out, or being out of the loop, which has been
heightened by constant updates on social media. Using a
smartphone allows people to ‘connect’ with others, but still
leaves people lacking social stimulation. There should be a
way for people to understand their smartphone usage.
Context – Dilemma – Why – Motivation – Ideal

@theDuffy1
Know the
Problem
Have empathic knowledge of the
problem, from the user’s perspective

@theDuffy1
What is the problem you’re trying to solve?

@theDuffy1
The further your team is from the
problem, the harder it is to solve it

@theDuffy1
Test Your
Assumptions
Rapid prototypes help you understand
if you have the right idea

@theDuffy1
No Code Prototypes
1 person, 1 week 6 people, 4 months

@theDuffy1
💡Explaining your idea

@theDuffy1
One Sentence™
[Name] is an app for [Who] that helps
them do [What] by [How]

@theDuffy1
One Sentence™
[Slack] is a communication app for [people that work
together] that [enables efficient collaboration]
through [a searchable chat interface]

@theDuffy1
One Sentence™
Searchable Log of All Conversation and Knowledge

@theDuffy1
🚀 Getting the idea right

@theDuffy1
💪 3 Tips to Design More Efficiently

@theDuffy1
3 Tips to Design More Efficiently
- Rapid iterations
- Fail forwards and backwards
- Develop your eye

@theDuffy1
Fail Forwards and Backwards

@theDuffy1
Develop Your Eye // Copywork
- Dribbble
- Pinterest Boards
- Seek feedback early & often

@theDuffy1
Develop Your Eye // Copywork
Learn from the Masters!

@theDuffy1
14pt medium, 1pt character spacing
23pt bold, no character spacing
18pt book, no character spacing
80pt whitespace

@theDuffy1
42pt × 64pt
38pt, circle
2pt border, 2 pt checkmark

@theDuffy1
48pt × 350pt, 5pt corners
Shadow: x:0, y:2, blur:6, 20%
#515151, same as font
Terms, Privacy, Currency & More

@theDuffy1
🖥 10 Practical UI Tips

@theDuffy1
Use a Design System
Keep design and development aligned. Use Design
resources to solve your unique problems

Some (famous) examples
Human Interface Guidelines (Apple)Material Design (Google) Fluent Design System (Microsoft)

Other examples
ADG (Atlassian)Lightning Design System (Salesforce) Carbon Design System (IBM)
designsystemsrepo.com

Pablo Picasso
“Good designers copy – great
designers steal”

Me?
“The best pattern is the one the user knows
already”

How do we choose a design system?
• Look who’s already solved key challenges you will need to challenge
(data, mapping, trend graphs, complex tables)
• Look at systems created in similar domains (consumer, enterprise, e-
commerce)
• Ensure it’s open source, and that it will be easy to customise / depart
from eventually

@theDuffy1
Wireframes help you
understand features
Use real content. Again, use a
design system

@theDuffy1
Double your
Whitespace
To make UI that looks designed,
add a lot of breathing room

@theDuffy1
Light Comes
from the Sky
Shadows should follow
the same logic

@theDuffy1
Title
Good Alignment
Keeps Things Tidy
Not always as easy as it seems

@theDuffy1
Alignment
“It saves me time and gives me peace of
mind knowing that there is a single
source of truth for our Sketch ﬁles.”
– BRYAN BERGER
PRODUCT DESIGN MANAGER

@theDuffy1
Alignment
It saves me time and gives me peace of
mind knowing that there is a single
source of truth for our Sketch ﬁles.”
“
BRYAN BERGER
PRODUCT DESIGN MANAGER
–

@theDuffy1
Title
Pairing Fonts by
comparison
The closer the styles match each
other, the more they fit

@theDuffy1
Pairing Fonts
Alegreya on top. Alegreya Sans on the bottom.
Freight Sans on top. Freight on the bottom.

@theDuffy1
Title
Justifying your
Font Choices
Providing a rationale for your fonts

@theDuffy1
Justifying Your Font Choices
Choosing a font with tabular figures for
context in which you will have many
numbers

@theDuffy1
A good amount of weights is a good
reason to choose a font. More weights
required if it’s your only font

@theDuffy1
Small caps can also be a nice feature for
literary contexts, blogs, media sites etc.

@theDuffy1
Title
Colour Compatibility
Calculating your way to better colour choices

@theDuffy1
HSB > RGB
Click to Toggle
HSB, RGB and HSL

@theDuffy1
How to fix clashing colours?

@theDuffy1
How to fix clashing colours?
Luminosity: 66
Luminosity: 69

@theDuffy1
How can we pair colours?
Luminosity: 56
Luminosity: 74

@theDuffy1

@theDuffy1
👍👎

@theDuffy1
LUMINOSITY
👍
👍
👍
👎

@theDuffy1
Title
Consider your
line length
2-3 alphabets works best

@theDuffy1
Consider Your Line Length
The next day, the family walk deep into the woods and Hansel lays a trail of white pebbles. After their
parents abandon them, Hansel and Gretel follow the trail back home. When their stepmother sees
them, she is furious and locks them in the house. Hansel and Gretel are unable to escape or even
simply collect pebbles.
The next day, the family walk deep into the woods and Hansel lays a trail
of white pebbles. After their parents abandon them, Hansel and Gretel
follow the trail back home. When their stepmother sees them, she is
furious and locks them in the house. Hansel and Gretel are unable to
escape or even simply collect pebbles.
abcdefghijklnmopqrstuvwxyzabcdefghijklnmopqrstuvwxyzabcdefghijkln
1 2 1/2

@theDuffy1
Title
Don’t Give a Real
Estate Tour
Guide people through the decisions that were made
starting with the one most connected with the main
business goal or user need.

@theDuffy1
Additional Resources
- What The Font
- Color Picker
- Contrast Analyzer

@theDuffy1
🙏 ‫شكرا‬
Slides link here

Practical UX / UI Design Tips – Ciarán Duffy

Recommended

Recommended

More Related Content

What's hot

What's hot (7)

Similar to Practical UX / UI Design Tips – Ciarán Duffy

Similar to Practical UX / UI Design Tips – Ciarán Duffy (20)

Recently uploaded

Recently uploaded (20)

Practical UX / UI Design Tips – Ciarán Duffy