Chasing the Pixel-Perfect Dream | Hacker News Reader

Chasing the Pixel-Perfect Dream

joshwcomeau.com

34 pointsgoranmoomin14 comments

Around 2014-2015, I was hired to overhaul and build a product design-development team. The first thing I noticed of the old team was using a "screen-ruler" app/extension to calculate pixels of the Photoshoped Mockups and translate them to HTML/CSS. It was their must-have default weapon for the front-end engineers.

I fired/relocated almost all of them except for few good ones, who were eager to move onwards.

I spent every week teaching the team, old and newly hired ones, to unlearn whatever they learnt so far. There is no pixel-mapping, no pixel-perfection. I got them to speed on vertical rhythm, modular scale, the cicada principle, et al.

My proudest accomplishments were the ability to get designers + developer + QA team configurations together in modular teams from the earlier designer, developer, QA departments.

I remember building an internal demo akin to the one in the article (Amazon.com with different view) where the sales, pre-sales, and anyone else can show it to clients to convince them that pixel perfection of what they see in the printed photoshop mockups do not make sense. So, instead of using terms such as "Mobile, Desktop, Tablets", we started using mostly terms such as "screens" and they can be small, medium, large or huge display (TV). We even did away with almost the need for sparkling shiny Photoshop Mockup prints and graduated to wireframes, and style tiles for mockups.

These ideas were applied to some prominent clients such as Car2Go, JP Morgan, DMart, Aditya Birla, MyDeposits, ZestMoney, etc.

The longer I've being doing web development and design the more I've come to appreciate the simplicity of imprecision. One line of CSS I've come to love is this:

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

It's not pixel perfect, and it's not always pretty. But it is consistent, loads instantaneously, and always feels familiar to the user.

Of course, it's quite a different way of thinking about design versus a more classical approach, and I think it's often overlooked by designers for that reason.

Conversely, I once printed out a design for a two-color computer store logo. The quote that was given for making it was unbelievable. After discussions, it was discovered that the cost wasn't due to size, material, or colors--it was trying to accurately replicate the fine staircase detail of the edges. That was a limitation of the printer and never intended in the actual design. Make sure it matters before going to all the effort.

This reminds me of the importance of specifying tolerances on engineering drawings - I once received an excessive quote for a part (several hundred dollars for a small, simple Aluminium widget) and it took a while to figure out that I'd not added tolerances and so they had assumed I needed it exact to the micron. I added the tolerances in and the price dropped to $70 or something.

Clear communication is so important!

I like designers who are also implementers.

I started my career doing frontend work but pretty quickly moved full stack, then gradually backend took over for me completely. I’m relatively rusty on FE, have only worked on one website in the last 4-5 years. Now I’m building out a personal site and I decided to just skip the design app and go straight to the browser. It’s a breath of fresh air. I could always make my way with Photoshop or Illustrator or Sketch, but it never quite translated the way I’d hope. I’d end up making disappointing concessions that were in the original design but just couldn’t work in the browser. No more! I start and end with what the browser is capable of, and I know instantly how the end result is going to square up to my expectations. I don’t know what the current design app state of the art can offer, but I don’t really feel the need to find out.

Of course, if I find myself working with designers again I won’t necessarily have that luxury. But it’s a much nicer environment for my personal work than anything I’ve tried.

Agree. I feel like the division in which designers only work in Figma/Sketch/etc. without actually being able to implement those things in HTML and CSS leads to designs that are often impractical for the platform. Shouldn't the person responsible for drawing the user experience have an understanding as to what is actually capable on the platform that they are designing for?

Even if you do fully understand the platform you'll still find yourself having to argue with engineers who claim things are "impossible", any talent capable of producing high quality, performant UI with great UX front end work is extremely rare.

Struggling to find engineers who can even create a button and link that function correctly these days on pages with 5-10 second load times.

I do not like designers.

I've worked with a few really good designers. They can add a lot to a product when designers, PMs, and engineers are all equal stakeholders who can contribute ideas and point out shortcomings. E.g. a good designer can take complex functionality and create the optimal interaction pattern for that functionality, and make it look and feel good to use, without sacrificing functionality.

Design as a field goes far, far beyond creating logos, interfaces and pretty pictures. Design-inspired strategy has made it's way into the US military, government, and many corporations.

That statement is deep in Dunning-Kruger territory.

I really enjoyed the article.

But does the site really need those obnoxious popups if I need anything? Similar to those chat windows?

I didn't even bother reading what it wanted I dismissed it immediately. Worst part after dismissing it it scrolled me quite a bit back up.

That’s a long way to say, “Pixel-perfect designs typically aren’t possible without adjustments because different font rasterizers change box dimensions.”

Since he doesn’t mention this explicitly, it seems he still doesn’t understand why.

Loved the subtle animations

Reply on news.ycombinator.com