presented at SharePoint Saturday NYC 2017

1. 1
BEST DESIGN
PRACTICES FOR
SHAREPOINT/O365
Strategic Advisor, AvePoint
D’ARCE HESS, MVP

2. 2
WHO AM I?
SharePoint Developer, Speaker,
Athlete and all-around nice person
@darcehess
https://www.linkedin.com/in/darcehess
Darce.Hess@avepoint.com

3. 3
AGENDA
COLOR PALETTES
FONTS
PAGE LAYOUTS
LINKS
NAVIGATION
SUMMARY
BREAK

4. 4
ARE YOU GUILTY?
• Using Flash?
• Being the best novel writer in the
office?
• Using Skittles as the basis for your color
palette?
• White space? What’s that?
• Must. Fit. One. More. Link.

5. 5
COLOR
PALETTES

6. 6
Use warm colors in your
designs to reflect passion,
happiness, enthusiasm, and
energy.
Use cool colors in your designs to give a
sense of calm or professionalism.
COLOR THEORY

7. 7
COLOR PALETTE GENERATORS
Paletton.com https://color.adobe.com/create/color-wheel/

8. 8
https://www.microsoft.com/en-
us/download/details.aspx?id=38
182
Creates the .spcolor file that is
combined to create the
Composed Look
SHAREPOINT COLOR PALETTE TOOL

9. 9
/_catalogs/theme/15/
.SPCOLOR
FILE

10. 10
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
WARM COLOR PALETTE

11. 11
COOL COLOR PALETTE
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

12. 12
FONTS

13. 13
CAN YOU
READ
THIS?
Font should be easy to read.
Clear and able to tell your
story.
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?

14. 14
In very few cases will you choose to use the same font for all areas
of your site. Knowing how to choose complimentary fonts will
help keep your users engaged and draw focus to specific content.
FONT
PAIRING
“Pairing is the ability to choose two
complimentary fonts to use on a
website, intranet or printed piece

15. 15
FONT
PAIRINGS
Anton
Font
Open sans light is a great
pairing for Anton
Montserrat
Hairline
Montserrat Light is a
great pairing for
Montserrat Hairline
Segoe UI
Open sans light is a great
pairing for Segoe UI
Cinzel
Quattrocento is a
great pairing for
Cinzel

16. 16
FONT
SIZING
This is a page heading (H1) – 24PX
This is a secondary heading (H2) – 20PX
This is a tertiary heading (H3) – 16PX
This is a fourth heading (H4) – 14PX
This is going to be some text that is in a paragraph on my page – 13PX

17. 17
FONT
COLOR
Black against
White is a harsh
contrast
Dark Grey is
easier on the
eyes
Don’t use yellow
or Red on dark
backgrounds
White works well
on colored
backgrounds

18. 18
WHAT COULD GO
WRONG?

19. 19
HOW CAN WE
MAKE A
DIFFERENCE?

20. 20
PAGE
LAYOUTS

21. 21
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.
GRID
LAYOUTS

22. 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
FULL TOP with Lg
Left, Sm Right

23. 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
• Single Topic Pages
• Guidance Pages
SMALL LEFT
LARGE RIGHT

24. 24
The Three Column has the most variety
of uses. With the left navigation, users
can choose to navigate to other areas of
the site as well as focus on content. This
layout offers a large variety of uses for:
• Department Home Pages
• Landing Pages
• Intranet Landing Pages
• Content Pages
THREE COLUMN

25. 25
Use content types to help users implement
the content that is right for the layout
versus placing multiple webpart zones on a
page and leaving too much for the user to
have to decide on.
THREE COLUMN
CONTENT
PLACEHOLDERS

26. 26
LINKS

27. 27
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.
WHAT NOT TO DO

28. 28
Seven links is the most that a short-term
memory can remember at a time. Any more
than seven and your brain will start to slow
down in processing.
THE POWER OF 7
Short Term Memory Study

29. 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.
ICONOGRAPHY
“Use imagery to help guide users

30. 30
IMAGE TELLS A 1000
WORDS
Use Color to help differentiate
functionality for icons.
Use logical groupings to help
user navigate and find items
easily.

31. 31
Client-side rendering allows for presentation of list items to create
a new experience through use of javascript.
CLIENT-SIDE
RENDERING
JSLINK
“Useful in Classic SharePoint
experiences

32. 32
Overrides rendering of
Header
Item
Footer
Create any HTML/CSS
Applies to all lists on page*
Use the list title for targeting
ALTERING OF
LISTS

33. 33
JSLINK
CODE
http://dev.office.com/patterns-and-practices-detail/1851

34. 34
Display templates allow for the alternative displaying of search
results in classic SharePoint experiences
DISPLAY
TEMPLATES
“Useful in Classic SharePoint
experiences

35. 35
Control Template
It’s the container around your results
where you refer to any custom CSS or JS
files you may want to use. This is the
part does not get repeated as each
items gets loaded in the Search Results.
Item Template
This is where you design how each item
will look like, which managed properties
from the result item will be used and the
html used to display them.
DISPLAY TEMPLATE
BASICS

36. 36
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
CUSTOM SEARCH
EXPERIENCES

37. 37
ADD INTERACTIVEY

38. 38
DISPLAY
TEMPLATE
CODE
https://mytenant.sharepoint.com/_catalogs/masterpage/Display%20T
emplates/Search

39. 39
NAVIGATION

40. 40
Drop Down menus are a primary
way of creating navigation in
SharePoint. Be careful not to place
too many links in the drop down.
Think about your users and the
screen sizes available to them.
DROPDOWN NAV

41. 41
If using a mega menu,
see if you can places
links in a category to help
make choices easier for
users to find
MEGAMENU NAV

42. 42
Vertical Navigation is a great way to
showcase your navigation in a
refreshing way. If you show off-
canvas, the user can choose to
minimize or hide the navigation to
focus on the content on the page.
FLY OUT NAV

43. 43
MODERN O365

44. 44
Know what is capable out of the
box first before looking at
customization
CUSTOMIZATIONS
Yes or No?

45. 45
OPTIONS
FOR
CUSTOMIZING
• Custom colors applied through a theme
• SPFX WebPart
• Changing layout sections to tell a story
• Add-In Model

46. 46
Three experiences to design for:
• Initial Layout
• WebPart Properties
• Item Properties
SPFX DESIGN

47. 47
What should the user see and do
once a webpart is placed on the
page?
Design needs to lead the user to
the next step.
INITIAL LAYOUT

48. 48
• Select from multiple Layouts
• Select if webpart needs to be list-driven
• Does the list already exist or should it be
provisioned?
• How do users get to the list?
• Consider field mapping for the list
• Support filtering and ordering?
WEBPART PROPERTIES

49. 49
LAYOUT OPTIONS

50. 50
• Edit each item inline or
through a list
• Change the URL
• Change the Image
• Rich Content Editing Inline
• Link to Guidance Page
ITEM PROPERTIES

51. 51
SUMMARY

52. 52
WHAT DID
YOU
LEARN?