I created some visio shapes to help create a mockup of what the form will look like (not the ESS view) so we can provide a visual and get signoff from the service owner prior to development. We found that this helps to nail down the exact requirements and also reduce the rework when creating catalog items (rather than having a developer change/rework after a service owner see the initial form).
Has anyone else run into this issue? Rework because the form/workflow isn't mature or doesn't exist yet so the service owner has lots of changes while in development? If so, how do you handle it and what has helped?
This is what it looks like, I can't attach the visio shapes since .vss file isn't allowed but if you want it, message me thru the community.
Until now, I have been using Google's Material icons in .svg format pretty successfully. They are open source and are available under the Apache License Version 2.0. In the image from my post above, all of the icons you see are from Google's Material icons. For the most part, they are an exact match, with the exception of the connect icon next to global search. Granted, you won't be able to search Google's icons by the same name used in ServiceNow but there haven't been many I couldn't find.
After writing the above I figured I would try one more time to locate the official icon set and found it along with some other cool stuff:
- Check out ServiceNow's Design System (Style Guide)
- Icons are generated using a font called retina_icons
- retina_icons are Generated by grunt-webfont and Based on https://github.com/endtwist/fontcustom/blob/master/lib/fontcustom/templates/fontcustom.css (this github link didn't work but you can check out the fontcustom page here)
- You can view all the icons in your instance from your browser using this url:
- <your instance>.service-now.com/styles/retina_icons/retina_icons.html
- You can download the current retina-icon ttf font file from your instance using this url
- <your instance>.service-now.com/styles/retina_icons/retina_icons_2017_1_17.ttf
- This can be found using the DevTools in Google Chrome under Network>Fonts when viewing the icons using the .html url listed above. (Open DevTools first then load the page)
As for the other elements like search boxes and such, I literally found it easier to make them. Here are some tips I've learned:
- Take a screenshot on a screen that matches the screen resolution used most in your environment (e.g. 1920x1080)
- Use that as a template to size elements appropriately, like a search box.
- Use the eyedropper tool in XD to match the color on elements you make from the screenshot or use the ServiceNow Design System
- Use ctrl+r to quickly repeat objects like form boxes and adjust their spacing (A SERIOUS TIME SAVER).
I hope this is helpful. Creating mockups that represent the actual environment has serious value. Being able to do it without actually having to configure a personal instance is a huge timesaver especially when you can do it with XD in real time in a meeting. That also means more people can do it because you don't need to know how to configure an instance, just need to know generally whats possible and a skilled developer can likely make it happen.
