I found myself using geometry while designing user interfaces quite often, so I decided to share a simple example I was working on the other day.

Aligning interface elements in Photoshop is pretty easy as it comes with the pre-defined aligning options. And for the 95% those are all you really need. What can you do in those 5% examples when you can’t use these options? Well, it actually depends a lot on what you’re working on. Let’s see a specific example.

Aligning an Icon to the Center of…

the quarter of a circle. This was my most recent example when I had to use geometry to get that pixel perfect UI element.

I was working on a confirmation window, which was inside a circle. Yes, we’re trying out all sorts of cool stuff at wondermags. What we want to do is ask the user if he’s sure of the action he’s about to execute. We give him an explanation of what will happen and options to confirm or cancel.

Here’s a quick sketch for this window:

A very rough sketch :)

So the problem we’re trying to solve here is how to properly align the two icons to the center of each of the buttons at the bottom half (confirm and cancel). If you use the align to vertical and align to horizontal center in Photoshop, this is what you’ll get:

Icons are not properly aligned to the actual center of the buttons.

Now this doesn’t look right at all and it certainly looks very strange to say the least. Photoshop aligns it like this because it still treats it as a rectangle, not a quarter of the circle (there’s no difference for Photoshop).