pixel perfect layouts

tl; dr

  • it’s difficult to get “pixel perfect design”, especially if your design work is outsourced
  • you’ll often see developers fighting to create pixel-perfect copies of designs provided as static images, inside of a dynamic, interactive, application
  • quick, effective, feedback, can significantly speed up the process
  • here’s an example where I turn “screen scan” and “overlay” into a one-click process

a good sense of taste is critical, especially in the current world of smart-phone centric startups. this is a particularly relevant meme to the startup world, and i often hear of startups and/or entrepreneurs which exhibit a good sense of taste being referred to as having, or being able to produce “pixel-perfect design”.

the original phrase “pixel perfect design”, in the design context, describes a very technical concept. it applies to human-produced images which display crisply on digital screens. specifically, for an image to be crisply displayed, it’s crucial that the contents of each and every pixel that is to be displayed, is accurately described by the designer; otherwise, screen software/hardware will take a best guess, usually by interpolating between nearby, better defined, pixels. the best guess/interpolation process leads to various, often visually distracting, side effects (usually unintentional blurriness in images). since modern screens have very high resolution (meaning there’s a large numbers of pixels to keep track of), and, especially when it comes to user-interfaces, most designs are displayed on more than one resolution – the process of producing pixel perfect designs requires specialized skills and often slow, pain-staking work.

in the startup world, the phrase is nowadays used to refer to a more general concept – i.e., the combination of good taste with the hard, painstaking work required to produce good quality, tasteful, designs – for user interfaces and elsewhere.

very frequently, startup founders don’t have the required skills to turn their sense of taste and ideas into crisp on-screen designs. it’s also unusual for a startup to have a designer on-staff, especially in the early stages, where product and idea development takes the bulk of the effort at the startup, and there may not be much to design, most of the time. design work at these stages is almost always outsourced

this leads to repeated pattern – a developer at a startup finds himself with the task of recreating, in a dynamic user interface, a painstakingly produced design, provided someone else in a static image format

many developers lack the skills, and tools, to quickly and efficiently do this kind of work. they won’t have access to often expensive design tools, such as those provided by adobe, and may not even know which tools would be useful and how to apply them. surprisingly often, though, an investment of time spent upfront, combined with some easy to find free tools and basic scripting skills most developers do have, can save significant pain and work

you don’t have to take my word for it. since i usually find it especially useful to automate the feedback portion of the work, i thought i’d provide an example – see here