How designers & developers can work together for great justice

Photo credit: http://www.alexrossart.com/

Adopting Sass

Pleased to meet you!

@shodoshan

What’s this all about?

45

Developers :: DesignersI would ask a lot of questions about why things were they way they were, because I wanted to understand the design. But they would get defensive, and think I was challenging them. Sometimes “Because it looks nice” was the only answer I could get.

They didn't think about the site as a whole usually. so this forced me to write less efficient css because I had to scope everything.

The last designer I worked with was very print media focused, so many times the PSDs we're created in a way that was difficult to deconstruct in to web friendly pieces. The work was great, but I had a huge overhead to make it usable to me.

Designers :: DevelopersI don’t know why I spend all this time and effort getting every pixel perfect, when what gets built is nothing like what I designed.This interaction is the

best one for the user, but I can’t get the developers to see that and invest the time to build it. I feel powerless. I can’t convince my

developer that he’s not the user.

I worked for weeks to get that styleguide written, and it even has code snippets. So why do I feel like the developers just throw my designs away and do their own thing?

The Myths

Developers aren’t creative

Designers aren’t logical or methodical

The two mindsets are mutually exclusive

Images credit: http://dsc.discovery.com/tv/mythbusters/

the real problem

IS YOU

UX Design is not

ART

UX Design is not

PERFECT

UX Design is not

GRAPHIC DESIGN

UX Design is not

ARBITRARY

UX Design is not

FOR YOU

UX Design is

COLLABORATIVE

UX Design is

PURPOSEFUL

UX Design is

HOLISTIC

UX Design is

SELFLESS

Developer || Designer

UI Library /iriˈplāsəbəl/

(noun) Regardless of format (omnigraffle, photoshop, illustrator, visio, legos), a set of patterns and styles used to speed up the design process. See also: efficiency, consistency, professionalism, laziness

Restructure your design library

• Think like code

• Deconstruct

• Super bonus: mixins & classes

Take advantage of Sass color powers

These are great resources

• Brandon Mathis’ great HSL color picker:http://hslpicker.com

• Nathan Weizenbaum’s how-to guide:http://nex-3.com/posts/89-powerful-color-manipulation-with-sass

• Adobe’s Kuler:http://kuler.adobe.com

Constructing a design element

Constructing a design element

Constructing a design element

Constructing a design element

Constructing a design element

Constructing a design element

NAMING

is hard, mkay?

Photo credit: http://www.southparkstudios.com/

Naming is a collaboration

Developer:Naming Docent

Play theName Game

Losing theName Game

Embrace

Graceful Degradation

Progressive Enhancement

http://www.sitepoint.com/progressive-enhancement-graceful-degradation-basics/

The art of critique

1. Point out what you like and what you think is working

2. Ask questions about the parts you don’t understand

3. Be willing to give feedback without requiring it to be acted on

4. Be respectful

The art of accepting critique

1. Listen. Don’t discount the critiquer’s opinion just because they aren’t a design major.

2. Don’t be defensive.3. If you can’t come up with an air-tight

reason why you did something, consider changing it.

4. Don’t be defensive.

!Arbitrary

The Ultimate: Design in code

Putting a bow on it:

• Change the way you think: designers & developers

• Adjust your design library to imitate a Sass code library

• Learn to play the name game:name for designer intent

• Involve developers in the design process early on

Photo credit: http://collider.com/legendary-pictures-legendary-comics/58290/

Thank you!

@shodoshan