With over a million apps in Google Play, and slightly less than that in the iTunes App Store, design has been heralded as one of the crucial qualities that sets a mediocre app apart from an amazing one. Think about how Flipboard’s design sets it apart from the tons of other news aggregation apps for iOS: Flipboard can be navigated through like a magazine with its natural user interface, whereas most other news aggregation apps require scrolling. PC World still deems it the best social news aggregator on the iPad.
In traditional waterfall development processes, designers could only hope that the developer would be able to interpret their mockups and take the effort to make it pixel perfect – translating the mockup into the final product as adhering to all the design elements is incredibly difficult. Unfortunately, in many instances, the developer typically does not invest the time and attention to detail necessary to execute the design perfectly and compromises would be made to get the product shipped.
Today, design continues to go to great lengths to make things beautiful. They may want to be pixel perfect for a variety of reasons: to meet increasing user expectations, to create the best possible user experience, etc. However, similar problems in translation from designer to developer continue to obstruct the possibility of pixel perfection. For example, developers and designers don’t use the same tools to design – designers craft mockups in software like Photoshop, whereas developers build using programs like Xcode, Eclipse, and Visual Studio. However, pixel perfection is becoming a possibility because of two important growing trends: designers are learning to develop, and developers are learning to design.
When these two parties are on the same page, magic happens and product visions become realities faster and with higher quality.
Designers Learning to Develop
Simply launching an app is no longer enough. You are competing with hundreds of thousands of other apps for the user’s attention. As design becomes a more important feature due to increasing user expectations, new tools are enabling designers to quickly learn how to code UI/UX elements. Allowing a designer to speak the same language empowers both the designer and developer to communicate more effectively with the goal of achieving pixel perfection.
One tool that I have seen success with is Microsoft Blend, which supports languages like XML and HTML 5. In this example, a designer was able to learn the syntax and tool relatively quickly, with coaching from a developer, to become a self-sufficient code contributor. By working on the code directly, designers can tweak the code and drop it directly into the product, which takes some work off the developer’s plate. Designers can use the code to build static mockups, animations, and various other visuals.
Developers Learning to Design
Developers understand the value of beautiful-looking apps. They know that taking the time to create an engaging user experience is worth it, because these details provide tangible results. As the market is maturing, the world is starting to reward well-designed apps with millions of users. Don’t get me wrong; there’s still a place for straight-text RSS readers, but there is a growing number of users who appreciate well-designed experiences.
Developers are using their own tools to accomplish pixel perfection. For example, in one of our own recent builds, our developers coded in their own margins, visual references, and spacing based on the design specification that our designer provided. They coded in a module that overlays the design references over their layout (similar in concept to a layer in Photoshop). This is a departure from how apps are usually built: instead of trying to polish with what little time is left at the end of the project, the first thing that was coded were the design elements, such as the margins and spacing, onto the canvas.
When the product was complete, they removed the design specification guide layer. Essentially, they used Photoshop design mentality in their code to achieve pixel perfection.
The Way of the Future
Design is growing as a priority and a prerequisite to building a product that will engage users. Because designers are spending all this effort on making the mobile solution beautiful, it’s imperative that developers build it as specified. That means everything has to be perfect: overlays, pop-ups, animations, and other elements such as velocity (the speed of a rotating animation) and depth.
Developers will not only need to be more precise, but also willing to code to match designers’ mockups. Similarly, designers are now understanding how they can help out with developers’ productivity and previous problems with translating their mockups to the product.
Closing Thoughts
Now more than ever, the success of your product relies on compelling UI/UX. The future of improving design involves designers learning to code and developers learning to design. Creating a pixel perfect product is one way to increase the probability that you will achieve the desired reactions from your customers that use your product.
Connect with Matt on LinkedIn.
