How to achieve Pixel Perfect front end practically?
Have you ever stumbled upon some web-page prompting you to get into a series of thoughts like wow, how amazing is this, I wonder how it is made, who has made it, can I ever make something so appealing…
I’m sure you would have, at least once.Have you ever tried to put some efforts to quench your thirst with answers. My questions made me compile this piece.
What really is pixel perfect?
It depends on the context, say designing any element pixel perfect would mean that on scaling the design either up or down, it should still be crisp and clear. On the other hand if it’s said in context of implementing pixel perfect HTML for a design, that would mean reproducing an exact replica of designer’s mockup as a live web resource. Also, one can think of pixel perfect as uniform website design across browsers. All these thoughts, although quite different, but have a central theme, i.e. you need to focus on each and every minute detail right from prototyping to the design going live. In short,you can say it as — every pixel matters when seeking perfection.
But the argument is, is it worth it? While creating anything ROI is quite important but if we are spending a whopping amount of time and effort, creating an iteration, every-time; then it would definitely increase the cost. One would rather utilize the time to add more features, that would lure the users, rather than any piece of perfect design. Look, I’m not denying the power of a great design but the question is, should we focus on generating a perfect design in the first place or on making the product better.
As interactive designer Kyle Conrad has even said, “Pixel perfect is generally meaningless”.Thus saying that following a design pixel by pixel would make it perfect would be quite thoughtless and traditional.
So, “Pixel perfection” can probably be better described as a design which is consistent and intentional. This approach looks practical and is achievable.
Going by this approach, good design essentials include : Sharp edges, perfect alignment and spacing, color management, consistency, clarity and simplicity. Read more about pixel perfect details here.
“It’s the designer’s job to think about your site the way a user does, and tell them what they need to hear, and when they need to hear it… Design is about communication, and it takes more than pixels to communicate.”
— Derek Powazek
What frontend developers do is, bring designer’s vision to life.So, it’s quite clear neither designers alone nor frontend developers alone can deliver a good design to the end users. Also, it’s not just designers and developers,who are involved in the design process, insights from product manager, stakeholders and others too matter a lot.Thus it’s how effectively they all, can work as a team, what counts for creating an attractive as well as efficient resource.
How to dig your way out?
Users are prime, thus the final goal should be creating something that delights them as well as enables them to accomplish their tasks as quickly and easily as possible.
1. Don’t wait, start communications early
Just taking up a high fidelity mockup and putting it to code is now an old process to follow. To get things done correctly, everyone (product manager, designers, developers, stakeholders etc.) should work as a team right from the beginning. If the whole team along with the clients starts collaborating right from the ideation phase then the design intent is crystal clear for all and this would help not only the stakeholders to put forward what they actually want but would also aid managers,designers and developers to take right decisions in terms of achieving optimum perfection. Say for big players like Apple the intent would clearly aim at being perfect, even for every minute detail as they have time and resources to strive for it but for any startup or small enterprise, the basic goal would be, delivering the idea well.They can live with slight imperfections at the ground levels but cannot lose time beautifying every minute detail.
2. Discuss and start prototyping
Knowing the design intent right, is not when you can, straightaway start prototyping. First come up with a clear plan for what and how you wish to implement things and present it to all the teammates and have an open discussion for enhancements to be made and for ruling out any unnecessary details, already added. This would help the designer to come up with a prototype at peace with everyone’s thought process. Else the prototyping phase may go through ’n’ number of iterations back and forth, beating the bush,thus making the process quite unproductive. Even after discussing things well amongst all, still there would be iterations while getting to the final prototype but this time it would be quicker as you need not rework on the conceptual grounds.
3. Analyze prototype with developers
While creating a great design, designers, sometimes end up creating something which requires a lot of coding efforts. Such a design is good from UX perspective but is not using the resources optimally. A basic knowledge of HTML and CSS would greatly help designers to have a design that’s easy to code.So as a part of the cycle, developers and designers along with others should also discuss whether the prototype is efficient in terms of user delight, design intent and coding efforts as well.
4. Share prototype along with specs and assets
Once the design prototype is ready considering everything discussed above, now designer has to share the prototype with developers so that they can actually start coding.A good design hand off document includes mockups,Interactions, copy table,specs and assets. Nowadays with tools like Avocode, Invision Inspect, Zeplin, Sympli etc. the designer need not waste time collecting every piece of information to hand over to the developer.These tools extract maximum possible information from the pre designed mockups automatically, reducing your workload to as minimal as possible.
5. Validate the coded version
Now with all this done your web page is ready, but still it can’t be delivered. Prior to that you need to validate, if the design is up to the mark. For this you need to collect feedback from product manager, designers, developers, stakeholders and if possible from some of the industry influencers and prospective users too. To keep them all on the same page is a tough job. So you might need some visual web collaboration and annotation tools like zipBoard, Usersnap or TrackDuck, to know, if the final output is meeting up their expectations or not; Obviously there would be some tweaks but that’s fine and are quick and easy to incorporate.
With a few iterations of the cycle mentioned above, your webresource would be ready to hit the market.Going by this approach and discussing everything with the team makes it really less time and effort intensive.
Final thoughts
What front end development should in any case strive for is, easing the user complexities while browsing; and creating practically pixel perfect designs is a way to achieve that.Pixel perfect frontend is a great approach to start, and stick to; to keep your work well organised and to make it more reliable. But you cannot be perfect for every minute detail every single time, neither practically nor economically. So take it easy and deliver what fits the best and can survive all ifs and buts based on your discussions and market research;not the ideally ‘Perfect’ one. Remember
“It is not the strongest of the species that survives, nor the most intelligent that survives. It is the one that is most adaptable to change.” — Charles Darwin
Aim at achieving pixel perfection to the fullest and find a niche for design as well as user delight.
