#технологии #дизайнсистемы

Бывают ли неатомарные дизайн-системы?

Сегодня в мире дизайна господствует атомарная концепция построения дизайн-систем по Фросту: токены → атомы → молекулы → организмы... планеты, галактики😁

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

Возможно, мне стоит перечитать книгу Фроста, или здесь найдутся знатоки, которые скажут, в чем я не прав. Но я не считаю дизайн-систему, над которой работаю, атомарной в полной мере. Тогда какой? Термин не вполне устоявшийся, но я называю эту архитектуру “виджетной”.

А чем плох чисто атомарный подход? Зачем что-то придумывать новое? Вот здесь поправляйте, если что, но насколько я понимаю, суть атомарного дизайна заключается в том, что элементы того же уровня не должны содержать друг друга, тем более включать себя же. Например, если атом “кнопка” содержит атом “иконка”, то это уже будет не атом, а молекула "кнопка с иконкой". Да и сама кнопка не может содержать такую же кнопку внутри себя. Возможно странный пример, но попробуйте представить, что все элементы в вашем проекте организованы так же, как в Figma. Тогда что же представлял бы собой “frame” с точки зрения атомарности?

А как работает “виджетный” дизайн? Здесь каждый может подойти к его созданию по-своему. Как ни странно, все основано на виджетах! Далее термины, которые использую я сам при проектировании. Виджеты могут быть двух типов, назовём их открытые и закрытые. Закрытые виджеты принимают только параметры, а открытые могут принимать параметры и другие виджеты. Открытые виджеты, в свою очередь, могут работать как контейнеры или иметь специальные слоты. Окна, например, работают как контейнеры, которые способны вместить в себя любой набор виджетов. Списки могут принимать шаблоны типов элементов или даже другие списки (получая, таким образом, списки списков 🤯).

Еще есть один тип виджетов - виджеты свойств. Они могут добавить новые свойства любому виджету, в который они попадают. Например, они могут превратить статический объект в интерактивный, добавить возможность показывать различные анимационные эффекты, переходы и многое другое.

Такой подход, на мой взгляд, отлично сочетается с принципами SDUI, хотя где-то в проекте, возможно, и будет присутствовать атомарность "по Фросту". Если бы мне пришлось отвечать сейчас на вопрос “Is atomic design dead?”, я бы сказал, что в его нынешнем виде - да. Ведь в старых рамках многие уже начинают чувствовать себя тесно, искать альтернативы. Но полностью, вероятно, атомарность никуда не исчезнет. Однако, сегодня это уже не единственный путь, а лишь один из инструментов для решения конкретных задач.

- - - - -

Канал: Мыслью по древу

Не получается у меня что-то писать короткие посты... Так что завтра в следующем тоже будет много букв.

Ну а с другой стороны, название канала оправдывать-то надо😁

- - - - -

Канал: Мыслью по древу

#карьера

Мой совсем не оптимальный старт

Сегодня многие (в том числе и ваш покорный слуга), нет-нет да пытаются раздавать советы, как побыстрее и поэффективнее ворваться в IT и конечно же в дизайн, заработать первые сто-двести-триста тысяч (нужное подчеркнуть). Но те, на кого сейчас равняются молодые дизайнеры, шли к этому издалека. Мой первый коммерческий опыт я получил, к примеру, в 2007 году и прошло уже почти 17 лет 🙈.

Так каким же был старт тогда, во времена динозавров?

Свой путь я начал в колледже, обучаясь программированию. Менторов и курсов тогда ещё не было. Обучали там различным языкам программирования, однако мое сердце покорила одна платформа - перспективная, новая, будоражащая воображение - Flash🤩. Эх, что это была за штуковина… Кажется, даже сейчас, со всеми нашими технологиями, мы так и не достигли всех возможностей, которые были у Flash в те далекие годы. Только представьте, дизайн, анимация и код в одной среде... Но что-то меня унесло от темы...

И вот, еще не успев окончить колледж, на последнем курсе, я устроился «на практику» в рекламное агентство на должность веб-дизайнера. Это означало, что я занимался созданием сайтов, от дизайна до кодинга (причем и фронт и бэк), ведь тогда еще не было такого четкого разделения на роли, как сейчас. Но вскоре я начал заниматься и дизайном листовок, визиток и баннеров. А что? Раз уж слово «дизайнер» есть в названии должности, по мнению начальства, этого было достаточно. И в дальнейшем это определило мое направление развития на много лет вперед. Я поработал в разных дизайн-студиях, рисовал логотипы и макеты для разных видов печати, наружной рекламы, разрабатывал айдентику, занимался SMM. Прошел путь от джуниора до ведущего дизайнера.

На моих глазах появлялись новые роли и профессии. Первым в индустрию ворвались UX/UI-дизайнеры. Это стало хорошей возможностью вернуться к созданию сайтов, а затем и приложений. Вскоре появилась и роль продуктового дизайнера, в которой я себя тоже сразу решил попробовать. В то же время внутренний программист во мне все время стремился к оптимизации и систематизации. Я был уверен, что дизайн можно сделать более эффективным. Так я стал интересоваться интеграцией кода и дизайна и пришел к проектированию дизайн-систем. По пути успел освоить React и поработать в роли проджект-менеджера.

К чему это всё я... Зачастую дизайнеры, кто начинал очень давно, дают советы новичкам, опираясь на свой опыт. Например, я мог бы начать всем говорить: "Пиши код!". Ведь я писал, и вон каким стал! И ты пиши! Но я стараюсь так не делать, и смотреть на сегодняшнее состояние индустрии, когда даю советы. Сегодня нет времени на то, чтобы идти через программирование, проектный менеджмент, несколько лет графического дизайна, да и ждать, пока появятся новые роли, где это всё пригодится, не нужно. Конечно, опыт «динозавров дизайна» разносторонен и обширен, порой поражает воображение новичков. Но стоит ли сегодняшним джунам пытаться повторять их путь?😀

- - - - -

Канал: Мыслью по древу

Вот в дополнение к предыдущему посту посетила интересная мысль . Все дизайнеры так хвалят свои дизайн-системы, говорят, какие они замечательные. Но удобно ли на самом деле работать с ними?

Про нашу платформу могу сказать, что она как тот джокер: “Я причиню тебе боль! Много боли!”

Ну представьте, теперь дизайнер отвечает за фронт в части верстки...
Зато прямо вижу, как в будущем джунам после пол года во ВкусВилл в других компаниях будут давать сеньоров сразу🤣
С такой-то школой жизни жесткой.

Но при всем при этом мы понимаем, зачем такие жертвы... Косты! Сейчас можно только гадать, на сколько сильно снизится ТТМ, когда из цепочки уйдет этап хэндоф фронтам ios и android, но совершенно точно влияние на скорость и качество разработки будет колоссальным.

#платформаманго

- - - - -

Канал: Мыслью по древу

Для кого старается продуктовый дизайнер?

Недавно работал над обещаниями дизайнеров. Может быть, расскажу о том, что такое обещания и как работают, в другой раз. Если уж очень интересно, можете почитать о системе управления Beyond Taylor, которую мы используем в ВВ. Сейчас не об этом.

Дело в том что во ВкусВилл всё строится вокруг клиента (клиентократия). И самые важные ребята те, кто дают ценность напрямую клиенту. Остальные же их поддерживают. Потому каждый старается дать обещание именно клиенту. А я вот нет😁

В моей концепции продуктовые дизайнеры должны только поддерживать доставку ценности всей продуктовой командой и стараться работать над сокращением TTM на своем участке. Обещание выглядит примерно так: “Дизайн интерфейса эффективно доставляет ценность для пользователя”. То есть, продукт-менеджер выявляет проблему, аналитик обеспечивает данными, исследователь подтверждает с помощью исследований, а дизайнер эффективно доставляет ценность через интерфейс.

Но что значит “эффективно”? Эффективность - это количество единиц сложности за единицу времени. Вот как это работает: дизайнер балансирует между тем, чтобы сделать быстрее и проще, и тем, чтобы сделать качественнее. Если он потратил неделю на анимированную иллюстрацию, без которой можно было обойтись, то его эффективность падает. Если он торопится и делает работу “для галочки”, то, скорее всего, после тестирования задача вернется на доработку, и его эффективность, опять же, упадет (из-за увеличения времени).

Забота об эффективности также мотивирует дизайнеров поддерживать консистентность, не забывать об архитектуре интерфейса, качественно организовывать сами макеты и их хранение, и вкладываться в инструменты. Если этого не делать, эффективность упадет, интерфейс начнет разваливаться, и каждая новая задача будет приносить все больше проблем. А наша дизайн-платформа обещает, что она будет помогать дизайнерам повышать эффективность, а продуктовым командам — еще и обеспечивать стабильность.

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

- - - - -

Канал: Мыслью по древу

Что такое красота?

Как и обещал, расскажу, что я думаю о красоте. У меня на это взгляд прагматичный (т.е. как обычно, душный). Но ведь всегда можно подискутировать в комментариях😉

Красота в интерфейсе — это ожидания + технологии.

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

А вот с ожиданиями всё интереснее. Если ценность была доставлена точно и все потребности пользователя были удовлетворены, и в то же время ваш интерфейс соответствует технологическим стандартам, тогда у пользователя будет ощущение красоты. Если пользователи говорят, что “это приложение некрасивое”, это значит, что скорее всего вы не попали в их ожидания, не закрыли какую-то потребность, "недо обняли". Сюда же я отношу и качество айдентики и контента.

Например, ожидал пользователь черно-золотую гамму и вензеля, а ему их не дали... Не красиво!!! По-этому нужно стараться лучше понять своего пользователя.

- - - - -

Канал: Мыслью по древу