Tips and tricks for designing the UI

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. Pretty Up My

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. Pretty Up My
Please make my SharePoint
not look and feel like
SharePoint!

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. Pretty Up My
UI UX
Emotion
Meet user
needs
Visual
Elements
Interaction

7. Pretty Up My
Do we need to define Requirements
for UI Customizations in
?

8. Pretty Up My
Browser
compatibility

9. Pretty Up My
Styleguide,
corporate identity,
existing sources

10. Pretty Up My
Responsive
Design

11. Pretty Up My
Use
Mock-ups

12. Pretty Up My
User Experience Expectation
Modern document library experience in SharePointClassic document library experience in SharePoint

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. Pretty Up My
Check SharePoint
concerning issues
e.g.: Publishing Feature
Site collection feature
Site feature

15. Pretty Up My
Check Infrastructure
vs.

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. Pretty Up My
Do you know other important
Requirements for UI Customizations
in ?

18. Pretty Up My
Session Topics
Define
Requirements
Branding
the UI
 CSS
 Color Palette Tool
 Themes
 Responsive design
 Retrieve data
 Display templates

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. Pretty Up My
Use Browser Developer Tools
Press
F12

21. Pretty Up My
SharePoint
Color
Palette
Tool
Create SharePoint Themes

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. Pretty Up My
DEMO
Composed Looks and
CSS in SharePoint

24. Pretty Up My
Make SharePoint Responsive
Only CSS
example
SharePoint
Patterns & Practices
Responsive Design
UI Frameworks
(e.g.: Bootstrap)

25. Pretty Up My
DEMO
Responsive Design with PnP

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. Pretty Up My
Search and Display Templates

28. Pretty Up My
DEMO
Display Templates in use

29. Pretty Up My
SPFx
WebPart
SPFx 40 Fantastics Web Parts

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. Pretty Up My
SharePoint
Rocks!

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. Pretty Up My
Please visit our sponsors who made this day possible!
Thankyou!
Rate this session with
the event app
http://app.spsmuc.com