![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/1873263/me-n-momma.jpg)
Manager, UX Design & Engineering
Trulia (Zillow)
False Dichotomy
presenting two alternatives when in reality more exist
if ("a".equals(someInput))
doStuffRelatedToA();
else
doStuffRelatedToB();
if ("a".equals(someInput))
doStuffRelatedToA();
else if
doStuffRelatedToB();
else
somethingDifferent();
Why Dichotomies?
Categorization
Understanding
-
Platonic Ideals
-
The Enlightenment
-
Dictionaries, encyclopedias
-
linnean system of classification
Women, Fire and Dangerous Things
“which has a category balan, that actually includes women, fire and dangerous things. … This is not simply a matter of categorization by common properties. Categorization is not a matter to be taken lightly.”
Art & Stem
"I'm an engineer,
I can't Draw"
"I'm an artist,
I can't code"
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/2638767/g_moonwash.gif)
Galileo
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/2638770/carolina-turtledove-john-james-audubon.jpg)
Audobon
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/2642191/1270298_1467558283492696_4228477778793387437_o.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/2642192/Screen_Shot_2016-05-20_at_1.08.30_PM.png)
i make art
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/2579343/Screen_Shot_2016-05-07_at_2.47.22_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/2579350/Screen_Shot_2016-05-07_at_2.57.08_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/2579335/art.jpg)
i code
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/2491538/CePeoKTUIAAc3M1.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/1881633/slack_for_ios_upload.jpg)
This Pen.
NOT
This is
A Talk about why Designers
Need to code
Printmaking
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/2643120/drasner_sarah_06.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/2643125/drawing010.jpg)
Exploration
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/2643094/drawing008.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/2643113/vatican.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/2633702/photo_courtesy_of_artisan_events_inc._10.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/2633710/the-field-museum.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/2633713/02_field.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/2643315/drasner_sarah_01.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/2643140/drasner_sarah_09.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/2643141/drasner_sarah_08.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/2638774/jars.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/2638803/sci-ill.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/2638723/2033921_orig.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/2638727/thoughtmorphology2d.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/2642318/Focus_stacking_Tachinid_fly.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/2642338/html.jpg)
2002
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/2642349/barnacles.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/2642370/barncles3.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/2642372/barnacles2.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/2642378/bus_chicago1.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/2642410/Screen_Shot_2016-05-20_at_1.46.33_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/2642411/Screen_Shot_2016-05-20_at_1.46.44_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/2642417/Screen_Shot_2016-05-20_at_1.47.15_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/2642418/Screen_Shot_2016-05-20_at_1.47.46_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/2642422/Screen_Shot_2016-05-20_at_1.48.07_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/2642427/Brushing-Teeth.jpg)
SLOW
Down
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/2642435/3565881_587.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/2642437/Biofeedback-067-2013-03-24.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/2642438/BiofeedbackPic.267150555_std.jpg)
Biofeedback
Productivity
Rest
Getting Things
DONE
Those Who Can, Do
Those Who Can't, Teach
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/2643302/8-cartoon-art-museum-day-for-2-reg-16-1-1894132-regular.jpg)
What Happens to US?
"I Can't..."
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/2642469/dem_pluto_2_.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/2642460/_3_key.jpg)
Art & Life
"Puttin' Food
On our Families"
"Pursuing A
Creative Career"
Success
Dollah Dollah
Bills Ya'll
Quality of
Life
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/2642271/timthumb.jpeg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/2642275/discover_paros.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/2642278/visite-de-paros---205.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/2642283/fantasy-paros02.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/2638892/215854_1027130196480_7002_n.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/2638894/10392233_1146690233687_242727_n.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/2638895/16057_1159403511511_7011888_n.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/2638897/226502_1059603183497_7634354_n.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/2643306/204243_1947242198705_7075824_o.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/2643286/27234_404357867418_8018239_n.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/2643290/74566_1651195037711_6485604_n.jpg)
Being Cool
Not Caring
Caring
Caring is the Most
Courageous Thing You Can Do
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/2642288/oia-santorini.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/2642291/stgeorge.jpg)
10
/Year
$
K
-
House
-
Car
-
Travel
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/2642474/SanFrancisco_0.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/2642489/gb1.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/2642491/jm.jpg)
$1.08Bn
This Pen.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/2643181/benchmarks.jpg)
New Years Resolution 2015:
Publish an Article in CSS-Tricks
I CAN'T...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/2643177/Screen_Shot_2016-05-20_at_8.06.34_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/2643180/Screen_Shot_2016-05-20_at_8.06.52_PM.png)
This Pen.
Philosophy
Meaningful
Playful
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/2633725/Screen_Shot_2016-04-28_at_6.50.15_PM.png)
I'm Making a Tragic Love Story.
This Pen.
Built with
Math
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/2639340/svg-quadratic2.png)
SVG!
This Pen.
This Pen.
-
Complex +
-
Interaction +
-
Animation +
-
Responsive
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/1462897/1-kells-preview-opt.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/1462929/kells-opt2.jpg)
This Pen
6KB!
This Pen.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/1843733/panda1.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/1843737/panda2.jpg)
Like legos.
This Pen.
//variable declaration for the global repeated animations
var gear = $("#gear1, #gear2, #gear3");
...
//animation that's repeated for all of the sections
function revolve() {
var tl = new TimelineMax();
tl.add("begin");
tl.to(gear, 4, {
transformOrigin: "50% 50%",
rotation: 360,
ease: Linear.easeNone
}, "begin");
...
return tl;
}
var repeat = new TimelineMax({repeat:-1});
repeat.add(revolve());
function paintPanda() {
var tl = new TimelineMax();
tl.to(lh, 1, {
scaleY: 1.2,
rotation: -5,
transformOrigin: "50% 0",
ease: Circ.easeOut
}, "paintIt+=1");
...
return tl;
}
//create a timeline but initially pause it so that we can control it via click
var triggerPaint = new TimelineMax({
paused: true
});
triggerPaint.add(paintPanda());
//this button kicks off the panda painting timeline
$("#button").on("click", function(e) {
e.preventDefault();
triggerPaint.restart();
});
...
Functional Animation
This Pen.
Representation
Organic and
Fluid
Mathematic
and Precise
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/1856780/images.jpeg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/1856783/Screen_Shot_2015-10-20_at_8.11.08_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/1857559/Screen_Shot_2015-10-21_at_2.06.20_AM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/1857561/Screen_Shot_2015-10-21_at_2.10.12_AM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/1845802/Screen-Shot-2015-10-18-at-11.03.54-AM.jpg)
More than one way of working
By Blake Bowen
function solve(data) {
var size = data.length;
var last = size - 4;
var path = "M" + [data[0], data[1]];
for (var i = 0; i < size - 2; i +=2) {
var x0 = i ? data[i - 2] : data[0];
var y0 = i ? data[i - 1] : data[1];
var x1 = data[i + 0];
var y1 = data[i + 1];
var x2 = data[i + 2];
var y2 = data[i + 3];
var x3 = i !== last ? data[i + 4] : x2;
var y3 = i !== last ? data[i + 5] : y2;
var cp1x = (-x0 + 6 * x1 + x2) / 6;
var cp1y = (-y0 + 6 * y1 + y2) / 6;
var cp2x = (x1 + 6 * x2 - x3) / 6;
var cp2y = (y1 + 6 * y2 - y3) / 6;
path += "C" + [cp1x, cp1y, cp2x, cp2y, x2, y2];
}
return path;
}
Catmull-Rom Spline
Article about history in computer science.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/1845790/Screen_Shot_2015-10-18_at_11.07.59_AM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/1845793/Screen_Shot_2015-10-18_at_11.10.09_AM.png)
var points = [
100,350,
200,150,
300,350,
400,120,
500,350,
600,180,
700,350
];
var points = [
100,350,
200,100,
300,350,
400,150,
500,350,
600,200,
700,350
];
This Pen.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/2643324/delirious.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/75854/images/2643402/Screen_Shot_2016-05-20_at_10.32.51_PM.png)
"I Can't..."
Perfectionism Kills.
"You Can't..."
Our deepest fear is not that we are inadequate.
Our deepest fear is that we are powerful beyond measure.
-Marianne Williamson
Thank you!
@sarah_edo
False Dichotomies
By sdrasner
False Dichotomies
- 5,420