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
This is a great resource for exploring design principles that govern User Experience.
Colors
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
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.
Compare and contrast different fonts to see what works and looks best together. This is an efficient way to test screen readability.
Google fonts are easy to add to a Service Portal via URL.
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
This is another great tool for testing your images and other portal elements for viewing by color blind users.
This article offers simple steps to design a more accessible web.
The official accessibility guidelines can be found here.
Code Resources
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.
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-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.
