from design to a modern style guide
TRANSCRIPT
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