Solving the UI challenge in Visual Studio code

The relationship between designers and developers is complicated and essential. Two imperfect tools help Visual Studio a little

Become An Insider

Sign up now and get FREE access to hundreds of Insider articles, guides, reviews, interviews, blogs, and other premium content. Learn more.

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.

To continue reading this article register now