When I first dived into the topic of colors, it seemed to me that I was at least studying nuclear physics. It still does, though. 😅 Disclaimer: I might have some inaccuracies in this article. Sometimes I used definitions provided by Google AI, because it was challenging for me to convey/explain the ideas with precise words. But mostly there are links and definitions from Wikipedia and other resources. There are many notions and abbreviations: CIE 1931, RGB, sRGB, HSL, CMYK, Oklab, LCH, OKLCH,...
29 days ago • 3 min read
There is the grayscale filter in CSS that can make your pictures completely grayscale. It's useful when you want to show a bunch of logos, making them grayscale by default, but when you hover over them, they become colorful. But! Another trick is to use grayscale on the <html> tag. This way you can look at your app from a different perspective and see how it looks without colors. This is useful if you want to see what draws users' attention most, whether such elements as links, buttons, and...
about 1 month ago • 1 min read
I found a perfect example of a landing page that has a lot of mistakes. There are around 30 things to fix! If you want me to review yours, reply to this email :) Before I flood you with pictures, I would love to see you on my Instagram. It's a perfect place to record short tips and personal life as well 😊 Now, let's get to our MEGA ROAST. Hero Section First goes the hero section. Here is a brief list of mistakes (which you will see in other sections as well): Contrast. The green logo on the...
about 2 months ago • 3 min read
Some people have trouble with the login screen. It's just a simple form, and putting two inputs in the middle of the screen feels boring. But there is a good way to make it look great. So, this is what you usually have. There are some other things, like social login and a sign-up link, but that's the basic idea. What you can do instead is to split the screen into two parts. One part is designated for the login form, while the other part can be used for any content you choose. Usually it's...
3 months ago • 1 min read
Take a look at the picture on the left. Can you consider this an objective rating? I guess not, since we don't know much about the number of reviews, how many are really bad (1 star), and how many are really good (5 stars). How is the rating calculated, after all? Does it consider only the latest reviews or all historical data? Many questions. No answers. When displaying ratings, there are several factors to consider: Display the total number of reviews. If there are only three reviews, it's...
3 months ago • 1 min read
In my previous email, I asked what type of content you would like to see. Several of you mentioned that reviews of poorly designed UIs would be awesome. So, here we are. Today, we will review this payment form. By the way, this is from one of the most popular banks in Armenia. Disclaimer: This form is designed for card payments at a local bank, which is why it does not include fields for country or VAT. It is not a subscription form for a SaaS or something like that. Let's go over problems I...
3 months ago • 3 min read
Today we'll cover another CSS media query: prefers-reduced-motion, and how to load (or avoid loading) styles based on user preferences — this is genuinely cool stuff! I've just posted the same article on LinkedIn, for my first time. Accessibility concern There’s a condition called VIMS: Visually induced motion sickness (VIMS)—a subcategory of motion sickness that specifically relates to nausea, oculomotor strain, and disorientation from the perception of motion while remaining still. To...
6 months ago • 1 min read
After a rough patch, I’m getting back to writing. More practical stuff that you can apply directly in your projects. One topic that looks really good is how to use modern CSS to support UI/UX and accessibility. Preference Media Queries Preference Media Queries allow you to adapt your UI based on the user's system-level settings and personal preferences — like reduced motion, high contrast, or dark mode. They're mostly used to improve accessibility and user experience. Let's cover one of them....
7 months ago • 1 min read
I've been skimming through my list of topics to cover and found an interesting CSS property that’s especially useful when you need to highlight a specific phrase inside a block of text. Normally, when a text block breaks into multiple lines, the browser treats the whole element as a single box — which often results in broken or inconsistent styling. So this code: Results in the following styling: To fix that, all you need is: box-decoration-break: clone; It tells the browser to treat each...
8 months ago • 1 min read