Top Banner

Click here to load reader

Adopting Sass

Feb 23, 2016




Adopting Sass. How designers & developers can work together for great justice. Photo credit: http:// /. Pleased to meet you!. @ shodoshan. What’s this all about?. 45. Developers :: Designers. - PowerPoint PPT Presentation

Adopting Sass

How designers & developers can work together for great justicePhoto credit:

Adopting SassThis talk is all about how to to be a superhero who plays nice with the rest of the justice league.1Pleased to meet [email protected]

Ive been blessed to work with amazing teams in companies small and large, but none better than the one Im currently on at, where I work side by side with the brilliant @chriseppstein2Whats this all about?45Developers and designers are two of a kind so why are there so many articles on the web about how we can get along? A quick web search finds 45 without even really trying.3Developers :: 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.Developers voice their frustrations with designers that they have worked with4Designers :: DevelopersI dont 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 cant get the developers to see that and invest the time to build it. I feel powerless. I cant convince my developer that hes 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 arent creativeDesigners arent logical or methodicalThe two mindsets are mutually exclusive

Images credit: things really are myths. Some of the best designers I know are developers, and many designers started out writing code.

None of these are actually the problem.6the real problemIS YOUUX Design is notARTUX Design is notPERFECTUX Design is notGRAPHIC DESIGNUX Design is notARBITRARYUX Design is notFOR YOUUX Design isCOLLABORATIVEUX Design isPURPOSEFULUX Design isHOLISTICUX Design isSELFLESSDeveloper || DesignerAs a designer, your goals are consistency, ease of use, and efficiency.Developers have the same goals.Designers can always be more technical, and developers can always be more designer-y.17UI Library /iriplsbl/

(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 Step 118

Restructure your design libraryThink like code


Super bonus: mixins & classes

Think about your designs in terms of the code it will take to write them.Separate your elements further into reusable parts20Take advantage of Sass color powers

Use variables and adjustments21These are great resourcesBrandon Mathis great HSL color picker:

Nathan Weizenbaums how-to guide:

Adobes Kuler:

Constructing a design element

Most of the time, you want to start with your content, though Im of the opinion that you can design with lipsum in certain circumstances.23Constructing a design element

You can do the following steps in any order that suits your own particular workflow.You apply your typography24Constructing a design element

Align everything to your grid and your vertical rhythm. This is actually my first step. I keep these as a hidden layer in my base template psd.25Constructing a design element

Add a container. Remember to think of the container as whatever separates this from other areas, and nothing more.Its possible for containers to be single straight lines, or to have no visible lines whatsoever.26Constructing a design element

Add a background. This can be any solid, gradient or pattern it doesnt matter. What matters is that its what goes BEHIND the content.27Constructing a design element

Foreground should be applied along with background. In our styleguide, this is automatic our sass is written using Sass @extend so that the background automatically sets the foreground.

In order to think of design the way developers think of code, you need to add a new skill to your repertoire: namingThink of it as a superpower. And like all superpowers28NAMINGis hard, mkay?Photo credit: 2

You need to start naming things for your intent, not descriptively.Naming has to change from being the burden of the sass developer to a partnership between the designer and the dev.

29Naming is a collaborationDesigners must pick or approve the name because only the designer knows their intent.Unfortunately, designers are not often good at naming things.Coders have to name everything they make, but designers dont. Naming is a skill that must be developed. You have to learn to explain your intuition and instinct.This is a useful skill for working with anyone developers, marketers, executives, end users.30Developer:Naming DocentDevelopers, your job is to help us develop a shared design vocabulary. Dont be afraid to ask questions & challenge the designers assumptions.Ask why 5 times. Sakichi Toyoda pioneered a theory that you have to ask why 5 times before you can get to the root of the problem.Establish trust by sitting down to chat immediately, and agree on ground rules of etiquette.31Play theName GameFind a name that describes the intent of a design element, not the appearance.Rule: dont be defensiveRule: a too-specific name is better than a too-generic oneRule: be willing to change the designRule: Keep it in the language of design, not application language32

Find a name that describes the intent of a design element, not the appearance.33Losing theName GameConsistency: Change the designWait: Dont name itGive up: Pick two names

Even though its hard, its worth playing, because of how much it facilitates communication. When I hand in a deliverable, I can describe it or annotate it with the actual classes the developer will use34

EmbraceGraceful DegradationProgressive Enhancement

Step 3The term progressive enhancement was introduced by Steve Champeon in 2003 but the concepts have been around for years, and came from a lot of sources.Just because you put a ton of work into a design doesnt mean that its holy scripture.Think carefully about whether those corners REALLY have to be round in IE7.35The art of critiquePoint out what you like and what you think is workingAsk questions about the parts you dont understandBe willing to give feedback without requiring it to be acted onBe respectfulStep 4

This is a formal process we learn in design classes, and that you have probably practiced with code reviews.36The art of accepting critiqueListen. Dont discount the critiquers opinion just because they arent a design major.Dont be defensive.If you cant come up with an air-tight reason why you did something, consider changing it.Dont be defensive.Designers can never be reminded of this too many times.37

!ArbitraryOur living styleguide is crucial to our process Jinas going to talk about this and you should listen.Have a reason for every new element you add to your styleguide, and know the reasons why none of your existing elements work.Become a philosopher and examine your intent.Save the Art for your side projects this is not about you expressing your creative juices, its about doing whats best for your users (first) and your team (second).38

The Ultimate: Design in code

Ultimately, you may be able to: Design in codeWrite mixins especially if you are living in a world of semantic markup, this is really useful.If you can make the mindset switch, youll have rock-solid designs and your devs will love you.This also provides proof of concept. You dont have to build backends, just the UI.

Consider a hybrid approach photoshop for single screens, and design complex interactions or workflows in code.At the very MINIMUM, prototype anything that is more than 2 screens or has conditionals.39

Putting a bow on it:Change the way you think: designers & developersAdjust your design library to imitate a Sass code libraryLearn to play the name game:name for designer intentInvolve developers in the design process early on

Photo credit: you can master all these things, youll release your inner design or development superhero.40

Thank you!


Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.