Paint 3D

During my time at Microsoft, I was fortunate enough to work on one of the most beloved PC programs of all time, MS Paint, and be among one of the first internal teams to design experiences for Hololens.

The first version of MS Paint was released with Windows 1.0 in 1985. Over the following decade, it captured the heart of creators around the world. By the time it was updated in Windows 7 the tool had over 120 million unique monthly users, with online communities pushing the raster graphic software to its limits.

With Microsoft gearing up to take 3D mainstream, it only made sense to bring simple, intuitive 3D tools to Microsoft's desktop creation app in the Windows 10 Creators Update. Meet Paint 3D.

Introducing Paint 3D - Windows, YouTube

Paint 3D is available as part of the Windows fall Creators update. It has been well received, with over 3,000 positive reviews.

The app has also been reviewed well in the press:

> Paint 3D, an evolution of the classic Paint app in three dimensions, is the highlight of the Creators Update."

> I didn't think much of Paint 3D at first, but my mind changed the instant I overlaid a leafy texture on top of a 3D cat. That's the sort of thing you previously needed pricey and complex 3D-modeling software to do -- now it's a free part of Windows 10 that's simple enough for kids to use."

— Devindra Hardawar, Engadget

And there's also been some kind words said on Twitter:

> Paint 3D is so fucking wild"

— Yoshi, @badpadre

Thanks Yoshi. Appreciate it.️

Research

I joined the team at Lift London, the Microsoft Studio responsible for Paint, during ideation. This came after extensive research had been conducted by the existing team. The team explored a huge range of software from Autodesk's 3D iPad creation suite and SketchUp to professional desktop tools like Maya, 3D Studio Max, and Cinema 4D.

You can read more about research and 3D object manipulation from my friend's blog, supraliminal.net. p.s. James is a great UX Designer, if you're after one.

Ideation

When the team approached designing the interface, each designer was given a specific feature/tool to research and develop. Ideation was somewhat collaborative, involving lots of sketching on paper and whiteboards, followed by presentations and discussions about the generated ideas for each feature.

The first part of the interface that I worked on was the colour picker.

The Paint 'war room'

So what's the problem with most colour pickers? They're great, but getting the exact colour that you're after is always easier said than done. You always end up struggling to move your cursor as finely as you need to find the right shade in an HSL (hue, saturation & lightness) matrix. You never know what compliments the colours that you choose and what colour you were using 5 minutes ago.

To me, perfecting the colour picker involved three key things; maintaining a good selection of base colours, adding a better interface for selecting shades and complementary colours and implementing better memorisation of frequently used colours.

Fresh Paint's interesting colour palette

Prototyping and UI Design

In early iterations, I focussed on providing a better selection of shades and complementary colours. My colleague Ricard Acosta and I prototyped the colour picker in Unity, the 3D engine that Microsoft used internally.

You can see in the screenshot below that the prototype allowed users to mix a base colour with a selection of primaries and their previously selected colour (which had colour history).

You'll also notice that the user can manage multiple colour palettes. They can be seen peaking out of the left and right-hand side of the properties panel, with the purpose of grouping selected and complementary colours.

Early Unity 3D colour picker prototype

In user testing we learnt that users only typically used two ends of the colour specific spectrum - the selection had become too granular and was a waste of UI real estate. As a result, we decided to strip this back in later iterations to keep other properties on screen. But we wanted to maintain some of the ideas that we'd explored.

Illustrator file of one of the final colour picker versions

For the initial launch of paint, the colour mixing was stripped back, but we didn't lose the custom colour palettes which can be seen in the app today. Colours can be manually added, or automatically added after use. The colour picker is more traditional and the eyedropper is front and centre to allow colours to be swabbed.

Colour palette and picker in the first release

Other Work

Now that I've done a bit of a deep-dive into one feature, I thought it would be good to do a very quick overview of some other bits that I worked on during my time at Mircosoft - after all, I didn't spend an entire year designing a colour picker!

I also spent some time working on marquee selection of 2D and 3D objects, which is quite a bit harder than it sounds. Do you select a full 3D object or do you crop it as you do with 2D raster graphics? Do you have separate selection tools for 2D and 3D objects or do you manipulate both at the same time?

Marquee selection demo

Another part of object manipulation that I worked on was figuring out how to visualize X, Y, and Z depth movement in the 3D view. We didn't want it to be too technical and scary, but we still needed visual cues so that the user understood the orientation of objects in the scene.

I landed on the idea of using a grid of colour dots. They didn't look technical or scary, but they communicate what we wanted. The saturation of the dots almost works as a shadow, highlighting the X and Z position of objects. The size of the dots visualized the Y position of objects.

3D view object positioning prototype

Thanks for reading. If you'd like to find out more about my work at Microsoft, please feel free to contact me. I'm always open for a chat.