Windows Ink Workspace

prototyping, front-end development

WIW_SurfaceStudio.jpg
 

Windows Ink Workspace is a flyout menu launched from the taskbar that serves as an easy entrypoint for drawing, annotating screenshots, and creating sticky notes.

Goals

Polish the UI for a high-quality user experience. Advocate for design in conversations with engineering and advocate for engineering in conversations with design. Help the two disciplines meet the sweet spot where implementation matches design intent and design intent accounts for implementation limitations.

Strategy

Referencing the design spec, I polished the UI in XAML to achieve pixel perfection. After an initial pass, updates were reviewed with design and engineering and adjustments made.

With Windows Ink Workspace, InkToolbar was introduced as a new control in the XAML platform. I consulted on code reviews with platform developers, providing corrections for the front-end code to ensure design intent was met.

I created a Framer prototype for the protractor stencil that appears in the Screen Sketch app. This was used to test the fluid scaling of the tick marks. The designer had an idea of how the tick marks should scale and fall away as the protractor is pinched and zoomed. They created static comps for the various sizes but weren’t sure how that would feel in action. This prototype was passed off to developers to inform the logic and animation for the actual product.

https://framer.cloud/qZYOt/

Default protractor size

Smaller protractor