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

Let s talk about the basics if you are planning to become a UI designer.

So, are you thinking of becoming a UX / UI designer, but afraid to take the first step? Do not worry. It s easier than you think. All you need is a solid foundation and dedication. I can t help you with the last point, so let s focus on the first.

This article will be part of a larger series based on the free chapters of the Designing UI book. I tried to break it down into digestible chunks. Enjoy!

How are images created?

Whether you re making a low-fidelity wireframe or a fully finished, beautiful interface design, you ll be using shapes and objects in your chosen design tool. You can even use Keynote or Powerpoint to familiarize yourself with shapes and their relationships, and then move on to Sketch, Figma, Adobe XD, or other programs.

All interface design tools currently available work with vector shapes. This means that everything you see is represented by numbers that define the image. This also means that the object can be stretched and enlarged without loss of quality – the numbers simply increase and the object is recreated.

If you plan to design interfaces, be prepared for the fact that most of the time it will be moving various rectangular objects. Rectangles are the most popular shape in all interfaces (ellipses come second).

The general idea of ​​the interface design is to move the rectangles correctly.

User interface design is all about moving rectangles. And you need to know how to move them, WHERE and, most importantly, WHY.

Block model

The Box model is the simplest way to define a digital interface object, both in design and in code. Most of the design we do works according to the box model, so it is very important to learn it well.

It consists of four main elements:

• Fill
• Border
• External field
• Internal field

Fill Is the background of our element. It can be a solid color, a gradient, an image, or a mixture of all of these.

Border Is the outline around our object. We ll cover the different types of borders in future articles in our series.

External field (often referred to simply as a “field”) is an area outside of our object. It provides the object with sufficient safe space in relation to the surrounding objects. This is the blue area outside our rectangle.

Internal field also called indented – this can come in handy when communicating with developers. The wider it is, the larger the safe area inside the object becomes. In the above example, this is the darker area inside our colored rectangle.

Defining properties

The size

The width and height (in points) determine the size of the object. In most cases, we use the letters W and H for brevity. Since this is a two-dimensional space, the width is the scale on the horizontal axis and the height is the scale on the vertical axis.

In short, dots don t line up with pixels. Resolutions and pixel densities are a topic for another article, so in short: dots are vector pixels that depend on screen resolution. On modern high pixel density displays, 1 dot can be 4 or more pixels. This is done in order to get large enough elements, as well as give them sufficient clarity and accuracy.

Width and height are always the smallest possible rectangular box that an object can contain, even if the object itself is irregular.

Position

An object s position is a set of numbers on the X and Y axes, defined by the artboard it is on. X is the position on the horizontal axis and Y is on the vertical.

Ok, that s easy with a square. But what about a circle? Or a ball? The positions of asymmetrical objects are the position of their bounding box that the actual shape is in.

Angle

The angle defines the clockwise rotation of our object – by default 0 °. Rotation can also be negative. It is worth remembering that the -15 ° rotation angle is 360 ° -15 °, that is, 345 °.

To get a consistent interface, it is best not to rotate objects manually, but instead enter an appropriate angle value using the keyboard, as this is much more accurate.

If we smooth (Flatten) object (there is a button for this), it resets the angle to 0 degrees, but it still rotates – only the new perspective becomes the basis for further rotation.

Of course, when you rotate the circle, you won t see the result unless they are filled with a gradient or photograph.

Rounding radius

Many studies show that rounded shapes are considered friendlier than sharp ones. To determine the level of roundness, we use a property known as the corner radius (sometimes the corner radius).

The rounding radius is a number. Like width and height, it is also represented in points. The larger this number, the more rounded the corners of our shape. You can use it for all edges at the same time or set it individually for each corner.

In general, even slightly rounded corners (2 to 6 points) are considered friendlier than sharp ones (0 points). However, it is advisable to adhere to consistency in roundness. The base unit of the grid we choose should determine the radius of the border. It should also be appropriate for his environment.

By applying different radii on the same object, you can get a great button as long as it follows the brand guidelines (i.e. the logo also has a similar pattern).

If you decide to design your buttons this way, remember to follow the sequence across all screens.

What s next?

Thanks for reading the article. Hope you are on your way to creating your first shapes!

Continued: Fills and Borders. Basics of UI design

I ll cover fills, borders, shadows, blur and more in the next articles in this series. ? You can also DOWNLOAD this chapter as a free PDF file. I have written an entire book, 420+ pages, on the topic of interface design. ??‍? in the afternoon I work at HYPE4.com

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