The simplest way to verify your design, Keyline Pushing
As an Android Developer, besides the code that are you writing, most of the time, you have to work on the design as well. Because we are developers and our focus is mostly on the code area (to design and split the code well) we may miss some UX details like alignment, padding, margins. I know, it is not a big deal from a developer perspective, but for the design team and for the end product could be.
A few years ago, attending a mobile conference, I heard about the tool (actually is a simple application) that I will describe to you in a few words. The name of the tool is Keyline Pushing and is free.
The material design guidelines can be found here.
How does it work
Short answer: simple, powerful and straight. The entire tool is based on a grid which is overlapping the application. The basic keylines are drawn into a different color to be easier to identify. Because of the application background, or screens’ colors you also have the option to change the colors for both, basic keylines and the rest of the grid.
Let's see it how does it look for Instagram app and also for Medium app:
More than that to enable or disable the overlay grid can be done from the notification center using a simple button to toggle the visibility, you don’t have to go all the time back into the application to show or hide the grid.
As you can see in the above picture the basic keylines have predefined values for phone and for tablet, but, indeed, these can be changed accordingly with your requirements.
When the screenshot is taken the grid remains visible, then it is easy to start a discussion with the design team or to prove that they are not testing the latest version and it works on your version (which is supposed to be the latest one).
Importance of the grid
The base principle on each application is consistency. We want to have consistency across layouts and also across different screen sizes and/or resolutions. That means we want to have a responsive UI, the dimension in pixels will be different, based on density pixels, but the ratio will be the same. We will end up having a consistent UI even between different platforms.
Responsive layout grid has 3 main elements:
- Columns: the content of the screen shall start, at least, at the beginning of the first column and end at most at the end of the last column. To define how many columns we will have in our design we must select a base device. We will use percentages, rather than fixed values for columns’ width to be able to have a scalable design.
- Gutters: a gutter is a space between 2 columns. It helps to separate content. Usually, the dimension is chosen as multiple of 4 and it starts on 16dp.
- Margins: it can be identified as space from the left and the right of the screen. In that area we have no content, we have no elements. Usually, the dimension is chosen as multiple of 4 and it starts on 16dp.
Just code it!
