Bridging the Gap Between Design and Engineering

By Kamesh Balasubramanian
October 30, 2015

Here at Wirecog, we're building powerful, patented technology, that we believe, will fundamentally change the way that design-driven software is made. We call our technology Wireframe Cognition and it provides machines the capability to examine and understand wireframe images and produce simulator-ready source code from them. In this inaugural post on the Wireframe Cognition Blog, I’m going to share my thoughts on how Wireframe Cognition bridges the gap between design and engineering in software development projects.

Let’s consider three important personas in a typical software development project. The first persona, the designer, is responsible for drafting wireframes that depict how the software application looks and functions. The second persona, the stakeholder, is responsible for approving or denying those wireframes. Finally, the third persona, is the developer, who is responsible for producing source code from the wireframes that are provided by the designer.

We define the productivity gap between design and engineering in a software development project to be the amount of time lost between having stakeholder-approved wireframes handed off to developers and having those developers produce source code for those portions of the software application that are depicted in the wireframes. When software projects enter the development state, developers often start coding the project from scratch or from a cookie-cutter template that is meant to act as a starting point. These templates are usually oversimplified and very generic. They often have little in common with the user interface (UI) of the software application that needs to be constructed. Developers often have to create UI code manually and the repetition involved in front-end coding can be error-prone, especially when copy-pasting code from a previous project to cut corners.

At Wirecog, we feel there is a better and smarter way to bridge this productivity gap between design and engineering. We believe that we can give developers a head start using the wireframes that the designers created. We consider a set of wireframe images to be a valuable repository of data which can usually contain layout, navigation hierarchy, and functional information of the software application to be constructed. We can put this repository of data to good use, if we had a way to directly tap into the wireframe images. To draw an analogy on what we do at Wirecog, let’s consider the Renaissance artist, Michelangelo, who believed that his job was to free the human form trapped inside a block of stone. We consider Wireframe Cognition as the means to free the UI code trapped inside a wireframe image. Wireframe Cognition allows us to directly tap into the valuable data stored inside a wireframe image and provide meaningful source code that the developer can use as a head start. In this manner, Wireframe Cognition bridges the productivity gap between design and engineering in software development projects. We’re really excited about the ramifications of this technology, since we believe that it has the potential to immensely increase the creative collaboration between design and engineering talent.

Check out the Wirecog Introduction video on YouTube to see Wireframe Cognition in action: