How designers & developers can work together for great justice Photo credit: http://www.alexrossart.com/ Adopting Sass
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