SPS Brussels 2016 - From design to a modern style guide branding strategies for share point and add-ins - spsbe
•Télécharger en tant que PPTX, PDF•
1 j'aime•496 vues
You will learn how to maintain your code and documentation at the same time. Start to develop maintainable, reusable and re-factorable design patterns now and learn what css frameworks can't do for you.
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
En vedette (17)
Similaire à SPS Brussels 2016 - From design to a modern style guide branding strategies for share point and add-ins - spsbe
Similaire à SPS Brussels 2016 - From design to a modern style guide branding strategies for share point and add-ins - spsbe (20)
Plus de Stefan Bauer
Plus de Stefan Bauer (8)
Dernier
Dernier (20)
SPS Brussels 2016 - From design to a modern style guide branding strategies for share point and add-ins - spsbe
- 1. 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
- 4. Agenda Branding – The challenges Frameworks – Good or Bad Style Guides
- 6. 6 Why Branding? Corporate magazines Word Templates Excel Templates Business applications Internal newsletter Vcards Magazines for employees Cooperate Coffee Mug ... Background-image: http://logoholik.com/portfolio/abovus/
- 7. SharePoint Saturday Belgium 2016 • October 15 • Brussels Why Branding? – Soft Facts Internal brand awareness Official information by the company Increase identification with the company Employees become brand ambassadors Not only to make SharePoint look not look like SharePoint
- 8. SharePoint Saturday Belgium 2016 • October 15 • Brussels SharePoint Branding Application vs Content
- 11. SharePoint Saturday Belgium 2016 • October 15 • Brussels
- 12. SharePoint Saturday Belgium 2016 • October 15 • Brussels BRAND CONTENT NOT THE APPLICATION
- 13. SharePoint Saturday Belgium 2016 • October 15 • Brussels
- 15. SharePoint Saturday Belgium 2016 • October 15 • Brussels Display Templates? Full scaled branding?
- 16. SharePoint Saturday Belgium 2016 • October 15 • Brussels
- 17. SharePoint Saturday Belgium 2016 • October 15 • Brussels
- 18. SharePoint Saturday Belgium 2016 • October 15 • Brussels Ethan Marcotte Responsive Web Design – A list apart May 25, 2010
- 20. SharePoint Saturday Belgium 2016 • October 15 • Brussels STATIC DYNAMIC
- 21. SharePoint Saturday Belgium 2016 • October 15 • Brussels
- 22. Agenda Branding – The challenges Frameworks – Good or Bad Style Guides
- 23. SharePoint Saturday Belgium 2016 • October 15 • Brussels
- 24. SharePoint Saturday Belgium 2016 • October 15 • Brussels
- 25. 25
- 26. 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
- 27. SharePoint Saturday Belgium 2016 • October 15 • Brussels Great tools but … not for SharePoint
- 28. SharePoint Saturday Belgium 2016 • October 15 • Brussels 95%Unused code GRID BURGER MENU In case of SharePoint
- 32. Agenda Branding – The challenges Frameworks – Good or Bad Style Guides
- 33. SharePoint Saturday Belgium 2016 • October 15 • Brussels We’re not designing pages. We’re designing systems of components. – Stephan Hay
- 34. 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
- 38. Web Standards – gsa.gov
- 46. 46
- 48. 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
- 49. SharePoint Saturday Belgium 2016 • October 15 • Brussels The Benefits Of Maintaining •Easier to test •Improves workflow •Shared vocabulary •Useful reference
- 50. SharePoint Saturday Belgium 2016 • October 15 • Brussels
- 52. 52
- 57. 57
- 59. DEMO 59
- 60. What about apps?
- 61. From Design to Style Guide
- 62. Style Guide - Buttons Icon Design Buttons
- 63. Style Guide – Persona Card Persona Card • define different labels • Assembling • Profile image defined by button size
- 64. Style Guide – Persona Card Full • transformed from list item • CSS3 transition • trigger by additional classes
- 65. DEMO 65
- 66. 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
- 67. SharePoint Saturday Belgium 2016 • October 15 • Brussels Thank You!
Notes de l'éditeur
- Photoshop are just static documents but html and css evoles over time. With every new application new challenges came up.
- Photoshop are just static documents but html and css evoles over time. With every new application new challenges came up.
- http://www.html5rocks.com/en/tutorials/tooling/synchronized-cross-device-testing/
- Photoshop are just static documents but html and css evoles over time. With every new application new challenges came up.
- Photoshop are just static documents but html and css evoles over time. With every new application new challenges came up.
- https://www.flickr.com/photos/arthurjohnpicton/4383221264
- 2012
- http://zqsmm.qiniucdn.com/data/20110511083224/index.html