Design Best Practices for SharePoint/Office365 from SPTechCon DC 2017

1. The Good, The Bad and The Ugly
By: D’arce Hess SPTechCon – Washington D.C. 2017

2. Introductions
D’arce Hess, MVP
President | DH Consulting LLC
dhess@dhconsulting.me
https://darcehess.com
@darcehess
https://www.linkedin.com/in/darcehess

3. Agenda
Classic vs Modern
Colors/Fonts
Page Layouts
Links and Search
Know Your Audience

4. Classic SharePoint

5. Classic or Modern SharePoint?
2013
• Custom Master Pages
• Composed Looks
• Display Templates
• Custom Page Layouts
• jslink
• Image Renditions
2010
• Sandbox Solutions
• Color Picker Theming
• Custom Master Pages
• Custom Page Layouts
• FAST Search
• Deep IA Structures
2007
• Full Trust Code
Solutions
• Limited theming
capabilities
• Custom Master Pages
• Custom Page Layouts
Office365
• Modern Experiences
• Delve
• Personalized Search
• SharePoint Framework
• New Web Parts
• No more clunky ribbon
• Mobile Friendly
• SharePoint App
Classic Classic or Modern
Modern Classic

6. Customization Capabilities
Configure Customize
Extend Fully Custom
Experiences
Level of ComplexityNo Code Full Code

7. Themes
SharePoint comes with several
Themes/Composed Looks OOTB. You can
create your own custom Theme using the
SharePoint Color Palette Tool.
Consist of the following:
• Master Page
• .spcolor file
• .spfont file
• Background Image
Classic

8. Colors

9. Color Palettes
Dark Blues tend to give the feeling or impression
of trust, professionalism, steadfastness.
Common type of institutions using dark or navy
blues in their sites:
• Financial /Banking
• Airlines
• Corporate
• Accounting Firms
• Legal Modern Classic

10. Color Palettes
Reds help to draw a statement most often
associated with passion, power, elegance
Institutions often using these color palettes:
• Fine Dining
• Florists
• Automotive
• Chocolate Shops
Modern Classic

11. Paletton.com
https://color.adobe.com/creat
e/color-wheel/

12. SharePoint Color Palette Tool
https://www.microsoft.com/en-
us/download/details.aspx?id=38182
You must upload them to site assets and
apply the theme using PNP PowerShell
Consist of the following:
• .spcolor file
• Background Image
SharePoint Color Palette Tool Classic

13. Fonts

14. Not all fonts are created equally Classic
Is this Easy for you to read?
Is this Easy for you to read?
Is this Easy for you to read?
Is this Easy for you to read?
Is this Easy for you to read?

15. Font Pairing Options
Anton Font
Open sans light is a great
pairing for Anton
Montserrat
Hairline
Montserrat Light is a
great pairing for
Montserrat Hairline
Bodoni
Montserrat is a nice pairing
with this font
Cinzel
Quattrocento is a
great pairing for
Cinzel
Yellowtai
l
Open sans is a great pairing for
Yellowtail
Segoe UI
Open sans light is a great
pairing for Segoe UI
Classic

16. This is a page heading (H1) 28px
This is a secondary heading (H2) 24px
This is a tertiary heading (H3) 20px
This is a fourth heading (H4) 18px
This is going to be some text that is in a paragraph on my page 14px
What font size to choose?
Using the correct font size
can help to increase
readability for your users
Classic

17. Black against
White is a harsh
contrast
White against
black is also hard
on the eyes
Dark Grey is
easier on the
eyes
Don’t use yellow
or Red on dark
backgrounds
Try a lighter grey
on darker
backgrounds
White works well
on darker colored
backgrounds
What font color matters Classic

18. What could go wrong?

19. Creating an .spfont file
/_catalogs/theme/15/
Copy an out-of-the-box file and adjust. Do NOT
overwrite source files
Classic

20. Page Layouts

21. Understanding the Grid
Most Modern Layouts are based on a 12
column.
Grid Layout. It allows for easier consistency in
content placement on a page and spacing
considerations.
Classic

22. Two Column Layouts provide a great canvas for
providing focus on specific content and allowing
the sidebar to be used as a secondary focus. This
layout offers a large variety of uses for:
• Department Home Pages
• Landing Pages
• Intranet Landing Pages
• Content Pages
Banner with Lg. Left Sm. Right Modern Classic

23. Single Column Layouts include a Left
Navigation to help users get to categories
of content. This layout offers a large
variety of uses for:
• Article content pages
• News
• Single Topic Content
Single Column Modern Classic

24. The Three Column has the most variety of
uses. This layout offers a large variety of
uses for:
• Telling a process story i.e. Past, Present,
Future
Three Column Modern Classic

25. Use content types to help users implement the
content that is right for the layout versus
placing multiple web part zones on a page
and leaving too much for the user to have to
decide on.
Create with Content Types Classic

26. Notice what’s missing?
Left Navigation
Mega Menus
Subsites

27. Links

28. The easiest solution to
navigation was to add another
link on the page. What
happened in the end, was we
had pages based of only links
and couldn’t find the
information we were looking
for.
Been there, done that Classic

29. Using Icons to help present a list or
create an additional navigational
structure will break up the
presentation of a traditional links
list and engage users.
Uses for Icons Modern Classic

30. Overrides rendering of
Header
Item
Footer
Create any HTML/CSS
Applies to all lists on page*
Use the list title for targeting
jsLink- Client Side Rendering Classic

31. The Four Rules for Links
Color
Don’t use blue or purple for
text colors unless it’s a link
Underline
Don’t underline text unless it
is a link
Click Here
“Click Here” requires users to
read before and after to
understand what they are
clicking
Number
Keep number of links short or
find grouping patterns to
break up content

32. Images

33. Make images relevant
• Images without a description hold little
value
• Use quality Images.
• Make sure images are relevant to
content

34. Search-based Experiences

35. Display Templates are used to display data from SharePoint search.
Search is the best way to aggregate data from across SharePoint or even
integrate data from outside SharePoint.
Display Templates provide a framework to create a custom experiences
with data from the search engine.
This is a custom card template used to make a Site Catalog experience in
an intranet
Display Templates Classic

36. Display Templates Classic
Offers opportunity to create
experiences to help users find and
refine data in a visual manner

37. Above the Fold
Keep most important content above
Secondary/Supporting Content
Users will scroll down the webpage as long as it is clear that
additional, relevant information is below the fold
Let users know main purpose of the site and content

38. Understand your Audience

39. What story are you trying to tell?
• Why are people coming to my site?
• What is the most important information I
need to give?
• Who is my audience?
• Business Users
• Stakeholders
• Technical

40. Keep it Simple [Sam]
Users rarely visit a website to enjoy its design. Most of them
are looking for information and aim to get it as simply as
possible.
Give users what they want as simply as
possible without overcrowding them with
any unnecessary content.

41. • Please thank our sponsors and staff. Without them, this event would not be possible.
• Please fill out your evaluations. We want to know what we can do better.
• Slide Deck: https://www.slideshare.net/DarceHess