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.

Good bad ugly_presentation


Published on

Design Best Practices for SharePoint/Office365 from SPTechCon DC 2017

Published in: Technology
  • ➤➤ How Long Does She Want You to Last? Here's the link to the FREE report ➤➤
    Are you sure you want to  Yes  No
    Your message goes here
  • ➤➤ How Long Does She Want You to Last? Here's the link to the FREE report ★★★
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Good bad ugly_presentation

  1. 1. The Good, The Bad and The Ugly By: D’arce Hess SPTechCon – Washington D.C. 2017
  2. 2. Introductions D’arce Hess, MVP President | DH Consulting LLC @darcehess
  3. 3. Agenda Classic vs Modern Colors/Fonts Page Layouts Links and Search Know Your Audience
  4. 4. Classic SharePoint
  5. 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. 6. Customization Capabilities Configure Customize Extend Fully Custom Experiences Level of ComplexityNo Code Full Code
  7. 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. 8. Colors
  9. 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. 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. 11. e/color-wheel/
  12. 12. SharePoint Color Palette Tool 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. 13. Fonts
  14. 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. 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. 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. 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. 18. What could go wrong?
  19. 19. Creating an .spfont file /_catalogs/theme/15/ Copy an out-of-the-box file and adjust. Do NOT overwrite source files Classic
  20. 20. Page Layouts
  21. 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. 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. 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. 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. 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. 26. Notice what’s missing? Left Navigation Mega Menus Subsites
  27. 27. Links
  28. 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. 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. 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. 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. 32. Images
  33. 33. Make images relevant • Images without a description hold little value • Use quality Images. • Make sure images are relevant to content
  34. 34. Search-based Experiences
  35. 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. 36. Display Templates Classic Offers opportunity to create experiences to help users find and refine data in a visual manner
  37. 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. 38. Understand your Audience
  39. 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. 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. 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: