Hiring people: If you are asking for designers with ‘pixel perfect’ skills, then you are doing it wrong. Pixels, and the concept of polished ‘final’ or ‘pixel perfect’ visuals, are as anachronistic as the word ‘digital’.
Consider the following, all those 30 odd high res Photoshop files are going to be almost 100% rebuilt in code. HTML/CSS/JS etc for the web, and ObjectiveC for iOS, Java for Android (eurgh), and BBC Basic (probably) for the rest.
Consider also these:
1x (one times)
When designing for screen, the concept of pixels is redundant, you are designing a modular system to be appropriated across a multitude of viewports and devices. So you design in points, or 1x. And you design ‘stuff’, not perfectly polished visuals. Designing at 1x means you dont really need to make sure everything is on the pixel. Nothing will ever be rendered exactly as you have commanded.
Reausability
Yeah that designer you hired to babysit those 30 Photoshop files and keep them all nice and aligned to the pixel? well none of that stuff is reusable, the moment the experience is built in code. In fact, the more the code progresses, the less the source files look like the code.
Legacy
Those files end up on the server equivalent of an airplane graveyard. And the naming conventions, FINAL2.psd, FINALFINAL.psd, FINALLYFINAL.psd ? at least name them like the Fast and the Furious movies:
Sketch
No one uses Photoshop anymore, apart from Photographers and Retouchers, exactly the market it was developed for. Sweet.
Screen designers have our own software for a few years now. Sketch is vector based, and takes me back to the old days when in 2007 I got everybody in the studio to switch to Adobe Illustrator, as it was more in tune with the way we should design (objects and groups). I of course got absolutely rinsed by most people who thought I was an idiot. I am an idiot, but for other reasons.
Design is not pixel perfect
Only create the minimum fidelity needed to communicate the design. Get it into code as soon as, then iterate.
Clients need to be educated that designing screens in Photoshop, printing them out for review and updating said files for the life of the project is a waste of time and money, consider getting a front end hero to make the iterations, rather than a Photoshop operator.
Present design on the actual device, and frame the design based on solid principles. The more fidelity, the more a client or stakeholder will look for inconsistencies and allow their subjective thoughts to cloud their judgement.
Spacing can be marked up in relative amounts, I use 3 sizes for spacing, and none of them are measured in pixels. One is called 8, one 16 and the other is 24. None of them have an actual unit.
8 is the multiplier for every single screen size. 16 is usually the base font reset and usually the best size for readability. And 24 because Responsive Web Design (eurgh) margins and gutters should really be 8, 16, 24, or 40.
Vertical rhythm too, can be communicated without using pixels.
Verisimilitude
The appearance of truth. Your old polished high-res visuals dont look anything like the final product. Why? well you have used two distinctly different methods to render some stuff on a screen. Type renders different, as do colours and spacing. The layout too, which is either properly fluid, or uses breakpoints and CSS media queries (sometime referred to as Responsive Web Design, eurgh). There is no * actual* screen
KISS — Keep It Simple, Stupid.
The KISS principle states that most systems work best if they are kept simple rather than made complicated; therefore simplicity should be a key goal in design and unnecessary complexity should be avoided.
Who's to blame?
Well firstly large, mostly client side companies are still getting their people to spend days on ‘pixel perfect’ static visuals, which are then either:
- Printed out onto ‘paper’ (which is made by killing a tree).
- Saved as a PDF (don’t put more money into Adobes trouser pocket)
- Viewed in a deck that is outputted via an HDMI cable to VGA adapter, onto a large TV which has a screen ratio of 16:9. Either the viewport is reduced or the whole thing is stretched. (hardly any of your users will ever see your product on a TV unless you design for TV) Most of the ‘stuff’ you design will be portrait, and controlled by a mouse, or a finger or thumb.
Roundup
Only show the minimum you need to, and show it on the actual device.
Educate the stakeholder as to how this design is simply a collection of objects that are appropriated onto a screen, and not the final final thing. There is no final thing. Nothing is final (except for death and taxes)
Design modules, design things. Don’t limit yourself to a screen size or a ratio. Decouple your work from *actual* units of measurement such as pixels.
Use relative spacing and stretch points, group objects effectively and take off the stabilisers. Let your design free to fill up all the screens on all the devices.
