Victor

6 Jan 2025

Hello 👋

One of the best UX I've seen for transitioning from one app to another. More precisely, to another bank. Super clean, super detailed. Every piece of information, including what will be changed, is clearly stated.

My newsletter is read by 50% designers and 50% developers. That's why I write about design and code as one thing, not two.

UI/UX Tip 💡 Writing a really long article? Add a TL;DR block right under the title. Some readers just want the gist.

Yes or no?

One line for humans, one line for robots (it's X after all) Wrong password, plus a mysterious string that definitely helps me fix it 🤦‍♂️

In Armenia, there are a lot of pulpulaks. A pulpulak is a small public drinking water fountain found on streets, in courtyards, and near landmarks all over Armenia. Love the UI of an app where you can see all of them, plus many other things such as rivers, springs, etc.

22 Sept

This article probably has the most insane amount of interactive elements I've ever seen. Incredible 🤯 ciechanow.ski/moon/

21 Sept

Look at these visual explanations!! 🤯

15 Sept

Love Resend's card form UI. So clean and... laconic.

10 Sept

The worst selector in UX I've ever seen. Choosing by logo in a huge grid without search 🤦‍♂️

5 Aug

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.

28 July

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.

28 July

I think it's time to rebuild this since we now have AI. 🤔

25 July

Claude ships so frequently that I sometimes think they just change the version number. Well, hello Claude Opus 5.

23 July

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)

Designers have a high score for adaptability, as well as software developers, database administrators, and so on. This is probably because they have varied experience and higher education and skills that can be applied to other jobs.

On the contrary, for example, 6.1 million workers (mostly women in clerical roles like secretaries) are in trouble: high AI exposure + low adaptability. The takeaway: flexibility/adaptability matters. Never mind, I'm just calming myself down; we're cooked 😅

I've just tried Kimi 3 asking whether it's from China or not 😅

16 July

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

16 July

Love the subtle glowing effect 🌟

15 July

It did fix the typo though.

🇪🇸 Spain or 🇫🇷 France?

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...

Hey mum, I'm AI engineer

When you tell the design team "just make it simple" and they take it literally.

I like how the cookie settings look on the JetBrains site. 😅

13 July

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)

10 July

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 👇

9 July

Drew was busy or something?

9 July

How would you add a new payment method here?

Victor reposted

2 July

Every button needs these 6 states: • Default • Hover • Pressed • Focus (for keyboard navigation) • Disabled • Loading The focus state is probably the most forgotten one.

8 July

Design Engineer needs to know: - UI/UX - Frontend - Accessibility - Product thinking - Prototyping - AI - Different Tools - And much more... Not just code or design.

6 July

Quick UX question. What does this icon mean? 🌍 Nothing happens on hover.

2 July

Every button needs these 6 states: • Default • Hover • Pressed • Focus (for keyboard navigation) • Disabled • Loading The focus state is probably the most forgotten one.

22 June

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.

19 June

UX Puzzle: 1. You go to MacOS settings 2. Type "Screen resolution" in the search Where is the screen resolution?

19 June

I just opened the spam folder...

17 June

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.

17 June

The most scannable text I've ever seen 👍 (no)

16 June

Rate my phone number input 🥰

16 June

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?

15 June

Have you ever noticed when selecting text also highlights empty space between paragraphs? There's an easy one-line fix: ::selection { background-color: transparent; }

With ::selection trick

15 June

How it works: 1. Target the elements where you don't want selection highlights (e.g. empty paragraphs) 2. Apply ::selection with transparent background 3. Text remains selectable and copyable, just without the highlight inempty paragraphs Browser support is ~82%.

15 June

Have you ever noticed when selecting text also highlights empty space between paragraphs? There's an easy one-line fix: ::selection { background-color: transparent; }

Without it

Badges like this are a true sign of AI-generated design.