1. From Design to a
modern Style Guide
Branding Strategies for SharePoint and Add-ins

2. n8d.at/blog
@StfBauer
Information Architect
Vienna / Austria

3. Why branding?
IT’S JUST THE
INTRANET

4. Branding in organizations
•Word templates
•Business applications
•Internal newsletter
•Magazines for employees
•Cooperate Coffee Mug
•…

5. Display Templates? Full scaled branding?

7. BRAND
CONTENT
NOT THE
APPLICATION

8. Application
CONTENT

14. STATIC DYNAMIC

15. We’re not designing pages. We’re
designing systems of components.
– Stephan Hay

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

21. Great tools but …
not for SharePoint

22. 95%Unused
code
In case of SharePoint
GRID
BURGER
MENU

23. Responsive deliverables should look
a lot like fully-functioning Twitter
Bootstrap-style systems custom
tailored for your clients’ needs.
– Dave Rupert

27. Web Standards – gsa.gov

28. http://style.codeforamerica.org

29. http://www.starbucks.com/static/reference/styleguide/

30. https://www.lightningdesignsystem.com

35. Style Guide – The benefits
•State and breakpoint changes
•Useful for future designers, devs & others
•Design and Code consistency and
maintainability

36. The Benefits Of Maintaining
•Easier to test
•Better workflow
•Shared vocabulary
•Useful reference

38. http://zqsmm.qiniucdn.com/data/20110511083224/index.html

39. http://bradfrost.com/blog/post/atomic-web-design/

43. DEMO

44. https://github.com/StfBauer/SimpleStyle

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

46. FRAGEN?

47. Ich freue mich auf Ihr Feedback!

48. Silber-Partner: Veranstalter:
Vielen Dank!
Stefan Bauer