Мечты создать универсальный инструмент дизайнера, который бы позволял за пару кликов и строк кода собирать готовые решения оказались недостижимы. Как когда-то идеи архитекторов-модернистов расселить людей по жилым ячейкам и рационализировать их быт.
Людям оказался нужен хаос, а дизайну — пространство для экспрессии, драматизма и продуктового роста.
История отечественных дизай-систем
Рост интереса к дизайн-системам на нашем рынке начался где-то с середины десятых. Точкой отсчета, наверное, можно считать выступление Антона Виноградова на PiterCSS с рассказом об архитектуре дизайн-системы Альфа-Банка в марте 2016. Хотя корни, конечно, стоит искать раньше.
В 2013 Бред Фрост презентует Atomic Design (книга будет опубликована в 2016) и впервые целостно описывает концепцию построения дизайн-системы. В это же время у дизайнеров набирает популярность Sketch как более быстрая, удобная и заточенная под интерфейсы альтернатива фотошопу. И в этот же году на конференции JSConf US Facebook раскрывает исходны код React, который популяризирует компонентный подход.
В 2014 выходит iOS 7 и приносит миру Flat Design, а заодно и идею того, что дизайн будущего — это интерфейсы без излишеств, а дизайнеры будущего — это инженеры, которые будут кодить, прототипировать и станут независимыми от разработчиков.
За Apple крупные компании одна за другой публикуют свои дизайн системы: Material design, UWP, IBM Design Language, Lightning, MailChimp, BBC GEL.
На волне успеха Sketch, React и концепции «дизайнер = инженер» рождается идея, что у графических редакторов нет будущего, что это артефакт, и единым источником правды будут компоненты в коде. После чего случается бум инструментов, которые пытаются совместить в себе и визуальный дизайн, и программирование. Самые известные из них — Framer и Origami.
С этого момента в дайджесте у Юры Ветрова появляется раздел «Визуальное программирование» со всеми новостями по теме и подразделом «Живые гайдлайны и компонентные системы», который после выступления Антона Виноградова из Альфа-Банка переедет в раздел «Гайдлайны платформ и компаний». А спустя год, в апреле 2017, «Гайдлайны платформ и компаний» переименуются в «Дизайн-системы и гайдлайны». И первым делом сообщит нам о том, чтоАнтон Шейн из Яндекса записал скринкасты по использованию Depo, среду прототипирования для дизайнеров на базе БЭМ.
Рост спроса на дизайнеров-инженеров и на технические решения, ускоряющие релизный цикл, пришелся на период возобновления экономического роста в России после падения рубля (с 2015 по 2018) и, возможно, был ответом на нехватку квалифицированных кадров.
(По крайней мере, так было в Авито. Когда еще не существовало кросс-функциональных команд, аджайла, стендапов, синков и некому было проводить A/B тесты. Всё делалось вслепую, а хотелось по-серьезному.)
В это время происходит бум отечественных дизайн-систем, и уже наши крупные компании одна за другой начинают демонстрировать свои достижения: Дизайн система России, Парадигм, Дизайн-система Rambler & Co, Дизайн-система МегаФона, БЭМ Дизайн, Дизайн Альфа-Банка, Дизайн-система Студии Олега Чулакова, Барс Груп, VKUI Styleguide
Параллельно с этим появляется сайт-агрегатор отечественных дизайн-систем DESIGN SYSTEMS CLUB и на всех конференциях и митапах только и говорят, что о дизайн-системах и о их проблематике. Продолжается это вплоть до 2019 года. А потом все затихает.
Что сейчас с дизайн-системами у нас
Если сегодня зайти на DESIGN SYSTEMS CLUB, то мы увидим всего 8 ссылок на дизайн-системы компаний отечественного рынка (Яндекс можно вычеркнуть, так как проекты БЭМ Дизайн, DEPO, BEAST не взлетели, а ссылка ведет просто на методологию БЭМ).
Все они, по большому счету, копируют друг друга и представляют собой имиджевые страницы с наборами базовых элементов и принципов. А все различия сводятся к тому, кто какую гарнитуру и палитру для себя выбрал.
Ни о каком мощном инструменте прототипирования для дизайнеров речи не идет. Нет ничего и о принципах конструирования из этих компонентов сложных блоков и страниц, которые позволили бы дизайнеру не задумываться о композиции, визуальном весе, оптических компенсациях и контрастах.
Да, некоторые можно скачать себе в виде кита (Rambler, Alfa-Bank), установить и поиграться, если умеете кодить. Но все это — не более чем перекрашенный бутстрап, с помощью которого можно решить только простые задачи — собрать админку, например. Подозреваю, что эти системы имеют очень отдаленное сходство с реальным продом.
И из последних новостей о дизайн-системах: на прошлой неделе ВКонтакте опубликовал свои мобильные библиотеки базовых компонентов VKUI в Figma. Изучив ее, можно сделать несколько выводов:
1. Графические редакторы (во многом благодаря Figma) выстояли в войне с кодом и остаются основными инструментами дизайнера.
2. По прежнему только мобильный дизайн поддаётся какой-то систематизации. Во многом — благодаря стандартным платформенным элементам интерфейса и паттернам в iOS и Android. И еще благодаря простой однопоточной вертикальной структуре, которая позволяет использовать простую систему контейнеров и отступов между ними, что упрощает процесс конструирования страницы. Другое дело — Веб, где есть колонки, а значит, и потоков, между которыми нужно поддерживать согласованность, сразу несколько.
3. Это не дизайн–система, а библиотека базовых компонентов. Чуть сложнее, чуть навороченее, дополненная шаблонами, но все ещё библиотека — устоявшиеся знания, которые зарегистрировали, оформили и положили на полочку.
4. Основная задача этой библиотеки, о чем говорят и сами ребята, — экономия времени на поиске или перерисовке стандартных экранов или состояний, что позволяет больше сфокусироваться на задаче. Другими словам — дизайнеру не нужно начинать с чистого фрейма, а можно взять за основу готовую страницу (либо быстро собрать ее самому) и уже в ней начинать решать свою задачу.
Проблемы дизайн-систем
Почему дизайн-системы так и не ушли дальше UI-библиотек с базовыми компонентами? Причин несколько:
Дизайнер ≠ инженер
По своим наблюдениям могу сказать, что, когда дизайнер начинает увлекаться чем-то кроме дизайна — прожект-менеджментом, исследованиями, прототипированием в коде, — это сразу сказывается на визуальном качестве его решений.
Дизайн, по сути — это перебор вариантов. Чем больше вариантов попробовал и покрутил, тем более стильное выйдет решение.
Работа в графическом редакторе для этого дешевле всего — скопировал, изменил, скопировал, изменил..
Код — более трудозатраоный инструмент. В него очень высокий порог входа. И из-за возни с ним у дизайнера будет меньше времени, сил и желания на проработку решения. (К слову, усложнение компонентов в Фигме тоже ведет к этой проблеме).
Но необходимость в дизайнерах-инженерах пропала скорее не из-за этого, а с появлением кросс-функциональных команд и ресурсов на то, чтобы инженеры — инженерили, а дизайнеры — дизайнили, и каждый занимался только одним делом.
Продуктовый рост
Рынок постоянно растет и ускоряется. Чтобы конкурировать, продукт вынужден учиться быстрее реагировать на изменения вокруг и постоянно предлагать что-то новое и что-то лучшее.
А новому компоненту, чтобы попасть в библиотеку, а уж тем более в дизайн-систему, нужно пройти долгий путь: от обоснования перед всеми до реализации. На это может уйти несколько недель.
А таких компонентов не один. Сходу не вспомню ни одной задачи ( ни из своих, ни из задач других ребят из команды), которую можно было решить только на готовых компонентах. Очередная страница-форма с инпутами и кнопками? К частью, таких задач очень мало.
А бизнесу все равно — по системе сделано или нет, если вы проигрываете конкурентам.
Илья Михайлов хорошо про это рассказал: academy.yandex.ru/posts/kak-ustroeny-i-zachem-nuzhny-dizayn-sistemy
Потребность в сильных дизайнерах
Ну и, конечно, одной из основных задумок этого всего было создание инструмента, который можно будет дать даже слабому дизайнеру и ждать в ответ если не сильные, то, как минимум, уверенные решения.
Но на практике слабый дизайнер имея даже самый продуманный инструмент все равно сделает слабо.
А что еще хуже, когда у дизайнера появляется ощущение, что за него всё уже продумали, он перестает анализировать и критически мыслить. Это останавливает его развитие.
Тут может помочь только сильное арт-руководство.
Без сильных дизайнеров все равно не обойтись, а им часто достаточно иметь под рукой просто гайды, чтобы работатьбыстро и качественно. И все эти усложнения компонентов в попытке все предусмотреть опытным дизайнерам ни к чему, а иногда даже во вред. Например, когда тебе каждый раз нужно разбирать все эти автолейауты и детачить символы, потому что Фигма не дает нормально подвигать объекты.
Будущее дизайн-систем
Тема дизайн-систем постепенно покидает информационное пространство. И это хороший знак, который говорит о том, что эпоха гонки за эффектной картинкой для конференций ушла и компании, которые все это начинали у нас пять лет назад, перешли к осмыслению проделанной работы: а что из того, что мы за это время сделали, действенно работает?
И вот мы видим, как постепенно мир отказывается от идеи, что дизайнер должен уметь кодить.
Дальше — что нельзя инструментами решить проблему неграмотности дизайнера и что дизайнер, даже продуктовый, должен быть носителем дизайн-культуры: вкус, образное мышление и чувство композиции. Потому что без этого, имея даже самую совершенную систему-компонентов, дизайнер не сможет предложить лучшее решение. Как и программист, который не знает математику.
Об этом косвенно может свидетельствовать и возвращение Димы Барбанеля с его designworkout, появление проекта W1D1, рост интереса к проекту «Камчатка» и к другим институциям, нацеленным на развитие творческого мышления. А также увеличивающийся интерес к шрифтам, типографике и 3D. И растущий запрос обществе на умеренную дичь типа type.tommorow, Андрея Шугальского, ну и на того же Антона Шнайдера, который в принципе и не уходил с арены.
Конечно, гайды, библиотеки, базовые принципы будут нужны всегда — это, как правильно сказал Илья Михайлов, визуальное ДНК компании. Тут можно только предположить, что скоро они перестанут подражать коду с их токенами, автолейаутами и символами и станут чуть проще и легче. И диктатура компонентов примет рекомендательный характер:
Each team should be empowered to diverge from our recommendations, acknowledging that one solution may not work for everyone. spotify.design
Но все же дизайн — это не инструменты. В первую очередь — это сильная команда, сильная коммуникация внутри команды и сильное арт-руководство. И постепенно за крупными ребятами в это начнут инвестировать все.
↑
15 июля 1972 года, в 15 часов 32 минуты, когда была взорвана первая многоэтажка модернистского жилого микрорайона Прютт-Айгоу в американском городе Сент-Луис, американский зодчий и критик Чарльз Дженкс констатировал «смерть новой архитектуры».
Сегодня, 24 мая 2020 года, с выходом этого поста, я, дизайнер Сережа Плащинский, констатирую «смерть нового дизайна дизайн-систем».
Arzamas: 5 ошибок архитектуры модернизма
На этом все. Подписывайтесь на мой канал в Телеграме. Буду рад ответить на вопросы и помочь.
Серёжа Плащинский, ведущий дизайнер Авито
Топ коментарі (1)
Наступал конец 2023 года. Дизайн-системы стали требовать от всех дизайнеров, англицизмы взяли в плен словарный запас. В скором будущем (уже) дизайн и код почти одно целое. Как же ты ошибался, Сережа.