Case Study: Developing a Custom Grid for Android and iOS
Yet another true story about the grid! So please, if you’re in a rush, then skip past the bullshit and jump directly to the idea, including an example!
The bullshit!
Let’s say you were given the opportunity to design a mobile app for Android and iOS on one of the hottest topics currently worldwide, Alt-coins also known as Cryptocurrencies. The new digital currency is not quite yet regulated. Would you play it safe or go all out sketching some wild and dark concepts? Well, I chose the latter and quickly realized that I needed to support multiple screen sizes, different pixel sizes, and units. You know — 18+ rated designers porn: hd/xhd/xxhd/xxxhdpi’s! So in the back of my mind, I was continually hearing the doctor’s orders “Please Mr designer, could you deliver your designs in Zeplin* so we can read your pixels and measure your crypto fever?”.
*Zeplin is the ultimate collaboration tool between designers and developers. It cuts meetings in half and ensures that designs are implemented perfectly, however complex.
— Meng To
It’s no secret that developers seem to like Zeplin and it’s no different here at BUX, but… I prefer not to. Zeplin is a tool that requires a lot of discipline from the designer to work pixel-perfect as mobile developers tend to take the specs blindly from Zepp which leads to inconsistencies. So Meng… in my opinion that quote lacks substance and is damaging to your reputation, but what do I care. For my work, I needed something better, I needed something scalable, a system that’s good enough to squeeze ‘the designer’ out of the loop and shuffle the product owner in the driver’s seat, enabling the PO to deliver designs straight to development. Ship early and ship often, right?
The idea
What if we had 1 metric for all devices and systems!
A system that delivers expected output in a vernacular simple enough that people from different disciplines, backgrounds, and cultures can understand and use to communicate with each other. That’s key! How often can you recall times when you were talking about design and presumed that all other stakeholders were aligned, only to find out down the track that you weren’t? This can be tackled with one square.
Of course, all of this sounds awesome but can it really be accomplished? I mean, our development teams are working smoothly and fast with the native UI frameworks already, and asking them to step out of their comfort zone and move towards a non-existing and custom UI Framework is tough. It includes a discovery period and learning momentum, so why would they change their workflow…? Luckily for me, I have the pleasure of working with an exceptional dev team that had the time and motivation to jump on board and ride along. We’ve also already spent 4 years working on a similar product which allowed us to build trust in our designer/developer relationships. And using all the knowledge we previously gathered we were able to deliver the same quality with less documentation and fewer words spoken.
The Grid
The quad can only work in a grid and by all means The Grid for Crypto is not made for the design of every app. It has its constraints and is inspired by a Swiss design. Yes, old school lettering, ‘typography to the maximum’. The grid is based on 21 columns and 20 interval divisions.
The first and last columns need to be reserved for side margins and the remainders (See the image below marked in black). The UI and content are placed within these margins on the quads. The quads in the system are used to form a horizontal and a vertical rhythm and indicate where elements are placed on a page and what the distance is between the two elements. Using the limited number of 21 columns we can calculate the width of a single quad and keep the interval fixed. The interval is fixed so we only have the quad as a variable that scales with the width of the screen.
So 21 columns, 20 intervals, and the remainder! How do we deal with the remainders? Well, that’s actually not too complex, the remainders are distributed to both the left and right side of the screen and added to the margins.
The quad
The design team at BUX uses the iPhone 6 as a default to build designs in Sketch for Android and for iOS. I think therefore it’s a nice example to showcase how the grid works. The iPhone 6 has a screen width of 750 pixels and that’s the only thing we need (the height doesn’t matter). The math looks like this: 750 minus 20 intervals of 4 pixels equals 670. Divide that number by 21 columns, and you have 31. This leaves the remaining real estate of 19 divided by 2, which is 10 on the left and 9 on the right. A single quad for an iPhone 6 is 31. The remaining real estate is added to the side margins and you’re done.
The basic mathematics:
- Screen width of 750 — 4 * 20 = 670
- Max columns 21 divided by 670 = 31
- Remaining 19 / 2 = 10 & 9
Snapping rows & columns
Each box, no matter if it’s square or rectangular snaps into the grid! This unique behavior creates rhythm and consistency to the page layout. Snapping happens to the nearest row or column.
Placing UI
Check the second image for adding UI, there are three patterns marked in pink. Remember that one design serves both platforms, Android and iOS. Specifications are shared visually with the dev team using only the quad on the grid as a universal metric. From top to bottom:
A. Toolbar: the height is 4 quads placed over the full width.
B. Content card: the height is 8 quads placed within the side margins.
C. Bottom Navigation: 5 verticals spaced with a single quad.
Placing headers and text boxes
The third image has a header plus a sub-header added to the UI. Text boxes have the unique behavior of snapping into the grid. The snapping supports text boxes that need just a few more words because of reasons such as localization. The text needs to be aligned and that’s just as simple to specify! It’s either: left, top, right, bottom, center, or a combination of alignments (left, top, or center/center).
D. Header: the height of the box is 6 quads placed within the side margins. the text is aligned left, top
E. Sub-header: the height of the box is 3 quads placed within the side margins. The text is aligned left, center.
Proof of life
I have to disappoint you for now as all visuals are safely kept under lock and key, but as I said before this is a true story, and with two mobile developers working remotely and four in the office we managed (with some growing pains) to design a fast and awesome framework for a Crypto trading app. We were able to focus more on user journeys rather than discussing pixels and margins which was an awesome experience. It’s too bad I can’t show you a preview online, but I do carry a live prototype… so maybe, just maybe, in a small designer’s world, we will one day meet, maybe even in downtown Amsterdam in my favorite bar ‘Barones’ over a Duvel.
One more thing. Clapping lets me know that you have enjoyed reading this post and also allows others to see it. I always appreciate your comments too.
Cheers, Ramon
