{"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":"2026-05-20T19:24:29","modified_gmt":"2026-05-20T19:24:29","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=\"wp-block-paragraph\"><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 class=\"wp-block-paragraph\">There aren&#8217;t actually <em>that<\/em> many UI designs with implemented glitch effects compared to other 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, I personally love its look, so here&#8217;s a collection of UI glitch inspirations!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><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<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/dribbble.com\/shots\/10722380-Contact-Form-Experimental-Glitch-Design\" data-type=\"link\" data-id=\"https:\/\/dribbble.com\/shots\/10722380-Contact-Form-Experimental-Glitch-Design\"><em>Contact Form Experimental Glitch Design <\/em>by Daniel Kurilenko<\/a>.  This design features a glitch design for a contact form page. I really like the effect on the button and think it gives a <a href=\"https:\/\/www.wendyzhou.se\/blog\/cyberpunk-aesthetic-what-is-it\/\" data-type=\"post\" data-id=\"5763\">cyberpunk<\/a> vibe. To the right, there&#8217;s a glitch and distortion effect on a typography logo, which could be realistically implemented on a real website.<\/li>\n\n\n\n<li><a href=\"https:\/\/dribbble.com\/shots\/16628165-Chrome-Tattoo-Paris-2-Intro-Glitch-Transition\" data-type=\"link\" data-id=\"https:\/\/dribbble.com\/shots\/16628165-Chrome-Tattoo-Paris-2-Intro-Glitch-Transition\"><em>Intro &amp; Glitch Transition<\/em> by Cl\u00e9ment Casanas<\/a>. This design features a glitchy human skull displayed on the screen of an old computer. The combination of displaying modern digital graphics on old devices is a trick that always works. <\/li>\n\n\n\n<li><a href=\"https:\/\/dribbble.com\/shots\/5986087-Distortion-Hover-Effect\" data-type=\"link\" data-id=\"https:\/\/dribbble.com\/shots\/5986087-Distortion-Hover-Effect\"><em>Distortion Hover Effect <\/em>by Sebastian Jungbluth <\/a>&#8211; This design shows the design of a glitch-effect being activated on hover of a hero section on a landing page. I think the color choices are really nice in this one.<\/li>\n\n\n\n<li><a href=\"https:\/\/dribbble.com\/shots\/4338831-Sunday-Sunday-Sunday\" data-type=\"link\" data-id=\"https:\/\/dribbble.com\/shots\/4338831-Sunday-Sunday-Sunday\"><em>Sunday, Sunday, Sunday <\/em>by Devin Jacoviello<\/a>! This is a series of glitchy posters, showing an illustration of a rotating skateboard and bright colors. 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\" data-type=\"link\" data-id=\"https:\/\/dribbble.com\/shots\/10841784--Nike-Vaporwave-Concept-1\"><em>Nike Vaporwave Concept <\/em>by Efi Kabak<\/a>. Typography glitch effect.<\/li>\n\n\n\n<li><a href=\"https:\/\/dribbble.com\/shots\/6019238-Teaser-to-New-Zajno-Showreel\" data-type=\"link\" data-id=\"https:\/\/dribbble.com\/shots\/6019238-Teaser-to-New-Zajno-Showreel\"><em>Teaser to New Zajno Showreel <\/em>by Igor Pavlinski.<\/a> A showreel teaser with glitch effects.<\/li>\n\n\n\n<li><a href=\"https:\/\/dribbble.com\/shots\/5653203-Ester-TV-Hello\" data-type=\"link\" data-id=\"https:\/\/dribbble.com\/shots\/5653203-Ester-TV-Hello\"><em>Ester TV <\/em>by Ester Digital.<\/a> Glitchy motions from a pixelated TV.<\/li>\n\n\n\n<li><a href=\"https:\/\/dribbble.com\/shots\/16777972-Glitch-Studio-Photo-Effects\" data-type=\"link\" data-id=\"https:\/\/dribbble.com\/shots\/16777972-Glitch-Studio-Photo-Effects\">Glitch Studio Photo Effects by Anna Tikhomirova<\/a> &#8211; Glitchy photography edits<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Glitch as an Aesthetic<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"683\" src=\"https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/11\/ray-zhou-BpafeKmhAIc-unsplash-1024x683.jpg\" alt=\"\" class=\"wp-image-9011\" srcset=\"https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/11\/ray-zhou-BpafeKmhAIc-unsplash-1024x683.jpg 1024w, https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/11\/ray-zhou-BpafeKmhAIc-unsplash-300x200.jpg 300w, https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/11\/ray-zhou-BpafeKmhAIc-unsplash-768x512.jpg 768w, https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/11\/ray-zhou-BpafeKmhAIc-unsplash-1536x1024.jpg 1536w, https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/11\/ray-zhou-BpafeKmhAIc-unsplash-2048x1365.jpg 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Photo by\u00a0<a href=\"https:\/\/unsplash.com\/@rayzhou?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\">Ray Zhou<\/a>\u00a0on\u00a0<a href=\"https:\/\/unsplash.com\/photos\/pink-white-and-black-textile-BpafeKmhAIc?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\">Unsplash<\/a><\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Glitch as an aesthetic and visual effect plays on distortion. We can see glitches in relation to technology when things are broken or malfunctioning. For example, when screens are cracked, when there&#8217;s bad connectivity, or when systems break down. We can experience glitches naturally as well, when our eyesight is distorted by alcohol, fast movements, or in certain lights.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Glitches show a broken state. It&#8217;s a visual state of malfunction.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">These types of visuals are often used in <a href=\"https:\/\/www.wendyzhou.se\/blog\/cyberpunk-aesthetic-what-is-it\/\" data-type=\"post\" data-id=\"5763\">cyberpunk<\/a> aesthetics, in sci-fi movies, and in futuristic visions where technology breaks down.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In UI design, glitches can be used as a playful element to portray a fictional future state. It&#8217;s suitable for game graphics, futuristic concept work, and creative personal projects.  However, glitches are not suitable for applications that require reliability, due to their low usability and their possibly confusing behavior. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Glitches in design is a fun visual graphic style, but should not be used in systems that need to be reliable, consistent, and require excellent usability.<\/p>\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":9010,"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","has-post-thumbnail","hentry","category-cyberpunk","category-design","category-ux-and-ui-design","tag-cyberpunk-en","tag-design-inspiration","entry","has-media"],"gutentor_comment":0,"uagb_featured_image_src":{"full":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/11\/glitch-lab-app-fXjHK66Z6c8-unsplash-scaled-e1779304058411.jpg",2201,1246,false],"thumbnail":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/11\/glitch-lab-app-fXjHK66Z6c8-unsplash-scaled-e1779304058411-150x150.jpg",150,150,true],"medium":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/11\/glitch-lab-app-fXjHK66Z6c8-unsplash-scaled-e1779304058411-300x170.jpg",300,170,true],"medium_large":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/11\/glitch-lab-app-fXjHK66Z6c8-unsplash-scaled-e1779304058411-768x435.jpg",768,435,true],"large":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/11\/glitch-lab-app-fXjHK66Z6c8-unsplash-scaled-e1779304058411-1024x580.jpg",1024,580,true],"1536x1536":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/11\/glitch-lab-app-fXjHK66Z6c8-unsplash-scaled-e1779304058411-1536x870.jpg",1536,870,true],"2048x2048":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/11\/glitch-lab-app-fXjHK66Z6c8-unsplash-scaled-e1779304058411-2048x1159.jpg",2048,1159,true],"ocean-thumb-m":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/11\/glitch-lab-app-fXjHK66Z6c8-unsplash-scaled-e1779304058411-600x600.jpg",600,600,true],"ocean-thumb-ml":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/11\/glitch-lab-app-fXjHK66Z6c8-unsplash-scaled-e1779304058411-800x450.jpg",800,450,true],"ocean-thumb-l":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/11\/glitch-lab-app-fXjHK66Z6c8-unsplash-scaled-e1779304058411-1200x700.jpg",1200,700,true]},"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":11,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/posts\/5641\/revisions"}],"predecessor-version":[{"id":9014,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/posts\/5641\/revisions\/9014"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/media\/9010"}],"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}]}}