Microsoft App Ink to Code Will Help Developers Coding UI

Developers work in a variety of ways to bring their app ideas to life. Whether building for mobile or desktop screens, there is a lot of work that goes into putting together the code that brings our favorite app experiences to life.

The underlying code which does the heavy lifting is the primary focus for many developers, but when it comes to coding user interfaces there can be plenty of challenges there as well. While that under-the-hood code might be the most advanced on the planet, if users are asked to access those capabilities through a bland and poorly laid-out interface they will likely abandon the experience in short order.

Some developers are lucky enough to work alongside designers that can help them build a spectacular user interface, but if you are an independent developer that is usually not the case. Having access to tools that help facilitate the design process for your user interface can really improve that experience. That means your app will benefit from both a pleasing visual aesthetic but also be much easier to design and get the code working for it.

The Microsoft Garage has released the results of a summer intern project from last year in the form of an app called Ink to Code. The app gives developers, and of course designers if one is available, the ability to not only iterate ideas for their app's layout but to also get maximum benefit by using one of Windows 10’s big features, inking, when they are coding UI for apps.

Ink to Code does exactly what it names infers. Using a guide provided in the app, you draw out the basic elements of your user interface including items like:

- Vertical Views
- Horizontal Views
- Text Boxes
- Images
- Text Labels
- Buttons
- Paragraphs

Once you have laid out this basic approach to your apps user interface, you can then export that layout as code to be used in either Windows or Android apps to become the base for coding UI in your app.

Once the heavy lifting is complete and the basic layout is ready without you having to write one piece of code, you can pay attention to the necessary tweaks and adding the visual and text items into that code through Visual Studio to further build out your app's UI.

Check out the attached gallery to see screenshots of the app and how the visual elements can be laid out using inking on Windows 10.