This document discusses differences between developers and designers. It notes that the session will discuss design and that the speaker will discuss guidelines for making good interfaces, even for those without design experience. Examples of Microsoft design principles are provided, such as prioritizing content and making things intuitive for users.

1. Developers are from Mars
Designers from Venus
[November 8, 2012 @ ALM Antwerp]
www.visug.be

2. Developers are from Mars
Designers are from Venus

4. @kevinderudder working for
eGuidelines and a lecturer at the
Technical University of West Flanders.
Contact me on kevin@e-guidelines.be

9. NERVOUS
1. Last session before dinner
2. I need to talk about design

10. NERVOUS
1. Last session before dinner
2. I need to talk about design

11. Everybody is a genius. But if you judge a
fish by its ability to climb a tree, it will live
its whole life believing it's stupid. - Einstein

12. Everybody is a genius. But if
you judge a fish by its ability
to climb a tree, it will live its
whole life believing it's
stupid.

13. But on the otherhand, does a
designer need to draw things

14. AND
L300

15. L300
Intermediate architecture
Development
And more code

16. L300
Intermediate architecture
Development
And more code

17. L300
Intermediate architecture
Development
And more code

18. L300
Intermediate architecture
Development
And more code
Maybe just a little bit

20. DEVINER

21. DESIGN
IS

22. DESIGN IS
not about “damn that looks good”
Actually I hate “damn that looks good”

23. DESIGN IS
about making things attractive

24. DESIGN IS
making your app understandable
Users do not have to think, they only do

25. DESIGN IS
about making a great product
nothing more , nothing less

27. good Fast and Fluid
Beautiful
interface?
Accessible
Intuitive

33. With some guidelines, even
we can make good interfaces

35. The good thing is that these guidelines
work everywhere

37. design.windows.com
0. windows8designhandbook.com
windowsuserexperiencetraining.com

38. 1. Content is king

39. Content before chrome
Content is the heart of any experience
Anything else is just a way to consume and interact
with content
Leave only the most relevant elements on the
screen

40. Reason Layout
Interactions
for chrome Navigation

48. 2. Follow the Microsoft Design Principles

49. The five principles of Microsoft design

50. Pride in craftmanship
Attention to detail
Make it safe and reliable
Alignment to the grid

59. What about the size of
the tiles when big
screens are used

60. People buy bigger screens because they want
to see more content

62. The five principles of Microsoft design

63. FAST & FLUID
Design for touch

65. FAST & FLUID
Responsive

68. FAST & FLUID
Intuitive interaction

69. FAST & FLUID
Delight with motion

70. The five principles of Microsoft design

71. Authentically
= No metaphors
digital

72. Authentically
=
digital

73. The five principles of Microsoft design

75. Be great at something
Focused and direct
Content before chrome
Inspire confidence

78. Decide what your app needs to do!
Create a “Best at” statement

79. MY APP IS BEST AT
...
One sentence Specific Truly differentiated

80. Scenario brainstorming Food with Friends
Where do friends want to eat See suggested restaurants
Search for a restaurant Write a review
Read a review Activities before and after eating
Get prices, location, contact, ... Return to favorite restaurants
Where do I want to eat Get friend’s opinion
View, send or print directions Bookmark restaurants
Interact with restaurant owners Create an app account and profile
View or share photos Share my experiences

81. Scenario brainstorming Food with Friends
Where do friends want to eat See suggested restaurants
Write a review
Read a review Activities before and after eating
Get prices, location, contact, ... Return to favorite restaurants
Get friend’s opinion
Wherewithwant to eat the best app in its category at helping
Food do I friends is
View, send ortheir friends find a restaurantrestaurants tonight
users and print directions Bookmark to eat at
Interact with restaurant owners Create an app account and profile
View or share photos Share my experiences

83. Best design is when there is
nothing left to remove

84. The five principles of Microsoft design

85. WIN AS ONE
Fit into the UI model
Reduce redundancy
Work together

87. 3. Ignore the user’s opinion about the app

88. 3. Ignore the user’s opinion about the app

90. 1 day out of my life

91. 1 day out of my life

92. 1 day out of my life

93. 1 day out of my life

94. 1 day out of my life

95. 1 day out of my life

96. 1 day out of my life

97. 1 day out of my life

98. 1 day out of my life

100. Did anybody asked my advice on
these things?

101. BUT WE CAN WORK WITH THESE THINGS

102. BUT WE CAN WORK WITH THESE THINGS
BECAUSE PEOPLE ADAPT TO TECHNOLOGY

103. But don’t make it too
difficult for them

107. 4. Don’t create an app because you
want one

108. This is my computer

109. This is the backside of
my computer

111. Why in the world should I want to
use a TorchLight on my computer

112. 5. A Windows 8 app is not a website

113. 6. Icons

114. ICONS
Use known icons
in the correct context
otherwise add text

120. Look through the
toilet window???

123. 7. Typography

124. What you want is a readable font

125. Not this one

126. Not this one

127. Not this one

129. WHAT ABOUT THIS ONE

130. What you want is a readable font
that works in different sizes

131. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Maecenas porttitor congue massa. Fusce posuere, magna
sed pulvinar ultricies, purus lectus malesuada libero, sit amet
commodo magna eros quis urna.
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Proin pharetra nonummy
pede. Mauris et orci.
Aenean nec lorem. In porttitor. Donec laoreet nonummy
augue.
Suspendisse dui purus, scelerisque at, vulputate vitae,
pretium mattis, nunc. Mauris eget neque at sem venenatis
eleifend. Ut nonummy.

132. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies,
purus lectus malesuada libero, sit amet commodo magna eros quis urna.
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
Aenean nec lorem. In porttitor. Donec laoreet nonummy augue.
Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.

133. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
Maecenas porttitor congue
massa. Fusce posuere, magna
sed pulvinar ultricies, purus
lectus malesuada libero, sit
amet commodo magna eros

134. VERDANA
LUCIDA GRANDE
SEGOE UI

135. OOH, before I forget!
Never ever , and this is real,
I kid you not, you will get punched,
deploy an app with spelling mistakes

139. Things we don’t have time for
> Make it easy to go home
> Implement Search
> Handle errors wisely
> Watch out with unnatural things
> ...

141. http://www.worth1000.com/entries/542916/frightened
http://iwdrm.tumblr.com/page/15
http://annelyse.be/2009/12/29/dyson-verslag/
http://www.slowdownfast.com/life-balance-why-following-rules-is-liberating/
http://iwdrm.tumblr.com/page/16
http://www.campist.com/archives/light-my-fire-spork-utensil.jpg
http://www.fuelyourmotionography.com/files/monkey-thinking.png
http://s4.hubimg.com/u/5078555_f260.jpg