From Design to a modern Style Guide

•

0 j'aime•880 vues

Stefan Bauer

Branding Strategies for SharePoint and Add-ins

Logiciels

n8d.at/blog
@StfBauer
Information Architect
Vienna / Austria

Branding in organizations
•Word templates
•Business applications
•Internal newsletter
•Magazines for employees
•Cooperate Coffee Mug
•…

Display Templates? Full scaled branding?

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

Are framework future-friendly?
•How to add custom CSS?
•Documentation of custom CSS?
•New version of framework?
•What do I need from the framework?
•What if framework structure fundamentally
changes?
LESS à SASS

95%Unused
code
In case of SharePoint
GRID
BURGER
MENU

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/

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
•Better workflow
•Shared vocabulary
•Useful reference

http://zqsmm.qiniucdn.com/data/20110511083224/index.html

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

Summary
•No extra effort on documenting styles
•Build HTML and Design first
•Useful for future development
•See the side effects of CSS changes easier
•Use styles for SharePoint and Add-ins

Silber-Partner: Veranstalter:
Vielen Dank!
Stefan Bauer

Recommandé

European SharePoint Webinar - Make SharePoint SassyStefan Bauer

Branding Deployment in Office 365 and SharePoint 2013/2016Stefan Bauer

SPUnite17 Migrating your Customizations from On-prem to SharePoint OnlineNCCOMMS

SharePoint 2013 Dev FeaturesRicardo Wilkins

Responsive Web Design and SharePointStefan Bauer

SPUnite17 SPFx ExtensionsNCCOMMS

Branding Modern SharePointEric Overfield

Modern SharePoint, the Good, the Bad, and the UglyBob German

Recommandé

European SharePoint Webinar - Make SharePoint SassyStefan Bauer

Branding Deployment in Office 365 and SharePoint 2013/2016Stefan Bauer

SPUnite17 Migrating your Customizations from On-prem to SharePoint OnlineNCCOMMS

SharePoint 2013 Dev FeaturesRicardo Wilkins

Responsive Web Design and SharePointStefan Bauer

SPUnite17 SPFx ExtensionsNCCOMMS

Branding Modern SharePointEric Overfield

Modern SharePoint, the Good, the Bad, and the UglyBob German

O365Con19 - Model-driven Apps or Canvas Apps? - Rick BakkerNCCOMMS

SPUnite17 Introduction to the Office Dev PnP Core LibrariesNCCOMMS

O365Con18 - Modern News Publishing with SharePoint - Maarten EekelsNCCOMMS

SharePoint Framework SPS Madrid 2016Sonja Madsen

O365Con19 - Customise the UI in Modern SharePoint Workspaces - Corinna LinsNCCOMMS

O365Con18 - Customizing SharePoint and Microsoft Teams with SharePoint Framew...NCCOMMS

SPUnite17 Transforming your Organisation into a Digital WorkplaceNCCOMMS

NextGen Portal for Your OrganizationWaldek Mastykarz

Developing with SharePoint Framework (SPFx) on-premisesDragan Panjkov

Broaden your dev skillset with SharePoint branding optionsEric Overfield

O365Con18 - Security and Compliance - Liz SundetNCCOMMS

Going with the Flow: Rationalizing the workflow options in SharePoint OnlineBob German

ECS19 - John White - Unlock SharePoint’s Reporting SecretsEuropean Collaboration Summit

[Jansen] Transforming your classic team sites into modern group connected tea...European Collaboration Summit

SharePoint 2013 BrandingKashif Imran

The Future of SharePoint - What You Need to KnowEric Overfield

New SharePoint Features in Visual Studio 2012!SPC Adriatics

O365Con18 - It's Alive - Christina WheelerNCCOMMS

Pretty Up My SharePointCorinna Lins

SharePoint 2013 Design manager – from HTML to SharePointEric Overfield

SPS Barcelona 2016 - Branding Strategies for SharePoint and Add-ins - From De...Stefan Bauer

SharePoint Saturday Stockholm - Branding Strategies for SharePoint and Add-in...Stefan Bauer

Contenu connexe

Tendances

O365Con19 - Model-driven Apps or Canvas Apps? - Rick BakkerNCCOMMS

SPUnite17 Introduction to the Office Dev PnP Core LibrariesNCCOMMS

O365Con18 - Modern News Publishing with SharePoint - Maarten EekelsNCCOMMS

SharePoint Framework SPS Madrid 2016Sonja Madsen

O365Con19 - Customise the UI in Modern SharePoint Workspaces - Corinna LinsNCCOMMS

O365Con18 - Customizing SharePoint and Microsoft Teams with SharePoint Framew...NCCOMMS

SPUnite17 Transforming your Organisation into a Digital WorkplaceNCCOMMS

NextGen Portal for Your OrganizationWaldek Mastykarz

Developing with SharePoint Framework (SPFx) on-premisesDragan Panjkov

Broaden your dev skillset with SharePoint branding optionsEric Overfield

O365Con18 - Security and Compliance - Liz SundetNCCOMMS

Going with the Flow: Rationalizing the workflow options in SharePoint OnlineBob German

ECS19 - John White - Unlock SharePoint’s Reporting SecretsEuropean Collaboration Summit

[Jansen] Transforming your classic team sites into modern group connected tea...European Collaboration Summit

SharePoint 2013 BrandingKashif Imran

The Future of SharePoint - What You Need to KnowEric Overfield

New SharePoint Features in Visual Studio 2012!SPC Adriatics

O365Con18 - It's Alive - Christina WheelerNCCOMMS

Pretty Up My SharePointCorinna Lins

SharePoint 2013 Design manager – from HTML to SharePointEric Overfield

Tendances (20)

O365Con19 - Model-driven Apps or Canvas Apps? - Rick Bakker

SPUnite17 Introduction to the Office Dev PnP Core Libraries

O365Con18 - Modern News Publishing with SharePoint - Maarten Eekels

SharePoint Framework SPS Madrid 2016

O365Con19 - Customise the UI in Modern SharePoint Workspaces - Corinna Lins

O365Con18 - Customizing SharePoint and Microsoft Teams with SharePoint Framew...

SPUnite17 Transforming your Organisation into a Digital Workplace

NextGen Portal for Your Organization

Developing with SharePoint Framework (SPFx) on-premises

Broaden your dev skillset with SharePoint branding options

O365Con18 - Security and Compliance - Liz Sundet

Going with the Flow: Rationalizing the workflow options in SharePoint Online

ECS19 - John White - Unlock SharePoint’s Reporting Secrets

[Jansen] Transforming your classic team sites into modern group connected tea...

SharePoint 2013 Branding

The Future of SharePoint - What You Need to Know

New SharePoint Features in Visual Studio 2012!

O365Con18 - It's Alive - Christina Wheeler

Pretty Up My SharePoint

SharePoint 2013 Design manager – from HTML to SharePoint

Similaire à From Design to a modern Style Guide

SPS Barcelona 2016 - Branding Strategies for SharePoint and Add-ins - From De...Stefan Bauer

SharePoint Saturday Stockholm - Branding Strategies for SharePoint and Add-in...Stefan Bauer

SPS Brussels 2016 - From design to a modern style guide branding strategies...Stefan Bauer

Preparing for a website redesignTechSoup Canada

Coexist or Integrate? How Add-ins Deliver an Integrated Environment to Manage...Concept Searching, Inc

The Pragmatist's Approach to SharePoint BrandingStu King

Leveraging the AWS Sales Methodology and Partner Best Practices aws-partner-s...Amazon Web Services

WORKSHOP: STRATEGY AND SUCCESS WITH OFFICE 365: PRACTICAL TOOLS AND TECHNIQUE...Richard Harbridge

Collab 365 building business solutions on Office 365 and SharePoint OnlineDarrell Trimble

Don't simply deploy, transform! Build your digital workplace in Office 365BIWUG

Technical SEO for large eCommerce websitesSerenaPearson2

Technical SEO for Large eCommerce Websites 💻Kaizen

"Adoption Tactics; Why Your End Users and Project Managers Will Rave Over Sha...Gina Montgomery, V-TSP

Microsoft Dynamics CRM (XRM) & Microsoft SharepointAli Sharifi

Drive your Docs with Data - Conduit Conference 2017Ed Marsh

Designing Website on HubSpot's CMSHubSpot

MICROSOFT 365 STRATEGY & SUCCESS: PRACTICAL TOOLS & TECHNIQUES FOR THE STRATE...Richard Harbridge

SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017Marc D Anderson

What’s the News About SharePoint News - SPFestSeattleDrew Madelung

Website Development with Wordpress as Content Management SystemBroekman Communications

Similaire à From Design to a modern Style Guide (20)

SPS Barcelona 2016 - Branding Strategies for SharePoint and Add-ins - From De...

SharePoint Saturday Stockholm - Branding Strategies for SharePoint and Add-in...

SPS Brussels 2016 - From design to a modern style guide branding strategies...

Preparing for a website redesign

Coexist or Integrate? How Add-ins Deliver an Integrated Environment to Manage...

The Pragmatist's Approach to SharePoint Branding

Leveraging the AWS Sales Methodology and Partner Best Practices aws-partner-s...

WORKSHOP: STRATEGY AND SUCCESS WITH OFFICE 365: PRACTICAL TOOLS AND TECHNIQUE...

Collab 365 building business solutions on Office 365 and SharePoint Online

Don't simply deploy, transform! Build your digital workplace in Office 365

Technical SEO for large eCommerce websites

Technical SEO for Large eCommerce Websites 💻

"Adoption Tactics; Why Your End Users and Project Managers Will Rave Over Sha...

Microsoft Dynamics CRM (XRM) & Microsoft Sharepoint

Drive your Docs with Data - Conduit Conference 2017

Designing Website on HubSpot's CMS

MICROSOFT 365 STRATEGY & SUCCESS: PRACTICAL TOOLS & TECHNIQUES FOR THE STRATE...

SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017

What’s the News About SharePoint News - SPFestSeattle

Website Development with Wordpress as Content Management System

Plus de Stefan Bauer

Create SASSy web parts in SPFxStefan Bauer

Create SASSY Web Parts - SPSMilan Stefan Bauer

SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!Stefan Bauer

Stop your share point css become a di-sass-ter today - SPS MunichStefan Bauer

SPS Belgium - Stop your SharePoint CSS becoming a di-SASS-ter today!Stefan Bauer

Responsive vs Adaptive Web Design - What about Device Channels?Stefan Bauer

Plus de Stefan Bauer (6)

Create SASSy web parts in SPFx

Create SASSY Web Parts - SPSMilan

SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!

Stop your share point css become a di-sass-ter today - SPS Munich

SPS Belgium - Stop your SharePoint CSS becoming a di-SASS-ter today!

Responsive vs Adaptive Web Design - What about Device Channels?

Dernier

%in Soweto+277-882-255-28 abortion pills for sale in sowetomasabamasaba

%+27788225528 love spells in Knoxville Psychic Readings, Attraction spells,Br...masabamasaba

OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...Shane Coughlan

8257 interfacing 2 in microprocessor for btech studentsHimanshiGarg82

What Goes Wrong with Language Definitions and How to Improve the SituationJuha-Pekka Tolvanen

%+27788225528 love spells in Huntington Beach Psychic Readings, Attraction sp...masabamasaba

Abortion Pills In Pretoria ](+27832195400*)[ 🏥 Women's Abortion Clinic In Pre...Medical / Health Care (+971588192166) Mifepristone and Misoprostol tablets 200mg

Architecture decision records - How not to get lost in the pastPapp Krisztián

%in Rustenburg+277-882-255-28 abortion pills for sale in Rustenburgmasabamasaba

%in kaalfontein+277-882-255-28 abortion pills for sale in kaalfonteinmasabamasaba

Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...SelfMade bd

Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...Medical / Health Care (+971588192166) Mifepristone and Misoprostol tablets 200mg

%in Benoni+277-882-255-28 abortion pills for sale in Benonimasabamasaba

Devoxx UK 2024 - Going serverless with Quarkus, GraalVM native images and AWS...Bert Jan Schrijver

WSO2Con2024 - From Code To Cloud: Fast Track Your Cloud Native Journey with C...WSO2

Announcing Codolex 2.0 from GDK SoftwareJim McKeeth

Large-scale Logging Made Easy: Meetup at Deutsche Bank 2024VictoriaMetrics

AI & Machine Learning Presentation TemplatePresentation.STUDIO

WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital TransformationWSO2

WSO2CON 2024 - Building the API First Enterprise – Running an API Program, fr...WSO2

Dernier (20)

%in Soweto+277-882-255-28 abortion pills for sale in soweto

%+27788225528 love spells in Knoxville Psychic Readings, Attraction spells,Br...

OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...

8257 interfacing 2 in microprocessor for btech students

What Goes Wrong with Language Definitions and How to Improve the Situation

%+27788225528 love spells in Huntington Beach Psychic Readings, Attraction sp...

Abortion Pills In Pretoria ](+27832195400*)[ 🏥 Women's Abortion Clinic In Pre...

Architecture decision records - How not to get lost in the past

%in Rustenburg+277-882-255-28 abortion pills for sale in Rustenburg

%in kaalfontein+277-882-255-28 abortion pills for sale in kaalfontein

Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...

Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...

%in Benoni+277-882-255-28 abortion pills for sale in Benoni

Devoxx UK 2024 - Going serverless with Quarkus, GraalVM native images and AWS...

WSO2Con2024 - From Code To Cloud: Fast Track Your Cloud Native Journey with C...

Announcing Codolex 2.0 from GDK Software

Large-scale Logging Made Easy: Meetup at Deutsche Bank 2024

AI & Machine Learning Presentation Template

WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation

WSO2CON 2024 - Building the API First Enterprise – Running an API Program, fr...

From Design to a modern Style Guide

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

2. n8d.at/blog @StfBauer Information Architect Vienna / Austria

3. Why branding? IT’S JUST THE INTRANET

4. Branding in organizations •Word templates •Business applications •Internal newsletter •Magazines for employees •Cooperate Coffee Mug •…

5. Display Templates? Full scaled branding?

7. BRAND CONTENT NOT THE APPLICATION

8. Application CONTENT

10.

11.

12.

13.

14. STATIC DYNAMIC

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

16.

17.

18.

19.

20. Are framework future-friendly? •How to add custom CSS? •Documentation of custom CSS? •New version of framework? •What do I need from the framework? •What if framework structure fundamentally changes? LESS à SASS

21. Great tools but … not for SharePoint

22. 95%Unused code In case of SharePoint GRID BURGER MENU

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

24.

25.

26.

27. Web Standards – gsa.gov

28. http://style.codeforamerica.org

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

30. https://www.lightningdesignsystem.com

31.

32.

33.

34.

35. Style Guide – The benefits •State and breakpoint changes •Useful for future designers, devs & others •Design and Code consistency and maintainability

36. The Benefits Of Maintaining •Easier to test •Better workflow •Shared vocabulary •Useful reference

37.

38. http://zqsmm.qiniucdn.com/data/20110511083224/index.html

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

40.

41.

42.

43. DEMO

44. https://github.com/StfBauer/SimpleStyle

45. Summary •No extra effort on documenting styles •Build HTML and Design first •Useful for future development •See the side effects of CSS changes easier •Use styles for SharePoint and Add-ins

46. FRAGEN?

47. Ich freue mich auf Ihr Feedback!

48. Silber-Partner: Veranstalter: Vielen Dank! Stefan Bauer