Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Pretty Up My
4th of March 2017
@MS HQ Munich
Corinna Lins
@corinna_lins
Pretty Up My SharePoint
Tips and tricks for design...
Pretty Up My
Pretty Up My
About me
• SharePoint Consultant, for 5 years
• Focus areas: SharePoint/Office365 UI
Customizing and Consulti...
Pretty Up My
Please make my SharePoint
not look and feel like
SharePoint!
Pretty Up My
Session topics
Define
Requirements
Branding
the UI
 What is UI/UX?
 Browser
 Styleguides
 Responsive desi...
Pretty Up My
UI UX
Emotion
Meet user
needs
Visual
Elements
Interaction
Pretty Up My
Do we need to define Requirements
for UI Customizations in
?
Pretty Up My
Browser
compatibility
Pretty Up My
Styleguide,
corporate identity,
existing sources
Pretty Up My
Responsive
Design
Pretty Up My
Use
Mock-ups
Pretty Up My
User Experience Expectation
Modern document library experience in SharePointClassic document library experien...
Pretty Up My
Understand
SharePoint
Structure
Elements
• Contains left and top navigation
• Loads resources (CSS and JS)
• ...
Pretty Up My
Check SharePoint
concerning issues
e.g.: Publishing Feature
Site collection feature
Site feature
Pretty Up My
Check Infrastructure
vs.
Pretty Up My
Define Requirements for UI Customizations
PROS
• Less investment of time, more customer satisfaction
• Better...
Pretty Up My
Do you know other important
Requirements for UI Customizations
in ?
Pretty Up My
Session Topics
Define
Requirements
Branding
the UI
 CSS
 Color Palette Tool
 Themes
 Responsive design
 ...
Pretty Up My
Pretty up with CSS
• Alternate CSS
• Content editor webpart
• Custom actions
• CSS Reference in masterpage
• ...
Pretty Up My
Use Browser Developer Tools
Press
F12
Pretty Up My
SharePoint
Color
Palette
Tool
Create SharePoint Themes
Pretty Up My
What about custom theme in modern site?
# Apply a custom theme to a Modern Site
Add-PnPFile -Path .SPcolorFil...
Pretty Up My
DEMO
Composed Looks and
CSS in SharePoint
Pretty Up My
Make SharePoint Responsive
Only CSS
example
SharePoint
Patterns & Practices
Responsive Design
UI Frameworks
(...
Pretty Up My
DEMO
Responsive Design with PnP
Pretty Up My
UserData
How to retrieve data?
• SharePoint REST API
• SharePoint Client Context
• SP Services (SharePoint 20...
Pretty Up My
Search and Display Templates
Pretty Up My
DEMO
Display Templates in use
Pretty Up My
SPFx
WebPart
SPFx 40 Fantastics Web Parts
Pretty Up My
Customizations in SharePoint
Techniques
• SharePoint Themes
• Masterpage
• Page Layouts
• Display Templates
•...
Pretty Up My
SharePoint
Rocks!
Pretty Up My
Useful Links
SharePoint Color Palette Tool, https://www.microsoft.com/en-us/download/details.aspx?id=38182
St...
Pretty Up My
Please visit our sponsors who made this day possible!
Thankyou!
Rate this session with
the event app
http://a...
Upcoming SlideShare
Loading in …5
×

Pretty Up My SharePoint

556 views

Published on

Tips and tricks for designing the UI

Published in: Technology
  • How to Grip Her Attention - Unlock Her Legs ●●● http://scamcb.com/unlockher/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Pretty Up My SharePoint

  1. 1. Pretty Up My 4th of March 2017 @MS HQ Munich Corinna Lins @corinna_lins Pretty Up My SharePoint Tips and tricks for designing the UI #SPSMUC14
  2. 2. Pretty Up My
  3. 3. Pretty Up My About me • SharePoint Consultant, for 5 years • Focus areas: SharePoint/Office365 UI Customizing and Consulting, HCI, UI and UX • Since 2015 at Munich
  4. 4. Pretty Up My Please make my SharePoint not look and feel like SharePoint!
  5. 5. Pretty Up My Session topics Define Requirements Branding the UI  What is UI/UX?  Browser  Styleguides  Responsive design  Mock Ups  SharePoint issues  Infrastructure
  6. 6. Pretty Up My UI UX Emotion Meet user needs Visual Elements Interaction
  7. 7. Pretty Up My Do we need to define Requirements for UI Customizations in ?
  8. 8. Pretty Up My Browser compatibility
  9. 9. Pretty Up My Styleguide, corporate identity, existing sources
  10. 10. Pretty Up My Responsive Design
  11. 11. Pretty Up My Use Mock-ups
  12. 12. Pretty Up My User Experience Expectation Modern document library experience in SharePointClassic document library experience in SharePoint
  13. 13. Pretty Up My Understand SharePoint Structure Elements • Contains left and top navigation • Loads resources (CSS and JS) • Uses content placeholders • Layout of the content area • Used in publishing sites
  14. 14. Pretty Up My Check SharePoint concerning issues e.g.: Publishing Feature Site collection feature Site feature
  15. 15. Pretty Up My Check Infrastructure vs.
  16. 16. Pretty Up My Define Requirements for UI Customizations PROS • Less investment of time, more customer satisfaction • Better overview of technical challenges in SharePoint • Common understanding by precise UI requirements
  17. 17. Pretty Up My Do you know other important Requirements for UI Customizations in ?
  18. 18. Pretty Up My Session Topics Define Requirements Branding the UI  CSS  Color Palette Tool  Themes  Responsive design  Retrieve data  Display templates
  19. 19. Pretty Up My Pretty up with CSS • Alternate CSS • Content editor webpart • Custom actions • CSS Reference in masterpage • Display templates • Page layouts • SPFx
  20. 20. Pretty Up My Use Browser Developer Tools Press F12
  21. 21. Pretty Up My SharePoint Color Palette Tool Create SharePoint Themes
  22. 22. Pretty Up My What about custom theme in modern site? # Apply a custom theme to a Modern Site Add-PnPFile -Path .SPcolorFile.spcolor -Folder SiteAssets # Second, apply the theme assets to the site $web = Get-PnPWeb $palette = $web.ServerRelativeUrl + "/SiteAssets/SPcolorFile.spcolor" # Method: public void ApplyTheme(string colorPaletteUrl, string fontSchemeUrl, string backgroundImageUrl, bool shareGenerated) $web.ApplyTheme($palette, [NullString]::Value, [NullString]::Value, $true) $web.Update() … $web.Context.ExecuteQuery() See also: https://msdn.microsoft.com/en-us/pnp_articles/modern-experience-customizations-customize-sites Only PowerShell
  23. 23. Pretty Up My DEMO Composed Looks and CSS in SharePoint
  24. 24. Pretty Up My Make SharePoint Responsive Only CSS example SharePoint Patterns & Practices Responsive Design UI Frameworks (e.g.: Bootstrap)
  25. 25. Pretty Up My DEMO Responsive Design with PnP
  26. 26. Pretty Up My UserData How to retrieve data? • SharePoint REST API • SharePoint Client Context • SP Services (SharePoint 2010) • Search API • Graph API Libraries Lists User Profile Information Visualisation
  27. 27. Pretty Up My Search and Display Templates
  28. 28. Pretty Up My DEMO Display Templates in use
  29. 29. Pretty Up My SPFx WebPart SPFx 40 Fantastics Web Parts
  30. 30. Pretty Up My Customizations in SharePoint Techniques • SharePoint Themes • Masterpage • Page Layouts • Display Templates • JSLink • Manipulation with JavaScript • PnP Solutions Tools • Design Manager • Color Palette Tool • UI and JS Frameworks • PowerShell • SPFx
  31. 31. Pretty Up My SharePoint Rocks!
  32. 32. Pretty Up My Useful Links SharePoint Color Palette Tool, https://www.microsoft.com/en-us/download/details.aspx?id=38182 Step by Step create a SharePoint 2013 Composed Look, https://bniaulin.wordpress.com/2012/12/16/step-by- step-create-a-sharepoint-2013-composed-look/ Image Slider with SharePoint 2013 Search Results Web Part, https://en.share-gate.com/blog/image-slider- with-sharepoint-2013-search-results SharePoint 2013 Search Query Tool, https://sp2013searchtool.codeplex.com/ SharePoint 2013/2016/Online Responsive UI, https://github.com/SharePoint/PnP- Tools/tree/master/Solutions/SharePoint.UI.Responsive SPFx 40 Fantastics Web Parts, https://github.com/OlivierCC/spfx-40-fantastics PnP SharePoint 2013/2016/Online Responsive UI, https://github.com/SharePoint/PnP- Tools/tree/master/Solutions/SharePoint.UI.Responsive
  33. 33. Pretty Up My Please visit our sponsors who made this day possible! Thankyou! Rate this session with the event app http://app.spsmuc.com

×