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.

Best Design Practices for SharePoint and Office 365

presented at SharePoint Saturday NYC 2017

  • Be the first to comment

  • Be the first to like this

Best Design Practices for SharePoint and Office 365

  2. 2. 2 WHO AM I? SharePoint Developer, Speaker, Athlete and all-around nice person @darcehess
  4. 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.
  6. 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
  8. 8. 8 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. 9 /_catalogs/theme/15/ .SPCOLOR FILE
  10. 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. 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. 12 FONTS
  13. 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. 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. 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. 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. 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. 18 WHAT COULD GO WRONG?
  20. 20. 20 PAGE LAYOUTS
  21. 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. 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. 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. 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. 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. 26 LINKS
  27. 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. 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. 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. 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. 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. 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. 33 JSLINK CODE
  34. 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. 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. 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
  38. 38. 38 DISPLAY TEMPLATE CODE emplates/Search
  39. 39. 39 NAVIGATION
  40. 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. 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. 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. 43 MODERN O365
  44. 44. 44 Know what is capable out of the box first before looking at customization CUSTOMIZATIONS Yes or No?
  45. 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. 46 Three experiences to design for: • Initial Layout • WebPart Properties • Item Properties SPFX DESIGN
  47. 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. 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. 49 LAYOUT OPTIONS
  50. 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. 51 SUMMARY
  52. 52. 52 WHAT DID YOU LEARN?