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.
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.
Mike for the Balsamiq Team
Comments (3)
I’ll admit the rectangles do look a little more sterile now, but if you want to make the change, I’d say do it quickly. I agree with Nathanael that I really like being able to actually line up the rectangles in the sketch skin in the new version. Especially when placing a narrower rectangle on top of a wider one, the varying slope of the bottom edges made them impossible to line up before, but they look great now. Once folks get used to it, they may not want you to change back.
Hi, Nathanael. I’m guessing that maybe you have a lot of overlapping of shapes in the sketch skin that aren’t aligning as cleanly in wireframe skin. That’s entirely possible because wireframe skin controls extend to boundaries of the object, but sketch skin controls do not in many cases. There will definitely be some tweaking you may have to do, depending on what your sketch skin Mockup looked like in the first place.
I actually like the refined look of the new Sketch skin as I can go back to using Rectangles instead of Geometric Shapes to get things to line up properly … though I’m finding the Wireframe skin completely unusable – it just looks a complete mess even though all the lines are 1px thick and dead straight. Translation from alignment in Sketch to Wireframe not so good.