Small is powerful: why you should use sprites in your design

Sprites are small images on their own inside a page or screen that typically contain a single object with a transparent background, just like the satellite receiver, the TV and the profile pictures in the following examples.

The satellite receiver and the TV in this webpage in 1999 are sprites. Websites in the 90s and early 2000s tended to use more sprites compared to now. Source: https://www.youtube.com/watch?v=cnoO7H0m0Zw

This is the Opinions section of the Financial Times website. The profile pictures here are also sprites.

Sprites were often seen in web/UI design in the 90s and early 2000s when skeuomorphism was still a trend. When used properly, they can add visual interest and help us communicate effectively. In the recent decades, however, as UI components/elements such as divs, grids, cards and circles become more standardized, we are seeing fewer and fewer sprites on screen, so maybe now it’s time for us to revisit what sprites can do and tap into their power again.

Visual Interest

Sprites often have organic contours because they are independent objects. This contrasts well with the straight lines or rectangular shapes created by a text block or a grid, and makes the page/screen less boring and more interesting.

Organic contour vs geometric contour

When designing a UI, try overlaying a sprite on top of a rectangular element such as a card or a button so a small part of the image can stick out. As you can see from the following example, the irregular, organic shape of the bouquet that sticks out breaks the rigidity of the rectangle button and makes the design much more pleasing to the eye.

One caveat: if the contour of a sprite is largely rectangular rather than organic, then putting it on top of another rectangle to make it stick out could potentially make the overall shape too…