This document discusses good and bad design practices for SharePoint and Office 365 sites. It covers choosing color palettes, fonts, page layouts, and effective ways to present links and navigation. For colors, it recommends using a limited palette and pairing warm and cool tones. For fonts, it suggests choosing pairs of complementary fonts and proper sizing. Common page layouts include top zone, two-column, and three-column designs. Effective navigation uses drop-down menus, mega-menus, vertical styles and limits the number of links. The goal is to make content easily digestible and navigation simple to use.
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. 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?”.
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. 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. 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. Tools for color palette creation
Paletton.com
https://color.adobe.com/create/color-wheel/
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
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.
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. 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. 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. 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. 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
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. 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. 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. 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. 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.
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. 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. 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.
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
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. 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. 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.
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