{"id":878,"date":"2021-05-12T04:17:39","date_gmt":"2021-05-12T04:17:39","guid":{"rendered":"http:\/\/www.simon-li.com\/design-and-code\/?p=878"},"modified":"2021-07-04T07:12:49","modified_gmt":"2021-07-04T07:12:49","slug":"small-is-powerful-why-you-should-use-sprites-in-your-design","status":"publish","type":"post","link":"http:\/\/www.simon-li.com\/design-and-code\/small-is-powerful-why-you-should-use-sprites-in-your-design\/","title":{"rendered":"Small is Powerful: Why You Should Use Sprites in Your&nbsp;Design"},"content":{"rendered":"\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Small is Powerful: Why You Should Use Sprites in Your Design\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/NzQVlx5whFU?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>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.<\/p>\n\n\n\n<!--more-->\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1600\/1*sCjgDWCCeJlZyHWBRf3HbQ.jpeg\" alt=\"\"\/><figcaption>The satellite receiver and the TV in this webpage in 1999 are sprites. Websites in the 90s and early 2000s tend to use more sprites compared to now. Source:&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/www.youtube.com\/watch?v=cnoO7H0m0Zw\" target=\"_blank\">https:\/\/www.youtube.com\/watch?v=cnoO7H0m0Zw<\/a><\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"669\" src=\"http:\/\/www.simon-li.com\/design-and-code\/wp-content\/uploads\/2021\/05\/Screen-Shot-2021-05-19-at-5.54.46-PM-1024x669.png\" alt=\"\" class=\"wp-image-898\" srcset=\"http:\/\/www.simon-li.com\/design-and-code\/wp-content\/uploads\/2021\/05\/Screen-Shot-2021-05-19-at-5.54.46-PM-1024x669.png 1024w, http:\/\/www.simon-li.com\/design-and-code\/wp-content\/uploads\/2021\/05\/Screen-Shot-2021-05-19-at-5.54.46-PM-300x196.png 300w, http:\/\/www.simon-li.com\/design-and-code\/wp-content\/uploads\/2021\/05\/Screen-Shot-2021-05-19-at-5.54.46-PM-768x502.png 768w, http:\/\/www.simon-li.com\/design-and-code\/wp-content\/uploads\/2021\/05\/Screen-Shot-2021-05-19-at-5.54.46-PM.png 1338w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>This is the Opinions section of the&nbsp;<a href=\"http:\/\/Financial Times\">Financial Times<\/a>&nbsp;website. The profile pictures here are also sprites.<\/figcaption><\/figure>\n\n\n\n<p>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\u2019s time for us to revisit what sprites can do and tap into their power again.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Visual Interest<\/h3>\n\n\n\n<p>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.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1600\/1*npqr1RqLbmJ-AM8XXqrJqw.png\" alt=\"\"\/><figcaption>Organic contour vs geometric contour<\/figcaption><\/figure>\n\n\n\n<p>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 break the rigidity of the rectangle button and makes the design much more pleasing to the eye.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1600\/1*CHiuqZVlYm6As44uDQKoIQ.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>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 complex. In this case, stick-out should be avoided.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1600\/1*w8ES2G2M2QMeiL4Odz19HQ.png\" alt=\"\"\/><figcaption>Overlapping two rectangles could make the overall shape more busy and backfire.<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Clear Communication<\/h3>\n\n\n\n<p>Sprites, though small, can actually say a lot with very little real estate. They do a really nice job of hinting at the context and inspiring the audience to form a scene with vivid details in their mind. A picture really is worth 1000 words.<\/p>\n\n\n\n<p>In this example, I wanted to communicate the change of the UI when the user travels from one city to another. Instead of rambling about this with words in a potentially confusing way, I used a sprite of a plane to communicate this idea. As you can see, the result is much more engaging than a bland paragraph of text.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1600\/1*l7voQ_y06cPeMEdZsteUDg.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>Here, I used two different clock sprites to indicate the two different moments when the user opens the app. Again, if I were to do this through words, it would be cumbersome and potentially less effective.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1600\/1*vOSyV1Z1OWP07wOLrq0DWg.png\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Final Thoughts<\/h3>\n\n\n\n<p>Now that we\u2019ve learned the benefits of sprites, see if you can leverage them in your next design to make it more visually engaging and effective in communicating your message.<\/p>\n\n\n\n<p>There are several amazing videos on sprites in John McWade\u2019s&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/www.linkedin.com\/learning-login\/share?account=92735081&amp;forceAccount=false&amp;redirect=https%3A%2F%2Fwww.linkedin.com%2Flearning%2Fgraphic-design-tips-tricks%2Fsmall-layout-packs-a-big-punch%3Ftrk%3Dshare_video_url%26shareId%3DnBv8I5WiR3ujG%252BtYi7ojsQ%253D%253D\" target=\"_blank\"><em>Graphic Design Tips &amp; Tricks<\/em><\/a><em>&nbsp;<\/em>and<em>&nbsp;<\/em><a rel=\"noreferrer noopener\" href=\"https:\/\/www.linkedin.com\/learning-login\/share?account=92735081&amp;forceAccount=false&amp;redirect=https%3A%2F%2Fwww.linkedin.com%2Flearning%2Fmagazine-design-start-to-finish-the-inside-pages%2Feditor-s-letter-and-masthead%3Ftrk%3Dshare_video_url%26shareId%3DSUvYO6TdTCOOMIZKRrvK3w%253D%253D\" target=\"_blank\"><em>Magazine Design Start to Finish<\/em><\/a><em>&nbsp;<\/em>LinkedIn learning course. Be sure to check them out if you want to learn more.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[94,87],"tags":[112,63],"class_list":["post-878","post","type-post","status-publish","format-standard","hentry","category-videos","category-visual-design","tag-story-telling","tag-ui"],"_links":{"self":[{"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/posts\/878","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/comments?post=878"}],"version-history":[{"count":13,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/posts\/878\/revisions"}],"predecessor-version":[{"id":910,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/posts\/878\/revisions\/910"}],"wp:attachment":[{"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/media?parent=878"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/categories?post=878"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/tags?post=878"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}