Interface Design: A Game of Pixels
***************
Everybody agrees on this fact that Apple earns ten folds over what they build. But have you ever wondered why Ferraris are 10x more expensive than a custom-built, 1000 HP monster Toyota Supra when both of them are essentially cars to be driven on roads? Right now, you are thinking “Ferrari builds a car that goes 0-60 in 2.8 secs, you doofus, that’s why” and you’d be right. But look into your answer. It’s not the numbers, trust me. It’s those numbers creating the experience that make you believe that Ferrari is right in charging the premium. Not to mention if you ever, in reality, have driven a Ferrari, you are only one of the handful people in the world. Makes you feel special, doesn’t it?
And the less we talk about Pepsi, the better. They might be charging the same as Coke but you can’t help but feel Pepsi should be cheaper, don’t you? (You can reach out to me directly if you feel personally attacked)
How does it all relate to Android vs iOS?
Android is a powerhouse. Let’s face that. It gives you the kind of granular control iOS just can’t match. It makes you feel in control. It makes you feel like the boss. And at the same time, it enables manufacturers to build cheaper phones for the masses. iOS, on the other, sanitized hand, makes you feel pampered. Tells you what to do and what not to do in an elegant way. It makes you feel like you are being cared for. And that’s where it’s strengths lie. People like being cared for and that’s a fact. But how does it do that? It all lies in the attention to detail. A game of pixels, if you will.
We all love things that have a touch of realism. Something we can relate to. This is what Apple did and continues to do with its ecosystem. It humanizes it. Makes it seem natural. And that natural order of things can only be achieved if you have an eye for detail. Extreme, unadulterated detail. Here’s an example; pick an iPhone, go to its Control Center and flick the Brightness slider with a quick swipe up. If you have an eye for detail, you will catch that there was a touch of momentum to that slider. It didn’t immediately stop as soon as you lifted the finger but went just a bit above it. Like how natural laws of physics work. Nothing comes to an immediate halt as soon as force is being stopped applied to it, rather it takes a bit of time, just a fraction, to come to a full stop. In Physics, we call it Inertia. In life, we call it a reality.
Right now you may be thinking “Man, this dude is crazy”, but then what about the Product Designer who thought of this first? And that Engineer who implemented this first? That kind of crazy has made Apple 1.3 Trillion dollars to date. Even if it’s not about the money, the fact that people are willing to buy their overpriced devices day in and day out without realizing why they do it or the usual “because of the experience” is a testament to the fact that:
“As with a lot of design, it’s hard to notice things that are done well until they aren’t there anymore”
Why are these things “hard to notice” anyway? Today, you will teach yourself this.
Playing the Game of Pixels
Let’s play a game, shall we? Consider it an exercise for your mind’s attention to detail. See how minutely you notice things. I will put 3 comparison designs here, each gradually increasing in difficulty from Easy to Hard, and you will guess which design seems “correct” to you. All set? Let’s have some fun.
Easy
Told you it was easy. Design A just looks blergh in comparison to Design B, doesn’t it? Color contrast is all over the place with no clear distinction between the background or foreground. Looks thrown together and well, that is an antithesis to caring for the user. Something we should avoid doing at all costs, even if we have to design or code something in 15 mins. Not acceptable. Moving on.
Correct Answer: Design B
(Tidbit about Color Contrast in UI: If you are interested in knowing more about this topic, and trust me, there’s a lot, read more here)
Medium
Now, this is something really interesting. Which of the above choices seems “correct” to you? Is it Design A or Design B? Or both seem correct? Go on, there’s no time limit, look again, and lock the answer in your mind. Done? OK.
Everybody who said Design A, pat yourself on the back. Everybody who thought both seem correct or Design B, well, here’s the curveball: A user, in a given scenario, will not be able to differentiate between 2 different actions if both look the same just because they are supposed to be buttons. Get it? This is why it is extremely important for the flow of your application to have a distinction between Primary, Secondary and Tertiary actions in any given context and not just rely on the user reading what a button actually does.
Correct Answer: Design A
(Buttons are the single most used entity in Interface design. I highly recommend this article if you want to know more about the distinction between actions and button states)
Hard
I’ll admit, this is especially a tricky one. You might need a thorough look at the design before you might be able to build an answer in your head. Take your time. Look at the design again.
Done? Look again.
Think you have it? Then let’s see.
So, which design seems “correct” to you. Is it Design A or Design B or both? Sneaky one, isn’t it? Well, the correct one is Design A. Compare the titles of the post. Something is off, right? Yeah, you got it, the text is breaking off right in the middle of the word in Design B. Bad UX. Really bad.
Typography is the lifeblood of any interface. Wrong typeface (designer jargon for Font, read more here if you want the technical details), wrong line-height, wrong weights, even a single thing out of place in Typography can take your application from good to very bad in an instance. So no matter if you are a designer, developer, or even a manager, take especially good care with the type and content of your application. They can make or break a deal.
Correct Answer: Design A
If you want to know more, you can read about how Typography played a major role in creating Google’s new brand identity.
Bonus Exercise
Here’s a small surprise for you before we part ways. Consider it Master-Level difficulty:
You will need some time to catch the “correct” design in this. Take a deep breath and try again. If you are able to spot it, maybe you should consider a career in design, and we, at Xgrid, have got the perfect place for you.
Done? Well, won’t keep you waiting, here’s the problem:
The position of the online indicator for the 2nd row was off by 4px in Design B.
Correct Answer: Design A
***************
And that, my good readers, is how you play the Game of Pixels. The next time one of your clients or managers says “I don’t know, seems a bit off”, don’t tear your hair out (or theirs for that matter) and look through your design again. You will always find something to fine-tune, you can bookmark me on that.
In case you are feeling confident, you can actually play the long game here: https://cantunsee.space/. Created by Alex Kotliarskyi, this little game was the main inspiration for this post.
And don’t forget, happiness can be found in the smallest of things. How we design and engineer the tiny dots on our screens is proof of that.
Oh, and one last thing, do you know how Ferrari humanizes its cars? Every single engine is hand-built, that’s how.
Established in 2012, Xgrid has a history of delivering a wide range of intelligent and secure cloud infrastructure, user interface and user experience solutions. Our strength lies in our team and its ability to deliver end-to-end solutions using cutting edge technologies.
OFFICE ADDRESS
US Address:
Plug and Play Tech Center, 440 N Wolfe Rd, Sunnyvale, CA 94085
Pakistan Address:
Xgrid Solutions (Private) Limited, Bldg 96, GCC-11, Civic Center, Gulberg Greens, Islamabad
Xgrid Solutions (Pvt) Ltd, Daftarkhwan (One), Building #254/1, Sector G, Phase 5, DHA, Lahore
Xgrid © 2025. All rights reserved.