Most of the developers heard or told that they don't give a crap about visual design, they only care about the code, rest is not important and it's a designer's problem to care about it. This is just not right, Boris is not a designer and he will try to explain why's that not right.

1. Engineering Esthetics
Boris Nadion
boris@astrails.com
@borisnadion

2. Boris Nadion
90s / 100 / 2005
partner at Astrails, Ruby On Rails consultancy

3. idea
coffee shop napkin sketches

4. thousands of users

5. disclaimer
I'm not a designer

6. Developers
Designers
As seen by
Developers
!
!
As seen by
Designers
http://bit.ly/war-developers

7. lack of shared knowledge

8. who are you?

9. care of different aspects

10. conflict of interest

13. designers

15. automagically

16. BS

17. together

18. great

19. engineered and designed

20. esthetic

21. daily job

22. hardware

23. software

24. proper framework

25. happy

26. 2 sizes of the same coin

27. similar

28. architecture
engineers

29. design language
designers

30. naming conventions
engineers

31. style guides
designers

32. code duplication
engineers

33. identity crisis
designers

34. Save
Save
Cancel
Cancel

35. long methods
engineers

36. short-term memory loss
designers

37. teach designers to code

38. understand design

39. engineered

40. How I Learned to
Stop Worrying and
Love Design
http://www.imdb.com/media/rm1366197248/tt0057012?ref_=ttmi_mi_all_sf_6

41. 2 words
in german and dutch

42. formgeben
form giving

43. entwurf
planning

44. design
method of solving visual or physical problems

45. graphic design

46. http://www.miltonglaser.com/the-work/444/columbia-records-poster-for-bob-dylans-greatest-hits-1975/

47. print design

48. interaction design

49. UI design

50. attention

51. UX design

52. industrial design

54. key differentiator

55. Cal by Any.do

56. contribute

57. planning - implementing - testing&debugging
engineering

58. sketching - design - interaction
design

59. define goals

60. sketching
generate ideas, identify complexity

61. http://www.fiftythree.com/pencil

62. http://www.fiftythree.com/paper

63. wireframing

64. functional

65. http://en.wikipedia.org/wiki/File:Profilewireframe.png

66. grouping

67. design wireframe

68. https://github.com/jglovier/microframe

69. sketch
functional
wireframes
UI design
design
wireframes

70. choose layout
grid, wizard, dashboard, gallery, etc

71. maintain consistency
avoid identity crisis

72. testing

74. visual design
• color
• typography
• rhythm

76. green

77. yellow

78. red

79. target audience

80. fonts

81. serif
sans-serif

82. information

83. information
information
information

84. rhythm
consistent spacing and calculable sizes

86. @font-size-base:
@font-size-delta:
14px;
8px;
!
p {
padding: @font-size-delta 0;
}
!
// 50px - heading size
.font-huge {
font-size: floor(@font-size-base * 3 + @font-size-delta);
}
!
// 36px - titles
.font-big {
font-size: floor(@font-size-base * 2 + @font-size-delta);
}
!
// 22px - subtitles
.font-medium {
font-size: floor(@font-size-base + @font-size-delta);
}

87. grid

89. //== Grid system
//
!
@grid-columns:
12;
!
//** Padding between columns. Gets divided in half
//** for the left and right.
@grid-gutter-width:
30px;

90. establishing a hierarchy

92. motion and visual effects
status of the current action, visual feedback, orient the user

93. design patters
well known and recognizable UI elements and animations
http://pttrns.com/

94. how it works

95. engineers <=> designers

96. esthetics

97. Developers
Designers
As seen by
Developers
!
!
As seen by
Designers
http://bit.ly/war-developers

98. Developers
Designers
As seen by
Developers
!
!
!
!
!
As seen by
Designers
!
!
!
!
!
As seen by
Project Managers
http://bit.ly/war-developers
Project Managers

99. thank you!
Boris Nadion
boris@astrails.com
@borisnadion