I'm a full-stack developer that is passionate about good user interfaces. In my newsletter, I talk mainly about UI/UX stuff. You could expect an email or two in a month, I'm not aiming to spam you with non-useful info.
Using centroids in alignment
|
Hi Reader! Centroids...?I just wanted to sound smart and found this term 😅 Actually, we're going to talk a bit about optical balance. Take a look at these two icons. They are both aligned, but the left one looks a bit odd. The reason why it looks odd is because when we work with images, web elements, controls and everything else - we work with rectangles. On the left image I took the triangle, the circle, and hit "align vertically" and "align horizontally" in Figma. But visually it doesn't look good. Here is when the "centroid" term comes to play. Let me quote the definition from googe: The centroid of a triangle is the point at which the three medians intersect. To locate the centroid, draw each of the three medians (which connect the vertices of the triangle to the midpoints of the opposite sides). It is referred to as the "center of mass" or "balance point" of the triangle. In other words, the triangle has more "visual weight" in its left part, rather then the right part. To compensate this, we need to align triangle's centroid, rather than the rectangle. It's not that easy to demonstrate the idea, so I made another illustration What if it's not a triangle?Oh yes, if we have a complicated figure, then we can try dive into complicated math and end up visiting a therapist.
In this case I would use my eyes and see if it looks good or not. The main idea to remember: take visual weight into account, some things may look heavier than others, may be not symmetrical, and simply look slightly bigger or smaller than they are. |
Victor Ponamariov
I'm a full-stack developer that is passionate about good user interfaces. In my newsletter, I talk mainly about UI/UX stuff. You could expect an email or two in a month, I'm not aiming to spam you with non-useful info.
Here is a quick recap of all CSS prefers-* queries that you can use to adjust to user settings. Prefers Reduced Motion (95.57% global support) Indicates whether the user prefers less motion to avoid VIMS - Visually-Induced Motion Sickness. Here we disable any animations or transitions, but we can be flexible here (e.g., REDUCE motion but do not disable it completely) Prefers Color Scheme (95.16% global support) Detects whether the user prefers a light or dark color theme. In this example we...
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...
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....