Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

From Design to a modern Style Guide

740 views

Published on

Branding Strategies for SharePoint and Add-ins

Published in: Software
  • Be the first to comment

  • Be the first to like this

From Design to a modern Style Guide

  1. 1. From Design to a modern Style Guide Branding Strategies for SharePoint and Add-ins
  2. 2. n8d.at/blog @StfBauer Information Architect Vienna / Austria
  3. 3. Why branding? IT’S JUST THE INTRANET
  4. 4. Branding in organizations •Word templates •Business applications •Internal newsletter •Magazines for employees •Cooperate Coffee Mug •…
  5. 5. Display Templates? Full scaled branding?
  6. 6. BRAND CONTENT NOT THE APPLICATION
  7. 7. Application CONTENT
  8. 8. STATIC DYNAMIC
  9. 9. We’re not designing pages. We’re designing systems of components. – Stephan Hay
  10. 10. Are framework future-friendly? •How to add custom CSS? •Documentation of custom CSS? •New version of framework? •What do I need from the framework? •What if framework structure fundamentally changes? LESS à SASS
  11. 11. Great tools but … not for SharePoint
  12. 12. 95%Unused code In case of SharePoint GRID BURGER MENU
  13. 13. Responsive deliverables should look a lot like fully-functioning Twitter Bootstrap-style systems custom tailored for your clients’ needs. – Dave Rupert
  14. 14. Web Standards – gsa.gov
  15. 15. http://style.codeforamerica.org
  16. 16. http://www.starbucks.com/static/reference/styleguide/
  17. 17. https://www.lightningdesignsystem.com
  18. 18. Style Guide – The benefits •State and breakpoint changes •Useful for future designers, devs & others •Design and Code consistency and maintainability
  19. 19. The Benefits Of Maintaining •Easier to test •Better workflow •Shared vocabulary •Useful reference
  20. 20. http://zqsmm.qiniucdn.com/data/20110511083224/index.html
  21. 21. http://bradfrost.com/blog/post/atomic-web-design/
  22. 22. DEMO
  23. 23. https://github.com/StfBauer/SimpleStyle
  24. 24. Summary •No extra effort on documenting styles •Build HTML and Design first •Useful for future development •See the side effects of CSS changes easier •Use styles for SharePoint and Add-ins
  25. 25. FRAGEN?
  26. 26. Ich freue mich auf Ihr Feedback!
  27. 27. Silber-Partner: Veranstalter: Vielen Dank! Stefan Bauer

×