Branding With Sass @ Front Porch 2015

A company’s brand is an intangible yet priceless asset. Luckily with Sass we can make it tangible by defining and implementing brand elements in our projects. Branding with Sass keeps projects fresh and exciting and it adds continual value to your clients. From the initial design, to rebranding, and translating design consistency to different assets, this talk is about using brand development as a foundation for designing web interfaces and using Sass as a toolkit and resource for enhancing a company’s brand for the web and potentially everything else.

Transcript

1. travis miller BRANDING WITH SASS
2. Web Designer/Developer (Frontend/Backend) From Nassau, Bahamas Co-Founder of Starter Island / Theory Exchange (Coworking) Background in Advertising/Branding Intro
3. Geared towards developers who want to dive deeper into branding Not a new library or framework More reasons to use Sass if you haven’t started yet About This Talk
4. BRANDING
5. BRAND Typography Core Values Website Tone of Voice Social Color Messaging Icons Logo
6. “Brand is the set of expectations, memories, stories and relationships that taken together account for a consumer’s decisions to chose one product or service over another.” - Seth Godin What Is Brand?
10. Consistent Reliable Flexible Recognizable Timeless Good Brand Characteristics
12. BRANDING + THE WEB
16. BRANDING + Sass
17. A Great Tool for branding on the web Allows you to think of branding more modularly Tools + Techniques for achieving brand use cases Makes life easier in the long run Advantages of Sass + Branding
18. Variables Mapping Mixins/Extends Functions Sass Elements
19. Website • Brand elements would be created first • Developers take and implement in design Traditional Branding Process BRANDING DEVELOPMENT
20. Website • Branding Development of goes hand in hand (and feed off of each other) • Brings process even closer together (Especially for Digital Brands) What It Could Be DEVELOPMENT BRANDING
22. BRANDING FOUNDATIONS Characteristics Core Values Message
23. BRANDING FOUNDATIONS Characteristics Core Values Message
24. Community Nurturing Innovation Value Diversity Reliability Trust Teamwork Family Core Value Examples Competitiveness Entertainment Connection Authenticity Commitment Fun Performance Simplicity Comfort Health Education People Precision Safety Integrity Knowledge Quality Cleanliness Fairness Growth Customer focus Creativity Accountability Honesty Security Technology (Pick your own)
25. Community Nurturing Innovation Value Diversity Reliability Trust Teamwork Family Narrow Down Choices Competitiveness Entertainment Connection Authenticity Commitment Fun Performance Simplicity Comfort Health Education People Precision Safety Integrity Knowledge Quality Cleanliness Fairness Growth Customer focus Creativity Accountability Honesty Security Technology (Pick your own)
26. Community Nurturing Innovation Value Diversity Reliability Trust Teamwork Family Narrow Down Choices Competitiveness Entertainment Connection Authenticity Commitment Fun Performance Simplicity Comfort Health Education People Precision Safety Integrity Knowledge Quality Cleanliness Fairness Growth Customer focus Creativity Accountability Honesty Security Technology (Pick your own)
27. Trust Comfort Education Accountability Profile: Make Associations Colors Dark Blue Light Blue Green Red Typography Serif Sans Serif Sans Serif Serif Layout Clear Spacious Compact Overlay New Bank
28. Trust Comfort Education Accountability Profile: Pair To Web Elements Buttons Solid Color Hover to light Specific Button Highlight Forms Muted Color Muted/Soft Color Help Text Validation Headers Solid Color/Bold Light Color Highlight Solid New Bank
29. Trust Comfort Education Accountability Profile: Pair To Interactions Page Load Subtle Ease In Highlight New Information Hover/Focus None Ease In Accountability Something Notifications Description/Note Success Warning Error Message New Bank
30. PUTTING IT TOGETHER
31. Colors Typography Variables
32. Defining Elements
33. https://robots.thoughtbot.com/controlling-color-with-sass-color- functions
34. http://thesassway.com/advanced/modular-css-typography
35. https://gist.github.com/jonathantneal/d0460e5c2d5d7f9bc5e6 - by Jonathan Neal
36. Combinations: Specific Element Styling
37. http://sassmeister.com/gist/fb34cb1652c951ac3dbe
38. Combinations: Theming
39. http://sassmeister.com/gist/ee3a5dddb1356827901b
40. http://codepen.io/jackiebackwards/pen/Fwzvs/ - By Jackie Balzer
41. Brand extension is a marketing strategy in which a firm marketing a product with a well- developed image uses the same brand name in a different product category Sass makes it easy to expand on the brand you currently have (using @extend or @mixin) Each new touchpoint you create increases the brand equity Use Cases • Site Redesigns • Microsites • Additional Functionality (Plugins, Custom Pages, etc.) Extending The Brand
43. Implementation Think in Sass Make new tools and settings for brand on the web Look at existing brand guidelines for inspiration Always refer back to your brand profile to make accurate decisions Documentation Create your own libraries & partials (Use SMACSS) Continue to add on and develop your live style guides Reengineering Branding
45. THANK YOU