What is a Front-end developer specialised in Pixel Perfect?

Front end Jun 2, 2021

In simple words, this kind of developer can achieve a markup from a design at 99% of accuracy(or so) but is more complex than that at first.

Personally, I didn't realise I had been creating websites/apps using this technique until my 5th year of experience as a Full-stack developer because it's something I "naturally" do.

So I started looking in detail at the process I tend to follow when I am doing Front-end development and although it's easy for me to follow, I checked with some friends and I noted that is not something the standard developer do in their daily basics.

But is definitely an excellent prop to have, so let's see the real benefits.

Benefits of the Pixel Perfect technique

  • You really care about the hard work the designers made and you understand the effort they made to set everything in place from the client's requirements.
  • Since you work even with the small detail, your markup will always be clean and easy to understand.
  • You will have fewer complaints from the client or designer and more positive feedback.
  • You can help the designer with design issues since you are building the markup at the same time you are looking into the design.
  • Your markup will require fewer changes because you build exactly what the designer created, so the client will see exactly what they need to see (extra changes outside the design is something else).
  • You will learn how to extract or find fonts, colours, icons, etc. when you have no access to those assets.
  • You will learn how to measure the design even when the design is a simple image and not a regular file on Zeplin, Figma, Adobe XD, etc.

How can you achieve this technique?

Just practice and practice...

I am not kidding, this is like everything else... practice makes the master.

But of course, there is something specific you must follow in order to master this technique.

  1. Pick a small design or widget from Dribbble, Behance or any other related website.
  2. Analyse the design and think about the HTML tags you should use in every section, begin the markup on your mind.
  3. Check how many colours are involved in it.
  4. Try to measure every button, div, image, font size, etc. to have a general idea of the pixels within that design.
  5. If you want, you can start thinking about how the design should look like in responsive mode.
  6. Start coding.
  7. Finish this project and compare side by side your markup and the design to see how exactly your work is compared with the expected result.
  8. Save it and pick a new one. Make sure to pick a bigger one each time to improve your skills and after 5, 6 or 10 markups finished, you will notice the difference between your first designs and the last ones.

As you can see, I am only talking about markup but these same steps can be applied to CSS animations/transitions and JavaScript functionality.

Of course it's not an exact science and there are many guides out there that have different points of view, but this is what I usually teach to my students, so those instructions I just wrote down are from my own experience.