Your SlideShare is downloading. ×
0
Engineering Esthetics

Boris Nadion
boris@astrails.com
@borisnadion
Boris Nadion
90s / 100 / 2005
partner at Astrails, Ruby On Rails consultancy
idea
coffee shop napkin sketches
thousands of users
disclaimer
I'm not a designer
Developers

Designers

As seen by
Developers
!
!

As seen by
Designers

http://bit.ly/war-developers
lack of shared knowledge
who are you?
care of different aspects
conflict of interest
designers
automagically
BS
together
great
engineered and designed
esthetic
daily job
hardware
software
proper framework
happy
2 sizes of the same coin
similar
architecture
engineers
design language
designers
naming conventions
engineers
style guides
designers
code duplication
engineers
identity crisis
designers
Save

Save

Cancel

Cancel
long methods
engineers
short-term memory loss
designers
teach designers to code
understand design
engineered
How I Learned to
Stop Worrying and
Love Design

http://www.imdb.com/media/rm1366197248/tt0057012?ref_=ttmi_mi_all_sf_6
2 words
in german and dutch
formgeben
form giving
entwurf
planning
design
method of solving visual or physical problems
graphic design
http://www.miltonglaser.com/the-work/444/columbia-records-poster-for-bob-dylans-greatest-hits-1975/
print design
interaction design
UI design
attention
UX design
industrial design
key differentiator
Cal by Any.do
contribute
planning - implementing - testing&debugging
engineering
sketching - design - interaction
design
define goals
sketching
generate ideas, identify complexity
http://www.fiftythree.com/pencil
http://www.fiftythree.com/paper
wireframing
functional
http://en.wikipedia.org/wiki/File:Profilewireframe.png
grouping
design wireframe
https://github.com/jglovier/microframe
sketch
functional
wireframes

UI design
design
wireframes
choose layout
grid, wizard, dashboard, gallery, etc
maintain consistency
avoid identity crisis
testing
visual design
• color
• typography
• rhythm
green
yellow
red
target audience
fonts
serif

sans-serif
information
information
information
information
rhythm
consistent spacing and calculable sizes
@font-size-base:
@font-size-delta:

14px;
8px;

!
p {
padding: @font-size-delta 0;
}

!
// 50px - heading size
.font-huge ...
grid
//== Grid system
//
!

@grid-columns:

12;

!

//** Padding between columns. Gets divided in half
//** for the left and ri...
establishing a hierarchy
motion and visual effects
status of the current action, visual feedback, orient the user
design patters
well known and recognizable UI elements and animations
http://pttrns.com/
how it works
engineers <=> designers
esthetics
Developers

Designers

As seen by
Developers
!
!

As seen by
Designers

http://bit.ly/war-developers
Developers

Designers

As seen by
Developers

!
!
!
!
!
As seen by
Designers

!
!
!
!
!
As seen by
Project Managers

http:...
thank you!

Boris Nadion
boris@astrails.com
@borisnadion
Engineering esthetics
Engineering esthetics
Engineering esthetics
Engineering esthetics
Engineering esthetics
Engineering esthetics
Engineering esthetics
Engineering esthetics
Engineering esthetics
Upcoming SlideShare
Loading in...5
×

Engineering esthetics

257

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
257
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×