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

    Web Designer/Developer (Frontend/Backend) From Nassau, Bahamas Co-Founder of Starter Island

    / Theory Exchange (Coworking) Background in Advertising/Branding Intro
  2. 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
  3. 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?
  4. 7.
  5. 8.
  6. 9.
  7. 11.
  8. 13.
  9. 14.
  10. 15.
  11. 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
  12. 19.

    Website • Brand elements would be created first • Developers

    take and implement in design Traditional Branding Process BRANDING DEVELOPMENT
  13. 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
  14. 21.
  15. 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)
  16. 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)
  17. 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)
  18. 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
  19. 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
  20. 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
  21. 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
  22. 42.
  23. 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
  24. 44.
  25. 45.