Fills and borders. Basics of UI design

Everything you need to know about fills and borders.

Welcome to part two on the basics of user interface design. This time we will look at the two most important properties of a shape – fill and border. This publication is part of the free chapters of the Designing User Interfaces book.

Fill

As we pointed out in the first article of this series, a large part of UI design is about moving rectangles. 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. Most of the time this is just a gray, so be sure to change the color yourself. Sometimes it also has a border.

In the early days of Sketch, a rectangle only had an outline, and you could selectively turn off parts of it. But, fortunately, this is now in the past.

I recently shot a video trying to recreate a design in a Sketch version of almost 10 years ago, and trust me, it s easier to get started now 🙂

The reason for this predefined color is that the gray is fairly neutral, so adding a new shape won t ruin your already beautifully rendered interface, but you should still be able to see the new object.

Plain fill is another name for the background of an object. It can be color, gradient, or photography. Each of them can also have a different level of opacity (transparency) from 0 (completely transparent – invisible layer) to 100 (completely opaque layer).

Advice:

Most modern design tools allow you to adjust transparency using the number keys on your keyboard. Just select the object and press 1 (for 10%), 2 (for 20%) and so on. Pressing 0 toggles the opacity between 0% and 100% (so sometimes you need to press the key twice).

If an object does not have a fill, border, or effect, it will not be visible in the interface, as this requires defining characteristics. However, you can still select it, move it, and change it. It will also remain in the layer list.

Fill types

There are three main fill types and a no fill option. So you can either have NO FILL, or you can have a background with a single color, gradient, or image.

Not too long ago, patterns were thought of as another type of fill, but they are really just tiled images, so they fall into the category of images.

Stacking fills

You can also apply more than one type of fill to an image. Obviously, for this, the fill layers must be at least partially transparent, otherwise you will only see the top layer. In this example from Sketch, you see an image fill as a base and a semi-transparent gradient fill on top of it.

Multi-gradient

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

However, the most common fills you will probably use are color and gradient.

Borders

Borders are the second most popular style after fill that an object can have.

The border is the line that goes around our object. It can run inside (inner border), outside (outer border), or between them (center). Remember that only the inner border does not visually enlarge the object.

In the example above, the box size is 60 x 60 dots. Border 10 points thick. In the middle image, she enlarges our frame by 5 points on each side. In the third example, the border extends completely outward, increasing the rectangle by 10 points in all directions.

Border styles

The border can be of different thickness (width) in points and can be a dashed line of dots or dashes. We can also fill it with both color and gradient.

Most design tools allow you to modify the endings and seams of your lines as well.

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

Roundness at seams and ends can work well if your interface is generally rounded. If not, then leave the default.

Thanks for reading. I think sometimes it s worth going back to the very basics of the craft, and that s what our entire series of articles is about. Borders and fills are an integral part of the user interface, so it s useful to be able to change them to suit your needs every time. In the next part, we will look at all types of shadows in user interface design.

If you want to learn more about shapes and interface design in general, check out our ? book www.designingui.com – there are also free chapters.

Articles from the series:

Part 1: Fills and Borders. Basics of UI design

Part 2: Everything you need to know about shapes and objects. Basics of UI design

Part 3: Shadows and Blurs. Basics of UI design

Part 4: Screens and Pixel Density. Basics of UI design

Part 5: How to start designing a mobile application. Basics of UI design

Part 6: 5 Tips to Improve Button Design Basics of UI design