2061
это канал дизайн-студии hh если давно ничего не постили значит у нас редизайн https://hh.ru/article/design
правки, правки, правки, правки, правклвоылоятмдщожадсмл
сидите эту гору разгребаете и уже не помните, что вы вообще-то человек, да и не очень понимаете, адекватные ли комментарии на вас вывалили
делайте так, и голова болеть не будет:
1️⃣ анжумания спрашивайте у клиента «а зачем?»
если внятно не ответит, есть вероятность, что это всё вкусовщина
2️⃣ держите ТЗ под рукой
тыкайте в него клиента, сверяйтесь — помогает убедиться, что вы в адеквате
3️⃣ не переключайтесь
последовательно и спокойно делаем задачу за задачей, а то всё из рук посыпется
4️⃣ расставляйте приоритеты
если правка — вкусовщина, не тратьте на неё креативный заряд, сначала разберитесь с теми задачами, которые вам откомментили по делу
5️⃣ включайте плейлист для жёсткого внесения правок
кидайте в комменты стикер, который выражает вашу честную реакцию на внезапные правки
с большой силой приходит и большая ответственность
дядя Бен в «Человеке-пауке» намекал на дизайн, мы уверены
в дизайне каждый цвет и каждый отступ — это выбор, что человек заметит, куда кликнет и что почувствует
если сильно упрощать:
🔴 выбрали красную кнопку — она слилась с фоном. пользователь её не нашёл, продажи начали падать
🔵 выбрали синюю кнопку — она зацепила взгляд. человек на неё кликнул, продажи пошли вверх
такая вот взаимосвязь
а вообще, в продукте все гораздо сложнее — особенно в сценариях. важно не только грамотно выстраивать флоу, но и доверять чуйке
поэтому в следующий раз, когда будете выбирать дизайн-решения, вспоминайте про пользователя. если уверены, что ему будет удобно, понятно и красиво — делайте
и все вам скажут спасибо: клиенты, бизнес и продукт
думали про дизайн с такой стороны?
❤️ — да!
🤷 — да ну, не
продолжаем нашу серию постов-размышлений про грейды в дизайне
кстати, вот тут читайте, как джунам расти в профессии
а сегодня расскажем о том, чем джун отличается от мидла
смотрите сами
🐣 джун переделывает макет три раза, потому что не спросил про референсы заранее
🦅 мидл отправляет референсы сам и согласовывает направление
🐣 джун сдаёт работу и ждёт обратную связь
🦅 мидл сдаёт работу и объясняет, почему сделал именно так
🐣 джун видит правки как провал
🦅 мидл видит правки как часть процесса
🐣 джун гуглит, как сделать иконку в Фигме
🦅 мидл гуглит, как объяснить клиенту, почему иконка именно такая
разница между джуном и мидлом — это скорее про проактивность и умение задавать вопросы до того, как что-то пошло не так
при этом грейды — штука условная
есть джуны, которые уже думают как мидлы, и мидлы, которые местами ведут себя как джуны
да что там, даже сеньоры такие есть
главное — двигаться
задавать вопросы и не бояться переспрашивать
что думаете?
ждём в комментах
пссс, продуктовые дизайнеры, вы тут?
ищем себе крутого коллегу в ларёк команду
будем вместе проектировать интерфейсы, тестировать гипотезы и делать хэхэ дизайн ещё лучше
ждём ваши отклики и портфели
почему большие проекты — это всегда командная работа
одно дело — сделать лендинг для стартапа, совсем другое — запилить редизайн для приложения с миллионной аудиторией
такие проекты — всегда про команду, и вот почему:
➡️ разные точки зрения: вы предлагаете сделать кнопку синей, коллега видит её красной, а третий вообще говорит убрать
в итоге находите решение, до которого в одиночку не дошли бы
➡️ обратная связь в моменте: не нужно ждать неделю обратной связи от клиента, когда арт-директор может за минуту сказать, что это не то, а вот это супер
➡️ поддержка: когда сидите над одним экраном третий час и уже готовы всё удалить, а тут кто-то подойдёт и скажет «слушай, а это вообще огонь»
➡️ разделение зон ответственности: один ищет референсы, другой составляет макеты, третий общается с разработкой
никто не умирает от многозадачности
а когда работаете одни, попадаете в ловушку своих паттернов мышления, привычных композиций и любимых элементов
из этой зоны комфорта бывает тяжело выходить
а вам что ближе?
❤️ — люблю работать в одиночку
🔥 — люблю работать в команде
7 маленьких привычек, которые упрощают жизнь
несём лайфхаки, которые помогают не сойти с ума в рабочие будни
пользуемся сами и вам советуем
✅ нормально назвать файлы
«документ101.pdf» и «ляляля.pdf» — плохо, «хэхэ _дизайн_идеи_шрифтов_04.02» — хорошо
✅ каждую неделю чистить ненужные документы, чтобы не разгребать потом авгиевы конюшни
✅ составлять список дел с вечера, чтобы долго не тупить утром
✅ группировать похожие действия по времени
например, 12:00–13:00 только вносим правки, 17:00–18:00 только отвечаем на письма
это помогает не распыляться
✅ заносить время на отдых в календарь
обеденное время священно, в это время вы недоступны
✅ делать паузы, чтобы переключиться
например, дойти до кулера или заварить чай
а какие привычки спасают вашу рабочую рутину?
кидайте идеи в комменты ⬇️
🐣 — вот так мы видим джунов, которые только пришли в нашу команду
🦅 — а вот они всего через пару месяцев
на наш взгляд, джуну главное перерасти свою маленьковость
для этого нужно как можно больше рисовать: прямо выдавать и выдавать дизайн без конца
примерно такая схема: рисуешь, плачешь, снова рисуешь, потом идёшь показывать работу старшему коллеге
со временем на этом объёме формируется опыт и нужный навык
базовая рекомендация — смотреть портфели топовых студий и пытаться анализировать их кейсы
ещё можно слушать лекции крутых ребят из индустрии и тоже делать себе пометки
в нашей команде мы даём джунам как можно больше практиковаться
с некоторыми проворачиваем всякие механики для роста насмотренности и дизайнерских скилов, например, предлагаем разные задачки на креатив
главный совет для начинающих: делайте то, что вам нравится
выберите любимого дизайнера и спросите себя, когда что-то нарисовали: «а достаточно ли это хорошо, чтобы показать ему?»
если да, то, скорее всего, вы уже не джун :)
а вы помните себя в начале пути?
поделитесь, как переросли этот этап
как быть командой и сохранять настрой
рассказываем, как это работает у нас, в хэхэ дизайне
главный секрет в простоте
не вымучивать ничего, а просто говорить открыто и быть человечнее
этот тейк хорошо сформулирован в наших правилах:
➡️ мы говорим честно, но с уважением;
➡️ мы помним, что за каждым словом и действием — человек;
➡️ мы замечаем, когда кому-то сложно, и не проходим мимо.
если в команде всё-таки происходит конфликт, мы спокойно садимся и разбираемся, что произошло и как этого больше не допускать
без оров, криков, всё чётко и по делу
чтобы сохранять командный дух, у нас есть парочка ритуалов
конечно, это стендап и встречи в узком кругу коллег
по пятницам есть «Вопросишная», во время которой можно обсуждать вообще всё что угодно, например, кто сильнее: акула или медведь
раз в квартал проводим тематические встречи — там говорим о шмотках, играх, путешествиях, делимся впечатлениями и мечтами
ещё у нас есть куча чатиков: про игры, фотки, котопсов, ремонт, спорт, для девочек, для мальчиков, для москвичей и так далее
они тоже создают особый ✨вайб✨ и улучшают погоду в команде
а как у вас?
поделитесь, что делаете вы, чтобы быть сплочённее
вы как, раздупляетесь?
мы со скрипом вливаемся в рабочий ритм, хотим обратно на каникулы...
чтобы всем было полегче, принесли несколько лайфхаков, как выжить на этой неделе
не хвататься за всё и сразу
первые дни после каникул не для подвигов
выберите 2–3 приоритетные задачи и спокойно закройте их, остальное в бэклог
подготовить почву
если задач пока немного, самое время для уборки: разобрать почту, почистить рабочий стол, навести порядок в папках и библиотеках
разобрать сохранёнки
референсы, идеи, вдохновлялки — вот он, их звёздный час
пересмотрите, разложите, что-то пустите в работу
обновить базу знаний
пересмотреть гайды, чек-листы, шаблоны, заметки — отличный способ плавно включиться и вспомнить, как вообще всё работает
вернуть режим (насколько возможно)
ложиться спать раньше, сократить ночные сериальные марафоны, вернуться к нормальному питанию после майонезного угара
без фанатизма, постепенно
быть к себе добрее
надо принять тот факт, что январь — это время для раскачки
рабочий ритм вернётся, если не подгонять его пинками
вот такие у нас лайфхаки
а какие у вас?
пишите в комменты
ого, а вот и Новый год! 🌟
сделали перерыв между нарезанием и поеданием салатов, чтобы вас поздравить
желаем, чтобы в 2026-м макеты сходились с первого раза, креатив лился рекой, а клиенты говорили только «вау, согласовано» и «вот ваш аванс»
пусть будет побольше проектов, которые хочется положить в портфолио, и поменьше правок
надеемся, новый год будет лучше предыдущего
отдыхайте, перезагружайтесь и веселитесь
с наступающим!
какие форматы бывают у дизайн-системы
привет, это 🔴 Коля Михайлов, руководитель дизайн-системы hh.ru
хочу поделиться мыслями кое о чём
дизайн-систему часто воспринимают как бинарную вещь: она или есть, или нет
в реальности всё сложнее — дизайн-система может существовать в разных форматах,
которые зависят от задач продукта
какие варианты бывают
1️⃣ дизайн-система как справочник
команда фиксирует базовые элементы, приводит в порядок макеты, договаривается о паттернах
дизайн-система практически не влияет на процессы, связь с кодом здесь не обязательна
2️⃣ дизайн-система как рабочий инструмент
следующий этап, когда команда начинает реально на неё опираться
изменения начинают влиять на релизы, дизайн и разработка больше не существуют отдельно
3️⃣ дизайн-система как основа интерфейса продукта
со временем дизайн-система начинает спасать от рассинхрона
без неё падает скорость, а любое изменение обходится слишком дорого
4️⃣ дизайн-система как продукт внутри продукта
финальный босс, самый нагруженный и сложный формат дизайн-системы
на этом этапе появляются ожидания, приоритеты и конфликтующие запросы, возникает необходимость смотреть на конкретные метрики
такой формат нужен не всем, но там, где без него нельзя, дизайн-система начинает жить по полноценной продуктовой логике
отдельный вопрос — связь фигмы и кода
сама по себе она не говорит о зрелости дизайн-системы, а показывает, в каком формате система работает, чего от неё ждут
на ранних этапах жёсткая связка часто оказывается не преимуществом, а дорогим авансом
дизайн-система не обязана быть большой, сложной или «зрелой»
она обязана быть уместной, работать на тот запрос, который есть у продукта, и в том формате, который этот запрос требует
всё остальное обычно приводит к завышенным ожиданиям и сложностям в работе
у самурая дизайнера нет цели, есть только путь
привет, это 🔴 Виталий Шмелёв, лид продуктового дизайна hh.ru
сейчас расскажу про рост дизайнеров
многие дизайнеры видят карьеру так: мидл → сеньор → лид
вроде бы логичная лесенка — чем старше, тем «руководительнее»
но мало кто знает, что лидство — не единственный путь, и уж точно не обязательный
деньги
парадокс, но факт: хороший дизайнер может получать больше, чем лид
сеньор — специалист уровня «закрывает любую задачу» в продукте стоит дороже, чем человек, который тратит 70% времени на совещания
рутина
лид — это почти не про дизайн
если вам нравится «делать руками», то лидство — боль
вы либо совсем перестаёте делать дизайн, либо делаете его между встречами, либо только концепты «в высоком полёте» — и то не в каждой компании
календарь
у лида календарь выглядит как тетрис на максимальной скорости: созвоны, планёрки, согласования, ревью, ещё немного созвонов сверху
хотите поработать?
есть время до начала рабочего дня или после него, потому что дедлайны никто не отменял
коммуникации
лид — это язык, ваш главный инструмент — не фигма, а умение спорить, объяснять, разруливать конфликты, структурировать, направлять
если от слов «созвон», «обсудим» или «надо проговорить» вас начинает шатать — подумайте дважды
самое тяжёлое: увольнять людей
это очень сложно, особенно если вы эмпат, особенно если боитесь сказать человеку, что он не тянет
есть лиды, которых ломает именно это, потому что это ответственность не только за результат, но и за чужие чувства, карьеру, будущее
и тут нет «правильной формулы», каждый раз по-новому
так почему стоит оставаться крутым специалистом?
потому что это тоже путь — не хуже, не ниже
крутой сеньор, который делает работу быстрее, глубже и точнее, который понимает пользователей, который закрывает комплексные задачи и учит других — часто ценнее для продукта, чем любой руководитель
лид — это роль
сеньор — это мастерство
и путь мастера иногда важнее пути начальника
мы здесь, чтобы выложить смешной мем и рассказать про наш шрифт
как видите, мем мы уже показали
узнаваемый шрифт — часть брендинга, как логотип или цвета
мы хотели, чтобы у hh.ru тоже был свой шрифт, который передавал бы нашу индивидуальность
работу начали над ним в 2023 году, а в 2025-м случился дроп
но мы до сих пор что-то докручиваем, хотя и используем шрифт в продукте
например, решили добавить курсивное начертание, которое сначала не планировали делать
при создании вдохновлялись шрифтом Inter — он лежал в основе нашей предыдущей дизайн-системы
чтобы она не поехала, некоторые параметры взяли из Inter
в итоге получилось своё, оригинальное
в шрифте есть интересные элементы: например, форма буквы «а»
некоторые лигатуры тоже выглядят необычно
теперь используем этот шрифт во всех продуктах и коммуникациях hh.ru
так что вы не могли не видеть наше творение 😎
пишите в комменты, как вам шрифт
и что вы бы хотели о нём узнать
да-да, мы и есть тот самый знакомый
все наши посты в канале написаны лапслоком — это такой стиль оформления текста, когда не используются заглавные буквы
лапки здесь ни при чём, название произошло из-за сращения фраз lower case и capitals lock — «закрепление заглавных букв в нижнем регистре»
некоторое подобие лапслока было у авангардистов, а потом и постмодернистов в XX веке
они экспериментировали с формой, поэтому печатали стихи и прозу в нижнем регистре и без знаков препинания
такие произведения есть у Маяковского, Вознесенского, Сорокина и других
в 2000-х лапслок перешёл в интернет-культуру и закрепился на форумах, в блогах и чатах
зачем он нужен?
ну, например, чтобы создать более неформальную и доверительную обстановку, уйти от официального тона
а ещё чтобы сделать текст более выразительным за счёт ритма и формы, а не больших букв
лапслок — это как будто друг пишет вам «эй, пошли поиграем в комп после уроков», вот так вот просто и без лишних расшаркиваний
мы используем лапслок вместе со швейцарским абзацем
кстати, если ещё не читали про него, вот два поста: часть 1, часть 2
такой дуэт помогает нам делать чистые, визуально приятные тексты, в которых легко ориентироваться и находить суть
используете лапслок в дизайне?
🔥 — да, это тренд
🤷 — не, это не для меня
от нашего столика — вашему
плагины для фигмы, которые здорово упрощают работу
▪️ SBOL Typograph — исправляет и форматирует типографику, например, ставит ё, убирает висячие предлоги, меняет дефисы на тире
▪️ Photopea — помогает редактировать изображения, по сути, бесплатный фотошоп
▪️ Skew Skew — позволяет перенести в изометрическое пространство любые картинки и векторы
▪️ Iconfy — содержит огромную библиотеку иконок
▪️ Vectorize Bitmap — трассирует картинки
▪️ HTML to Figma — конвертирует HTML-код в редактируемый дизайн
▪️ Halftones — помогает обрабатывать фотки для коллажей
▪️ Restore Image Dimensions — восстанавливает исходные размеры после обрезки в фигме
▪️ Fast Isometric — позволяет работать с моделями в изометрии
а вы какими пользуетесь?
кидайте в комменты свои плагины
зачем дизайнеру эмоциональный интеллект
можно знать типографику, Фигмой рулить с закрытыми глазами, то, пятое, десятое — и всё равно клепать ровные дизайны, которые никого не зацепят
это уже спорт какой-то, а не дизайн, хотите быть классным спецом — качайте мышцу под названием эмпатия
люди либо чувствуют, либо нет, им по большому счету на ваши отступы, сетки и т.д. и т.п. всё равно
читайте отзывы, общайтесь с пользователем, а не придумывайте за него, проводите опросы, проверяйте гипотезы — пробуйте понять свою аудиторию
тест на эмпатию: пустили хоть раз слезу из-за обезьянки Панча в феврале?
+ в комменты, если да
есть дизайны, которые вроде и кринж, а вроде и прикольные в своей упоротости
собираем под этим постом ваши guilty pleasures: какие странные элементы в дизайне вам втайне нравятся
слушаем и не осуждаем ⬇️
как работать без брифа и ТЗ?
никак, конец поста
ладно, шутка, сейчас расскажем
если так вышло, что к вам пришли и сказали «надо просто сделать красиво, делай», попробуйте это
1️⃣ задавайте вопросы
да, даже если кажется, что заказчик сам не знает, чего хочет
спрашивайте про цель, аудиторию, что нравится, что точно не подойдёт
хоть какие-то ориентиры точно вытащите
2️⃣ найдите референсы
поищите похожие проекты — у конкурентов, в портфолио, в избранном
отправьте рефы заказчику и попробуйте понять, что ему нравится
3️⃣ работайте итерациями
разбейте задачу на этапы и показывайте процесс: «вот концепт, вот первый вариант, туда идём?»
чек-поинты спасают от ситуации, когда нужно срочно переделать вообще всё
4️⃣ сделайте несколько вариантов
если время позволяет — набросайте 2–3 варианта
пусть заказчик выберет, что ему ближе
главное — не молчите и не играйте в угадайку
ну и да, брифы тоже бывают так себе, но это уже другая история 😏
а как вы действуете, когда нет чёткого ТЗ?
и у нас на это пять причин...
это пост с признанием💋
признаёмся, что влюблены в свою работу!
в валентинках пять причин, почему наша команда любит дизайн
а у вас какие?
отправить работу руководителю и ждать его мнения с потными ладошками
было? было 🌚
давайте по-честному: боязнь обратной связи — это нормально
и этот страх можно укротить, если знать лайфхаки
1️⃣ правильно просить оценку
так не надо: «вот мой макет, там, конечно, миллион ошибок, ну, вы как-нибудь посмотрите, пожалуйста, извините»
лучше так:
• обозначьте контекст — задачу, цель, ограничения;
• скажите, на что именно хотите получить обратную связь;
• если есть сомнения по конкретным моментам — так и напишите
например: «я собрал референсы шрифтов, чтобы мы понимали, куда двигаться... скажи, что думаешь по поводу шрифтов А, Б, В — они мне кажутся подходящими, а вот с Ж и З сомневаюсь»
тогда вы получите конкретный отзыв, а не что-то абстрактное
2️⃣ научиться слушать
помните: обсуждают макет, а не вас
может быть плохой дизайн, шрифт, иллюстрация, но не вы лично, вы — хороший
делайте по ходу разбора вашей работы какие-то заметки — так вы будете меньше нервничать, потому что сфокусируетесь на действии, а не на переживаниях
а ещё не надо сразу защищаться или оправдываться — сначала послушайте и разберитесь
если оценка неприятная, выдохните, это не конец света и не приговор вашим навыкам
негативная обратная связь — это просто информация о том, как сделать лучше
а пока ждёте ответа — переключитесь на другую задачу
или хотя бы сходите за кофе
откуда появились засечки в шрифтах
немного истории и наших мыслей
засечки появились в Древнем Риме: каменотёсы высекали тексты на монументах и делали хвостики на краях букв, чтобы камень не крошился
потом шрифты с засечками перекочевали в книги и постепенно начали меняться
в XV веке они были грубее и проще, в XVII веке — изящнее и тоньше
но в XX веке всё поменялось
пришла эра гротесков, шрифтов без засечек
гротески оказались практичнее: лучше читались, проще масштабировались, выглядели минималистичнее
а ещё выяснилось, что гротески лучше смотрятся на экране гаджетов
так что засечки сегодня практически не используют, только если какие-нибудь стартапы или отдельные ребята со своим вайбом
к слову, наш шрифт в hh.ru без засечек
когда мы его придумывали, хотели что-то простое, но с изюминкой, в меру модное и на вырост, человечное и подходящее нам по духу
в итоге нашли идеальный баланс, и это 100% мэтч
что думаете?
❤️ — засечки топ
🔥 — гротеск рулит
не можем не показать вам эту красоту...
перед Новым годом у команды хэхэ дизайна был мастер-класс с иллюстратором Миной Милк
мы рисовали открытки с символом года — красной огненной лошадью
получилась вот такая милота ⬆️
ждём ваши лайки и комменты, чья открытка вам нравится больше всего
каждый джун в какой-то момент встречает своего Хагрида...
того самого, который внезапно появляется в чате с сообщением: «Ты дизайнер, Гарри, а теперь я твой ментор»
вообще, в большинстве компаний сейчас есть практика давать новичкам ментора или бадди
ментор — это маяк для джуна
он объясняет, что и как работает, кто есть в команде, почему в компании принято делать так, а не иначе
по сути, это наставник, который плавно погружает вас в рабочий процесс и делает первые недели на новом месте не такими стрессовыми
а бадди — это друллега
он поддерживает, помогает адаптироваться, отвечает на глупые вопросы и делится своей вселенской мудростью
для джуна ментор или бадди — это сигнал, что он не один, компания готова инвестировать в его обучение и рост
а в вашей жизни был такой Хагрид?
или вы сами уже стали для кого-то наставником?
пока кто-то строит планы на этот год, мы набираемся сил, чтобы ворваться и сразу всё реализовать
поэтому на каникулах команда хэхэ дизайн тотально отдыхает
вот, чем мы занимаемся:
роем норы на пляже и строим замки из песка и снега;
смотрим на рыбов под водой;
едим салаты и пьём джус с пузырьками;
наслаждаемся жизнью по полной.
вот такая у нас расчилловка
а как вы отдыхаете?
делитесь в комментах фотками
говорят, что дизайнеры даже новогодние шары на ёлке выравнивают по линейке
проверим?
кидайте в комменты свои ёлочки!
шрифты, дружитес
в графическом дизайне есть понятие — шрифтовая пара
это когда акцентный заголовочный и спокойный текстовый шрифты гармонично сочетаются
если коротко:
шрифты дружат, когда есть контраст и их характеры совпадают
шрифты не дружат, когда они оба акцентные, с разным ритмом и стилистикой
если выбираете такую парочку бэсти, обратите внимание на следующее:
▪️ контраст по форме — выразительный шрифт для заголовка плюс чистый и нейтральный для текста
▪️ совместимость пропорций — чтобы был похожий визуальный ритм, плотность букв, ширина и динамика кривых
▪️ единое настроение — футуризм к футуризму, органика к органике, минимализм к минимализму
▪️ разная громкость — когда оба шрифта пытаются быть главными, макет разваливается
делитесь в комментах своими любимчиками
а нам всё хиханьки да хаханьки
да, и что вы нам сделаете 😁
почти в каждом посте мы используем мемы
почему?
так прикольнее есть несколько причин:
▪️ хотим рассказывать живые кейсы без занудства и шаблонов, а ещё создавать свой особый визуальный стиль — лёгкий и искренний
▪️ умеем смеяться над собой и подмечать забавные моменты в дизайне, мемы в том числе
▪️ нам просто нравятся смешные картинки
так что в постах совмещаем приятное с полезным — добрые мемчики и важные дизайнерские темы
что думаете по поводу мемов?
😁 — хехе
🤷 — нот хехе
бро, ты сделаешь дизайн-систему и т. д.
привет, это 🔴 Коля Михайлов, руководитель дизайн-системы hh.ru
вдохновился вашими лайками под прошлым постом, поэтому сегодня снова говорим про дизайн-систему, на этот раз о том, как её создать
как начать
вообще, никто не просыпается утром с мыслью «а не сделать ли нам дизайн-систему»
сначала появляется боль: слишком много разных интерфейсных решений, дублирование, расхождения
мы в hh.ru начали разработку дизайн-системы параллельно с редизайном, чтобы создать основу, на которой можно построить новый визуальный язык и технический стек компании
кого позвать
минимально нужны дизайнер и разработчик
но у нас в hh.ru над magritte работает целая команда дизайнеров, две дев-команды — web и mobile, а ещё нам помогают UX-писатели и исследователи
сколько займёт
в идеальном мире — месяцев шесть, в реальности — она никогда не готова
первые результаты видны быстро: когда компонентная библиотека начинает использоваться в продукте, а не лежит на полке
но развитие системы — это постоянный процесс
что упрощает
рутину — перестаёшь тратить время на отрисовку элементов, согласование мелочей, на то, чтобы объяснять разработчику, где отступы
всё становится более предсказуемым
что усложняет
нельзя «сделать по-своему»: нужно вносить изменения через процесс, согласовывать, думать о влиянии на всех пользователей системы
это и есть взросление — когда дизайн перестаёт быть «рисованием», а становится управляемой средой
имя Рене Магритт вам о чём-нибудь говорит?
нам да, потому что это название нашей дизайн-системы — magritte
дело в том, что когда мы собирали концепты для редизайна hh.ru, в одном из предложений была иллюстрация мальчика с яблоком у носа
нам сразу вспомнился Рене Магритт и его картина «Сын человеческий», поэтому за концептом закрепилось название magritte
а потом он стал основным, и слово перекочевало в нейминг дизайн-системы
сегодня у Магритта день рождения, поэтому предлагаем посмотреть на его знаменитые картины со шляпой-котелком
на связи руководитель дизайн-системы hh.ru 🔴 Коля Михайлов, и сейчас будет большой пост про... дизайн-систему
начнём с базы
если совсем просто, дизайн-система — это способ держать весь интерфейс компании в одном визуальном и смысловом поле
это не только про кнопки и цвета, это про предсказуемый результат — когда интерфейсы получаются стабильными и понятными, независимо от того, кто их делает: опытный дизайнер, новичок или подрядчик
у дизайн-системы есть:
◾️ визуальный слой — компоненты, токены, принципы
◾️ инженерный слой — код, репозитории, автоматизации
◾️ процессный слой — правила обновления, релизы, обсуждения, коммуникации
вместе это превращается в структуру, которая помогает другим продуктам быть последовательными и быстрее развиваться
казалось бы, чем это отличается от простого набора шаблонов в фигме?
всем
шаблоны — это просто картинки, которые не обновятся, если завтра изменится бренд или поведение кнопки
дизайн-система — живой продукт, её компоненты связаны с токенами, токены автоматически обновляются, код синхронизирован с библиотеками, документация описывает, зачем и когда использовать тот или иной паттерн
она нужна, когда команда начинает тратить много времени на согласование, дублирование и ручные правки
например, дизайнеры рисуют одно и то же по три раза, разработчики реализуют по-своему, тестировщики не понимают, где норма, а где ошибка
у нас в hh.ru дизайн-система magritte — это основа для всех интерфейсов: единый набор принципов, компонентов и правил, на которых строятся продукты компании
благодаря ей продуктовые команды делают фичи быстрее, а не рисуют и верстают с нуля то, что уже было однажды придумано