I have been involved with product teams for different sizes of company, and have seen this struggle everywhere. Just wanted to get an opinion from the community here, as to how do you guys achieve perfection in HTML which your designer draws in the mock. It is very difficult to have your developer understand the exact pixel, color, font, sizes etc. Because of that, what the designer designs, to be able to get it 100% the same, there is a lot of collaboration required between the dev and the designer. We often sit together and actually work with the dev to make changes to match the design. In fact, with that in mind, we created zipBoard(www.zipboard.co), so that the designer can exactly mark once the dev gives his design. But, I am really curious as to how people creating websites/ products are doing it? It would be really helpful, if you can share your processes.
You don't. Pixel perfect is generally meaningless.
Is it? I mean what is the point of making some really attractive designs, and then not being able to see the same thing in your product? I know, it cannot be always 100% the same. But, I have also seen, a lot of time spent in trying to address each and every detail and some time have no other way, but to simply have the dev and designer sit together and look at things closely enough. Is there a better way?
Right, you can look at things closely and make sure everything looks right and looks attractive and works.
But then you scale the browser down or up or sideways or vertically.
Pixel perfect is remnant of a 960 forced grid and m dot websites. We have to accept that nothing is perfect and the main goal is making it look good and convey the right information to the user and perform well across all screens and devices.
+1. You don't, you can't. Not on real product teams at least. There are 100s of higher priorities than 'move this button 2 pixels'. Most designers = stop fighting for that kind of thing pretty quickly on larger teams.
For personal side projects? Sure, why not. In that case, it's best to BE the developer, or else you'll bug the hell out of someone with your dreams of pixel perfection.
I absolutely agree, about being very nit-picky. You can't be! But, we have struggled for overall cohesiveness at times. Unless we have a good library developed for every UI item. But, often to chase deadlines that is not done, and then we have had to make changes to each item separately. I definitely find it easier for the designer to be the front end developer, in-fact that is a solution that has worked for one of the clients that I worked with.
Pixel perfect is achievable and not that difficult (except for font rendering).
Should we answer or accept this as an advertisement for zipBoard from its co-founder?
I feared people may assume that. But, honestly this is an attempt to just understand how things work in the industry. My interaction so far is only limited to the teams I have worked with or my colleagues have worked with.
I use the Zeplin plugin for Sketch at our company (https://zeplin.io/). It does a great job eliminating the guessing and checking by front-end devs. It not only gives margins, padding and spacing but also the CSS that goes along with it.
I have been meaning to give that a try. Thanks for reminding :)
Nice ad there, mate.
In Sketch, I hold down the alt key and it tells me how far my selected item is from a hovered item. But I agree with Kyle Conrad, it's meaningless.
Using the Avocode app has helped tremendously.
Will check it out. Thanks
You ... don't?
I write all the markup and stylesheets at my company. Get to collab with the frontend end guys to see my designs come to life. I used to do a lot of "handoff" in the past but something always falls through the cracks. I took the opportunity to learn more frontend skills so I could be in charge of design implementation.
Also I can just make my own branch and polish to my heart's content, get it merged in and be stoked on it. Haven't actually designed anything in Illustrator or Sketch in weeks
The usTwo guide is useful to see some of the issues which arise in the translation process: PIXEL PERFECT PRECISION HANDBOOK 3
"Pixel perfection" can probably be better described as a design which is consistent and intentional.
E.g: – Are the design elements on a page consistent? – Are the pixels on the screen intentional or there by miscommunication or oversight?
Obviously collaboration and feedback are super useful. Ideally you would capture feedback from your team members on the quality of your tools, processes and team interaction. This feedback would inform your decisions about how to invest in your tools, processes and team interaction/professional development.
Yes, I think pixel perfect in my head meant exactly what you mentioned : ""Pixel perfection" can probably be better described as a design which is consistent and intentional." We have struggled many a times to achieve that level and definitely needs a lot of collaboration.
Start with a style guide, build them into smaller components and put them together in code.
Luckily I work with a small team so I'm constantly standing at the front-end guy's desk and making sure things are looking right. It probably helps that I can code html/css and have for a handful of years - sort of lets me know the limitations and when I should push to get my way.
I worked together with a junior iOS developer a few years ago and that was a mess. I literally had to create blueprints of all my app screens with hex codes, pixel dimensions between elements and so on. After many .1s, we finally had the app looking pretty sharp but man there was a lot of wasted time.
I checked out your website but left quickly when I saw that the text was getting cut off even though my browser was at a standard 1024px width. A little harsh yes, but I'm not a fan when companies fail to put a strong effort into their own site design.
See that is what I am talking about. You can never make it perfect, and there is always a rush to try and fix "other" important things. Will check out the text cut off issue, have not experienced it myself. But thanks for pointing out, anyways.