Expert Insights on ServiceNow | GlideFast Consulting Blog

A Guide to Designing Elegant Service Portals in ServiceNow

Written by Sarah Toulson | Jun 19, 2020 12:11:00 PM

Many organizations who use ServiceNow seek a Service Portal experience that is uniquely tailored to their organization's brand and culture, taking even some veteran developers into the unfamiliar territory of grids, color, typography, and style.

In our GlideFast On Air webinar series, Sarah Toulson, Portal Developer at GlideFast Consulting, addressed this topic in her webinar, Make It Pop: Designing Elegant Service Portals Your Users Will Appreciate. As a follow-up, Sarah has created a full guide of resources to help you tackle common Service Portal design challenges and explore principles and methods that you can use to set your portal designs apart as beautiful, engaging experiences any user will love.

UI / UX Laws

UX Laws

This is a great resource for exploring design principles that govern User Experience.

 

 

 

 

Colors

Coolors Color Generator

Lay out a new palette or explore existing ones. Use this site to set up easy access to color palettes you use repeatedly. This also has some notable tools to check your color palette for use by vision-impaired users.

 

 

 

Typography and Font Matching

Typewolf

This is a great source for information about fonts, font pairing, and substitutions for that annoyingly perfect font you don't have ready access to.

 

 

 

 

Typetester

Compare and contrast different fonts to see what works and looks best together. This is an efficient way to test screen readability.

Google Fonts

Google fonts are easy to add to a Service Portal via URL.

FontSquirrel

FontSquirrel has a large collection of freely available fonts and also has a Base64 encoder tool you can use to help get your font files into your Service Portal.

Designing for Accessibility

Color-blindness tester

This is another great tool for testing your images and other portal elements for viewing by color blind users.

 

 

 

 

Designing for Accessibility

This article offers simple steps to design a more accessible web.

Web Accessibility Guidelines

The official accessibility guidelines can be found here.

Code Resources

CSS Tricks

Their Guide to Flexbox (Sarah’s favorite of the different code explainer sites) offers explanations of different CSS items that are clear with plenty of pictures and examples.

 

 

 

 

Bootstrap SCSS Variables

This is a key to all those bootstrap variables, many of which are utilized in Service Portal. Use these to figure out how to override those out-of-box settings.

Images and Icons

Free Images from Pexels

Free-for-use images!

 

ServiceNow's FontAwesome Icons

This is the version of FontAwesome included with Service Portal. Use these icons without having to include any additional resources.

 

 

Interested in learning more about Service Portals in ServiceNow? Reach out to our team. We would love to learn more about your ServiceNow challenges and help your organization build better solutions.