Empty states should tell users what to do next. Don't just say "No projects yet" and leave them hanging. Add: - Clear instruction - Primary action button Help users take the first step.
Victor
@vpon.me
Helping devs, founders and designers fix their UI. 100 UI/UX tips (free) 👉 https://vpon.me/hundred
Quick breakdown of Core Web Vitals: - LCP - loads fast (≤ 2.5s) - INP - responds fast (≤ 200ms) - CLS - doesn't shift (≤ 0.1) These three metrics can make or break your UX. Google cares about them, and so should you.
Claude ships so frequently that I sometimes think they just change the version number. Well, hello Claude Opus 5.
Your slider handles also need interaction states. Default → Pressed → Dragging And focus-visible ofc. For example: - Increase the handle size - Add visual feedback (e.g. change color a bit) - Animate these transformations but make it subtle Don't leave them static.
According to GovAI and Brookings Institution research, "Web and digital interface designers" have the LOWEST AI vulnerability. There are two parameters they used: 1. AI exposure (how much AI affects the job) 2. Adaptability (ability to switch to new jobs for workers)
Your app shouldn't show a loading spinner when the user clicks a like button. Here's how optimistic UI works: 1. User clicks like 2. UI updates immediately 3. Request happens in background 4. If it fails: undo + show error
padding-inline/block are not just shortcuts. These are logical properties. They adapt to writing-mode and direction (RTL, vertical text), unlike physical properties that stay fixed. inline/block depend on text flow, left/right/top/bottom don't. x.com/vponamariov...
When you tell the design team "just make it simple" and they take it literally.
CSS tip 💡 Instead of writing: padding-left: 24px; padding-right: 24px; padding-top: 16px; padding-bottom: 16px; You can use padding-inline: 24px; padding-block: 16px; or just padding: 16px 24px; (top/bottom, left/right)
Everyone knows Murphy laws. I think it's time to collect our own list. Because... So. Many. Things. Go. Wrong. 😡 My first one: if someone tells you that something will be done today or tomorrow, it'll be done in 2 weeks. Add yours 👇
Every button needs these 6 states: • Default • Hover • Pressed • Focus (for keyboard navigation) • Disabled • Loading The focus state is probably the most forgotten one.
Design Engineer needs to know: - UI/UX - Frontend - Accessibility - Product thinking - Prototyping - AI - Different Tools - And much more... Not just code or design.
Every button needs these 6 states: • Default • Hover • Pressed • Focus (for keyboard navigation) • Disabled • Loading The focus state is probably the most forgotten one.
Feedback loop is one of the most basic UX concepts: User acts → System responds → User reacts → System responds again No response = user doesn't know if anything happened = confusion.
UX Puzzle: 1. You go to MacOS settings 2. Type "Screen resolution" in the search Where is the screen resolution?
UI/UX Tip 💡 You don't need an icon for every menu item. Especially when: • They're barely visible • They don't match the label • Half of them look the same Sometimes a clean list of text is more scannable than a wall of tiny, unclear icons.
When did we decide that EVERYTHING needs to float and rounded? Floating buttons, floating panels, floating menus. All with shadows, frosted glass effects and so on. Why does it look like someone's shining a lamp at the UI? What's with all the shadows?
