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.
The Good, the Bad & the Ugly
Understanding Good Design Practices in SharePoint & O365 365365
SPTechCon Boston, June 27-30,...
@darcehess
https://www.linkedin.com/in/darcehess
Darce.Hess@avepoint.com
D’arce Hess
Agenda
Overview
Color
Palettes
Fonts Page Layout
Structures
When to
use Links
Navigation Summary
Overview
General Bad Design Practices
• Don’t use Flash. Google and Firefox have recently disabled the flash plugin on their browse...
General No Nos of Design
Do use simple and clear content. Keep the content on your site limited to headings sub-headings, ...
Choosing the right Color Palette
Color Theory
Use warm colors in your designs to reflect passion, happiness, enthusiasm,
and energy.
Use cool colors in you...
Reds, Oranges, Yellows
Reds help to draw a statement most often
associated with passion, power, elegance
Institutions ofte...
Blues
Dark Blues tend to give the feeling or impression of
trust, professionalism, steadfastness.
Common type of instituti...
Tools for color palette creation
Paletton.com
https://color.adobe.com/create/color-wheel/
SharePoint Color Palette Tool
https://www.microsoft.com/en-
us/download/details.aspx?id=38182
Creates the .spcolor file th...
Incorporating your Brand
Understand who your target audience is
Keep it Simple
Incorporating your Brand
Example: Mandarin Oriental Hotel Group
Needed a central location to push news
to the organization...
Incorporating your Brand
Company Culture was a forefront
External News Resources
Needed a clean interface
Choosing your Fonts
Readability
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...
Pairing
In very few cases will you choose to use the same font for all areas of your
site. Knowing how to choose complimen...
Common Font Pairings
Anton
Font
Open sans light is a great
pairing for Anton
Montserrat
Hairline
Montserrat Light is a
gre...
What is the best Font Size?
Using the correct
font size can help to
increase readability
for your users
This is a page hea...
Choosing the Font Color
Black against
White is a harsh
contrast
White against
black is also hard
on the eyes
Dark Grey is
...
Bad
What could go
wrong?
Good
Why?
Creating an .spfont file
/_catalogs/theme/15/
Understanding Page Layouts
The Grid Layout
Most Modern Layouts are based on a 12 column
Grid Layout. It allows for easier consistency in
content plac...
Top Zone with Lg Left/Small right
Two Column Layouts provide a great canvas
for providing focus on specific content and
al...
Small Left/Large Right
Single Column Layouts include a Left Navigation to help
users get to categories of content. This la...
The Three Column Layout
The Three Column has the most variety of
uses. With the left navigation, users can
choose to navig...
The Three Column Layout
Use content types to help users implement
the content that is right for the layout
versus placing ...
Ways to Present Links
The easiest solution to
navigation was to add
another link on the page.
What happened in the end,
was we had pages based o...
Lucky Number 7
Seven links is the most that a short-term memory can
remember at a time. Any more than seven and your
brain...
Iconography
Using Icons to help present a list or create an
additional navigational structure will break up the
presentati...
Client-Side Rendering
Overrides rendering of
Header
Item
Footer
Create any HTML/CSS
Applies to all lists on page*
Use the ...
Display Templates
Display Templates are used to display data from SharePoint search.
Search is the best way to aggregate d...
Display Templates
Engaging Navigation
Drop Down Navigation
Drop Down menus are a primary way of creating
navigation in SharePoint. Be careful not to place too
m...
Mega-Menu Navigation
If using a mega menu, see if you
can places links in a category to
help make choices easier for
users...
Vertical Navigation
Vertical Navigation is a great way to showcase
your navigation in a refreshing way. If you
show off-ca...
Summary
What did we learn?
• Colors in a site are used to provoke an emotional response
• Content is placed in specific layouts to...
Thank you!
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
SharePoint Site Collections - Best Practices and Recommendations
Next
Upcoming SlideShare
SharePoint Site Collections - Best Practices and Recommendations
Next
Download to read offline and view in fullscreen.

6

Share

The good, the bad, the ugly - Best Practices for Design in SharePoint

Download to read offline

Presented at SPTechCon Boston and SharePoint Saturday Boston 2016

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

The good, the bad, the ugly - Best Practices for Design in SharePoint

  1. 1. The Good, the Bad & the Ugly Understanding Good Design Practices in SharePoint & O365 365365 SPTechCon Boston, June 27-30, 2016D’arce Hess
  2. 2. @darcehess https://www.linkedin.com/in/darcehess Darce.Hess@avepoint.com D’arce Hess
  3. 3. Agenda Overview Color Palettes Fonts Page Layout Structures When to use Links Navigation Summary
  4. 4. Overview
  5. 5. General Bad Design Practices • Don’t use Flash. Google and Firefox have recently disabled the flash plugin on their browsers due to a ‘critical’ security flaw. • Don’t use long paragraphs of text. People browsing online have a very short attention span – they want quick answers, they most certainly aren’t going to read through large paragraphs of text. • Don’t use 50 different colors. Yes color does brighten up our lives, but there is a limit to how much color you should use on your site. • Don’t have background music! There is nothing more annoying than a website with background music… nothing. Besides, this is corny – you don’t want people to think you are corny right? • Don’t clutter! Websites that are cluttered make it hard for customers to browse and find what they are looking for.
  6. 6. General No Nos of Design Do use simple and clear content. Keep the content on your site limited to headings sub-headings, short paragraphs of text, bullet points and lists. The easier to digest, the better. Do use professional, high quality photos. You want the site to be attractive with images and using large photos as a fade, decorative background can add a very nice effect. Do use white space! Don’t be afraid to use space to your advantage in your website – it will allow you break up all the information on your site into digestible chunks. Websites that try cram everything onto one page that fits on your screen are confusing and overwhelming. Do use simple navigation. The site must be easy to maneuver so visitors can find what they are looking for without wasting time. This is probably the most over looked aspect of website design – what you need to be thinking is “what is the fastest way to get a visitor from the home page, to understand what we offer and send us an enquiry?”.
  7. 7. Choosing the right Color Palette
  8. 8. Color Theory 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.
  9. 9. Reds, Oranges, Yellows 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
  10. 10. Blues 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
  11. 11. Tools for color palette creation Paletton.com https://color.adobe.com/create/color-wheel/
  12. 12. SharePoint Color Palette Tool https://www.microsoft.com/en- us/download/details.aspx?id=38182 Creates the .spcolor file that is combined to create the Composed Look
  13. 13. Incorporating your Brand Understand who your target audience is Keep it Simple
  14. 14. Incorporating your Brand Example: Mandarin Oriental Hotel Group Needed a central location to push news to the organization Uses Company color palette Personal information for each user.
  15. 15. Incorporating your Brand Company Culture was a forefront External News Resources Needed a clean interface
  16. 16. Choosing your Fonts
  17. 17. Readability 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?
  18. 18. Pairing 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. Pairing is the ability to choose two complimentary fonts to use on a website, intranet or printed piece
  19. 19. Common Font Pairings 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
  20. 20. What is the best Font Size? Using the correct font size can help to increase readability for your users This is a page heading (H1)This is a secondary heading (H2)This is a tertiary heading (H3) This is a fourth heading (H4) This is going to be some text that is in a paragraph on my page
  21. 21. Choosing the Font Color 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 colored backgrounds
  22. 22. Bad What could go wrong?
  23. 23. Good Why?
  24. 24. Creating an .spfont file /_catalogs/theme/15/
  25. 25. Understanding Page Layouts
  26. 26. The Grid Layout 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.
  27. 27. Top Zone with Lg Left/Small right 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
  28. 28. Small Left/Large Right 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
  29. 29. The Three Column Layout 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
  30. 30. The Three Column Layout 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.
  31. 31. Ways to Present Links
  32. 32. 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
  33. 33. Lucky Number 7 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.
  34. 34. Iconography 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. Use Color to help differentiate functionality for icons.
  35. 35. Client-Side Rendering Overrides rendering of Header Item Footer Create any HTML/CSS Applies to all lists on page* Use the list title for targeting
  36. 36. Display Templates 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
  37. 37. Display Templates
  38. 38. Engaging Navigation
  39. 39. Drop Down Navigation 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.
  40. 40. Mega-Menu Navigation If using a mega menu, see if you can places links in a category to help make choices easier for users to find
  41. 41. Vertical Navigation 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.
  42. 42. Summary
  43. 43. What did we learn? • Colors in a site are used to provoke an emotional response • Content is placed in specific layouts to allow users to focus on content first and the process • Creating a simple navigation will allow users to get to content faster • Too much content on a page will deter users from using the page and going further • Links can be more affective if presented in different manners
  44. 44. Thank you!
  • ElizabethCatchpole

    Aug. 1, 2019
  • sarasturtevant

    Jul. 24, 2019
  • Explore19

    May. 29, 2019
  • RobVanDerHock

    Feb. 28, 2019
  • bobbydacron

    Dec. 12, 2018
  • DanJarleFllo

    Sep. 21, 2017

Presented at SPTechCon Boston and SharePoint Saturday Boston 2016

Views

Total views

2,877

On Slideshare

0

From embeds

0

Number of embeds

26

Actions

Downloads

131

Shares

0

Comments

0

Likes

6

×