Branding Strategies for SharePoint and Add-insFrom Design to a modern Style GuideStefan Bauer#SPSSTHLM04, May 21st, 2016
n8d.at/blog@StfBauer
Information ArchitectVienna / Austria
Branding in organizations• Word templates• Business applications• Internal newsletter• Magazines for employees• Cooperate Coffee Mug• …
Potential problems with Frameworks• How to add custom CSS?• Documentation of custom CSS?• New version of framework?• What do I need from the framework?• Subscribe to someone else structure• What if framework structure fundamentally changes?
LESS SASS Static HTML Handlebarsjs
We’re not designing pages. We’re designing systems of components. – Stephan Hay
Responsive deliverables should look a lot like fully-functioning Twitter Bootstrap-style systems custom tailored for your clients needs. – Dave Rupert
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
http://dev.office.com/
Style Guide - ButtonsIcon DesignMinimum Size: 7mmOptimal: 11mmButtonsLeft: Hyperlink <a>Right: <button>
http://dev.office.com/
Style Guide – Persona CardPersona Card• define different
labels• Assembling• Profile image
defined by button size
http://dev.office.com/
Style Guide – Persona Card Full• transformed from
list item• CSS3 transition• trigger by
additional classes
https://github.com/StfBauer/SimpleStyle
Style Guide Benefits• For designer / developers / customer / project Owners• No extra effort on documenting styles• Build HTML and Design first• Useful for future development• See the side effects of CSS changes easier• Use same styles for SharePoint and Add-ins