![Page 1: The good, the bad, the ugly - Best Practices for Design in SharePoint](https://reader036.vdocument.in/reader036/viewer/2022070600/58e4d2a81a28abf5048b4ce9/html5/thumbnails/1.jpg)
The Good, the Bad & the UglyUnderstanding Good Design Practices in SharePoint & O365 365365
SPTechCon Boston, June 27-30, 2016D’arce Hess
![Page 2: The good, the bad, the ugly - Best Practices for Design in SharePoint](https://reader036.vdocument.in/reader036/viewer/2022070600/58e4d2a81a28abf5048b4ce9/html5/thumbnails/2.jpg)
@darcehess
https://www.linkedin.com/in/darcehess
D’arce Hess
![Page 3: The good, the bad, the ugly - Best Practices for Design in SharePoint](https://reader036.vdocument.in/reader036/viewer/2022070600/58e4d2a81a28abf5048b4ce9/html5/thumbnails/3.jpg)
Agenda
Overview Color Palettes Fonts Page Layout
Structures
When to use Links Navigation Summary
![Page 4: The good, the bad, the ugly - Best Practices for Design in SharePoint](https://reader036.vdocument.in/reader036/viewer/2022070600/58e4d2a81a28abf5048b4ce9/html5/thumbnails/4.jpg)
Overview
![Page 5: The good, the bad, the ugly - Best Practices for Design in SharePoint](https://reader036.vdocument.in/reader036/viewer/2022070600/58e4d2a81a28abf5048b4ce9/html5/thumbnails/5.jpg)
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.
![Page 6: The good, the bad, the ugly - Best Practices for Design in SharePoint](https://reader036.vdocument.in/reader036/viewer/2022070600/58e4d2a81a28abf5048b4ce9/html5/thumbnails/6.jpg)
General No Nos of DesignDo 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?”.
![Page 7: The good, the bad, the ugly - Best Practices for Design in SharePoint](https://reader036.vdocument.in/reader036/viewer/2022070600/58e4d2a81a28abf5048b4ce9/html5/thumbnails/7.jpg)
Choosing the right Color Palette
![Page 8: The good, the bad, the ugly - Best Practices for Design in SharePoint](https://reader036.vdocument.in/reader036/viewer/2022070600/58e4d2a81a28abf5048b4ce9/html5/thumbnails/8.jpg)
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.
![Page 9: The good, the bad, the ugly - Best Practices for Design in SharePoint](https://reader036.vdocument.in/reader036/viewer/2022070600/58e4d2a81a28abf5048b4ce9/html5/thumbnails/9.jpg)
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
![Page 10: The good, the bad, the ugly - Best Practices for Design in SharePoint](https://reader036.vdocument.in/reader036/viewer/2022070600/58e4d2a81a28abf5048b4ce9/html5/thumbnails/10.jpg)
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
![Page 11: The good, the bad, the ugly - Best Practices for Design in SharePoint](https://reader036.vdocument.in/reader036/viewer/2022070600/58e4d2a81a28abf5048b4ce9/html5/thumbnails/11.jpg)
Tools for color palette creation
Paletton.comhttps://color.adobe.com/create/color-wheel/
![Page 12: The good, the bad, the ugly - Best Practices for Design in SharePoint](https://reader036.vdocument.in/reader036/viewer/2022070600/58e4d2a81a28abf5048b4ce9/html5/thumbnails/12.jpg)
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
![Page 13: The good, the bad, the ugly - Best Practices for Design in SharePoint](https://reader036.vdocument.in/reader036/viewer/2022070600/58e4d2a81a28abf5048b4ce9/html5/thumbnails/13.jpg)
Incorporating your Brand
Understand who your target audience isKeep it Simple
![Page 14: The good, the bad, the ugly - Best Practices for Design in SharePoint](https://reader036.vdocument.in/reader036/viewer/2022070600/58e4d2a81a28abf5048b4ce9/html5/thumbnails/14.jpg)
Incorporating your BrandExample: Mandarin Oriental Hotel Group
Needed a central location to push news to the organization
Uses Company color palette
Personal information for each user.
![Page 15: The good, the bad, the ugly - Best Practices for Design in SharePoint](https://reader036.vdocument.in/reader036/viewer/2022070600/58e4d2a81a28abf5048b4ce9/html5/thumbnails/15.jpg)
Incorporating your BrandCompany Culture was a forefrontExternal News ResourcesNeeded a clean interface
![Page 16: The good, the bad, the ugly - Best Practices for Design in SharePoint](https://reader036.vdocument.in/reader036/viewer/2022070600/58e4d2a81a28abf5048b4ce9/html5/thumbnails/16.jpg)
Choosing your Fonts
![Page 17: The good, the bad, the ugly - Best Practices for Design in SharePoint](https://reader036.vdocument.in/reader036/viewer/2022070600/58e4d2a81a28abf5048b4ce9/html5/thumbnails/17.jpg)
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?
![Page 18: The good, the bad, the ugly - Best Practices for Design in SharePoint](https://reader036.vdocument.in/reader036/viewer/2022070600/58e4d2a81a28abf5048b4ce9/html5/thumbnails/18.jpg)
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
![Page 19: The good, the bad, the ugly - Best Practices for Design in SharePoint](https://reader036.vdocument.in/reader036/viewer/2022070600/58e4d2a81a28abf5048b4ce9/html5/thumbnails/19.jpg)
Common Font Pairings
Anton FontOpen sans light is a great pairing for Anton
Montserrat HairlineMontserrat Light is a great pairing for Montserrat Hairline
BodoniMontserrat is a nice pairing with this font
CinzelQuattrocento is a great pairing for Cinzel
YellowtailOpen sans is a great pairing for Yellowtail
Segoe UIOpen sans light is a great pairing for Segoe UI
![Page 20: The good, the bad, the ugly - Best Practices for Design in SharePoint](https://reader036.vdocument.in/reader036/viewer/2022070600/58e4d2a81a28abf5048b4ce9/html5/thumbnails/20.jpg)
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
![Page 21: The good, the bad, the ugly - Best Practices for Design in SharePoint](https://reader036.vdocument.in/reader036/viewer/2022070600/58e4d2a81a28abf5048b4ce9/html5/thumbnails/21.jpg)
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
![Page 22: The good, the bad, the ugly - Best Practices for Design in SharePoint](https://reader036.vdocument.in/reader036/viewer/2022070600/58e4d2a81a28abf5048b4ce9/html5/thumbnails/22.jpg)
Bad
What could go wrong?
![Page 23: The good, the bad, the ugly - Best Practices for Design in SharePoint](https://reader036.vdocument.in/reader036/viewer/2022070600/58e4d2a81a28abf5048b4ce9/html5/thumbnails/23.jpg)
Good
Why?
![Page 24: The good, the bad, the ugly - Best Practices for Design in SharePoint](https://reader036.vdocument.in/reader036/viewer/2022070600/58e4d2a81a28abf5048b4ce9/html5/thumbnails/24.jpg)
Creating an .spfont file
/_catalogs/theme/15/
![Page 25: The good, the bad, the ugly - Best Practices for Design in SharePoint](https://reader036.vdocument.in/reader036/viewer/2022070600/58e4d2a81a28abf5048b4ce9/html5/thumbnails/25.jpg)
Understanding Page Layouts
![Page 26: The good, the bad, the ugly - Best Practices for Design in SharePoint](https://reader036.vdocument.in/reader036/viewer/2022070600/58e4d2a81a28abf5048b4ce9/html5/thumbnails/26.jpg)
The Grid Layout
Most Modern Layouts are based on a 12 columnGrid Layout. It allows for easier consistency in content placement on a page and spacing considerations.
![Page 27: The good, the bad, the ugly - Best Practices for Design in SharePoint](https://reader036.vdocument.in/reader036/viewer/2022070600/58e4d2a81a28abf5048b4ce9/html5/thumbnails/27.jpg)
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
![Page 28: The good, the bad, the ugly - Best Practices for Design in SharePoint](https://reader036.vdocument.in/reader036/viewer/2022070600/58e4d2a81a28abf5048b4ce9/html5/thumbnails/28.jpg)
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
![Page 29: The good, the bad, the ugly - Best Practices for Design in SharePoint](https://reader036.vdocument.in/reader036/viewer/2022070600/58e4d2a81a28abf5048b4ce9/html5/thumbnails/29.jpg)
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
![Page 30: The good, the bad, the ugly - Best Practices for Design in SharePoint](https://reader036.vdocument.in/reader036/viewer/2022070600/58e4d2a81a28abf5048b4ce9/html5/thumbnails/30.jpg)
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.
![Page 31: The good, the bad, the ugly - Best Practices for Design in SharePoint](https://reader036.vdocument.in/reader036/viewer/2022070600/58e4d2a81a28abf5048b4ce9/html5/thumbnails/31.jpg)
Ways to Present Links
![Page 32: The good, the bad, the ugly - Best Practices for Design in SharePoint](https://reader036.vdocument.in/reader036/viewer/2022070600/58e4d2a81a28abf5048b4ce9/html5/thumbnails/32.jpg)
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
![Page 33: The good, the bad, the ugly - Best Practices for Design in SharePoint](https://reader036.vdocument.in/reader036/viewer/2022070600/58e4d2a81a28abf5048b4ce9/html5/thumbnails/33.jpg)
Lucky Number 7
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.
![Page 34: The good, the bad, the ugly - Best Practices for Design in SharePoint](https://reader036.vdocument.in/reader036/viewer/2022070600/58e4d2a81a28abf5048b4ce9/html5/thumbnails/34.jpg)
IconographyUsing 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.
![Page 35: The good, the bad, the ugly - Best Practices for Design in SharePoint](https://reader036.vdocument.in/reader036/viewer/2022070600/58e4d2a81a28abf5048b4ce9/html5/thumbnails/35.jpg)
Client-Side RenderingOverrides rendering of
HeaderItemFooter
Create any HTML/CSS
Applies to all lists on page*
Use the list title for targeting
![Page 36: The good, the bad, the ugly - Best Practices for Design in SharePoint](https://reader036.vdocument.in/reader036/viewer/2022070600/58e4d2a81a28abf5048b4ce9/html5/thumbnails/36.jpg)
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
![Page 37: The good, the bad, the ugly - Best Practices for Design in SharePoint](https://reader036.vdocument.in/reader036/viewer/2022070600/58e4d2a81a28abf5048b4ce9/html5/thumbnails/37.jpg)
Display Templates
![Page 38: The good, the bad, the ugly - Best Practices for Design in SharePoint](https://reader036.vdocument.in/reader036/viewer/2022070600/58e4d2a81a28abf5048b4ce9/html5/thumbnails/38.jpg)
Engaging Navigation
![Page 39: The good, the bad, the ugly - Best Practices for Design in SharePoint](https://reader036.vdocument.in/reader036/viewer/2022070600/58e4d2a81a28abf5048b4ce9/html5/thumbnails/39.jpg)
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.
![Page 40: The good, the bad, the ugly - Best Practices for Design in SharePoint](https://reader036.vdocument.in/reader036/viewer/2022070600/58e4d2a81a28abf5048b4ce9/html5/thumbnails/40.jpg)
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
![Page 41: The good, the bad, the ugly - Best Practices for Design in SharePoint](https://reader036.vdocument.in/reader036/viewer/2022070600/58e4d2a81a28abf5048b4ce9/html5/thumbnails/41.jpg)
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.
![Page 42: The good, the bad, the ugly - Best Practices for Design in SharePoint](https://reader036.vdocument.in/reader036/viewer/2022070600/58e4d2a81a28abf5048b4ce9/html5/thumbnails/42.jpg)
Summary
![Page 43: The good, the bad, the ugly - Best Practices for Design in SharePoint](https://reader036.vdocument.in/reader036/viewer/2022070600/58e4d2a81a28abf5048b4ce9/html5/thumbnails/43.jpg)
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
![Page 44: The good, the bad, the ugly - Best Practices for Design in SharePoint](https://reader036.vdocument.in/reader036/viewer/2022070600/58e4d2a81a28abf5048b4ce9/html5/thumbnails/44.jpg)
Thank you!