The Importance of Pixel Coordinates

xyGrid

As a UI designer for mobile games, I have to make sure everything is pixel perfect. But I am not just talking about pixel perfect in the aesthetic sense; but also in the layout. Every pixel counts when designing for a small 960×640 iPhone screen. Lets not forget the iPad, retina iPad  and all the Android devices. Using pixel coordinates has saved myself and my work countless hours of pain, by just paying attention to numbers. Ew, numbers your say? Welcome to being a designer, our life is emerged in math. That is the ugly but relevant truth. Making sure elements are lined up perfectly is half the battle to a beautiful design.

I am not sure how many designers forget that both Photoshop and Illustrator have pixel coordinates. It’s an extremely helpful tool especially when working on a layout. I start using pixel coordinates early on in my design process. As soon as the wireframes start I am studying the coordinates and where frames are laid. Not only does this help me now for a clean wireframe. But also for the finished product when the UI is styled. It helps me keep track of how large or small assets are and where their location is, in terms of other assets.

The Spatial Basics

Think of  (x) & (y) coordinates as an adress to your pixel(s) location.  Such as x being the given number for any pixel on the horizontal axis. Then y being any given number on the vertical axis. Even if you’re an advanced designer, it’s always a good reminder to be checking your (x) & (y) spacial coordinates.

It’s always important to be checking not only the location of your elements, but also the negative space in between them. As designers, we not only have to focus on placement of the elements but the negative space surrounding it, and how it affects others. One nudge on one element could cause a lot of pain in the future for you and engineers. It’s better to take a moment now to check spacing then to be iterating every single screen later.

The Pen Medium

Another great practice to instill in your everyday design life is to physically write down your (x) & (y)spatial coordinates in a notebook. There is something about writing down information that helps the brain solidify your memory. For instance, say I am designing a button for the main HUD of a game screen. I want that button to be on every game screen that I design and by writing down a simple number for (x) & (y) in my notebook I am saving myself a lot of time. By not going and opening up an illustrator file, selecting the image, and then reading the coordinates. I can just have a place in my notebook (Usually in the back) that lists all the coordinates for that screen. Engineers will thank you later, this I know.

If you want to read up more on pixel coordinates and its different meanings; this is a great link for more information.

Leave a Reply

Your email address will not be published. Required fields are marked *