Ask DN: How do you guys make sure that the mock converts pixel perfect to the actual UI?

over 6 years ago from , Co-founder zipBoard

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.


  • Kyle ConradKyle Conrad, over 6 years ago

    You don't. Pixel perfect is generally meaningless.

    20 points
    • , over 6 years ago

      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?

      1 point
      • Kyle ConradKyle Conrad, over 6 years ago

        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.

        8 points
    • Ray SensebachRay Sensebach, over 6 years ago

      +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.

      3 points
      • , over 6 years ago

        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.

        0 points
    • Marc EdwardsMarc Edwards, over 6 years ago

      Pixel perfect is achievable and not that difficult (except for font rendering).

      7 points
  • Joey Shiner, over 6 years ago

    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.

    6 points
  • wojtek w.wojtek w., over 6 years ago

    Nice ad there, mate.

    5 points
  • Alex PaxtonAlex Paxton, over 6 years ago

    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

    1 point
  • Thomas GreenThomas Green, over 6 years ago

    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.

    1 point
    • , over 6 years ago

      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.

      0 points
  • Geoff YuenGeoff Yuen, over 6 years ago (edited over 6 years ago )

    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.

    1 point
  • Michael B., over 6 years ago

    Using the Avocode app has helped tremendously.

    1 point
  • Moeed MohammadMoeed Mohammad, over 6 years ago

    You ... don't?

    1 point
  • Sherizan SheikhSherizan Sheikh, over 6 years ago

    Start with a style guide, build them into smaller components and put them together in code.

    0 points
  • Alex CampAlex Camp, over 6 years ago (edited over 6 years ago )

    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.

    0 points
    • , over 6 years ago

      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.

      0 points