designers & developers
TRANSCRIPT
DESIGNERS & DEVELOPERSANDRÉ LUÍS | LEIHLA PINHO
WHAT ARE WE DOING HERE?
c Randall Munroe (xkcd)
JD Lasica
ERIK SPIEKERMANN
THE PROCESS
DESIGN
DEVELOPMENT
JD Lasica
DESIGN
DEVELOPMENT
JD Lasica
DEVELOPERS
DESIGNERS
BETTER TOGETHER
+
=
DEVELOPERSACT I
Jason Scott
NOT ALL DEVELOPERS ARE CREATED EQUAL
Jason Scott
BACK END FRONT END DEVELOPER DEVELOPER
Ruby on Rails
MySQL (DATABASES)
Nginx (WEBSERVER)
HTML
CSS
JAVASCRIPTIN THE BROWSER
BACK END FRONT END DEVELOPER DEVELOPER
EXAMPLE
Ruby on Rails
MySQL (DATABASES)
Nginx (WEBSERVER)
HTML
CSS
JAVASCRIPTIN THE BROWSER
BACK END FRONT END DEVELOPER DEVELOPER
EXAMPLE
Ruby on Rails
MySQL (DATABASES)
Nginx (WEBSERVER)
HTML
CSS
JAVASCRIPTIN THE BROWSER
BACK END FRONT END DEVELOPER DEVELOPER
EXAMPLE
Ruby on Rails
MySQL (DATABASES)
Nginx (WEBSERVER)
HTML
CSS
JAVASCRIPTIN THE BROWSER
BACK END FRONT END DEVELOPER DEVELOPER
EXAMPLE
Ruby on Rails
MySQL (DATABASES)
Nginx (WEBSERVER)
HTML
CSS
JAVASCRIPTIN THE BROWSER
BACK END FRONT END DEVELOPER DEVELOPER
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?
DESIGNERSACT 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…
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
DESIGNING IN THE BROWSER
DECIDING IN THE BROWSERDAN MALL
• Animations for Form Validation Messages
• Use Flexbox or limit characters in description?
• Minor breakpoints on layout quirks.
DEVELOPMENTDESIGN
DESIGN & DEVELOPMENT
PRODUCT
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/