Download to read offline
Uploaded byAstrails
Engineering esthetics
The document discusses the relationship and collaboration between engineers and designers, highlighting their differing perspectives and the need for shared knowledge. It emphasizes the importance of design in engineering through various methods such as wireframing, hierarchy establishment, and visual feedback in UI/UX design. Additionally, it touches on the role of design aesthetics and the integration of visual and functional elements in creating effective user interfaces.
Engineering esthetics
- 1.
- 2. Boris Nadion 90s /100 / 2005 partner at Astrails, Ruby On Rails consultancy
- 3. idea coffee shop napkinsketches
- 4.
- 5. disclaimer I'm not adesigner
- 6. Developers Designers As seen by Developers ! ! Asseen by Designers http://bit.ly/war-developers
- 7. lack of sharedknowledge
- 8.
- 9. care of differentaspects
- 10.
- 13.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26. 2 sizes ofthe same coin
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40. How I Learnedto Stop Worrying and Love Design http://www.imdb.com/media/rm1366197248/tt0057012?ref_=ttmi_mi_all_sf_6
- 41. 2 words in germanand dutch
- 42.
- 43.
- 44. design method of solvingvisual or physical problems
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 54.
- 55.
- 56.
- 57. planning - implementing- testing&debugging engineering
- 58. sketching - design- interaction design
- 59.
- 60. sketching generate ideas, identifycomplexity
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.
- 70. choose layout grid, wizard,dashboard, gallery, etc
- 71.
- 72.
- 74. visual design • color •typography • rhythm
- 76.
- 77.
- 78.
- 79.
- 80.
- 81.
- 82.
- 83.
- 84. rhythm consistent spacing andcalculable sizes
- 86. @font-size-base: @font-size-delta: 14px; 8px; ! p { padding: @font-size-delta0; } ! // 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.
- 89. //== Grid system // ! @grid-columns: 12; ! //**Padding between columns. Gets divided in half //** for the left and right. @grid-gutter-width: 30px;
- 90.
- 92. motion and visualeffects status of the current action, visual feedback, orient the user
- 93. design patters well knownand recognizable UI elements and animations http://pttrns.com/
- 94.
- 95.
- 96.
- 97. Developers Designers As seen by Developers ! ! Asseen by Designers http://bit.ly/war-developers
- 98. Developers Designers As seen by Developers ! ! ! ! ! Asseen by Designers ! ! ! ! ! As seen by Project Managers http://bit.ly/war-developers Project Managers
- 99.