Launching A Pixel Perfect App -Challenges and solution

The famous designer-developer tale :

It was a long day…. and Carol was almost done with her designs. She sat there for a few seconds just to admire her designs that looked soooo perfect! She was tired and ready to go home, but she had promised George the designs and specs by the end of the day. So, she quickly put together the specifications manually. She didn’t really have the patience of penning down every annotation. And was quite convinced that George would certainly figure it out!

George came next morning and started with the designs Carol submitted last night. But he was forced to hunt through layers and sub-layers of shapes and text elements to figure out the right HEX value for the border around the “Buy” button or the font family used in the “Forgot Password?” field. He was starving for proper specs and owing to the short deadline, he convinced himself to just complete it somehow. “I’ll fix it when it comes back.”

Both are absolutely rocking at their craft, but it’s always tedious to do something you are not an expert at, moreover not very interested in! The problem here is the method Carol and George adopted to — manual.

This article will talk about the challenges of each craft and the solution to these valleys!

Challenges of Designer — Developer — Project Manager

The two examples above — with Carol and George — are imaginary, but that doesn’t mean that these dialogues and incidents are imaginary too. Each of these crafts has their own challenges. To subsume the solution we need to identify and empathise with the other’s challenges.

1. Designer

There is a lot that a designer is doing from 9 to 5. Having said that, preparing manual specifications is truly very tedious for him/her. A designer usually exports some PNGs and prepares a specification with all of his annotations. This is stressful. Even worse when the project in picture is a huge project. Too many annotations and specifications to be taken care of.

Not just tedious, but also very time-consuming. Rather if you ask a designer, he spends more time creating these deliverable than actual designing. More than that, a small change in the design (which is so prone to happen during the development phase) results in complete rework on the specifications as well. Every minute a designer spends revising this documentation could have been spent on the interface, experience and interactions.

Another major challenge is exporting all the assets used in the project for the developers. Every designer, yes each and every one of them is tired of doing that!

If the designer happens to miss out some specification, black with 60% transparency might be misunderstood as grey.. 🙁

2. Developer

Taking it ahead from the previous statement, a developer has his own set of challenges.

A developer is almost done with the task when he realises that the “BUY NOW” button he developed does not look same as the one on the live website! Ahhhh…Developers don’t often have enough detailed information about the visual design and have to guess, resulting in visual inconsistencies.

Every developer reading this will agree to this — When a developer is engrossed into his codes, a slight distraction or divergence is a big “NOT NAAOOW DUDE” moment for him!!! 😉 Having to look up an RGB value or turning to a teammate every time to ask which typeface is being used could lead to big gaps in his productivity.

And trust these are not the biggest challenges… The biggest is —

When the developer has successfully implemented the design, there is still a possibility that his dear designer friend will make a visual change, at which point where he will have to manually inspect the design again and figure out what exactly has changed!

3. Product Manager

The goal of a product manager is a harmonious sync between the designers and developers on his table. And especially when team members are remotely located it is very difficult for the product manager to keep all on the same page. Lacking which, it will definitely lead to miscommunication and errors in the project.

The easier way out for pixel perfect apps

Developers should not have to make any guesses that lead to errors and lose time. On the other hand, creating detailed specs manually is tedious and takes a lot of the designer’s time.

Is there a better way? I believe there is.

Thankfully, online tools exist to help all 3 with their challenges. These tools take in Photoshop or Sketch documents and produce a specification for developers, including code snippets and image assets. These tools also track changes between versions of the design. That’s where Zeplin, Avocode etc come into the picture. However, these tools are for inspecting, not editing or for creating functional prototypes. You still need to create and edit your files in Photoshop or Sketch and then open the files for inspection in one of these tools.

Annnnnd, then comes in SPECS by CanvasFlip!

( Get early access to FREE design handoff tool )

Considering the challenges in the tools mentioned above, we started building SPECS by CanvasFlip, a pixel-perfect way to hand designs off to your engineering team. CanvasFlip is already a prototyping and usability testing solution. The idea was to make it a single source of access for product teams. SPECS would make handing off designs to development teams a breeze. Create style guides, get a pixel-to-pixel measurement, discuss design challenges, export adaptively, and generate real code for any design element. It is soon releasing in BETA…

(Please let us know which features you would like to see added to SPECS! You can also leave a comment here. We’d appreciate your feedback.)

And did I say, Top 50 teams will get early access to SPECS just by answering these 5 simple yes-no questions. ( Sorry for the plug but I have to job to keep, you know… 🙂

Final Words

Successful product development requires effective collaboration between designers and developers. That sounds nice in theory, but in reality, we know it’s a big challenge. But, that’s what we are for — Making the product design and development process easy for you!

Related Posts
Monika Adarsh