Design Tips and Tricks

Using an app feels like driving a car. You can drive it on a hunch, but the best way to drive it - learn before a drive how it works. So, we share with you some tips and tricks that especially "baked" for you. Enjoy!

  1. Use padding control for adding your interface consistency paddings:

4px is good for using between

  • label and input
  • texts

8 and 12px is good for using between

  • vertical alignment group of buttons, icons, different items
  • horizontal alignment group of buttons, icons, different text, and other medium components

16px is good for using between

  • horizontal alignment group of buttons, icons, different text, and other medium components
  • сards (custom padding for all work area is 16px)
  • headings

20px is good for using between

  • buttons
  • headings

24px is good for using between

  • large components
  • large headings
  • spaces with different semantic meaning
  1. Try to group components, 1 meaning for a group is usually 1 space with the same alignment and direction settings.
  1. Try to group components into big groups, 1 meaning for a big group is usually 1 card with its content and spaces.
  1. Each of a space-filling in start from alignment settings. For that, you should mentally think in what direction do you want to have all of your components in the current space (vertically or horizontally). If the card is very complex and has more than 2 spaces inside, add them one by one, customize and fill them in the order after adding.
  1. Use shortcuts. Ctrl-c, Ctrl-v and Ctrl-z. It definitely will speed up your work and keep your UI consistency: components will copy with all customized settings and paddings.
  1. Use Headers in cards for Headings and actions. Use a card body for the main content. Use footer for buttons and actions on the form and components in the body
  2. Try to use text according to each type name. For example, labels and captions should be used with inputs, headings for headings and so on. In this case also pay attention, that usually labels and captions are less contrast color than the main text, so for them, it would be better to use Hint color, for other cases it would be better to use Basic color when it’s not the semantic meaning case.
  3. Do not put a card into another card. It’s better to use the element “Space” and its alignments to arrange the other controls.

Need some help?

Didn't find something here? Simply drop us a line at contact@uibakery.io