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

n8d.at/blog@StfBauer

Information ArchitectVienna / Austria

3

Branding – The challenges

Frameworks – Good or Bad

Style Guides

Why Branding?

4

Why Branding?

Corporate magazinesWord TemplatesExcel TemplatesBusiness applicationsInternal

newsletterVcardsMagazines for employeesCooperate Coffee Mug...

5

Why Branding?Internal 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

STATIC DYNAMIC

21

Branding – The challenges

Frameworks – Good or Bad

Style Guides

24

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

Great tools but …not for SharePoint

95%Unused code

In case of SharePoint

GRID

BURGER MENU

28

29

31

Branding – The challenges

Frameworks – Good or Bad

Style Guides

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

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

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

Web Standards – gsa.gov

http://style.codeforamerica.org

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

https://www.lightningdesignsystem.com

45

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://zqsmm.qiniucdn.com/data/20110511083224/index.html

50

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

55

https://github.com/StfBauer/SimpleStyle

DEMO

57

What about apps?

http://dev.office.com/

From Design to Style Guide

http://dev.office.com/

Style Guide - Buttons

Icon DesignMinimum Size: 7mmOptimal: 11mmButtonsLeft: Hyperlink <a>Right: <button>

http://dev.office.com/

Style Guide – Persona Card

Persona 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

63

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

Thanks to our Sponsors

Silver

Gold

Bronze

Raffle Organized by

Thank you!

Live Ratings http://bit.ly/2d9nFL6

Questions?