1.
DESIGNERS &
DEVELOPERS
ANDRÉ LUÍS | LEIHLA PINHO

2.
ANDRÉ LUÍS
@andr3
meet.andr3.net
Software Engineer @ Seedrs

3.
LEIHLA PINHO
@leihla
twitter.com/leihla
Design Director @ Seedrs

4.
WHAT ARE WE
DOING HERE?
c Randall Munroe (xkcd)

5.
JD Lasica
ERIK SPIEKERMANN
THE PROCESS

6.
DESIGN
DEVELOPMENT
JD Lasica

7.
DESIGN
DEVELOPMENT
JD Lasica

8.
DEVELOPERS
DESIGNERS
BETTER TOGETHER
+
=

9.
DEVELOPERS
ACT I
Jason Scott

10.
NOT ALL
DEVELOPERS
ARE CREATED
EQUAL
Jason Scott

11.
BACK END FRONT END
DEVELOPER D E V E LO P E R

12.
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

13.
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

14.
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

15.
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

16.
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

17.
THE OLD DAYS…
barkbud

18.
“WE’RE GONNA DO THIS!”
© 2015 Disney/Lucasfilms
NOWADAYS…

19.
Wireframes and mockups
are orientations — never the
full puzzle.
Developers will find holes that
need to be filled. How will they
be filled?

20.
DESIGNERS
ACT II

21.
KNOW YOUR
MEDIUM
brad_frost

22.
• Should designers code?
• Understand the limitations
• Explore capabilities
brad_frost

23.
DESIGN THE
INVISIBLE

24.
• Design for the ugly
• Design the edge cases
• Explain flows & interactions

25.
SCOTT HURFF
AWKWARD UI
© Scott Hurff / Twitter

26.
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

27.
THE UI
STACK
Ideal State
Empty State
Error State
Partial State
Loading State
© Scott Hurff / Twitter

28.
BETTER
TOGETHER
ACT III

29.
LET’S TALK

30.
“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…

31.
Use an app
that allows
notes and
feedback.
invisionapp.com

32.
SHARED
VOCABULARY

33.
• Define your own language
• Design a system
• Build a common styleguide

34.
0.5rem
1rem
1.5rem
2.5rem
extra-small
small
medium
large
“Large margin after that box.”
@include after-margin(large);

35.
DELIVERABLES

36.
LOW-FIDELITY
WIREFRAMES
HI-FIDELITY
MOCKUPS
INTERACTIVE
PROTOTYPE
TIME
SPENT
FIDELITY

37.
JOHN GRUBER
linkletter
THE AUTEUR
THEORY OF DESIGN

38.
linkletter
Quality of any creative collaborative
endeavour, approaches the level of
taste of who has control.
JOHN GRUBER

39.
linkletter
RESULT
TASTE

40.
linkletter
RESULT
TASTE

41.
CO-OWNERSHIP

42.
DESIGNING IN THE BROWSER

43.
DECIDING IN THE BROWSER
DAN MALL

44.
• Animations for Form
Validation Messages
• Use Flexbox or limit
characters in description?
• Minor breakpoints on
layout quirks.

45.
DEVELOPMENTDESIGN

46.
DESIGN & DEVELOPMENT
PRODUCT

47.
THANK YOU
Leihla Pinho
André Luís
me@andr3.net
leihla@gmail.com
C bnaLICENSED UNDER

48.
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/