Scaling Down UI’s

In our new portfolio you’ll find lots of scaled down UI elements. We chose to work with scaled down UI elements for various reasons. For instance; we think it allows us to let the visitor get drawn to that specific element e.g. when the original size is just too big to fit a small resolution screen. We wanted to share a couple of things we’ve learned through trial and error that could save you some time scaling down your own UI elements. In these cases we assume that you’ll be scaling your UI element down to about 50% of the original element in Photoshop.

Textures
If the original (100%) UI element contains textures, keep them as big as in the original design (exceptions aside, you don’t want it to look ridiculous). Nine out of ten times a scaled down texture just won’t look as nice as the 100% version of the texture especially when it’s based on a micro texture. We usually make our own patterns in Photoshop and apply those to a vector shaped layer. The less productive way to go about shrinking your textures is by resizing the ‘images size’ from the ‘Image’ menu. Either just transform (⌘ T) the shape and make it snap to the pixel or move the shapes anchor points to reposition them.

Border radius
If you have any shapes (e.g. buttons) in your UI that have a small border radius (3px or les) they’ll probably look just like square buttons when you scale ‘em down. What we like to do is not use transform (cmd T) but actually select the vector anchor points and bring them closer together.

1px Lines
Make sure all your 1px lines are snapped to the pixel grid or it will look blurry. Since your scaled UI element is much smaller than the original 1px lines look relatively bigger than in the original size. A blurry line that’s not snapped to the pixel grid will be an eyesore. Also, make sure you keep your contrasty strokes (a 1px dark line just above 1px light line ) intact.

Text
The only advice here is to snap the px number of text size to exact number (e.g. change 4,35px to 4px or 5px). Even though you probably won’t be able to read what the text says, it just looks crispier and more like actual text rather than a fruit fly smeared across your monitor.

Icons
If possible, try to snap the shapes and their edge to the pixel, especially minimalist icons (like IconSweets icons) are likely to loose their entire context in a scaled down version that isn’t snapped to the pixel grid. Remove little details in icons that are not visible anyway and isn’t a recognizable shape.

If you’re into making pixel perfect design, we suggest you read the following posts on Bjango as well: Pixel perfect vector pasting, Pixel perfect vector nudging and
Pixel perfect rotation.