Tag inspiration archive
UI Tips Design Inspiration
Curated collection of 12 standout UI, motion, and interaction designs tagged with "UI Tips" from creators on X.
Design Engineering Tip: Don’t apply backdrop-filter directly to you... - Gabriel
Design Engineering Tip: Don’t apply backdrop-filter directly to your modal. Move the blur to a separate pseudo-layer instead. Separating the blur from the content can reduce paint...
@gabriell_labIt’s incredible that /make-interfaces-feel-better has already been... - Jakub Krehel
It’s incredible that /make-interfaces-feel-better has already been installed more than 30,000 times. It contains a lot of tips that make interfaces feel better, across UI, animati...
@jakubkrehelUse motion to reduce UI travel. - Sebastiano Guerriero
Use motion to reduce UI travel.
@guerriero_seIf you struggle to describe UI transitions in Claude or Codex, thes... - Gabriel
If you struggle to describe UI transitions in Claude or Codex, these commonly used transition terms can help. Save this for later.
@gabriell_lablittle blur & scale is all you need ⎯⟡° - Nitish Khagwal
little blur & scale is all you need ⎯⟡°
@nitishkmrkIntroducing Interfaces A design engineering magazine about building... - Jakub Krehel
Introducing Interfaces A design engineering magazine about building great interfaces. A new issue is released every month covering topics across animation, typography, layout, col...
@jakubkrehelHow to create a cool background in 30 seconds (Save for later) - Tran Mau Tri Tam ✪
How to create a cool background in 30 seconds (Save for later)
@tranmautritamSometimes, less is more. For high traffic areas, it's best to skip... - kian bazza
Sometimes, less is more. For high traffic areas, it's best to skip the hover transitions entirely. The benefits stack for components w/ grouped controls, such as a sidebar or butt...
@kianbazzaShould the section title be aligned to the list item or the icon co... - Gaddafi Rusli
Should the section title be aligned to the list item or the icon container?
@gaddafirusliyou can achieve this using the @tailwindcss `group` class on parent... - Soren
you can achieve this using the @tailwindcss `group` class on parent and `group-hover` variant on target. <div class="group"> <div class="group-hover:translate-y-6"/> </div> here i...
@sorenblankHere's a tip I don't see enough: make your animations interruptible... - joshpuckett
Here's a tip I don't see enough: make your animations interruptible. You should be able to immediately trigger close events without waiting for the animation to complete. @motiond...
@joshpuckett
Use a gray border with a drop shadow. Use a semi-transparent border... - Chánh Đại
Use a gray border with a drop shadow. Use a semi-transparent border so the bottom edge blends into the shadow and naturally appears darker.
@iamncdai