Branding With Sass @ Front Porch 2015

Db9adb5582199abccf93d3d8c84fd4b9?s=47 Travis Miller
October 20, 2015

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.

Db9adb5582199abccf93d3d8c84fd4b9?s=128

Travis Miller

October 20, 2015
Tweet

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?
  7. None
  8. None
  9. None
  10. Consistent Reliable Flexible Recognizable Timeless Good Brand Characteristics

  11. None
  12. BRANDING + THE WEB

  13. None
  14. None
  15. None
  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
  21. None
  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
  42. None
  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
  44. None
  45. THANK YOU