Versus Design System v1.0 - собираю фидбеки от дизайн-комьюнити


Здравствуйте, в одном из постов на этом форуме о дизайн-системах, я написал комментарий который собрал много лайков по меркам Musli, и люди начали подписываться на мой Dribbble, из-за чего я понял что люди интересуются моей дизайн-системой и это меня мотивировало.

Я решил создать эту тему для того чтобы во-первых, собирать фидбеки от дизайн-комьюнити, и во-вторых, буду здесь отчитываться о проделанной работе чтобы вы понимали что я не забросил её а решил довести дело до конца.

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

Подписывайтесь на эту тему и следите.
Сделайте свой вклад в создание будущего дизайна.

Кратко обо мне: Я UI/UX Designer с Украины, опыт работы дизайнером уже более 6 лет. Работал во многих компаниях, последние 3 года работаю в итальянском крипто-проекте. За все эти годы я много чего повидал в дизайне, и многие вещи меня не устраивают. Все дизайнеры с которыми мне приходилось работать, они работали быстро но очень халтурно, слои не именовали, все в разброс, накакого порядка. Я же перфектционист по жизни, у меня в проектах все в чистоте и порядке. В общем я хочу изменить рынок дизайн-систем, как оно у меня получится я не знаю, но стремление есть и это уже хорошо.

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

А сейчас кратко о самой системе: Моя дизайн-система будет выпущена в двух форм-факторах “Free & Premium”.

Free версия будет полноценной дизайн-системой уровня MVP (Minimum viable product) или больше, то-есть даже имея в руках бесплатную версию вы сможете создавать с её помощью великолептные приложения или сайты. Система будет крутой, но Premium версия будет ещё круче.

Premium версия это дизайн-система уровня “God”, она будет божественной. Система в своем арсенале будет иметь расширенные ассеты по стилям, применению, UX, и т.д. Стоить такая дизайн-система будет ниже чем у конкурентов.

Почему я выбрал такой путь? Долго думал на эту тему. Я считаю что дизайн должен быть доступнее. Я беру пример с Figma, это классный продукт и все мы его любим, но также Figma имеет и платную подписку для комманд. Похожая схема и у меня, есть бесплатный крутой продукт, но в платном продукте открываются новые возможности. Сейчас среди дизайнеров которые делают дизайн-системы распространена практика создания Demo-версии и Полной версии, но Demo-версия это ущербно если речь идет о дизайн-системах, в полной мере нельзя оценить её качество, вам дают пощупать буквально 2-3 блока и все, этого мало для того чтобы определиться с покупкой. В моей бесплатной версии люди смогут в полной мере её прощупать и понять, нужна ли им Премиум-версия или им хватит за глаза бесплатной версии.

Многие дизайнеры ещё поставили создание дизайн-систем на конвейер, из-за чего ты не понимаешь какую тебе нужно купить дизайн систему для своих задач и подойдет ли она для твоего приложения, у меня так было, я покупал дизайн-системы, но ини не давали мне той свободы действий которую я хотел и меня это огорчало. Я же делаю универсальную дизайн-систему, я не намерен клепать десятками эти дизайн-системы, я сделаю одну дизайн-систему но максимально продуманную, я буду придерживаться метода версионности, то-есть сделаю версию 1.0, потом через пол года или год, выкачу версию 2.0, далее 3.0 и т.д., то-есть дизайн-система постоянно будет обростать чем-то новым и актуализироваться, потому что мир меняется и дизайн тоже. Я вижу даже сейчас что многие дизайн-системы уже устарели, и их никто не освежает и это плохо.

Анонсировать и Релизить буду на своем Dribbble и Behance

Вот такие дела. Спасибо что дочитали до конца. :upside_down_face:
Можете задавать вопросы если что или выдавать свои предложения, видение, всегда рад прислушиваться к пожеланиям дизайн комьюнити. )

10 симпатий


Делаю блок с типографикой. Стал вопрос ребром. Есть такая задумка сделать несколько шрифтов и сохранить стили для каждого из них, а дизайнеры которые будут переделывать систему под конкретный проект, будут попросту удалять лишние стили и типографику, но есть угроза того что система будет через чур перегружена шрифтовыми стилями что сделает путаницу и только усложнит её использование. Может быть оставить один только шрифт, и дизайнер будет сам редактировать шрифт и перенастраивать стили под свои нужды.

Что вы посоветуете?

1 симпатия

Топлю за один шрифт.
А вообще круто всем комьюнити собирать универсальную дизайн-систему, с меня респект!

4 симпатии

Я тоже за один шрифт. А не думали как-то структурировать типографику? Отдельно сделать тайтлы, сабстайтлы, основной текст, второстепенный, подписи и тд. В таком виде, как у вас на скриншоте, не очень удобно юзать текстовые стили. Может это, конечно, только мои привычки, но удобнее когда понимаешь назначения определенного стиля текста

2 симпатии


Я думал над этим но столкнулся с проблемой ограниченности когда начал анализировать существующие приложения и сайты. Поэтому решил сделать в таком формате. Сейчас такой формат в дизайн системах юзается, думаю это правильно, это более универсальное решение. К примеру у тебя на кнопку залочен стиль Noto Sans Bold 14, ты создаешь большую кнопку которая должна быть на Лендинге чтобы привлекала внимание, и 14-й шрифт на большой кнопке будет смотреться нелепо, соответственно либо нужно разлочивать стиль и писать уже шрифтом вне системы, что не очень хорошо. Поэтому и была придумана такая система типографики которая более унифицирована.


Изначально я думал сделать в таком виде, но потом передумал, когда попробовал юзать в реальном приложении.

В конце концов никто не запрещает переделать систему под конкретный проект и переименовать названия.

Screenshot_1


Оказывается шрифт Segoe UI нельзя использовать в проектах так как это корпоративный шрифт Майкрософт, вместо него Майкрософт рекоммендует использовать приближенный к нему шрифт Selawik. Я прям не знал об этом, ведь многие его юзают в проектах и даже сайты с этим шрифтом верстают.

2 симпатии

Закончил наконец-то блок с Типографикой. Делаю цвета. Изучаю как сделано в других дизайн системах. Не могу понять что означают вот эти цифры над каждым цветом? Может кто в курсе?

Почитай тут, может найдешь ответ.

Эти значения обозначают название оттенка. Всяко проще запомнить, к примеру, «color-red–500», чем его HEX-, RGB-, HSL-код или научное название. В шрифтах есть похожее обозначение, которое предназначено для указания насыщенности (жирности) шрифта.

Вот интересная статья на эту тему: https://bash.am/articles/codifying-colors/

1 симпатия

А ты часом не путаешь дизайн систему и ui-kit?

Нет, потому что в будущем я планирую нанять людей чтобы заверстать её на Реакте или Ангуляре

Работа кипит. Изучаю графики составления цветовых палитр по ступенчатому типу.
Составил графики как подбирались цвета в системе Ant и Material Design. Честно сказать система Ant мне нравится больше, поскольку цвета там более сбалансированы за счет более плавного графика и поярче, в отличии от Material Design где график очень странный, да и если посмотреть на сами цвета, то два последних цвета без маркера A, выглядят слишком контрастно.

Ant Colors

Material Design Colors

Думаю делать как у Ant но с некоторыми коррективами.

1 симпатия


Мое творческое пространство для анализа, єкспериментов и создания собственной палитры цветов. )))

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

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


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

2 симпатии


:smile: Ну что не сделаешь ради идеального графика коричневого цвета. Строительный скотч и нитка прямо на мониторе. Это гениально. :cowboy_hat_face:
Коричневый же находится в спектре между серым и оранжевым, соответственно график должен быть прямой как струна. ) Я так надеюсь. Сейчас буду пробовать, что получится.

6 симпатий

Коричневый получился шикарный.

Коричневый от Гугла мне не нравится, он какой-то земляной больше.

2 симпатии

Тебе пора канал в ТГ или ЮТ открывать, чтобы учить всех, как правильно делать дизайн-системы.
Я уже вижу название: Дизайн-система из ниток и скотча :laughing:

3 симпатии

Твой вариант больше нравится. Есть и рыжие, и коричневые оттенки. В то время, как у гугла одна земля.

1 симпатия

)
5028_320

2 симпатии