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

extra-smholder
extra-big

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

JuliaQuinn.com

$1.08Bn

This Pen.

Aegis.

 

Anagoge.

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