A presentation about how to scale visual design in a product environment.

1. 4x
Scaling Visual Design
Design as a Developer

3. We need a System

4. UI Icons Icons Illustrations Mascottes

5. The Workhorse
UI Icons

8. An interchangeable icon slot
The Bounding Box

10. Square
Inner shape

11. Portrait
Inner shape

12. Landscape
Inner shape

13. Circle
Inner shape

14. Typography as context
Size & Position
ABC 123 Helvetica Neue 14px
a
b

15. 14dp
mobile @2x
iOS
Android
18dp
www
24dp
www
mobile
iOS
Android
30dp
iOS
Android

16. Metaphors & Styling

17. And counting...
168 Metaphors

19. useful Cool Funny

20. useful Tof Funny

22. In Company In Context

23. Even grid Uneven grid

24. Colour

26. Aa
Aa
Aa
Aa
Aa
Aa
AaAa
Black-Regular
Black-Dark
D4D4D
66666
33333
50505
0097EC336A8B
0073BB092D4B
A5D8F59AB5C5
D0ECFBCDDAE2
Black-Light
Black-Extra-Light
999999
Slate-Dark
CCCCCC
Slate-Regular
E6E6E6
F5F5F5
Slate-Light
Slate-Extra-Light
41A700
B6DBA6
308941
FEDD30
FEC011 F15C00
FBB044
FFEE98
FFF7CC
Yellow-Regular
Yellow-Dark
Yellow-Light
Yellow-Extra-Light
FFD8A0
FFEBCF
Orange-Dark
Orange-Light
Orange-Extra-Light
DAECD2
Green-Regular
Green-Light
Green-Dark
Green-Extra-Light
D32323
F15C4F
F8ADA8
FCD6D3
Red-Dark
Red-Regular
Red-Light
Red-Extra-Light
6C3EB2
281F58
DAD1E4
B2A2CB
Blue-RegularSlate-Regular
Blue-DarkSlate-Dark
Blue-LightSlate-Light
Blue-Extra-LightSlate-Extra-Light
Purple-Regular
Purple-Dark
Purple-Extra-Light
Purple-Light

27. Exporting

28. AaSVGPNG
Update issues
Line-height
fFexible size
Android & iOS support
Flexible size
Android support
Seperate file for each
density and color

34. 168 metaphors * 4 base sizes * 7 platform formats * 6 colours
28.224 files

37. Sets of images for editorial purpose
Illustrations

38. 3
6
4
3
2
2
2 1
3
2
4
5
1. Background circle in a light or medium tint
2. Stroke in a darker tint of the fill color
3. 3pt stroke for the outer stroke of an element
4. 2pt stroke for inner details
5. Subtle shading or hightlights
6. 3pt Stroke as a baseline

41. Not an Illustration, not an UI icon
Icons

43. A narrative for messaging on all platforms
Mascottes