Practical Solutionsto Common UI Design Problems
View Slide
Steve Schoger(Pronounced Show-Grrrrr)
!
Give text consistent contrast01
duotone.shapefactory.co
unsplash.com
land-book.com
siteinspire.com
Don’t use grey text on coloredbackgrounds02
Use perceived brightness03
H 60S 100%L 50%H 240S 100%L 50%
ADJUSTED LIGHTNESSADJUSTED LIGHTNESS AND ROTATED HUE
Start with too much whitespace04
Balance weight and contrast05
Supercharge the defaults06
Overlap elements to createdepth07
Use shadows to conveyelevation08
Shadows can have two parts09
Ambient LightDirect Light
Create depth with color10
Align with readability in mind11
PROPORTIONAL NUMBERS TABULAR NUMBERS`font-feature-settings: "tnum";`
Use fewer borders12
background-size: cover;
Alternate backgrounds13
Greys don’t have to be “grey”14
Use good fonts15
typography.com
commercialtype.com
klim.co.nz
hanken.co
Make your ideas look awesome,without relying on a designer.AVAILABLE NOWrefactoringui.com/book 40%OFF
@steveschoger