sps brussels 2016 - from design to a modern style guide branding strategies for share point and...

SharePoint Saturday Belgium 2016 • October 15 • Brussels Track: MIX | Level: 200

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

Stefan Bauer – N8D - MVP

Platinum

Gold

Silver

n8d.at/blog@StfBauer

Information ArchitectVienna / Austria

http://www.n8d.at/blog

http://www.twitter.com/stfbauer

AgendaBranding – The challenges

Frameworks – Good or Bad

Style Guides

Why Branding?

5Background-image: http://logoholik.com/portfolio/abovus/

http://logoholik.com/portfolio/abovus/






6

Why Branding?

Corporate magazinesWord TemplatesExcel TemplatesBusiness applicationsInternal newsletter

VcardsMagazines for employeesCooperate Coffee Mug...

Background-image: http://logoholik.com/portfolio/abovus/







SharePoint Saturday Belgium 2016 • October 15 • Brussels

Why Branding? – Soft FactsInternal brand awarenessOfficial information by the companyIncrease identification with the company

Employees become brand ambassadors

Not only to make SharePoint look not look like SharePoint


SharePoint Branding

Applicationvs

Content

Application

CONTENT


BRAND CONTENTNOT THE

APPLICATION


Display Templates? Full scaled branding?


Ethan MarcotteResponsive Web Design – A list apartMay 25, 2010

http://alistapart.com/article/responsive-web-design


STATIC DYNAMIC



Style Guides


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• Office UI Fabric - SuiteCSS

• What if framework structure fundamentally changes?• LESS SASS• Static HTML Handlebarsjs


Great tools but …not for SharePoint


95%Unused code

GRID

BURGER MENU

In case of SharePoint

29http://my.n8d.at/spsbe161

30http://my.n8d.at/spsbe161



Style Guides


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

https://vimeo.com/52851510


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

http://daverupert.com/2013/04/responsive-deliverables/

https://24ways.org/2011/front-end-style-guides/

Web Standards – gsa.gov

https://18f.gsa.gov/2015/09/28/web-design-standards/

http://style.codeforamerica.org

http://style.codeforamerica.org/

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

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

https://www.lightningdesignsystem.com

https://www.lightningdesignsystem.com/

http://www.bbc.co.uk/gel




http://my.n8d.at/spsbe162

http://my.n8d.at/spsbe162

https://material.google.com

https://material.google.com/

https://material.google.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•Improves workflow•Shared vocabulary•Useful reference

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

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

https://github.com/StfBauer/SimpleStyle







DEMO

59

What about apps?

http://dev.office.com/

From Design to Style Guide


Style Guide - ButtonsIcon DesignMinimum Size: 7mmOptimal: 11mm

ButtonsLeft: Hyperlink <a>Right: <button>


Style Guide – Persona CardPersona Card• define different

labels• Assembling• Profile image

defined by button size


Style Guide – Persona Card Full• transformed from

list item• CSS3 transition• trigger by

additional classes

DEMO

65

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


Thank You!

Feedbackhttp://spsbe.be

sps brussels 2016 - from design to a modern style guide branding strategies for share point and...

Technology