Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Practical Solutions to Common UI Design Problems
Search
steveschoger
June 13, 2019
Design
9
4.2k
Practical Solutions to Common UI Design Problems
steveschoger
June 13, 2019
Tweet
Share
More Decks by steveschoger
See All by steveschoger
How to Think Like a Visual Designer
steveschoger
8
4.8k
fluxible-15m.pdf
steveschoger
4
1.3k
The Little Details of UI Design
steveschoger
39
11k
Other Decks in Design
See All in Design
Findyのプロデチームの 歩みとこれから
satty9556
0
260
エンジニアでも捗る デザイナー的思考入門
tinykitten
1
1.2k
アプリ360onWeb使い方と裏ワザ?紹介!
ikejun360
0
260
Cyber Heart Online Book
hjnasby
0
180
A Platform Connecting Brand Philosophy and Assets: "LY Corporation Design Hub"
lycorptech_jp
PRO
0
400
Spectrum Tokyo_ デザイナーが事業責任者になってみた
shin_2
0
130
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
lycorptech_jp
PRO
0
520
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
trivia
0
540
Design Studio Deck | インクルーシブデザインスタジオCULUUM
culumu
3
3.8k
文字コントラストを改めて考える / Reevaluating Text Contrast
lycorptech_jp
PRO
0
510
1920*1080pxに設定したケース / Google Slide Size Test
arthur1
0
3.3k
SAMSUL KAMAR ABDUL RAHMAN
samsulrahman32
0
160
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
920
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
How GitHub (no longer) Works
holman
315
140k
For a Future-Friendly Web
brad_frost
180
9.9k
Agile that works and the tools we love
rasmusluckow
330
21k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
Statistics for Hackers
jakevdp
799
220k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Building an army of robots
kneath
306
46k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Transcript
Practical Solutions to Common UI Design Problems
Steve Schoger (Pronounced Show-Grrrrr)
!
Practical Solutions to Common UI Design Problems
None
None
None
None
None
None
Give text consistent contrast 01
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
duotone.shapefactory.co
unsplash.com
None
land-book.com
siteinspire.com
None
None
None
None
None
None
None
None
None
None
Don’t use grey text on colored backgrounds 02
None
None
None
None
None
Use perceived brightness 03
None
H 60 S 100% L 50% H 240 S 100%
L 50%
None
ADJUSTED LIGHTNESS ADJUSTED LIGHTNESS AND ROTATED HUE
None
ADJUSTED LIGHTNESS ADJUSTED LIGHTNESS AND ROTATED HUE
None
None
None
Start with too much whitespace 04
None
None
None
None
None
None
None
None
None
Balance weight and contrast 05
None
None
Supercharge the defaults 06
None
None
None
None
None
None
None
None
None
None
Overlap elements to create depth 07
None
Use shadows to convey elevation 08
None
None
None
None
None
None
None
Shadows can have two parts 09
Ambient Light Direct Light
None
None
None
Create depth with color 10
None
None
None
None
None
None
Align with readability in mind 11
None
None
PROPORTIONAL NUMBERS TABULAR NUMBERS `font-feature-settings: "tnum";`
PROPORTIONAL NUMBERS TABULAR NUMBERS `font-feature-settings: "tnum";`
None
Use fewer borders 12
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
background-size: cover;
None
None
None
None
None
None
None
None
None
None
None
None
Alternate backgrounds 13
None
None
None
None
None
None
None
None
Greys don’t have to be “grey” 14
None
None
None
None
None
None
None
None
None
None
None
None
Use good fonts 15
None
typography.com
commercialtype.com
klim.co.nz
None
None
None
None
hanken.co
None
None
None
None
None
Make your ideas look awesome, without relying on a designer.
AVAILABLE NOW refactoringui.com/book 40% OFF
@steveschoger