SlideShare a Scribd company logo
1 of 99
Download to read offline
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 {
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 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://bit.ly/war-developers

Project Managers
thank you!

Boris Nadion
boris@astrails.com
@borisnadion

More Related Content

Similar to Engineering esthetics

Designers are from Venus - Presentationas Given to CD2
Designers are from Venus - Presentationas Given to CD2Designers are from Venus - Presentationas Given to CD2
Designers are from Venus - Presentationas Given to CD2Chad Udell
 
Architecture 3D Design and 3D Modeling Rendering Concepts.pptx
Architecture 3D Design and 3D Modeling Rendering Concepts.pptxArchitecture 3D Design and 3D Modeling Rendering Concepts.pptx
Architecture 3D Design and 3D Modeling Rendering Concepts.pptx3dteamau
 
Style Guides, Pattern Libraries, Design Systems and other amenities.
 Style Guides, Pattern Libraries, Design Systems and other amenities. Style Guides, Pattern Libraries, Design Systems and other amenities.
Style Guides, Pattern Libraries, Design Systems and other amenities.Cristiano Rastelli
 
How to create a portfolio for M . Design Admission?
How to create a portfolio for M . Design Admission? How to create a portfolio for M . Design Admission?
How to create a portfolio for M . Design Admission? Surya Konijeti
 
UI For Alien Cowboys
UI For Alien CowboysUI For Alien Cowboys
UI For Alien CowboysMatt Jones
 
Lesson_1_Graphics_Communication_Intro.ppt
Lesson_1_Graphics_Communication_Intro.pptLesson_1_Graphics_Communication_Intro.ppt
Lesson_1_Graphics_Communication_Intro.pptPabloAntonioSanMarti1
 
Design System & Atomic Design
Design System & Atomic DesignDesign System & Atomic Design
Design System & Atomic DesignVani Jain
 
The Professional Design Process
The Professional Design ProcessThe Professional Design Process
The Professional Design Processugencarelle
 
The original 'Double Diamond' design methodbank
The original 'Double Diamond' design methodbank The original 'Double Diamond' design methodbank
The original 'Double Diamond' design methodbank Andrea Cooper
 
design_fundamental_new_.ppt
design_fundamental_new_.pptdesign_fundamental_new_.ppt
design_fundamental_new_.pptMohsenGhorbani9
 
Responsive design and Drupal, case Costume.fi
Responsive design and Drupal, case Costume.fiResponsive design and Drupal, case Costume.fi
Responsive design and Drupal, case Costume.fiExove
 
Types of Layouts by ADMEC Multimedia Institute
Types of Layouts by ADMEC Multimedia InstituteTypes of Layouts by ADMEC Multimedia Institute
Types of Layouts by ADMEC Multimedia InstituteRavi Bhadauria
 
Alice Phieu - UI/UX For Developers
Alice Phieu - UI/UX  For DevelopersAlice Phieu - UI/UX  For Developers
Alice Phieu - UI/UX For DevelopersAlice Phieu
 
Life is not static - your designs shouldn't be either - No Code Conf 2019 Wor...
Life is not static - your designs shouldn't be either - No Code Conf 2019 Wor...Life is not static - your designs shouldn't be either - No Code Conf 2019 Wor...
Life is not static - your designs shouldn't be either - No Code Conf 2019 Wor...Webflow
 
Architecture Katas - How can we learn to create better architectures?
Architecture Katas - How can we learn to create better architectures?Architecture Katas - How can we learn to create better architectures?
Architecture Katas - How can we learn to create better architectures?Frank Sons
 
Planning For design
Planning For designPlanning For design
Planning For designCantina
 
Become a better UX designer through code
Become a better UX designer through codeBecome a better UX designer through code
Become a better UX designer through codeRamon Lapenta
 
Design Systems are Coming... Are you Ready?
Design Systems are Coming... Are you Ready?Design Systems are Coming... Are you Ready?
Design Systems are Coming... Are you Ready?Vernon Kesner
 

Similar to Engineering esthetics (20)

Designers are from Venus - Presentationas Given to CD2
Designers are from Venus - Presentationas Given to CD2Designers are from Venus - Presentationas Given to CD2
Designers are from Venus - Presentationas Given to CD2
 
Architecture 3D Design and 3D Modeling Rendering Concepts.pptx
Architecture 3D Design and 3D Modeling Rendering Concepts.pptxArchitecture 3D Design and 3D Modeling Rendering Concepts.pptx
Architecture 3D Design and 3D Modeling Rendering Concepts.pptx
 
Style Guides, Pattern Libraries, Design Systems and other amenities.
 Style Guides, Pattern Libraries, Design Systems and other amenities. Style Guides, Pattern Libraries, Design Systems and other amenities.
Style Guides, Pattern Libraries, Design Systems and other amenities.
 
How to create a portfolio for M . Design Admission?
How to create a portfolio for M . Design Admission? How to create a portfolio for M . Design Admission?
How to create a portfolio for M . Design Admission?
 
UI For Alien Cowboys
UI For Alien CowboysUI For Alien Cowboys
UI For Alien Cowboys
 
Lesson_1_Graphics_Communication_Intro.ppt
Lesson_1_Graphics_Communication_Intro.pptLesson_1_Graphics_Communication_Intro.ppt
Lesson_1_Graphics_Communication_Intro.ppt
 
Design System & Atomic Design
Design System & Atomic DesignDesign System & Atomic Design
Design System & Atomic Design
 
Digital Design
Digital DesignDigital Design
Digital Design
 
The Professional Design Process
The Professional Design ProcessThe Professional Design Process
The Professional Design Process
 
The original 'Double Diamond' design methodbank
The original 'Double Diamond' design methodbank The original 'Double Diamond' design methodbank
The original 'Double Diamond' design methodbank
 
design_fundamental_new_.ppt
design_fundamental_new_.pptdesign_fundamental_new_.ppt
design_fundamental_new_.ppt
 
Responsive design and Drupal, case Costume.fi
Responsive design and Drupal, case Costume.fiResponsive design and Drupal, case Costume.fi
Responsive design and Drupal, case Costume.fi
 
Types of Layouts by ADMEC Multimedia Institute
Types of Layouts by ADMEC Multimedia InstituteTypes of Layouts by ADMEC Multimedia Institute
Types of Layouts by ADMEC Multimedia Institute
 
Design Presentation
Design PresentationDesign Presentation
Design Presentation
 
Alice Phieu - UI/UX For Developers
Alice Phieu - UI/UX  For DevelopersAlice Phieu - UI/UX  For Developers
Alice Phieu - UI/UX For Developers
 
Life is not static - your designs shouldn't be either - No Code Conf 2019 Wor...
Life is not static - your designs shouldn't be either - No Code Conf 2019 Wor...Life is not static - your designs shouldn't be either - No Code Conf 2019 Wor...
Life is not static - your designs shouldn't be either - No Code Conf 2019 Wor...
 
Architecture Katas - How can we learn to create better architectures?
Architecture Katas - How can we learn to create better architectures?Architecture Katas - How can we learn to create better architectures?
Architecture Katas - How can we learn to create better architectures?
 
Planning For design
Planning For designPlanning For design
Planning For design
 
Become a better UX designer through code
Become a better UX designer through codeBecome a better UX designer through code
Become a better UX designer through code
 
Design Systems are Coming... Are you Ready?
Design Systems are Coming... Are you Ready?Design Systems are Coming... Are you Ready?
Design Systems are Coming... Are you Ready?
 

Recently uploaded

How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity PlanDatabarracks
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLScyllaDB
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxLoriGlavin3
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024Lonnie McRorey
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsNathaniel Shimoni
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr BaganFwdays
 
Ryan Mahoney - Will Artificial Intelligence Replace Real Estate Agents
Ryan Mahoney - Will Artificial Intelligence Replace Real Estate AgentsRyan Mahoney - Will Artificial Intelligence Replace Real Estate Agents
Ryan Mahoney - Will Artificial Intelligence Replace Real Estate AgentsRyan Mahoney
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxLoriGlavin3
 
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...AliaaTarek5
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsPixlogix Infotech
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024Lorenzo Miniero
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxLoriGlavin3
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenHervé Boutemy
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfLoriGlavin3
 
Visualising and forecasting stocks using Dash
Visualising and forecasting stocks using DashVisualising and forecasting stocks using Dash
Visualising and forecasting stocks using Dashnarutouzumaki53779
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek SchlawackFwdays
 
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxLoriGlavin3
 

Recently uploaded (20)

How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity Plan
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directions
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
 
Ryan Mahoney - Will Artificial Intelligence Replace Real Estate Agents
Ryan Mahoney - Will Artificial Intelligence Replace Real Estate AgentsRyan Mahoney - Will Artificial Intelligence Replace Real Estate Agents
Ryan Mahoney - Will Artificial Intelligence Replace Real Estate Agents
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
 
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdf
 
Visualising and forecasting stocks using Dash
Visualising and forecasting stocks using DashVisualising and forecasting stocks using Dash
Visualising and forecasting stocks using Dash
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
 
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
 

Engineering esthetics