Engineering esthetics

497 views

Published on

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.

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
497
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Engineering esthetics

  1. 1. Engineering Esthetics Boris Nadion boris@astrails.com @borisnadion
  2. 2. Boris Nadion 90s / 100 / 2005 partner at Astrails, Ruby On Rails consultancy
  3. 3. idea coffee shop napkin sketches
  4. 4. thousands of users
  5. 5. disclaimer I'm not a designer
  6. 6. Developers Designers As seen by Developers ! ! As seen by Designers http://bit.ly/war-developers
  7. 7. lack of shared knowledge
  8. 8. who are you?
  9. 9. care of different aspects
  10. 10. conflict of interest
  11. 11. designers
  12. 12. automagically
  13. 13. BS
  14. 14. together
  15. 15. great
  16. 16. engineered and designed
  17. 17. esthetic
  18. 18. daily job
  19. 19. hardware
  20. 20. software
  21. 21. proper framework
  22. 22. happy
  23. 23. 2 sizes of the same coin
  24. 24. similar
  25. 25. architecture engineers
  26. 26. design language designers
  27. 27. naming conventions engineers
  28. 28. style guides designers
  29. 29. code duplication engineers
  30. 30. identity crisis designers
  31. 31. Save Save Cancel Cancel
  32. 32. long methods engineers
  33. 33. short-term memory loss designers
  34. 34. teach designers to code
  35. 35. understand design
  36. 36. engineered
  37. 37. How I Learned to Stop Worrying and Love Design http://www.imdb.com/media/rm1366197248/tt0057012?ref_=ttmi_mi_all_sf_6
  38. 38. 2 words in german and dutch
  39. 39. formgeben form giving
  40. 40. entwurf planning
  41. 41. design method of solving visual or physical problems
  42. 42. graphic design
  43. 43. http://www.miltonglaser.com/the-work/444/columbia-records-poster-for-bob-dylans-greatest-hits-1975/
  44. 44. print design
  45. 45. interaction design
  46. 46. UI design
  47. 47. attention
  48. 48. UX design
  49. 49. industrial design
  50. 50. key differentiator
  51. 51. Cal by Any.do
  52. 52. contribute
  53. 53. planning - implementing - testing&debugging engineering
  54. 54. sketching - design - interaction design
  55. 55. define goals
  56. 56. sketching generate ideas, identify complexity
  57. 57. http://www.fiftythree.com/pencil
  58. 58. http://www.fiftythree.com/paper
  59. 59. wireframing
  60. 60. functional
  61. 61. http://en.wikipedia.org/wiki/File:Profilewireframe.png
  62. 62. grouping
  63. 63. design wireframe
  64. 64. https://github.com/jglovier/microframe
  65. 65. sketch functional wireframes UI design design wireframes
  66. 66. choose layout grid, wizard, dashboard, gallery, etc
  67. 67. maintain consistency avoid identity crisis
  68. 68. testing
  69. 69. visual design • color • typography • rhythm
  70. 70. green
  71. 71. yellow
  72. 72. red
  73. 73. target audience
  74. 74. fonts
  75. 75. serif sans-serif
  76. 76. information
  77. 77. information information information
  78. 78. rhythm consistent spacing and calculable sizes
  79. 79. @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); }
  80. 80. grid
  81. 81. //== Grid system // ! @grid-columns: 12; ! //** Padding between columns. Gets divided in half //** for the left and right. @grid-gutter-width: 30px;
  82. 82. establishing a hierarchy
  83. 83. motion and visual effects status of the current action, visual feedback, orient the user
  84. 84. design patters well known and recognizable UI elements and animations http://pttrns.com/
  85. 85. how it works
  86. 86. engineers <=> designers
  87. 87. esthetics
  88. 88. Developers Designers As seen by Developers ! ! As seen by Designers http://bit.ly/war-developers
  89. 89. Developers Designers As seen by Developers ! ! ! ! ! As seen by Designers ! ! ! ! ! As seen by Project Managers http://bit.ly/war-developers Project Managers
  90. 90. thank you! Boris Nadion boris@astrails.com @borisnadion

×