engineering esthetics

Engineering Esthetics

Boris Nadion boris@astrails.com

@borisnadion

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

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

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

thank you!

Boris Nadion boris@astrails.com

@borisnadion