UI kit: как вести проект?

Про UI-kit, фреймворки и гайдлайны есть отличная большая и понятная статья Тильды

Рерайтить чужой текст мне не хочется и смысла нет, потому что я хочу рассказать о том, как работаю над этим проектом, чтобы стало понятно, что это не какие-то очередные сложные вещи для уникальных людей, а обычные рабочие инструменты.

Для наполнения и ведения своего сайта я тоже пользуюсь ui kit. Поскольку я работаю над его внешним видом уже несколько лет, да еще и с разных устройств, мне проще один раз создать палитру и гайд, собрать визуализацию проекта в одном месте и оттуда брать все элементы для новых страниц, а не кидать все в чат с самой собой или трелло.

AnaVere. – небольшой проект, здесь нет интернет-магазина или множества авторов, а значит и кит может быть скромным и с упрощениями.

Так, например, я отбросила работу над формами и футером – они у меня одни, лежат как раз в подвале, и автоматически добавляются на все необходимые страницы, поэтому незачем тратить время на создание для них отдельного фрейма с описанием:

Форма, которая добавляется автоматически, сделана из стандартного блока.

Также у меня нет описания интервалов отступов.

Это, безусловно, моя лень и, в какой-то степени, непрофессионализм, но в оправдание могу сказать, что отступы я сверяю по макету, а затем прохожу линейкой в браузере:

Из чего же тогда состоит UI kit?

‣ Сетка.
‣ Типографика.
‣ Элементы блога, управления, навигации и разделители.
‣ Цвета, изображения, кнопки и их состояние.

Сетка

‣ Для ПК (1440x1024px).
‣ Для Планшетов (640x960px; 960x1200px).
‣ Смартфоны (414х896px).

Типографика

Поскольку на сайте я использую пару Open Sans (заголовков, текстов, описаний) и Voor (для нейминга, лого, бегущей строки), то и китов у меня получилось два:

‣ Русский язык
Для ПК, больших и малых планшетов и для смартфонов иерархическаяя цепочка от заголовков до наборного текста и сносок (технических и справочных описаний).

‣ Английский язык
Так же от ПК до смартфонов для описания заголовков и наборного текста. Можно заметить, что английская часть типографики гораздо больше по размеру, несмотря на свою немногочисленность.

Элементы блога и управления

Здесь я описываю:

‣ размеры и стиль "хлебных крошек";
‣ галочек и переключателей;
‣ разделителей текстовых, анкетных, подменю;
‣ буллиты, фактоиды и кавычки, которые можно встретить на сайте;
‣ стрелки;
‣ иконки и их состояние;
‣ ссылки (на сайте встречаются два типа: для ссылок на другие сайты и для связи с нами).

Как видите, создавать собственные палитры несложно, потратив время однажды на сборку и описание кита, вы сможете сократить время на публикацию новых страниц в будущем, оставаясь в рамках единого формата.

Подписаться на рассылку обновлений