UI Kit (User Interface Kit) is a set of design components: Buttons, icons, forms, fonts, and other elements which help create a unified and consistent design for the entire website.
The UI Kit saves you time and simplifies the website development process: Rather than coming up with every element from scratch, the designer reuses existing elements.
UI Kit also helps maintain a consistent style across all pages of the website. This improves the user experience, as people visiting different sections see a unified and coherent interface.
With a system of design components, you don't need to memorize all the details - just refer to the UI Kit and check how a particular element should look on the website. This is especially true for projects involving several designers.
UI Kit Elements
You can use any graphic editor to make the UI Kit. Before building it, make a list of all the elements you need, for example:
- Modular grid: Number of columns and indents
- Typography: Fonts, heading & body text size
- Colors: Primary and accent colors
- Spacing: Margins and indents
- Interface elements and how they behave in various states, for example, how a button looks when the cursor hovers over it
- Images: Icons and illustrations
For Tilda websites with many pages, it's handy to use My Blocks. It allows you to maintain your brand's visual style and speeds up the page creation process.
To add a block to the "My Blocks" category:
- Add a pre-designed or Zero Block to the page, and edit it as you like.
- Go to Block Settings, and click Add Block to Library.
- Name the block and add it to My Blocks.
You can add up to 200 customized blocks to your library. Learn more at My Blocks. New Tilda Feature.