UI Kit (User Interface Kit) — это набор компонентов дизайна: кнопки, иконки, формы, шрифты и другие элементы, которые помогают создавать единый и последовательный дизайн для всего сайта. Разбираем, зачем нужен UI Kit и как он помогает в работе дизайнера.
UI-кит позволяет сократить время разработки и упростить процесс создания сайта: дизайнер не придумывает каждый элемент с нуля, а использует повторно уже готовые.
UI Kit помогает сохранять единый стиль сайта на всех страницах. Это позволяет улучшить пользовательский опыт, так как пользователи, посещая разные разделы сайта, видят единый и логически связанный интерфейс.
Если есть собранная система компонентов, не нужно держать всю информацию в голове: достаточно обратиться к UI-киту и проверить, как должен выглядеть тот или иной элемент на сайте. Это особенно актуально для проектов, где работают несколько дизайнеров.
Элементы, которые входят в UI-кит
UI Kit можно сделать в любом графическом редакторе. Прежде чем собирать его, составьте список всех необходимых элементов. Например, готовый набор может включать следующие компоненты:
Мои блоки
Для сайтов на Тильде с большим количество страниц удобно использовать функцию «Мои блоки». Она позволяет поддерживать визуальный стиль бренда и ускоряет процесс создания страницы.
Чтобы добавить блок в категорию «Мои блоки»:
В библиотеку можно добавить до 200 собственных блоков. Подробнее — https://blog.tilda.cc/my-blocks-feature
UI-кит позволяет сократить время разработки и упростить процесс создания сайта: дизайнер не придумывает каждый элемент с нуля, а использует повторно уже готовые.
UI Kit помогает сохранять единый стиль сайта на всех страницах. Это позволяет улучшить пользовательский опыт, так как пользователи, посещая разные разделы сайта, видят единый и логически связанный интерфейс.
Если есть собранная система компонентов, не нужно держать всю информацию в голове: достаточно обратиться к UI-киту и проверить, как должен выглядеть тот или иной элемент на сайте. Это особенно актуально для проектов, где работают несколько дизайнеров.
Элементы, которые входят в UI-кит
UI Kit можно сделать в любом графическом редакторе. Прежде чем собирать его, составьте список всех необходимых элементов. Например, готовый набор может включать следующие компоненты:
- Модульная сетка: количество колонок и отступы
- Типографика: шрифты, размеры заголовков и текста
- Цвета: основные и акцентные
- Интервалы: поля и отступы
- Элементы интерфейса и как они ведут себя в разном состоянии: например, как выглядит кнопка при наведении курсора
- Изображения: иконки и иллюстрации
Мои блоки
Для сайтов на Тильде с большим количество страниц удобно использовать функцию «Мои блоки». Она позволяет поддерживать визуальный стиль бренда и ускоряет процесс создания страницы.
Чтобы добавить блок в категорию «Мои блоки»:
- Добавьте на страницу базовый или нулевой блок, отредактируйте его как вам нравится.
- Перейдите в Настройки блока, нажмите «Добавить блок в библиотеку».
- Задайте название блоку и добавьте его в «Мои блоки».
В библиотеку можно добавить до 200 собственных блоков. Подробнее — https://blog.tilda.cc/my-blocks-feature
