{"id":5641,"date":"2021-11-08T21:48:47","date_gmt":"2021-11-08T21:48:47","guid":{"rendered":"https:\/\/www.wendyzhou.se\/blog\/?p=5641"},"modified":"2025-10-14T16:52:36","modified_gmt":"2025-10-14T16:52:36","slug":"weekly-design-inspiration-4-ui-glitch-distortion","status":"publish","type":"post","link":"https:\/\/www.wendyzhou.se\/blog\/weekly-design-inspiration-4-ui-glitch-distortion\/","title":{"rendered":"Weekly Design Inspiration #4 &#8211; UI Glitch &#038; Distortion"},"content":{"rendered":"\n<p class=\"has-text-color\" style=\"color:#2eb8ff\"><strong>This week&#8217;s design inspiration: UI glitch and distortion effects! These effects remind me of futuristic graphics &amp; technology errors caused by humans. Isn&#8217;t it fun with some broken digital stuff?<\/strong><\/p>\n\n\n\n<p><em>Note! These are not my designs. Credits are given to each creator <strong>below<\/strong> <strong>every<\/strong> <strong>image<\/strong>.<\/em><\/p>\n\n\n\n<p>There aren&#8217;t actually <em>that<\/em> many UI designs with implemented glitch effects, compared to other types of design styles. Probably because it&#8217;s challenging to implement it properly with code, and because there aren&#8217;t that many brands featuring such styles. Nevertheless, <em>I<\/em> personally love the look of it, so here comes a collection of UI glitch inspirations! <\/p>\n\n\n\n<p><strong>Earlier articles in the series<br><\/strong><a href=\"https:\/\/www.wendyzhou.se\/blog\/weekly-design-inspiration-3-dark-uis-3d\/\">Weekly Design Inspiration #3 \u2013 Dark UIs &amp; 3D<\/a><br><a href=\"https:\/\/www.wendyzhou.se\/blog\/weekly-design-inspiration-2-cyberpunk-images\/\">Weekly Design Inspiration #2 \u2013 Cyberpunk Images<\/a><br><a href=\"https:\/\/www.wendyzhou.se\/blog\/weekly-design-inspiration-2021-light-installations\/\">Weekly Design Inspiration #1 \u2013 Light Installations &amp; Audiovisuals<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">UI Glitch &amp; Distortion Effect<\/h2>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>It&#8217;s an immersive experience that will make you dive into\u00a0<a href=\"https:\/\/www.instagram.com\/tomapegaz\/\">Toma Pegaz<\/a>&#8216;s cyberpunk universe, a tattoo artist from Paris.<\/p>\n<\/blockquote>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/dribbble.com\/shots\/10722380-Contact-Form-Experimental-Glitch-Design\">Daniel Kurilenko<\/a> &#8211; I really like the effect on the button for this one, very cyberpunk-inspired. And also the effect on the title to the right. I feel like this type of glitch and distortion effect is the type that would realistically be implemented on a real website without too much hassle.<\/li>\n\n\n\n<li>I love this<a href=\"https:\/\/dribbble.com\/shots\/16628165-Chrome-Tattoo-Paris-2-Intro-Glitch-Transition\"> project by Cl\u00e9ment Casanas<\/a>. There&#8217;s something about contemporary digital design graphics displayed on old devices that just woooork! Follow the link to see more screenshots of this project.<\/li>\n\n\n\n<li><a href=\"https:\/\/dribbble.com\/shots\/5986087-Distortion-Hover-Effect\">Sebastian Jungbluth<\/a> &#8211; This one has a great color palette and nice attention to detail.<\/li>\n\n\n\n<li>Love, love, love this series of the glitchy posters by <a href=\"https:\/\/dribbble.com\/shots\/4338831-Sunday-Sunday-Sunday\">Devin Jacoviello<\/a>! Wish I could have it live on my wall.<\/li>\n\n\n\n<li><a href=\"https:\/\/dribbble.com\/shots\/10841784--Nike-Vaporwave-Concept-1\">Efi Kabak<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/dribbble.com\/shots\/6019238-Teaser-to-New-Zajno-Showreel\">Igor Pavlinski<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/dribbble.com\/shots\/5653203-Ester-TV-Hello\">Ester Digital<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/dribbble.com\/shots\/10082168-Welter-Glitch-Effects\">Olga Lysenkova<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/dribbble.com\/shots\/16777972-Glitch-Studio-Photo-Effects\">Anna Tikhomirova<\/a> &#8211; Cool photo edits<\/li>\n\n\n\n<li><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>This week&#8217;s design inspiration: UI glitch and distortion effect! Effects that remind me of futuristic graphics &#038; technology errors caused by humans.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"categories":[69,191,6],"tags":[463,247],"class_list":["post-5641","post","type-post","status-publish","format-standard","hentry","category-cyberpunk","category-design","category-ux-and-ui-design","tag-cyberpunk-en","tag-design-inspiration","entry"],"gutentor_comment":0,"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"ocean-thumb-m":false,"ocean-thumb-ml":false,"ocean-thumb-l":false},"uagb_author_info":{"display_name":"Wendy Zhou","author_link":"https:\/\/www.wendyzhou.se\/blog\/author\/wendy1111live-se\/"},"uagb_comment_info":0,"uagb_excerpt":"This week's design inspiration: UI glitch and distortion effect! Effects that remind me of futuristic graphics & technology errors caused by humans.","_links":{"self":[{"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/posts\/5641","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/comments?post=5641"}],"version-history":[{"count":8,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/posts\/5641\/revisions"}],"predecessor-version":[{"id":7830,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/posts\/5641\/revisions\/7830"}],"wp:attachment":[{"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/media?parent=5641"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/categories?post=5641"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/tags?post=5641"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}