1 / 41

Adopting Sass

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

elmo
Download Presentation

Adopting Sass

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Adopting Sass How designers & developers can work together for great justice Photo credit: http://www.alexrossart.com/

  2. Pleased to meet you! @shodoshan

  3. What’s this all about? 45

  4. Developers :: Designers I 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.

  5. Designers :: Developers I 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?

  6. 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/

  7. the real problem IS YOU

  8. UX Design is not ART

  9. UX Design is not PERFECT

  10. UX Design is not GRAPHIC DESIGN

  11. UX Design is not ARBITRARY

  12. UX Design is not FOR YOU

  13. UX Design is COLLABORATIVE

  14. UX Design is PURPOSEFUL

  15. UX Design is HOLISTIC

  16. UX Design is SELFLESS

  17. Developer || Designer

  18. 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

  19. Restructure your design library • Think like code • Deconstruct • Super bonus: mixins & classes

  20. Take advantage of Sass color powers

  21. 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

  22. Constructing a design element

  23. Constructing a design element

  24. Constructing a design element

  25. Constructing a design element

  26. Constructing a design element

  27. Constructing a design element

  28. NAMING is hard, mkay? Photo credit: http://www.southparkstudios.com/

  29. Naming is a collaboration

  30. Developer: Naming Docent

  31. Play the Name Game

  32. Losing the Name Game

  33. Embrace Graceful Degradation Progressive Enhancement http://www.sitepoint.com/progressive-enhancement-graceful-degradation-basics/

  34. The art of critique • Point out what you like and what you think is working • Ask questions about the parts you don’t understand • Be willing to give feedback without requiring it to be acted on • Be respectful

  35. The art of accepting critique • Listen. Don’t discount the critiquer’s opinion just because they aren’t a design major. • Don’t be defensive. • If you can’t come up with an air-tight reason why you did something, consider changing it. • Don’t be defensive.

  36. !Arbitrary

  37. The Ultimate: Design in code

  38. 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/

  39. Thank you! @shodoshan

More Related