How to

Web app UI design tips and tricks in UI Bakery

By

UI Bakery Team

We understand that it may be challenging for a non-designer or a non-developer to deal with UI configuration in UI Bakery. So if you are the one facing UI configuration difficulties, below are some tips and tricks.

Tips for working with structures and layouts

1. Group your components.

1 meaning for a group usually takes 1 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 3 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.

UI design tips and tricks to avoid configuration difficulties in a low code development platform
How to work with structures and layouts

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.

How to create a login page correctly using a low code development platform
Working with cards in UI Bakery

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.  

How to place components properly within your app login page built in UI Bakery
Components arrangement in UI Bakery

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.

UI design tips concerning text types, text colors, and text types in a low code development platform
Text formats in UI Bakery

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. 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.

Learn how to arrange components properly when building a login page for your web app
How to make a consistent interface

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. 

Have your own best practices related to the internal tool development with UI Bakery? Do not hesitate to contact us.

Created:
February 12, 2020
Updated:
April 22, 2022

Latest articles

Back to blog