10 July 2020|
The Amazing Power of CSS: Change an App's Experience with just CSS
Sometimes a product development team needs to be able to do more than just visualize design changes. They need to be able to use and interact with them on a production application, but in a non-permanent way. That’s where a CSS overlay can make a powerful impact.
As almost every experienced product designer will attest, when making significant experience change recommendations to a product manager and development team means that you’re going to get a lot of “intense constructive feedback.” I was faced with this challenge and rather than go through rounds and rounds of high-res prototypes, to gain buy in on the design direction, I took a different path and created a CSS Overlay file for our web-based application.
Webapp without the CSS Overlay applied.
A CSS Overlay file allows for design and major styling changes to be applied directly to an existing UI of an app without involving or affecting the production code in any way. Since CSS can be used to make significant changes, an existing app’s UI can be completely transformed allowing stakeholders to have an immersive experience with proposed changes.
Same webapp as above with the CSS Overlay applied.
The changes that are possible using CSS on a webapp can make for some amazing transformations. To illustrate how effective a CSS Overlay can be, I made the short screen-capture video of a web-based dispatch application having the one I created for it applied to it.
Screen-capture video illustrating CSS Overlay effect on UI/UX.
As you can see, a CSS Overlay can be used to change the position and size of elements, modify the complete color palette, exchange out all the icons being used, and much more. It just takes knowing CSS and how to apply it.
How the CSS Overlay is applied to the existing webapp depends on your web browser. Google Chrome requires an Extension, like User CSS, in Safari, you just need to select a stylesheet under the Advanced settings, and in Firefox, you need to create a userContent.css file in your user profile folder. Instructions on how to apply an overlay (local) stylesheet to your browser are a Google search away, so I won't go into that here.
Using a CSS Overlay can take some time to create, but when it’s done to make the user experience as immersive as possible, it can provide product managers and developers a powerful visualization and interaction resource.