Designers & Developers

André Luís
André LuísFrontend Engineering Manager at GitLab
DESIGNERS &
DEVELOPERS
ANDRÉ LUÍS | LEIHLA PINHO
ANDRÉ LUÍS
@andr3
meet.andr3.net
Software Engineer @ Seedrs
LEIHLA PINHO
@leihla
twitter.com/leihla
Design Director @ Seedrs
WHAT ARE WE 

DOING HERE?
c Randall Munroe (xkcd)
Designers & Developers
JD Lasica
ERIK SPIEKERMANN
THE PROCESS
DESIGN
DEVELOPMENT
JD Lasica
DESIGN
DEVELOPMENT
JD Lasica
DEVELOPERS
DESIGNERS
BETTER TOGETHER
+
=
DEVELOPERS
ACT I
Jason Scott
NOT ALL
DEVELOPERS
ARE CREATED
EQUAL
Jason Scott
BACK END FRONT END
DEVELOPER D E V E LO P E R
Ruby on Rails
MySQL (DATABASES)
Nginx (WEBSERVER)
HTML
CSS
JAVASCRIPT
IN THE BROWSER
BACK END FRONT END
DEVELOPER D E V E LO P E R
EXAMPLE
Ruby on Rails
MySQL (DATABASES)
Nginx (WEBSERVER)
HTML
CSS
JAVASCRIPT
IN THE BROWSER
BACK END FRONT END
DEVELOPER D E V E LO P E R
EXAMPLE
Ruby on Rails
MySQL (DATABASES)
Nginx (WEBSERVER)
HTML
CSS
JAVASCRIPT
IN THE BROWSER
BACK END FRONT END
DEVELOPER D E V E LO P E R
EXAMPLE
Ruby on Rails
MySQL (DATABASES)
Nginx (WEBSERVER)
HTML
CSS
JAVASCRIPT
IN THE BROWSER
BACK END FRONT END
DEVELOPER D E V E LO P E R
EXAMPLE
Ruby on Rails
MySQL (DATABASES)
Nginx (WEBSERVER)
HTML
CSS
JAVASCRIPT
IN THE BROWSER
BACK END FRONT END
DEVELOPER D E V E LO P E R
EXAMPLE
THE OLD DAYS…
barkbud
“WE’RE GONNA DO THIS!”
© 2015 Disney/Lucasfilms
NOWADAYS…
Wireframes and mockups
are orientations — never the
full puzzle.
Developers will find holes that
need to be filled. How will they
be filled?
DESIGNERS
ACT II
KNOW YOUR
MEDIUM
brad_frost
• Should designers code?
• Understand the limitations
• Explore capabilities
brad_frost
DESIGN THE
INVISIBLE
• Design for the ugly
• Design the edge cases
• Explain flows & interactions
SCOTT HURFF
AWKWARD UI
© Scott Hurff / Twitter
SCOTT HURFF
Awkward UI is a missing loading
indicator. It's forgetting to tell your
customer where something went
wrong… It's a graph that looks weird
with only a few data points.
© Scott Hurff / Twitter
THE UI
STACK
Ideal State
Empty State
Error State
Partial State
Loading State
© Scott Hurff / Twitter
BETTER
TOGETHER
ACT III
LET’S TALK
“HELP ME UNDERSTAND”
Help me understand why

that’s a problem for you?
You see… high density screens

need bigger images, so we can’t
use just one image. We need multiple
sizes (…)
Oh! Ok…
Use an app
that allows
notes and
feedback.
invisionapp.com
SHARED
VOCABULARY
• Define your own language
• Design a system
• Build a common styleguide
0.5rem
1rem
1.5rem
2.5rem
extra-small
small
medium
large
“Large margin after that box.”
@include after-margin(large);
DELIVERABLES
LOW-FIDELITY
WIREFRAMES
HI-FIDELITY
MOCKUPS
INTERACTIVE
PROTOTYPE
TIME
SPENT
FIDELITY
JOHN GRUBER
linkletter
THE AUTEUR
THEORY OF DESIGN
linkletter
Quality of any creative collaborative
endeavour, approaches the level of
taste of who has control.
JOHN GRUBER
linkletter
RESULT
TASTE
linkletter
RESULT
TASTE
CO-OWNERSHIP
Designers & Developers
DESIGNING IN THE BROWSER
DECIDING IN THE BROWSER
DAN MALL
• Animations for Form
Validation Messages
• Use Flexbox or limit
characters in description?
• Minor breakpoints on
layout quirks.
DEVELOPMENTDESIGN
DESIGN & DEVELOPMENT
PRODUCT
THANK YOU
Leihla Pinho
André Luís
me@andr3.net
leihla@gmail.com
C bnaLICENSED UNDER
PHOTOS REUSED UNDER
https://www.flickr.com/photos/barkbud/5200856828/
C
https://www.flickr.com/photos/jdlasica/10723373716
https://www.flickr.com/photos/zeldman/16553808072
https://www.flickr.com/photos/54568729@N00/9636183501
https://www.flickr.com/photos/brad_frost/10413043603/
https://www.flickr.com/photos/linkletter/15129966789/
1 of 50

Recommended

Prototyping w/HTML5 and CSS3 by
Prototyping w/HTML5 and CSS3Prototyping w/HTML5 and CSS3
Prototyping w/HTML5 and CSS3Todd Zaki Warfel
5.1K views51 slides
Progressive Prototyping w/HTML5, CSS3 and jQuery by
Progressive Prototyping w/HTML5, CSS3 and jQueryProgressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQueryTodd Zaki Warfel
2.3K views44 slides
Html5 ux london by
Html5 ux londonHtml5 ux london
Html5 ux londonTodd Zaki Warfel
3.5K views44 slides
Rapid and Responsive - UX to Prototype with Bootstrap by
Rapid and Responsive - UX to Prototype with BootstrapRapid and Responsive - UX to Prototype with Bootstrap
Rapid and Responsive - UX to Prototype with BootstrapJosh Jeffryes
9.5K views39 slides
Web Standards And Protocols by
Web Standards And ProtocolsWeb Standards And Protocols
Web Standards And ProtocolsSteven Cahill
5.6K views54 slides
Advanced Web Scraping or How To Make Internet Your Database #seoplus2018 by
Advanced Web Scraping or How To Make Internet Your Database #seoplus2018Advanced Web Scraping or How To Make Internet Your Database #seoplus2018
Advanced Web Scraping or How To Make Internet Your Database #seoplus2018Esteve Castells
2.3K views167 slides

More Related Content

What's hot

Making your site printable: WordCamp Buffalo 2013 by
Making your site printable: WordCamp Buffalo 2013Making your site printable: WordCamp Buffalo 2013
Making your site printable: WordCamp Buffalo 2013Adrian Roselli
4.8K views69 slides
Object Oriented CSS by
Object Oriented CSSObject Oriented CSS
Object Oriented CSSNicole Sullivan
283.2K views64 slides
@wcmtl by
@wcmtl@wcmtl
@wcmtlPtah Dunbar
1.2K views50 slides
CSS3 - is everything we used to do wrong? by
CSS3 - is everything we used to do wrong? CSS3 - is everything we used to do wrong?
CSS3 - is everything we used to do wrong? Russ Weakley
58.9K views167 slides
Even faster web sites by
Even faster web sitesEven faster web sites
Even faster web sitesFelipe Lavín
1.2K views94 slides
Even faster web sites presentation 3 by
Even faster web sites presentation 3Even faster web sites presentation 3
Even faster web sites presentation 3Felipe Lavín
1.1K views47 slides

What's hot(13)

Making your site printable: WordCamp Buffalo 2013 by Adrian Roselli
Making your site printable: WordCamp Buffalo 2013Making your site printable: WordCamp Buffalo 2013
Making your site printable: WordCamp Buffalo 2013
Adrian Roselli4.8K views
CSS3 - is everything we used to do wrong? by Russ Weakley
CSS3 - is everything we used to do wrong? CSS3 - is everything we used to do wrong?
CSS3 - is everything we used to do wrong?
Russ Weakley58.9K views
Even faster web sites by Felipe Lavín
Even faster web sitesEven faster web sites
Even faster web sites
Felipe Lavín1.2K views
Even faster web sites presentation 3 by Felipe Lavín
Even faster web sites presentation 3Even faster web sites presentation 3
Even faster web sites presentation 3
Felipe Lavín1.1K views
CSS pattern libraries by Russ Weakley
CSS pattern librariesCSS pattern libraries
CSS pattern libraries
Russ Weakley83.8K views
Real World Web Standards by gleddy
Real World Web StandardsReal World Web Standards
Real World Web Standards
gleddy18K views
A Primer on HTML 5 - By Nick Armstrong by Nick Armstrong
A Primer on HTML 5 - By Nick ArmstrongA Primer on HTML 5 - By Nick Armstrong
A Primer on HTML 5 - By Nick Armstrong
Nick Armstrong5.1K views
CSS3: Are you experienced? by Denise Jacobs
CSS3: Are you experienced?CSS3: Are you experienced?
CSS3: Are you experienced?
Denise Jacobs18.4K views
Foundation of Web Application Developmnet - XHTML by Vashira Ravipanich
Foundation of Web Application Developmnet - XHTMLFoundation of Web Application Developmnet - XHTML
Foundation of Web Application Developmnet - XHTML
Vashira Ravipanich7.7K views
CSS - OOCSS, SMACSS and more by Russ Weakley
CSS - OOCSS, SMACSS and moreCSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and more
Russ Weakley113.7K views

Viewers also liked

Dr. © ou como eu deixei de me preocupar e passei a adorar licenças permissivas by
Dr. © ou como eu deixei de me preocupar e passei a adorar licenças permissivasDr. © ou como eu deixei de me preocupar e passei a adorar licenças permissivas
Dr. © ou como eu deixei de me preocupar e passei a adorar licenças permissivasAndré Luís
1.7K views80 slides
Responsive Web Design: Uma História das Trincheiras (sapo.pt) by
Responsive Web Design: Uma História das Trincheiras (sapo.pt)Responsive Web Design: Uma História das Trincheiras (sapo.pt)
Responsive Web Design: Uma História das Trincheiras (sapo.pt)André Luís
2.9K views142 slides
We're not designing posters, here! by
We're not designing posters, here!We're not designing posters, here!
We're not designing posters, here!André Luís
1.9K views88 slides
Microformatos - 2009 - Juntando as Peças do Puzzle by
Microformatos - 2009 - Juntando as Peças do PuzzleMicroformatos - 2009 - Juntando as Peças do Puzzle
Microformatos - 2009 - Juntando as Peças do PuzzleAndré Luís
7.3K views96 slides
HTML5 - A nova era da Web by
HTML5 - A nova era da WebHTML5 - A nova era da Web
HTML5 - A nova era da WebAndré Luís
3.3K views175 slides
Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT by
Lições Práticas de Semântica com HTML5 — 2º evento HTML5PTLições Práticas de Semântica com HTML5 — 2º evento HTML5PT
Lições Práticas de Semântica com HTML5 — 2º evento HTML5PTAndré Luís
1.9K views98 slides

Viewers also liked(6)

Dr. © ou como eu deixei de me preocupar e passei a adorar licenças permissivas by André Luís
Dr. © ou como eu deixei de me preocupar e passei a adorar licenças permissivasDr. © ou como eu deixei de me preocupar e passei a adorar licenças permissivas
Dr. © ou como eu deixei de me preocupar e passei a adorar licenças permissivas
André Luís1.7K views
Responsive Web Design: Uma História das Trincheiras (sapo.pt) by André Luís
Responsive Web Design: Uma História das Trincheiras (sapo.pt)Responsive Web Design: Uma História das Trincheiras (sapo.pt)
Responsive Web Design: Uma História das Trincheiras (sapo.pt)
André Luís2.9K views
We're not designing posters, here! by André Luís
We're not designing posters, here!We're not designing posters, here!
We're not designing posters, here!
André Luís1.9K views
Microformatos - 2009 - Juntando as Peças do Puzzle by André Luís
Microformatos - 2009 - Juntando as Peças do PuzzleMicroformatos - 2009 - Juntando as Peças do Puzzle
Microformatos - 2009 - Juntando as Peças do Puzzle
André Luís7.3K views
HTML5 - A nova era da Web by André Luís
HTML5 - A nova era da WebHTML5 - A nova era da Web
HTML5 - A nova era da Web
André Luís3.3K views
Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT by André Luís
Lições Práticas de Semântica com HTML5 — 2º evento HTML5PTLições Práticas de Semântica com HTML5 — 2º evento HTML5PT
Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT
André Luís1.9K views

Similar to Designers & Developers

Quo vadis, JavaScript? Devday.pl keynote by
Quo vadis, JavaScript? Devday.pl keynoteQuo vadis, JavaScript? Devday.pl keynote
Quo vadis, JavaScript? Devday.pl keynoteChristian Heilmann
4.1K views81 slides
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp by
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code CampDoing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code CampChris Love
1.9K views43 slides
Ruby On Rails Presentation by
Ruby On Rails PresentationRuby On Rails Presentation
Ruby On Rails PresentationPaul Pajo
1.5K views45 slides
There is something about JavaScript - Choose Forum 2014 by
There is something about JavaScript - Choose Forum 2014There is something about JavaScript - Choose Forum 2014
There is something about JavaScript - Choose Forum 2014jbandi
2K views52 slides
Fronteers Workshop: Rabid Prototyping by
Fronteers Workshop: Rabid PrototypingFronteers Workshop: Rabid Prototyping
Fronteers Workshop: Rabid PrototypingStephen Hay
3K views44 slides
Let’s learn how to use JavaScript responsibly and stay up-to-date. by
Let’s learn how to use JavaScript responsibly and stay up-to-date. Let’s learn how to use JavaScript responsibly and stay up-to-date.
Let’s learn how to use JavaScript responsibly and stay up-to-date. Christian Heilmann
4.5K views61 slides

Similar to Designers & Developers(20)

Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp by Chris Love
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code CampDoing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Chris Love1.9K views
Ruby On Rails Presentation by Paul Pajo
Ruby On Rails PresentationRuby On Rails Presentation
Ruby On Rails Presentation
Paul Pajo1.5K views
There is something about JavaScript - Choose Forum 2014 by jbandi
There is something about JavaScript - Choose Forum 2014There is something about JavaScript - Choose Forum 2014
There is something about JavaScript - Choose Forum 2014
jbandi2K views
Fronteers Workshop: Rabid Prototyping by Stephen Hay
Fronteers Workshop: Rabid PrototypingFronteers Workshop: Rabid Prototyping
Fronteers Workshop: Rabid Prototyping
Stephen Hay3K views
Let’s learn how to use JavaScript responsibly and stay up-to-date. by Christian Heilmann
Let’s learn how to use JavaScript responsibly and stay up-to-date. Let’s learn how to use JavaScript responsibly and stay up-to-date.
Let’s learn how to use JavaScript responsibly and stay up-to-date.
Christian Heilmann4.5K views
New Rules of The Responsive Web by Matt Carver
New Rules of The Responsive WebNew Rules of The Responsive Web
New Rules of The Responsive Web
Matt Carver9.5K views
SharePoint Conference North America - Converting your JavaScript to SPFX by Mark Rackley
SharePoint Conference North America - Converting your JavaScript to SPFXSharePoint Conference North America - Converting your JavaScript to SPFX
SharePoint Conference North America - Converting your JavaScript to SPFX
Mark Rackley310 views
PHP is the king, nodejs is the prince and Python is the fool - Alessandro Cin... by Codemotion
PHP is the king, nodejs is the prince and Python is the fool - Alessandro Cin...PHP is the king, nodejs is the prince and Python is the fool - Alessandro Cin...
PHP is the king, nodejs is the prince and Python is the fool - Alessandro Cin...
Codemotion382 views
Overboard.js - where are we going with with jsconfasia / devfestasia by Christian Heilmann
Overboard.js - where are we going with with jsconfasia / devfestasiaOverboard.js - where are we going with with jsconfasia / devfestasia
Overboard.js - where are we going with with jsconfasia / devfestasia
Christian Heilmann5.4K views
What Front-End Developers (FED's) Need to Know to Be the Modern Day Superhero by Joshua Northcott
What Front-End Developers (FED's) Need to Know to Be the Modern Day SuperheroWhat Front-End Developers (FED's) Need to Know to Be the Modern Day Superhero
What Front-End Developers (FED's) Need to Know to Be the Modern Day Superhero
Joshua Northcott1.2K views
IronRuby: Ruby on the .NET Platform by Andre John Cruz
IronRuby: Ruby on the .NET PlatformIronRuby: Ruby on the .NET Platform
IronRuby: Ruby on the .NET Platform
Andre John Cruz497 views
Java EE 7 from an HTML5 Perspective, JavaLand 2015 by Edward Burns
Java EE 7 from an HTML5 Perspective, JavaLand 2015Java EE 7 from an HTML5 Perspective, JavaLand 2015
Java EE 7 from an HTML5 Perspective, JavaLand 2015
Edward Burns3.4K views
Responsive Design Workflow (Breaking Development Conference 2012 Orlando) by Stephen Hay
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Stephen Hay42.2K views
Day One Keynote by goodfriday
Day One KeynoteDay One Keynote
Day One Keynote
goodfriday425 views
From dev to ops and beyond - getting it done by Edorian
From dev to ops and beyond - getting it doneFrom dev to ops and beyond - getting it done
From dev to ops and beyond - getting it done
Edorian6.5K views
Web2013 by Sean Yo
Web2013Web2013
Web2013
Sean Yo853 views
Stocktwits & Responsive Web Design, social network meets flexible framework by John Strott
Stocktwits & Responsive Web Design, social network meets flexible frameworkStocktwits & Responsive Web Design, social network meets flexible framework
Stocktwits & Responsive Web Design, social network meets flexible framework
John Strott6.5K views
Become a webdeveloper - AKAICamp Beginner #1 by Jacek Tomaszewski
Become a webdeveloper - AKAICamp Beginner #1Become a webdeveloper - AKAICamp Beginner #1
Become a webdeveloper - AKAICamp Beginner #1
Jacek Tomaszewski867 views

Recently uploaded

JAWARK Inside Company Profile 2024 by
JAWARK Inside Company Profile 2024JAWARK Inside Company Profile 2024
JAWARK Inside Company Profile 2024mostafareda1994
7 views45 slides
Cocktail Merchandise by
Cocktail MerchandiseCocktail Merchandise
Cocktail Merchandisenyhapedraza
7 views20 slides
The-Craft Menu by
The-Craft MenuThe-Craft Menu
The-Craft Menunyhapedraza
16 views12 slides
Business X Design - People, Planet & Product by
Business X Design - People, Planet & ProductBusiness X Design - People, Planet & Product
Business X Design - People, Planet & ProductCyber-Duck
19 views42 slides
Anti -Parkinsonian Drugs-Medicinal Chemistry by
Anti -Parkinsonian Drugs-Medicinal ChemistryAnti -Parkinsonian Drugs-Medicinal Chemistry
Anti -Parkinsonian Drugs-Medicinal ChemistryNarminHamaaminHussen
20 views36 slides
Antifungal agents-Medicinal Chemistry by
Antifungal agents-Medicinal Chemistry Antifungal agents-Medicinal Chemistry
Antifungal agents-Medicinal Chemistry NarminHamaaminHussen
13 views27 slides

Recently uploaded(20)

Business X Design - People, Planet & Product by Cyber-Duck
Business X Design - People, Planet & ProductBusiness X Design - People, Planet & Product
Business X Design - People, Planet & Product
Cyber-Duck19 views
Free World aids day Template from Best presentation design agency by slideceotemplates
Free World aids day Template from Best presentation design agencyFree World aids day Template from Best presentation design agency
Free World aids day Template from Best presentation design agency
The Report is Dead, Long Live the Report ! Communicating Usability Research F... by Centralis
The Report is Dead, Long Live the Report ! Communicating Usability Research F...The Report is Dead, Long Live the Report ! Communicating Usability Research F...
The Report is Dead, Long Live the Report ! Communicating Usability Research F...
Centralis6 views
217 Drive - All on upper.pptx by vidstor282
217 Drive - All on upper.pptx217 Drive - All on upper.pptx
217 Drive - All on upper.pptx
vidstor28217 views
StratPlanning Manual 220713.pdf by Lakewalk Media
StratPlanning Manual 220713.pdfStratPlanning Manual 220713.pdf
StratPlanning Manual 220713.pdf
Lakewalk Media19 views
Using Experiential Design to Understand the Future of AI & Immersive Storytel... by Kent Bye
Using Experiential Design to Understand the Future of AI & Immersive Storytel...Using Experiential Design to Understand the Future of AI & Immersive Storytel...
Using Experiential Design to Understand the Future of AI & Immersive Storytel...
Kent Bye13 views
IEC 600068-2-39 ENVIROMENT TESTING COMBINED TEMPERATURE LOW HUMIDTY.pdf by NirmalanGanapathy1
IEC 600068-2-39 ENVIROMENT TESTING COMBINED TEMPERATURE LOW HUMIDTY.pdfIEC 600068-2-39 ENVIROMENT TESTING COMBINED TEMPERATURE LOW HUMIDTY.pdf
IEC 600068-2-39 ENVIROMENT TESTING COMBINED TEMPERATURE LOW HUMIDTY.pdf

Designers & Developers