Design tricks

  1. Use the padding controls to add consistency to your UI.

4px – between:

  • Label and input.
  • Text components.

8 and 12px – between:

  • Vertically aligned group of buttons, icons, items.
  • Horizontally aligned group of buttons, icons, text components, and other medium components.

16px – between:

  • Horizontally aligned group of buttons, icons, text components, and other medium components.
  • Cards.
  • Headings.

20px – between:

  • Buttons.
  • Headings.

24px – between:

  • Large components.
  • Large headings.
  • Spaces with different semantic meaning.
  1. Try to group components: 1 meaning for a group = 1 space with the same alignment and direction settings.
  1. Try to group components into big groups: 1 meaning for a big group = 1 card with its content and spaces.
  1. Adjust alignment properly. Think in what direction you need to place your components in the current space. If a card is complex and contains more than 2 spaces, add and customize them one by one.
  1. Use shortcuts, e.g., Ctrl+C / Ctrl+V / Ctrl+Z, to speed up your work.
  1. Use Headers in your cards for headings and actions. Place the main content in the card body, and place buttons and actions in the footer.
  2. Use text types appropriately. Use labels and captions for inputs; headings – for headings, and so on. Note: better use Hint color for labels and captions to make them less contrast than the main text. In other cases, select Basic color.
  3. Never put one card into another – better use Spaces and their alignments to arrange the controls.

Need some help?

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