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
読書シェア会 vol.5 / Yumemi.grow 20250526
rakus_dev
0
1.8k
Character Experience AI 〜 AIキャラクターのつくりかた 〜
smartbank
1
350
自分たちがターゲットになりにくい業務アプリケーションのユーザビリティを担保する取り組み / Initiatives to ensure the usability of business applications that are difficult for us to target
hiromitsuuuuu
1
650
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
lycorptech_jp
PRO
0
550
Liquid GlassとApp Intents
touyou
0
390
#Dubois Challenge 2025: Economics
ajstarks
1
180
株式会社バクタム 会社説明資料
bactum
0
360
アプリ360onWeb使い方と裏ワザ?紹介!
ikejun360
0
300
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
500
portfolio.pdf
onof003
0
180
AIを身近に感じるために、デザイナー全員で一つのサービスを使ってみた
_psyc0_
0
320
文字コントラストを改めて考える / Reevaluating Text Contrast
lycorptech_jp
PRO
0
550
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
The Straight Up "How To Draw Better" Workshop
denniskardys
237
140k
It's Worth the Effort
3n
187
28k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.2k
A better future with KSS
kneath
239
17k
Building an army of robots
kneath
306
46k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Designing for Performance
lara
610
69k
KATA
mclloyd
32
15k
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