Дизайн-системы против работы по-старинке

Nikita Morozov
Oct 10, 2017 · 5 min read

Профильные комьюнити уже который год терроризирует тема дизайн-систем, UI китов (бесплатных и не очень). Звучит все это здорово, но тогда почему-же все не займут место в первом ряду и не уедут в счастливое будущее верхом на гламурных UI китах?


Эти ваши дизайн-системы

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

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

Иными словами, дизайн-система — это UI kit, натянутый front-end разработчиком на настоящие контролы. То есть разработчик “перекрашивает” существующие контролы какого-нибудь React по мотивам вашего дизайна. В худшем случае парочку ваших контролов ему придется закодить с нуля, так тоже бывает.

Звучит ну очень здорово! Аж душа поет! Но что-то тут не так…

…а реальность то жестокая штучка!

За столь очевидной простотой и красотой исполнения скрывается несколько неприятных моментов:

  1. Кто-то должен нарисовать дизайн-систему (а это нестерпимо долго, очень долго и, как ни странно, дорого (ЗП платить надо же людям)).
  2. Кто-то должен «раскарасить» стандартные контролы в стилистике вашего дизайна (front-end. разработчик, кто же еще).
  3. И кто-то должен поддерживать актуальность дизайн-системы. А поддерживать нужно по причине того, что вы сразу не нарисуете абсолютно все, и это все еще сто раз поменяется.

Ребята, розовые очки сняли?

Нет?

Тогда вам в догонку. Для имплементации дизайн-системы вам, как минимум, нужна команда дизайнеров и симпатизирующих вам 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

  1. Библиотека символов в Sketch не является дизайн-системой, как и тот UI kit, который вы бесплатно скачали =))
    То, что вы нарисовали набор контролов абсолютно не означает, что они будут в точности также запрограммированы и «покрашены» посредством CSS.
  2. Пример дизайн-системы и ее компонентов вы можете посмотреть тут. Любой хороший front-end девелопер сможет легко “перекрасить” набор контролов под ваш дизайн и в дальнейшем использовать эти контроллы в других проектах. Но это долго.
  3. Дизайн-система требует совместной работы с отделом разработки ввиду того, что вам необходимо договориться о правилах названия контролов и их состояний. Задачка та еще, но без нейминг конвенции далеко вы не уедете.
  4. Строить свою дизайн-систему имеет смысл после стандартизации дизайна спустя пару лет. НО ничего не мешает вам сделать удобную библиотеку контролов (UI kit), которую вы можете перетащить и перекрасить в другой проект.
  5. Для новых проектов и аутсорса (разработка на заказ) городить дизайн-систему в начале бессмысленно, так как это долго и дорого (вам же платят за время, а не за красивые глаза). Для фриланса по принципу time + material (оплата по часам) можно и заморочиться, но согласуйте эту работу с заказчиком!
  6. Создание дизайн-системы может стать для вас основной работой, потому что это долгий процесс. В принципе, для начала карьеры это хороший и полезный опыт.

Если вам понравилось — похлопайте в конце статьи)
Хотите внесите свой вклад и разнообразить в Мир начинающих дизайнеров — расшарьте статью на фейсбуках 😊

Всем бобра! ❤️

Если вам понравилось, — скажите «Спасибо», кликнув на кнопку 👏🏻. Это поможет другим людям быстрее найти статью.


UX / UI insane

Секреты профессии UX/UI дизайнера: инсайд, немного про дизайн, запретные темы, о которых вам не расскажут в институте

Nikita Morozov

Written by

UI/UX Lead, продакт менеджер, преподаватель. Обладает огромным опытом в проектировании, дизайне B2C, ERP и BPM мобильных и веб приложений.

UX / UI insane

Секреты профессии UX/UI дизайнера: инсайд, немного про дизайн, запретные темы, о которых вам не расскажут в институте

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade