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"
Galileo
Audobon
i make art
i code
This Pen.
NOT
This is
A Talk about why Designers
Need to code
Printmaking
Exploration
2002
SLOW
Down
Biofeedback
Productivity
Rest
Getting Things
DONE
Those Who Can, Do
Those Who Can't, Teach
What Happens to US?
"I Can't..."
Art & Life
"Puttin' Food
On our Families"
"Pursuing A
Creative Career"
Success
Dollah Dollah
Bills Ya'll
Quality of
Life
Being Cool
Not Caring
Caring
Caring is the Most
Courageous Thing You Can Do
10
/Year
$
K
-
House
-
Car
-
Travel
$1.08Bn
This Pen.
New Years Resolution 2015:
Publish an Article in CSS-Tricks
I CAN'T...
This Pen.
Philosophy
Meaningful
Playful
I'm Making a Tragic Love Story.
This Pen.
Built with
Math
SVG!
This Pen.
This Pen.
-
Complex +
-
Interaction +
-
Animation +
-
Responsive
This Pen
6KB!
This Pen.
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
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.
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.
"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,563