Configuring an app is like driving a car. You can try to do it on a hunch. However, to avoid crashes on the way, you'd better learn before taking the wheel.

Recently, we've shown how to create pages and layouts, use components, and how to build a web application in UI Bakery, a low-code visual development platform. However, we understand that it may be challenging for a non-designer to deal with UI configuration. So if you are the one facing UI configuration difficulties, here are some tips and tricks we've "baked" specially for you. Enjoy!

Tips for working with structures and layouts

1. Group your components.

One meaning for a group usually takes one space with the same alignment and direction settings. Below, we provide two examples of the home screen of the railway ticket sales system.

Do.

You can see three separate meaning groups here. The first one is dedicated to the departure/destination points. The second one contains the departure date and time. The third one includes the list with possible trains one can choose from. In this example, the railway ticket sales system is clear.

Don't.

There are some confusing moments, such as “enter your name”, “take extra-luggage” in the first meaning group, or “order a taxi to the cafe” in the departure date and time section. We need to make the screen with a railway ticket sales system clearer. To achieve it, we can remove confusing inputs and text components, or just create more meaning groups.

2. Put your components into big groups.

One meaning for a big group = one card with its content and spaces.

3. Define direction settings for each space firstly.

For that, decide how you want to arrange all your components in the current space, vertically or horizontally. If a card is complex and has more than two spaces inside, add them, customize, and fill them in one by one.

4. Do not put a card into another card.

It’s better to use the “Space” element and its direction to achieve a better arrangement.

Do.

There, we've added a simple login form (a UI Bakery widget), plus one more space with a “Forgot password?” link inside.

Don't.

We've added a login form, and one more card inside it. As you can see, the login form is based on a separate card. So, if we include one card into another, the included card will be displayed like an input. It is confusing, especially if we put a “Forgot password?” link into the card inside the widget. Now, let's remove the nested card and add one more space. After that, place a “Forgot password?” link.

Finally, we get a nice-looking login form without any confusing UI components.

‍Tips for arranging components

1. Do not ignore Headers and Footers.

Use Headers when you work with headers, and Footers when you work with buttons in the form and components in the body.

Do.

We've selected horizontal direction, put “Add client” into the header, and the buttons – into the footer.

Don't.

We have not placed the content in the header and the footer deliberately. Also, our main space is vertically aligned this time. Due to this, our form looks messy.

2. Try to format your text according to its type.

For example, labels and captions should be formatted as inputs, headings - as headings, and so on. Also, pay attention that labels and captions are usually not as hard as the main text is, so it's better to use the Hint color for them. In all the other cases, use the Basic color unless you need to highlight the semantic meaning of the text.

3. Use padding control to make your interface consistent.

Use 4px between:

Labels and inputs.

Texts.

Use 8px or 12px between:

Vertically aligned groups of buttons, icons, and other items.

Horizontally aligned groups of buttons, icons, texts, and other medium components.

Use 16px between:

Horizontally aligned groups of buttons, icons, texts, and other medium components.

Cards (a default padding for the working space is 16px).

Headings.

Use 20px between:

Buttons.

Headings.

Use 24px between:

Large components.

Large headings.

Spaces with different semantic meaning.

Let’s look at the differences between the cases when we use padding control, and when we don't.

Do.

We’ve created a simple form using a card component. As we mentioned in our previous articles, the best way to place content on a page is to use a card for it. We've placed a heading (H5) in the card’s header, added the text and the input components. We've also added two buttons in the footer, enabled the padding control, and added some paddings between the components to make our form more visually appealing.

Don't.

We've decided not to use padding control at all. In the result, our simple form looks very compressed.

Tips for speeding up UI configuration

‍1. Use shortcuts to speed up your work and keep your UI consistent.



Ctrl-C / Command-C – to copy the selected component to the Clipboard.

Ctrl-V / Command-V – to paste the component from the Clipboard in the current page, or another app.

Ctrl-A / Command-A – to select all items.

Backspace / Delete – to remove the components and spaces.





The use of shortcuts allows for working much faster and feeling comfortable at the same time.



2. Drag and copy spaces, cards, and all complex components together with all the elements inside them.





To sum up

There are a lot of low-code app development software that fastens web application building. Nowadays, we have no need to create a sign up form, or an admin panel from scratch. However, not all of us use UI prototyping tools to the full when building apps, and that is why we've prepared this article for you.

Hopefully, the UI design tips and tricks we've shared with you will help you build an appealing and intuitive UI interface. We'll continue sharing our expertise regularly, so do not forget to subscribe to learn about all the ins and outs of UI Bakery.

Or, maybe, you have your own best practices related to the web app development with UI Bakery? Do not hesitate to tell us about it!

