Welcome to the second part of the UI Design shapes basics. This time we’ll cover two of the most essential properties of a shape — fills and borders. This is also a part of the free chapters from Designing User Interfaces.

Fills

As we have stated in part 1 of this series, most of UI design is about moving rectangles around. So let’s start with a humble rectangle. In most design tools you can draw it by pressing the R key.

When you create a new rectangle, it usually already has a fill attached to it. In most cases it’s simply grey, so you will remember to change the color yourself. Sometimes it has a border too.

Back in the very early Sketch days it only had an outline, and you could selectively switch off parts of it. But luckily this is now a thing of the past.

I made a video a while ago, trying to make a design in a nearly 10 year old version of Sketch and trust me, now is a lot better of a time to start :)

The reason for this predefined color is because grey is neutral enough so adding a new shape won’t ruin your already beautifully crafted interface, but yet you’ll still be able to see that new object.

To make it simple fill is another name for the object’s background. It can be a color, a gradient, or a photo. Each of these can also have a different level of opacity (transparency) ranging from 0 (fully transparent — invisible) to 100 (fully opaque, with no transparency).

The image above shows three rectangles. The one on the left is completely invisible because it has opacity 0, then a translucent one with opacity 50%, and then a fully visible one on the right.

Pro tip:

Most of the modern design tools allow you to set opacity with the number keys on your keyboard. Just select an object and press 1 (for 10%), 2 (for 20%) and so on. Pushing 0 will switch between 0% and 100% opacity (so you sometimes need to press it twice).

If an object doesn’t have a fill, is also lacking a border or an effect, it won’t be visible in the interface as it requires some defining characteristics to be visible. You’ll still be able to select it, however, move it around, and modify it. It will also still exist in the layers list.

The types of fill

There are three main possibilities of a fill and an absence of one. So you can either have NO FILL, or have a single color, gradient or image backgrounds.

A while ago patterns were considered another kind of a fill, but in reality they’re just images with a potential to tile them, so they fall into the image category.

Stacking fills

You can also add more than one type of fill to the image. Obviously for this to work the fill layers need to be at least partially transparent, or you’ll only going to see the top one. In this example from 

Sketch

 you see an image fill as the base, and a semi-transparent gradient fill on top of it.

The multi-gradient

You can use this principle to achieve some pretty interesting, organic effects of multiple overlapping gradients like in the example above. To do this, simply create four radial gradients that start at each corner of your shape, and fade out towards the center. Experiment with their size and position until you like the result.

The most common fills you’re probably going to use however, are color and gradient.

Borders

Borders are after the fill, the second styling an object can have.

The border is a line that goes around our object. It can go inside (inner border), outside (outer border), or between them (center). Remember that only the inner border doesn’t visually make the object larger.

In the example above, the box is 60 x 60 points. The border is 10 points thick. In the middle image, that makes our box larger by 5 points on each side. In the third example, the border is completely outside, making the box larger by 10points in every direction.

Border styles

The border can have different weights (width) in points and can be a dashed or dotted line. We can also fill it with both a color and a gradient.

Most of the design tools allow you also to modify the endings and joints of your lines (also known as paths).

The ends can be open, flat, or rounded while the joints can be sharp, rounded, or angled.

The roundness of joints and endings can work well if your interface is generally rounded. If not, then just keep it at the default setting.

You can also watch me talk about these basics on video:

Thanks for getting this far. I believe it’s worth to sometimes revisit the very basics of a craft and that’s what this series is all about. Borders and fills are an essential part of UI, so it’s good to be able to bend them to your needs every time. In the next installment, we’ll cover all types of Shadows in UI design.

If you want to read more about the shapes and UI design in general, check out our 📘 book at www.designingui.com — there are free chapters there as well.

Liked the article? Share it!