This week’s design inspiration: UI glitch and distortion effects! These effects remind me of futuristic graphics & technology errors caused by humans. Isn’t it fun with some broken digital stuff?
There aren’t actually that many UI designs with implemented glitch effects compared to other design styles. Probably because it’s challenging to implement it properly with code, and because there aren’t that many brands featuring such styles. Nevertheless, I personally love its look, so here’s a collection of UI glitch inspirations!
Earlier articles in the series
Weekly Design Inspiration #3 – Dark UIs & 3D
Weekly Design Inspiration #2 – Cyberpunk Images
Weekly Design Inspiration #1 – Light Installations & Audiovisuals
UI Glitch & Distortion Effect
- Contact Form Experimental Glitch Design by Daniel Kurilenko. This design features a glitch design for a contact form page. I really like the effect on the button and think it gives a cyberpunk vibe. To the right, there’s a glitch and distortion effect on a typography logo, which could be realistically implemented on a real website.
- Intro & Glitch Transition by Clément Casanas. 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.
- Distortion Hover Effect by Sebastian Jungbluth – 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.
- Sunday, Sunday, Sunday by Devin Jacoviello! 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.
- Nike Vaporwave Concept by Efi Kabak. Typography glitch effect.
- Teaser to New Zajno Showreel by Igor Pavlinski. A showreel teaser with glitch effects.
- Ester TV by Ester Digital. Glitchy motions from a pixelated TV.
- Glitch Studio Photo Effects by Anna Tikhomirova – Glitchy photography edits
Glitch as an Aesthetic
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’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.
Glitches show a broken state. It’s a visual state of malfunction.
These types of visuals are often used in cyberpunk aesthetics, in sci-fi movies, and in futuristic visions where technology breaks down.
In UI design, glitches can be used as a playful element to portray a fictional future state. It’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.
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.