Having defined and implemented Service Portals for customers with vastly different requirements, Senior ServiceNow Developers Dana Ivanof and Iulian Manea know the importance of creating designs that are not only appealing but also functional and user-friendly. To that end, they have compiled this comprehensive resource guide that will help you provide a fantastic user experience.
The principle of mobile first should be on everyone’s mind when building a portal. This means creating a layout with a default configuration for mobile devices and layering features for wider screens on top of that default. Here you can find a guide for implementing such a layout.
Laws of UX is an interactive collection of best practices that designers can consider when creating user interfaces. It has a useful introduction to the psychology fundamentals that have a direct influence on how people process and interact with the interfaces designers create.
Here you can find a wealth of insightful and inspiring UX resources, from trends to tools and tips.
A very important part of UX is responsive web design (RWD), meaning a website’s ability to change layout and appearance to suit various screen widths and resolutions. This helpful resource from Mozilla will help you understand RWD and its main techniques.
This is where you will find the bootstrap components for Angular JS, on which ServiceNow is based, along with bootstrap 3.4.
Coolors is a color generator that allows you to create your own palette or use one of the thousands schemes in their catalog. To make it easier to access your palettes, Coolors lets you sort them in projects and collections. Other useful tools include the Color Picker, which gives you information on conversions, combinations, and the Color Contrast Checker, which lets you calculate the contrast ratio of text and background colors.
Another useful alternative is the Color Tool from Google’s Material Design, that lets you create color palettes and measure the accessibility level of color combinations.
If you want to learn more about color and how to differentiate it in information layers, check out this interesting article about the science of color contrast and signage.
With over 1,000 open-source font families, Google Fonts is a great resource that can be easily added to the Service Portal via URL. The catalogue includes over 50 variable font families and color schemes for improved accessibility.
Font Squirrel is a free service that includes a Base64 encoder tool to make it easier to add the font files to the Service Portal.
If you need help with choosing the best font combination for your project, then look no further than Typewolf. Here you’ll find everything you want to know about typography, type pairing and alternatives for various fonts.
Typetester lets you test and compare over 2800 web fonts from Adobe Edge, Adobe Typekit and Google Fonts to see what would look better. They also have a WYSIWYG web typography editor with the option to export your designs as HTML and CSS.
Structural hierarchies are the best way to categorize workflows and processes. Before talking about design accessibility and the importance of colors and fonts in building a service portal, our developers recommend understanding the customer’s practices, procedures and activities through assessment sessions. Those discussions will help you better translate their workflows into categories, catalogue items or requests and classify them hierarchically.
A step-by-step guide on how to make websites more accessible, like adding enough color contrast, using labels instead of placeholder text, using focus indicators, and other helpful suggestions.
Here you can find the official guidelines on designing for people with disabilities, developed by the Web Accessibility Initiative.
These tools allow you to see how a color is perceived by color blind people. Both the Color Picker mentioned above and COBLIS (Color Blindness Simulator) are great when it comes to testing colors.
Images & Icons
A resource aggregator for designers, that includes everything from stock photos, typography and icons, to colors, gradients and animations.
This open-source icon collection has all you need to draw your users attention, with each symbol available in five themes and a range of downloadable sizes and densities.
A repository of over 60 million free to use media files, categorized by topics, location and type. You can contribute your own work to the collection.
A collection of free stock photos to enhance the look of the Service Portal.
Animista is a collection of ready to use CSS animations and a playground where you can tweak and test them. This will considerably speed up the process of iterating different animation ideas.
This Material Design library made for React includes various styles of tab components, ranging from simple to customized.
Here you can find lots of tips, tricks and techniques to help you build a cohesive design. Their comprehensive guide to CSS flexbox layout includes explanations and examples on everything from the flex container to the flex items. Another great resource is the CSS grid guide that covers all the settings for the grid parent container and the grid child elements.
This will help you override the bootstrap variables used by ServiceNow.