The slides I was presenting during Techday 2012 Roadshow.

2. #techday2012

3. I‘m the real
PIXEL PERFECT BITCH
that's what they call me

4. I MAKE YOUR UGLY INTERFACES REALLY PRETTY
I DELAY PROJECTS AND EXTEND PROJECT DEADLINES

5. MICROSOFT NOW
USING MODERN UI
STYLE TO REFER TO
WINDOWS 8 METRO
STYLE APPS

6. LOVE IT OR HATE IT,
WINDOWS IS AT THE TOP OF THE OS HIERARCHY

7. WINDOWS 8:
THE BIGGEST
REDESIGN IN
MICROSOFT’S
HISTORY

8. WINDOWS 8
• it’s a new interface, so you have space
to create and develop some new ideas
for it;
• It’s still at the beginning of its growing
curve, so it’s an interesting challenge;
• exploring is a great way to learn how to
build a new exciting experience for
users;

10. Every rule in an abstract matter is just a cult.
said by Alan Mendelevich

11. Cult in current popular usage usually refers to
a new religious movement.
said by Wikipedia

12. Forget everything you knew
about developing desktop apps
& get ready to
REDESIGN RELIGION

13. DO I NEED TO LEARN DESIGN STUFF?!
No. Modern UI makes design more accessible to everyone.

14. SO WHAT DOES THIS MEAN FOR ME?
it opens doors for non-designers

15. TOOLS

16. all you need is BLEND FOR VISUAL STUDIO 2012

17. Get rid of the line between
DESIGN and DEVELOPMENT

18. 6 THINGS
I WISH I KNEW
BEFORE I STARTED

19. Do more with less - and
THEY‘LL LOVE YOU
for it
choose content over chrome

20. CHOOSE CONTENT OVER CHROME

21. CHOOSE CONTENT OVER CHROME

22. CHOOSE CONTENT OVER CHROME

23. CHOOSE CONTENT OVER CHROME

24. CHOOSE CONTENT OVER CHROME

25. CHOOSE CONTENT OVER CHROME

26. CHOOSE CONTENT OVER CHROME

27. CHOOSE CONTENT OVER CHROME

28. CHOOSE CONTENT OVER CHROME

29. CHOOSE CONTENT OVER CHROME

30. BE AUTHENTICALLY DIGITAL

31. BE AUTHENTICALLY DIGITAL

32. CHOOSE CONTENT OVER CHROME

33. SLAP A GRID ON IT
think grid

34. THINK GRID

36. THINK GRID
1 sub-unit = 5px x 5px
1 unit = 20px x 20px
1 column = 80px

37. I keep returning
to the number
10

38. THINK GRID
2 units (40px) 2 sub-units (10px)

39. THINK GRID
1 unit (20px)

40. THINK GRID
1 column (80px)

41. THINK GRID
100px and 120px as the starting point

42. THINK GRID

43. THINK TOUCH
recommended size
8mm
when accuracy matters
when it just won’t fit

44. DIFFERENT DPI’s
1366 x 768
10,6” 148dpi @ 100% scale
1920 x 1080
10,6” 207dpi @ 140% scale
1920 x 1080
23” 96dpi @ 100% scale

45. DIFFERENT DPI’s (A LITTLE HELP IN BLEND)

46. EMBRACE TYPOGRAPHY
think about typography

47. THINK ABOUT TYPOGRAPHY
Segoe UI
20pt
42pt
9pt 11pt
Regular Semilight
Light
Semibold
Bold Regular
Semibold
Light
Semilight
Regular

49. Your app should be
RESPONSIVE, FAST and FLUID
Let people interact directly with content and respond to actions
quickly with matching energy.

50. BE FAST
traditional
desktop
software start 2 3 4 done
Windows 8
killer app
start done

51. You should use
BOLD & VIBRANT COLORS

52. The new face of Windows is a grid of tiles
colored like Skittles.

53. BOLD COLORS
FF0097 A200FF 00ABA9 8CBF26 A05000
E671B8 F09609 1BA1E2 E51400 339933

55. LOKU WINDOWS 8 APP

56. Small things
DRAMATICALLY AFFECT
The quality of entire app
Devote time and energy to small things that are seen often by many of your
users, and engineer the experience to be complete and polished at every
stage.

61. ONE MORE

62. Attractive things
WORK BETTER

63. BLIO WINDOWS 8 APP

64. ADIDAS SEATTLE SOUNDERS FC WINDOWS 8 APP

65. LOKU WINDOWS 8 APP

66. SUM UP
all you need is BLEND FOR VISUAL STUDIO 2012
choose content over chrome
use grid
embrace typography
be responsive, fast and fluid
use bold & vibrant colors
devote time and energy to small things
attractive things work better

67. WITHIN EVERY DESIGN PRINCIPLES
THERE’S SPACIOUS ROOM TO CREATIVELY
PUSH BOUNDARIES.
AND YOU SHOULD.