Часто разбирая работы новичков приходится говорить одни и те же вещи: У тебя проблемы с иерархией; нужно больше системности; проблемы с сеткой; проблемы с отступами. И часть этих проблем можно решить очень просто, введя простые правила которым будет подчиняться наш дизайн и ввести UI Kit.
Кит в естественной среде обитания
Для начала ответим на вопрос что это такое. Зададим этот вопрос в Google и получим ответ:
"User Interface Kit — это полный набор элементов и компонентов, необходимый для сборки большого однородного продукта. Он включает различные кнопки, иконки, поля для ввода данных и т. д. и позволяет сохранять узнаваемость продукта и доверие пользователей." (и так далее и тому подобное…)
Замечательно, но, как мне кажется, этого мало, да и не согласен я с тем, что он нужен только для больших проектов. У нас все еще слишком много пространства для маневра - купив запчасти от машины у нас все еще не будет машины. Именно поэтому я понимаю UI Kit несколько шире, чем это принято. И сегодня я предлагаю вам погрузиться в этот запутанный мир квадратиков и кружочков, и познакомиться с тремя метафорическими китами, которых должен приручить дизайнер, по моему скромному мнению.
Правила
Самое сложное, при этом кажется лёгким, то, что не делается практически никогда, но нужно всегда — это правила. Отступы, скругления, расположение элементов это все должно отвечать единым правилам. И очень важно, что бы не выглядеть как Шелдон в одном из мемов, правила эти записывать.
Да и дизайнер, который займётся проектом после вас скажет вам спасибо)))
Что касается правил расположения объектов, то это больше про сетки и выравнивание объектов друг относительно друга, тут вряд ли что то будет непонятно и это достаточно просто внести проект без комментариев, а вот все остальное…
Например, когда мы вводим систему отступов, мы пишем:
Отступ 4px. Используется в инпутах как внутренний отступ сверху и снизу.
Отступ 8px. Используется между перечисляемыми элементами, в пагинации, внутренний отступ в карточке.
Отступ 12px…
И так далее и тому подобное. Эти правила могут меняться для адаптации на планшеты (менее желательно) и мобилок (это часто необходимо), но в рамках одного размера экрана правила должны чётко соблюдаться. Исключения конечно возможны, но они не должны формировать весь дизайн.
Точно так же мы прописываем правила для скруглений, и очень желательно это ещё проделать для типографики и колористики. Кстати о них…
Стили
По сути мы уже подобрались к тем понятиям, которые все закладывают в понятие UI кита, когда говорят о нем. Стили — это все, что мы можем задать непосредственно в Figma.
Шрифты и вся типографика в принципе, начиная от заголовка H1, заканчивая маленькой подписью об ошибке под инпутом.
Цвета и оттенки — белый, чёрный, цвет акцента, да и все остальные 50 оттенков серого. Все это должно быть не в голове, а записаны в стилях. Тени кстати тоже можно задать стилями.
Такой подход, создавать стили под всё, позволит не запутаться, не множить начертания и цвета, а придерживаться выверенного стиля.
Компоненты
Думаю что не совру, если скажу, что компоненты это то, ради чего в принципе Figma используется. Для тех кто не знает поясню. Это сущность в дизайне, дочерние копии которой наследуют свойства родителя, и меняются, если изменить родителя.
Замудрил, да? Давайте проще. Если компонент квадрат превратить в круг, то его копии тоже станут кругом. Поэтому все повторявшиеся объекты за пределами этапа черновиков просто обязаны быть компонентами. Например это: кнопки, инпуты, карточки товаров, списки, переключатели, шапка, футер и многое многое другое.
Можно пользоваться простым правилом — если что либо в дизайне повторяется 2 и более раз, значит для этого нужно создавать компонент.
Под китами
Все что было описано выше, это базовый UI Kit. Все это желательно делать даже для обычного лендинга и он будет только разрастаться при повышении сложности проекта. Тут в пору поговорить об структуре макетов и как её выстраивать правильно что бы не сойти с ума, но это как нибудь в другой раз. Понимание тех вещей о которых я написал позволит минимизировать ошибки, добавит логику и визуальный ритм проекту, и задаст хотя бы базовую иерархию в вашем дизайне.
МЕГА-кит
В качестве бонуса расскажу о Дизайн Системе. По своей сути это логическое развитие, если позволите, даже эволюция UI кита в нечто более громоздкое, сложное и выходящее за рамки дизайна, в случае если фронты создают свои «компоненты». Такие библиотеки обычно используются при создании сложных продуктов, при работе в команде в компаниях. Не редко бывает что за создание и развитие дизайн системы отвечает отдельная команда дизайнеров. Да, развитие. По сути это становится отдельным продуктом внутри таких компаний, которым пользуются дизайнеры.
Я учувствовал в создании такого детища сразу для ряда совершенно разных продуктов, в рамках работы в одной из компаний. И это было интересно. Сложно. Но оочень интересно)
