Samanage Service Portal Design Guide

Document created by Yum Darling Administrator on Oct 12, 2017Last modified by David Lotan on Mar 14, 2018
Version 20Show Document
  • View in full screen mode

The following guide explains how to customize the Service Portal.  

 

Colors

_________________________________________________________________________________________________________________

 

  • Choose the primary color for the portal. It should match your brand colors.
  • The secondary color will be based on the main color and will be automatically generated. Note that you have the option of manually selecting the secondary color but this is not recommended.
  • Dark colors are preferable.

      

 

 

 

  • The font color needs to contrast with the background color. A dark background will have a light font, and vice versa.

 

 

                                

 

 

Logo

_________________________________________________________________________________________________________________

 

  • The company logo should be uploaded.
  • You can upload the following file types: .png, .jpg, .svg, .pdf (a .png file is recommended).
  • The logo background should be transparent.
  • If you have multiple logo options, upload a horizontal, rectangular logo.
  • The ideal size is 160 pixels wide and 40 pixels high.

 

 

NameComponent NameExamples
Typepng, jpg, svg, pdf
Size

160px width

40px height

BackgroundTransparent 

 

 

 

Name

Description

Examples

Special

If you know that your logo requires an optical compensation  for example - if you have a letter that is longer than the rest like the letter g in Samanage, then you need to make sure there is white space around the words so that it looks balanced within the portal. 

The maximum size includes internal empty spaces

ColorContrasting color to the background color 

 

 

  • If you upload a file with a different size, it will be increased or decreased proportionally
  • If the logo is larger than 160 pixels wide - it will be decreased to 160 pixels
  • If the logo is smaller than the desired dimensions - it will skew up to the full height of 40 pixels or a full width of 160 pixels

 

Sizes

Smaller

Wider
Higher

 

  • If you are interested in uploading an icon/shape, the recommended size is 40 pixels for both height & width

 

IconSizes

 

 

 

Text

_________________________________________________________________________________________________________________

 

  • We created a welcome statement for you - Welcome to the Service Portal
  • If you want to change the welcome sentence, you can enter the settings section and change it
  • The sentence What can we help you with? cannot be changed
  • The Search bar allows your users to take advantage of the AI powered suggestion feature.




Image

_________________________________________________________________________________________________________________

 

  • It is very important to choose a picture that is horizontal
  • The colors in the picture should match the color of the brand
  • Image content - Choose an image that conveys your company culture
  • Upload a primary image to the portal
  • The ideal size is 900 pixels width and 300 pixels height
  • Images will shrink or expand proportionally

 

 

 

Rich text

_________________________________________________________________________________________________________________

  • It is important to make sure there is a reasonable gap between the image and the text.

 

The Popular Services and Useful Articles section

_________________________________________________________________________________________________________________

  • We recommend a maximum of 5-10 links per column so that users can see them all without having to scroll down
  • We recommend balancing the length of the two lists
  • Too many links will also push the “Create New Ticket” option down, obscuring it from the user
  • The links are sorted according to their level of popularity.

 

Let us know if you have any questions! 

 

Your Samanage Team

3 people found this helpful

Attachments

    Outcomes