Comment by csmeder | Hacker News Reader

Comment by csmeder | Hacker News Reader

Parent Full thread

   "Ok... Now I see some differences. On one, the 
   buttons are slightly larger, the colours slightly 
   more nuanced, the shading is subtly different. If 
   I zoom to an extreme level, the font on "ebay" 
   in slightly smoother."

I understand the above is frustrating, however, you are missing the main reason the image needed some extra love.

The main difference is pixel fitting [1]. The fuzzy border lines on the buttons are like "nails on a chalkboard" to me. "Nails on a chalk board" don't actually bother me that much but I notice it. For many cases I would just ignore it. However, if I am shipping a product that I am hoping will get free advertising from people talking about how beautifully it is designed, I am going to pixel fit the damn thing.

In this case, the designer is not being crazy, he is looking out for the the bottom line. Free word of mouth advertising and free blog articles written about the beauty of the pixels contribute to the bottom line much more than the cost of doing a little pixel fitting.

Look at the Hulu example below

[1] http://dcurt.is/pixel-fitting

> Free word of mouth advertising and free blog articles written about the beauty of the > pixels contribute to the bottom line much more than the cost of doing a little > pixel fitting.

Really? Give me the data to back up your bottom line claim. Because in my (5 and counting) start-ups I've seen little to no impact on the bottom line from design blog posts.

Sorry, I didn't mean design blogs. I am talking about normal blogs and tech blogs.

I believe products that are designed well and polished get more attention from blogs and receive more word of mouth recommendations. I believe one of reasons iOS and the iPhone helped propel Apple into becoming the largest company in the world was Apple's attention to design details. However, I have no way to test or prove this theory. So please disagree if you like.

1 - the link between blogs of all sorts and the bottom-line is tenuous at best. If you're an ad revenue business, you can make the argument that all traffic has an impact on the bottom line, but suffice it to say that none of the advertising supported start-ups I have been involved in have seen sustained valuable traffic referred in from a blog.

2 - Normal blogs and tech blogs don't write articles that go into detail on the minutae of the design elements in a product's UI. That's limited to design blogs.

3 - Personally, I'm getting kind of tired of the default defense of most designers to this sort of criticism ("because Apple"). Saying that Apple is where it is because of Design not only ignores the market, product and business realities that have lead to Apple's (recent) success - it also ignores the many ways in which Apple's design is sub-standard or even bad (resulting in people copying bad design patterns "because Apple did it").

Design absolutely matters when a consumer is interfacing with your application, and pixel-pushing is actually quite important. It can be used as a talking point - the SeatGeek application is extremely well-designed for it's vertical, and is meant to be pleasing to use (thereby hopefully driving more eyeballs/higher conversion).

Internally, I think it's also a way to have the designers/developers proud of something they helped accomplish. No, I didn't perform any of the design on the SeatGeek app, but you'll bet your ass I'm not complaining about the three hours I spent uploading about 100 - outsourced and therefore not named well enough for me to automate it - logos to S3 for use in the app. It's a source of pride, and it's what staves off the burnout.

Reference: I work on Operations at SeatGeek, and after slicing up a PSD to very exacting specifications two years ago, I know exactly what kind of a difference design can make re: tech blogs/traffic.

Makes me wonder - is it possible to make an algorithm that does automatic pixel fitting?

Font hinting is precisely that, and it works quite well, at least for body text. I'm sure that more critical applications like logo design still require some hands-on work to get the best results.

As with any vector rasterization, you do trade accuracy for pixel fitting, but for things like small body text you almost always want that. For example, if the 1 pixel wide vertical stem of a "b" is supposed to be between two columns of pixels, the hinting algorithm can push the stem either left or right so it is rendered as a single black column of pixels, rather than two gray columns of pixels. This will look less fuzzy, but it will technically cause the "b" to be closer than it should be to an adjacent character.

http://en.wikipedia.org/wiki/Font_hinting

Yes, after I wrote that it hit me: font hinting would qualify as automatic pixel fitting.

I was thinking about something more elaborate, like an algorithm that takes distances between neighboring elements, proportions and other factors into account (and which can be tuned to include/exclude factors).

An example "smart" rule would be: If a group of elements are aligned, the same size and the same distance, they must remain aligned, the same size and the same distance after the processing

Ideally it would be a plugin for a vector graphics application which could then allow the designer to add finishing touches to the places where the algorithm got it wrong.

There's automatic hinting for type rendering, so I guess those algorithms could be generalized.

But you can probably go far by just fitting everything in your 2x version to even pixels and using even-width lines; then the scaled-down 1x version will be sharp.

Reply on news.ycombinator.com