Solving the UI challenge in Visual Studio code

There’s long been a tension between designers and developers, with code and user interface often seen as being in conflict. That really shouldn’t be the case: A well-designed UI can help define the underlying code, while code snippets can power prototypes that refine project deliverables by showing users the shape of an application.

Part of that conflict comes from the priorities given to design and to code. A code-first approach can lead to designers being given very little time to craft a UI and to tie it to the code. Design-led approaches have their issues too, front-loading user experiences that might need last-minute changes or that force restrictions on the code that add complexity. The resulting lack of coordination causes frustration and leads to poor project scoping and inaccurate estimation, with projects delivering less and taking longer than expected and planned.

The shift to web and mobile has made design an increasingly important part of the application development lifecycle. It’s an issue that means you need to ask how do you bring design and development together, as early as possible?

Design and development by sketching

Almost a decade ago, as part of its Silverlight development tools, Microsoft introduced a sketch-based UI design model. SketchFlow was based on work done by Microsoft Research’s Bill Buxton, detailed in his book Sketching User Experiences. One of the pioneers of modern design thinking, Buxton’s cross-disciplinary approach to product design uses sketches as its foundation. SketchFlow took those paper sketches and provided simplified, sketch-like, implementations of key user interface components used in WPF, ready for use on a XAML canvas.

Using SketchFlow, designers could quickly drag and drop UX elements into a rough design, tying those controls to interfaces. Development teams could take that sketch and add code to it, iterating through a series of prototypes that users could test while building the actual application alongside the design team. Design changes would lead to new sketches that could be attached to code to see how they’d work in practice. SketchFlow elements had a hand-drawn feel, so they couldn’t be confused with a final product, reducing the risk of prototypes being seen as a deliverable.

Similarly, developers could quickly put together a UX sketch for new code, adding controls and pages as necessary. Once they built new functionality, they could then pass their SketchFlow sketch over to designers who could refine it without affecting the underlying code. Over time, as the application matured, designers could replace sketch controls with actual controls, turning a sketch into the final user interface ready for user testing and release.

UI layout with Adobe XD

With the phasing out of Silverlight, and with Blend’s new role as a XAML design element in the Visual Studio suite, SketchFlow is sadly no longer supported. Instead you’re now encouraged to work with Adobe’s XD design tool to build UX prototypes. Adobe XD is a good tool, but it’s more design focused and outputs UX elements and designs as images. It is extensible, and there’s a set of UWP design templates from Microsoft to add key elements to screen designs, but again these are only images. It’s also a useful tool for going between design elements created in Photoshop or Illustrator and your application.

With XD you’re using a design tool, with no interactivity beyond linking hotspots in one design to another, simulating application flow. That’s fine for mocking up designs, but it doesn’t help when you’re building functional prototypes or going from a set of design comps to code. It’s certainly a better option than using PowerPoint for visual prototyping, but it doesn’t go much further in terms of interactivity.

Back to the sketch with Ink to Code

There’s still a place for the sketch in application development, even if it’s not part of Visual Studio. A recent release from Microsoft’s internal incubator, The Garage, goes part way to replacing SketchFlow with an actual sketching tool that can take your drawings and turn them into a prototype user experience. Originally sponsored by the Xamarin team, Ink to Code is a way of quickly putting together an outline UX, using machine learning tools to refine your sketch, and using it in either a UWP or Android Xamarin application.

Ink to Code is a relatively simple looking app. You’re presented with a blank canvas, much like a typical drawing app. A handful of controls on the left of the screen let you zoom in and out of a page, as well as switching between constrained and unconstrained drawing modes. Another button overlays a ruler on the screen, to help lay out your controls.

It’s a good idea to have the guide pane open, at least when you’re new to Ink to Code. It’s where you’ll find the gestures needed to draw different control types: buttons, labels, text boxes, paragraphs, and images. It’s not the full range of controls you’ll use in a Xamarin or UWP app, but it’s enough to get started with a basic UI that can be extended and expanded once imported into Visual Studio.

IDG

Working with Ink to Code

I recommend using a Surface or a similar tablet with Ink to Code; it’s much easier to use with your screen laid flat like a sheet of paper. You can sketch fairly rough rectangles and circles, the app handles converting them to the appropriate box and resulting UI elements surprisingly effectively. It can even handle my almost unreadable semicursive text when adding labels to pages or buttons. There are two drawing modes: one offering freeform layout and the other restricting you to a grid. Although you can edit layouts in Visual Studio, using restrictions can help deliver a more usable user experience.

Once you’ve finished a layout sketch, you can export it as either Xamarin XAML for Android or UWP XAML for use in Windows apps. The XAML produced by Ink to Code does need some editing before you can use it in Visual Studio, but that’s more a matter of adding appropriate class names for your apps so you can begin to link the XAML controls it creates to your code.

There’s a lot of promise here, but like most Garage projects it needs a sponsor to take it beyond its current basic form to a tool that can be part of your Visual Studio workflow. Although it’s clearly a tool for experimenting with user interfaces, Ink to Code is definitely too disjointed from the developer experience to make it a smooth fit in your workflow. It’s also a one-way tool: You can’t bring existing UIs into the sketching surface to make quick changes or use it with a source control tool to ensure your design changes are documented.

IDG

Microsoft is clearly aware of a gap in its development tools, but at this point the two main options aren’t quite part of the Visual Studio ecosystem. Adobe XD is definitely a part of the Adobe design family, and while it offers tailored design surfaces for common devices, it’s very much focused on the design part of the story rather than supporting code. Ink to Code is more immature, but it has the code focus that developers need to bring sketches into prototypes. Both have their place in the application development life cycle, but without deep Visual Studio integration you’ll need to find your own way of bringing them into your project workflow.