![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/16.png?resize=1024%2C912&ssl=1\")
<\/figure><\/li>![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/15.png?resize=1024%2C833&ssl=1\")
<\/figure><\/li>![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/17.png?resize=1024%2C804&ssl=1\")
<\/figure><\/li>![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/18.png?resize=1024%2C835&ssl=1\")
<\/figure><\/li>![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/08.png?resize=1024%2C583&ssl=1\")
<\/figure><\/li>![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/01.png?resize=1024%2C456&ssl=1\")
<\/figure><\/li>![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/03.png?resize=1024%2C616&ssl=1\")
<\/figure><\/li>![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/12.png?resize=1024%2C589&ssl=1\")
<\/figure><\/li>![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/02.png?resize=626%2C391&ssl=1\")
<\/figure><\/li>![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/04.png?resize=1024%2C442&ssl=1\")
<\/figure><\/li>![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/05.png?resize=1024%2C451&ssl=1\")
<\/figure><\/li>![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/07.png?resize=1024%2C390&ssl=1\")
<\/figure><\/li>![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/11.png?resize=1024%2C475&ssl=1\")
<\/figure><\/li>![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/13.png?resize=1024%2C444&ssl=1\")
<\/figure><\/li>![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/14.png?resize=1024%2C284&ssl=1\")
<\/figure><\/li>![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/09.png?resize=1024%2C372&ssl=1\")
<\/figure><\/li><\/ul><\/a><\/a><\/a><\/div><\/div><\/div>\n\n\n\nI’m sorry if it seems like I’m calling out people because that’s not my intention. I actually love the concept \u2014 so much, in fact, that I’m considering it on a project! Some of the examples in that gallery are flat-out gorgeous.<\/p>\n\n\n\n
After spotting these blobby shapes a number of times, I’ve started to notice some considerations to take into account when use them. Things like:<\/p>\n\n\n\n
- Watch for contrast when text sits on top of a blob.<\/strong> There are plenty of cases where the document background is white and the blob is dark. If text runs through them, it’s going to be tough to find a font color that satisfies WCAG’s 2.1 AA standard for legibility<\/a>.<\/li>
- Tread lightly when mixing and matching colors.<\/strong> One hot pink blob behind a card component ain’t a big deal, but throw in yellow, orange, and other bright colors that sit alongside it… the design starts to distract from the content. Plus, a vibrant rainbow of blobby shapes can raise accessibility concerns. A flourish is just that: a nice touch that’s subtle but impactful.<\/li>
- Blobs are good for more than color.<\/strong> Some of the most interesting instances I’ve seen cut images into interesting shapes. It’s cool that we can embed an image directly in SVG and then mask it with a path.<\/li>
- Blobs are also good for more than backgrounds.<\/strong> Did you catch that screenshot from Topcoder’s site<\/a>? They’re using it for tabs which is super funky and cool.<\/li><\/ul>\n\n\n\n
All of this has me thinking about how the websites of today will be looked at by the developers of tomorrow. Remember way back, like 15 years ago, when many sites adopted Apple’s use of reflective imagery? I probably still have some Photoshop muscle memory from replicating that effect so many times.<\/p>\n\n\n\n
![\"Photo](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/iphone-3-reflections.jpg?resize=500%2C298&ssl=1\")
Notice the skeuomorphic icons \u2014 that was popular too!<\/figcaption><\/figure>\n\n\n\n Skeuomorphism, bevels, animated GIF backgrounds, long shadows, heroes, gradients, bokeh backgrounds… all of these and many other visual treatments have had their day in the sun. Perhaps blobs will join that club at some point. Perhaps they’ll come back in style after that. Who knows! I just find it interesting to reflect on the things that have inspired us over the last three decades and imagine how the things we do today will be seen through the long lens of time.<\/p>\n\n\n\n
It’d be awesome to see other instances of blobby shapes \u2014 share ’em if you’ve got ’em!<\/p>\n","protected":false},"excerpt":{"rendered":"
There are tons of smokin’ hot websites out there, with an equal or greater number of talented designers and developers who make them. The web is awesome like that and encourages that sort of creativity. Even so, it amazes me that certain traits find their way into things. I mean, it makes sense. Many of […]<\/p>\n","protected":false},"author":2508,"featured_media":318280,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[692,1032],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/blobby.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":269784,"url":"https:\/\/css-tricks.com\/museum-of-websites\/","url_meta":{"origin":318246,"position":0},"title":"Museum of Websites","date":"April 16, 2018","format":false,"excerpt":"The team at Kapwing has collected a lot of images from the Internet Archive\u2019s Wayback Machine and presented a history of how the homepage of popular websites like Google and the New York Times have changed over time. It\u2019s super interesting. I particularly love how Amazon has evolved from a\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/amazon-wayback-archive.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":353219,"url":"https:\/\/css-tricks.com\/websites-we-like-md-nichrome\/","url_meta":{"origin":318246,"position":1},"title":"Websites We Like: MD Nichrome","date":"October 6, 2021","format":false,"excerpt":"Here\u2019s a beautiful website: it\u2019s a type specimen for Mass-Driver\u2019s ever-so-lovely type family MD Nichrome. There\u2019s a ton of nifty animations and graphics explaining all the features inside\u2026 If you're wondering how those animations work, they're actually styled
- Tread lightly when mixing and matching colors.<\/strong> One hot pink blob behind a card component ain’t a big deal, but throw in yellow, orange, and other bright colors that sit alongside it… the design starts to distract from the content. Plus, a vibrant rainbow of blobby shapes can raise accessibility concerns. A flourish is just that: a nice touch that’s subtle but impactful.<\/li>