UI киты против реальности
Дизайн-системы против работы по-старинке
Профильные комьюнити уже который год терроризирует тема дизайн-систем, UI китов (бесплатных и не очень). Звучит все это здорово, но тогда почему-же все не займут место в первом ряду и не уедут в счастливое будущее верхом на гламурных UI китах?
Эти ваши дизайн-системы
Чтобы было понятнее, дизайн-система — набор кирпичиков (примеры компонентов: поля ввода, кнопки, переключалки, табы, комбо боксы, радио кнопки и т.п.), на базе которых можно легко собрать почти любой интерфейс в рамках заданной дизайном стилистики.
Надо отметить, что кирпичики привязаны к реальным компонентам, которые разработчики любезно кастомизировали на базе вашего дизайна.
Иными словами, дизайн-система — это UI kit, натянутый front-end разработчиком на настоящие контролы. То есть разработчик “перекрашивает” существующие контролы какого-нибудь React по мотивам вашего дизайна. В худшем случае парочку ваших контролов ему придется закодить с нуля, так тоже бывает.
Звучит ну очень здорово! Аж душа поет! Но что-то тут не так…
…а реальность то жестокая штучка!
За столь очевидной простотой и красотой исполнения скрывается несколько неприятных моментов:
- Кто-то должен нарисовать дизайн-систему (а это нестерпимо долго, очень долго и, как ни странно, дорого (ЗП платить надо же людям)).
- Кто-то должен «раскарасить» стандартные контролы в стилистике вашего дизайна (front-end. разработчик, кто же еще).
- И кто-то должен поддерживать актуальность дизайн-системы. А поддерживать нужно по причине того, что вы сразу не нарисуете абсолютно все, и это все еще сто раз поменяется.
Ребята, розовые очки сняли?
Нет?
Тогда вам в догонку. Для имплементации дизайн-системы вам, как минимум, нужна команда дизайнеров и симпатизирующих вам front-end разработчиков с кучей свободного времени (которого, как правило, нет). А кто будет делать продукт? 😜
Значит, нужен еще один человек, который будет работать с вашим UI kit и пилить продукт, а вы будуте продолжать рисовать дизайн-систему и адаптировать ее под изменения в продукте. Или нет, вы тоже хотите делать продукт? Вот дилемма.
Если это так сложно, то на кой черт нужна эта ваша дизайн стстема?
Допустим, вы пришли на работу в уже состоявшийся прибыльный проект, который оброс хаотичным набором компонентов за годы своего успешного существования (читай Facebook, Google, LinkedIn, Yandex и далее по списку из 100 000 компаний). Вы такой классный садитесь, осматриваетесь и начинаете наводить красоту, попутно создавая тот самый UI kit. Вам ведь некуда торопиться, бизнес и так цветет, а вы его только улучшите. Можете нанять себе парочку подчиненных и написать, что работали супер успешным руководителем =))
А что делать, если начальство решило запустить еще один проект, не связанный с тем, который вы так любезно привели в порядок?
Ваш UI kit придется выбросить и (а жаль, столько стараний) начать вообще все с нуля! 😱
Конечно же, все не столь драматично, вы же можете в Sketch app просто перекрасить дизайн символов (надеюсь, вы уже забросили Photoshop), но это не сильно поможет – продукт-то новый, про другое и вообще в его основе лежит web app, а UI kit у вас под мобильный апп нарисован… Ай-ай-ай, вот незадача.
BTW, хочу уберечь вас от использования готовых, (пускай платных и хороших), UI kit. Дело в том, что их рисуют на продажу с расчетом на любой проект, то есть на никакой. А у вас вполне конкретный проект для конкретных людей конкретной ниши (индустрии). Разве вам может подойти шаблонное решение? Наверное, нет. Может быть, я просто такой невезучий, хотя в начале пути пробовал, но в итоге, переделывал полностью. Но попробовать бесплатный сыр конечно же стоит.
Живем по-старинке
Как всегда жизнь подкидывает свои приколы. Вот пришли вы в стартап. А там – только идея. И что вы будете делать? Рисовать UI kit с нуля? Правда? А работать кто будет?😂
Конечно же, вы сначала начнете рисовать прототип, базирующийся на хотелках вашего начальства, любезно именуемого ТЗ.
Допустим, вам удалось с первого раза выстрадать что-то приличное (а, скорее всего, нет). А что дальше?
UI kit? Увы, перед тем, как убить на него полгода вам необходимо сделать следующее:
- нарисовать первую версию продукта;
- поправить ее;
- нарисовать вторую версию продукта с учетом провала первого (а как вы хотели, чтобы с первого раза сделать крутой продукт?);
- поправить вторую версию продукта;
- наполнить, точнее, втиснуть новые фичи в обновленный дизайн, перерисовав где-то треть обновленного дизайна.
Короче, прошло полтора-два года и вот вы можете осторожно предположить, что вам удалось стабилизировать дизайн, а между делом проект вышел на самоокупаемость! Ура! Не прошло и двух лет до начала работы над вашей модной дизайн-системой!
Не благодарите =))
Результаты страданий
Вывод №1. Я верю в вас, вы поняли, как и когда стоит использовать дизайн-систему.
Вывод №2. Почему и зачем идти в стартап? Вам там никто не поможет (и хорошо). Потому что никто не знает как и что надо делать. Но все будут ждать от вас, что вы возьмете все в свои руки скажете как превратить идею (скажем так, ТЗ) в продукт и покажете ЧТО надо для этого сделать.
Вывод №3 несколько интереснее: если вы хотите стать арт директором, то не идите в уютную теплую компанию n-ым по счету дизайнером. Вас там не научат думать и решать проблемы проектов просто потому, что проблемы запуска проекта уже решили до вас и без вас.
DISCLAIMER
- Библиотека символов в Sketch не является дизайн-системой, как и тот UI kit, который вы бесплатно скачали =))
То, что вы нарисовали набор контролов абсолютно не означает, что они будут в точности также запрограммированы и «покрашены» посредством CSS. - Пример дизайн-системы и ее компонентов вы можете посмотреть тут. Любой хороший front-end девелопер сможет легко “перекрасить” набор контролов под ваш дизайн и в дальнейшем использовать эти контроллы в других проектах. Но это долго.
- Дизайн-система требует совместной работы с отделом разработки ввиду того, что вам необходимо договориться о правилах названия контролов и их состояний. Задачка та еще, но без нейминг конвенции далеко вы не уедете.
- Строить свою дизайн-систему имеет смысл после стандартизации дизайна спустя пару лет. НО ничего не мешает вам сделать удобную библиотеку контролов (UI kit), которую вы можете перетащить и перекрасить в другой проект.
- Для новых проектов и аутсорса (разработка на заказ) городить дизайн-систему в начале бессмысленно, так как это долго и дорого (вам же платят за время, а не за красивые глаза). Для фриланса по принципу time + material (оплата по часам) можно и заморочиться, но согласуйте эту работу с заказчиком!
- Создание дизайн-системы может стать для вас основной работой, потому что это долгий процесс. В принципе, для начала карьеры это хороший и полезный опыт.
Если вам понравилось — похлопайте в конце статьи)
Хотите внесите свой вклад и разнообразить в Мир начинающих дизайнеров — расшарьте статью на фейсбуках 😊
Всем бобра! ❤️
