Post on 15-Apr-2017
transcript
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
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
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?