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
   

   View Slide

2. Web Designer/Developer (Frontend/Backend)
   From Nassau, Bahamas
   Co-Founder of Starter Island / Theory Exchange (Coworking)
   Background in Advertising/Branding
   Intro
   

   View Slide

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
   

   View Slide

4. BRANDING
   

   View Slide

5. BRAND
   Typography
   Core Values
   Website Tone of Voice
   Social
   Color
   Messaging
   Icons
   Logo
   

   View Slide

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?
   

   View Slide

7. View Slide

8. View Slide

9. View Slide

10. Consistent
    Reliable
    Flexible
    Recognizable
    Timeless
    Good Brand Characteristics
    

    View Slide

11. View Slide

12. BRANDING + THE WEB
    

    View Slide

13. View Slide

14. View Slide

15. View Slide

16. BRANDING + Sass
    

    View Slide

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
    

    View Slide

18. Variables
    Mapping
    Mixins/Extends
    Functions
    Sass Elements
    

    View Slide

19. Website
    ● Brand elements would be created first
    ● Developers take and implement in design
    Traditional Branding Process
    BRANDING DEVELOPMENT
    

    View Slide

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
    

    View Slide

21. View Slide

22. BRANDING FOUNDATIONS
    Characteristics
    Core Values Message
    

    View Slide

23. BRANDING FOUNDATIONS
    Characteristics
    Core Values Message
    

    View Slide

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)
    

    View Slide

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)
    

    View Slide

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)
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

30. PUTTING IT TOGETHER
    

    View Slide

31. Colors
    Typography
    Variables
    

    View Slide

32. Defining Elements
    

    View Slide

33. https://robots.thoughtbot.com/controlling-color-with-sass-color-
    functions
    

    View Slide

34. http://thesassway.com/advanced/modular-css-typography
    

    View Slide

35. https://gist.github.com/jonathantneal/d0460e5c2d5d7f9bc5e6 - by Jonathan Neal
    

    View Slide

36. Combinations: Specific Element Styling
    

    View Slide

37. http://sassmeister.com/gist/fb34cb1652c951ac3dbe
    

    View Slide

38. Combinations: Theming
    

    View Slide

39. http://sassmeister.com/gist/ee3a5dddb1356827901b
    

    View Slide

40. http://codepen.io/jackiebackwards/pen/Fwzvs/ - By Jackie Balzer
    

    View Slide

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
    

    View Slide

42. View Slide

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
    

    View Slide

44. View Slide

45. THANK YOU
    

    View Slide