engineering esthetics
DESCRIPTION
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.TRANSCRIPT
Boris Nadion90s / 100 / 2005
partner at Astrails, Ruby On Rails consultancy
ideacoffee shop napkin sketches
thousands of users
disclaimerI'm not a designer
http://bit.ly/war-developers
Developers Designers
As seen by Developers
!!
As seen by Designers
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
architectureengineers
design languagedesigners
naming conventionsengineers
style guidesdesigners
code duplicationengineers
identity crisisdesigners
Save
Save Cancel
Cancel
long methodsengineers
short-term memory lossdesigners
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 wordsin german and dutch
formgebenform giving
entwurfplanning
designmethod 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&debuggingengineering
sketching - design - interactiondesign
define goals
sketchinggenerate ideas, identify complexity
wireframing
functional
http://en.wikipedia.org/wiki/File:Profilewireframe.png
grouping
design wireframe
sketch
functional wireframes
design wireframes
UI design
choose layoutgrid, wizard, dashboard, gallery, etc
maintain consistencyavoid identity crisis
testing
visual design• color
• typography
• rhythm
green
yellow
red
target audience
fonts
serif sans-serif
information
informationinformationinformation
rhythmconsistent spacing and calculable sizes
@font-size-base: 14px; @font-size-delta: 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); }
grid
//== Grid system // !@grid-columns: 12; !//** Padding between columns. Gets divided in half //** for the left and right. @grid-gutter-width: 30px;
establishing a hierarchy
motion and visual effectsstatus of the current action, visual feedback, orient the user
design patterswell known and recognizable UI elements and animations
http://pttrns.com/
how it works
engineers <=> designers
esthetics
http://bit.ly/war-developers
Developers Designers
As seen by Developers
!!
As seen by Designers
http://bit.ly/war-developers
Developers Designers Project Managers
As seen by Developers
!!!!!
As seen by Designers
!!!!!
As seen by Project Managers
