TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Chasing the Pixel-Perfect Dream

34 pointsby pcr910303over 4 years ago

7 comments

Brajeshwarover 4 years ago
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 &quot;screen-ruler&quot; app&#x2F;extension to calculate pixels of the Photoshoped Mockups and translate them to HTML&#x2F;CSS. It was their must-have default weapon for the front-end engineers.<p>I fired&#x2F;relocated almost all of them except for few good ones, who were eager to move onwards.<p>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.<p>My proudest accomplishments were the ability to get designers + developer + QA team configurations together in modular teams from the earlier designer, developer, QA departments.<p>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 &quot;Mobile, Desktop, Tablets&quot;, we started using mostly terms such as &quot;screens&quot; 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.<p>These ideas were applied to some prominent clients such as Car2Go, JP Morgan, DMart, Aditya Birla, MyDeposits, ZestMoney, etc.
lwansbroughover 4 years ago
The longer I&#x27;ve being doing web development and design the more I&#x27;ve come to appreciate the simplicity of imprecision. One line of CSS I&#x27;ve come to love is this:<p><pre><code> font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;; </code></pre> It&#x27;s not pixel perfect, and it&#x27;s not always pretty. But it is consistent, loads instantaneously, and always feels familiar to the user.<p>Of course, it&#x27;s quite a different way of thinking about design versus a more classical approach, and I think it&#x27;s often overlooked by designers for that reason.
karmakazeover 4 years ago
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&#x27;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.
评论 #25032050 未加载
courtfover 4 years ago
I like designers who are also implementers.
评论 #25039316 未加载
评论 #25031563 未加载
评论 #25031555 未加载
gempirover 4 years ago
I really enjoyed the article.<p>But does the site really need those obnoxious popups if I need anything? Similar to those chat windows?<p>I didn&#x27;t even bother reading what it wanted I dismissed it immediately. Worst part after dismissing it it scrolled me quite a bit back up.
andrewmcwattersover 4 years ago
That’s a long way to say, “Pixel-perfect designs typically aren’t possible without adjustments because different font rasterizers change box dimensions.”<p>Since he doesn’t mention this explicitly, it seems he still doesn’t understand why.
micropoetover 4 years ago
Loved the subtle animations