Refining the Roughness of 2.2 Controls

If you've been following along with updates to Mockups, with 2.2 out we now have a UI Skin switcher that allows you to use either sketchy controls or straighter wireframe controls.

In preparing the skins to work well with each other, we had to optimize the rectangle shape that’s the basis for many of the controls. This makes it so the transition was smoother when switching between skins—we needed less variability in the positioning of controls, and we needed to remove the artifacts around the edges of shapes that resulted from the bitmap rendering of the hand-drawn graphics. The downside to this is that in doing so, we cleaned up the sketch skin too much, and we've heard a lot of feedback that it should go back.

We agree on that point. The sketch skin is too refined now. I think I was waiting to hear more feedback during the beta and just waited too long rather than roughening up the lines, and we shipped it as it is now. I've been spending some tweaking the rectangular shape to roughen up the controls again and I think it's closer to what we have before.

Here's some screenshots to give you an idea. It's subtle, but the boxy lines have a slight bit more jitter and are thicker. Click the thumbnails to view larger.

Testing RectanglesTesting Sketch Skin

If you compare it to the controls from 2.1, I'd say it's pretty close. We'd love to hear your feedback. You can try this now in the Next Release Preview.