From Design to a modern Style Guide

Branding Strategies for SharePoint and Add-ins

n8d.at/blog@StfBauer

Information ArchitectVienna / Austria

Why branding?IT’S JUST THE INTRANET

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

Display Templates? Full scaled branding?

BRAND CONTENTNOT THE

APPLICATION

Application

CONTENT

STATIC DYNAMIC

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

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

Great tools but …not for SharePoint

95%Unused code

In case of SharePoint

GRID

BURGER MENU

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

WebStandards– gsa.gov

http://style.codeforamerica.org

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

https://www.lightningdesignsystem.com

Style Guide – The benefits

•State and breakpoint changes•Useful for future designers, devs & others

•Design and Code consistency and maintainability

The Benefits Of Maintaining

•Easier to test•Better workflow•Shared vocabulary•Useful reference

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

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

DEMO

https://github.com/StfBauer/SimpleStyle

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

FRAGEN?

IchfreuemichaufIhrFeedback!

Silber-Partner: Veranstalter:

VielenDank!StefanBauer