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

AgendaBranding – The challenges

Frameworks – Good or Bad

Style Guides

Why Branding?

5Background-image: 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 Saturday Belgium 2016 • October 15 • Brussels

SharePoint Branding

Applicationvs

Content

Application

CONTENT

SharePoint Saturday Belgium 2016 • October 15 • Brussels

SharePoint Saturday Belgium 2016 • October 15 • Brussels

BRAND CONTENTNOT THE

APPLICATION

SharePoint Saturday Belgium 2016 • October 15 • Brussels

SharePoint Saturday Belgium 2016 • October 15 • Brussels

Display Templates? Full scaled branding?

SharePoint Saturday Belgium 2016 • October 15 • Brussels

SharePoint Saturday Belgium 2016 • October 15 • Brussels

SharePoint Saturday Belgium 2016 • October 15 • Brussels

Ethan MarcotteResponsive Web Design – A list apartMay 25, 2010

SharePoint Saturday Belgium 2016 • October 15 • Brussels

STATIC DYNAMIC

SharePoint Saturday Belgium 2016 • October 15 • Brussels

AgendaBranding – The challenges

Frameworks – Good or Bad

Style Guides

SharePoint Saturday Belgium 2016 • October 15 • Brussels

SharePoint Saturday Belgium 2016 • October 15 • Brussels

25

SharePoint Saturday Belgium 2016 • October 15 • Brussels

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

SharePoint Saturday Belgium 2016 • October 15 • Brussels

Great tools but …not for SharePoint

SharePoint Saturday Belgium 2016 • October 15 • Brussels

95%Unused code

GRID

BURGER MENU

In case of SharePoint

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

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

AgendaBranding – The challenges

Frameworks – Good or Bad

Style Guides

SharePoint Saturday Belgium 2016 • October 15 • Brussels

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

SharePoint Saturday Belgium 2016 • October 15 • Brussels

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

Web Standards – gsa.gov

http://style.codeforamerica.org

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

https://www.lightningdesignsystem.com

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

http://my.n8d.at/spsbe162

https://material.google.com

46

SharePoint Saturday Belgium 2016 • October 15 • Brussels

Style Guide – The benefits• State and breakpoint changes• Useful for future designers, devs & others

•Design and Code consistency and maintainability

SharePoint Saturday Belgium 2016 • October 15 • Brussels

The Benefits Of Maintaining

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

SharePoint Saturday Belgium 2016 • October 15 • Brussels

52

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

57

https://github.com/StfBauer/SimpleStyle

DEMO

59

What about apps?

http://dev.office.com/

From Design to Style Guide

http://dev.office.com/

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

ButtonsLeft: 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

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

SharePoint Saturday Belgium 2016 • October 15 • Brussels

Thank You!

Feedbackhttp://spsbe.be