The Obvious Design Answer: Hiding Paths

showHideEdges

Working in Illustrator yesterday, I was being somewhat of a goof. I was creating an asset in Illustrator and couldn’t for the life of me, figure out where my paths went when I clicked on an asset. It was only showing a square shape around the entire image. I was totally clueless. I was using gradient mesh a lot and the mesh kept on disappearing. Only to leave me fishing for anchor points. Not a good place to be and certainly a waste of time. In my opinion, it’s always better to be able to see all the paths and anchor points when an asset is selected.

I was also using Live View at the time, and both the “Hide” function for Live View and Illustrators “Edges” is the same keyboard  action. So I kept on hitting Command + H and hiding either Live Views frame or hiding paths on shapes. What a dummy move. I feel like even though the solution was so simple, I could not find any help on it, online.  So here I am today, explaining it for the next silly goose that comes along and is having the same issue.

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.