YOU ARE DOWNLOADING DOCUMENT

Please tick the box to continue:

Transcript
Page 1: Adopting Sass

How designers & developers can work together for great justice

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

Adopting Sass

Page 2: Adopting Sass

Pleased to meet you!

@shodoshan

Page 3: Adopting Sass

What’s this all about?

45

Page 4: Adopting Sass

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.

Page 5: Adopting Sass

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?

Page 6: Adopting Sass

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/

Page 7: Adopting Sass

the real problem

IS YOU

Page 8: Adopting Sass

UX Design is not

ART

Page 9: Adopting Sass

UX Design is not

PERFECT

Page 10: Adopting Sass

UX Design is not

GRAPHIC DESIGN

Page 11: Adopting Sass

UX Design is not

ARBITRARY

Page 12: Adopting Sass

UX Design is not

FOR YOU

Page 13: Adopting Sass

UX Design is

COLLABORATIVE

Page 14: Adopting Sass

UX Design is

PURPOSEFUL

Page 15: Adopting Sass

UX Design is

HOLISTIC

Page 16: Adopting Sass

UX Design is

SELFLESS

Page 17: Adopting Sass

Developer || Designer

Page 18: Adopting Sass

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

Page 19: Adopting Sass
Page 20: Adopting Sass

Restructure your design library

• Think like code

• Deconstruct

• Super bonus: mixins & classes

Page 21: Adopting Sass

Take advantage of Sass color powers

Page 22: Adopting Sass

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

Page 23: Adopting Sass

Constructing a design element

Page 24: Adopting Sass

Constructing a design element

Page 25: Adopting Sass

Constructing a design element

Page 26: Adopting Sass

Constructing a design element

Page 27: Adopting Sass

Constructing a design element

Page 28: Adopting Sass

Constructing a design element

Page 29: Adopting Sass

NAMING

is hard, mkay?

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

Page 30: Adopting Sass

Naming is a collaboration

Page 31: Adopting Sass

Developer:Naming Docent

Page 32: Adopting Sass

Play theName Game

Page 33: Adopting Sass
Page 34: Adopting Sass

Losing theName Game

Page 35: Adopting Sass

Embrace

Graceful Degradation

Progressive Enhancement

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

Page 36: Adopting Sass

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

Page 37: Adopting Sass

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.

Page 38: Adopting Sass

!Arbitrary

Page 39: Adopting Sass

The Ultimate: Design in code

Page 40: Adopting Sass

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/

Page 41: Adopting Sass

Thank you!

@shodoshan