Рубрика «дизайн-системы»

С увеличением количества обслуживаемых продуктов наша дизайн-система начала разваливаться. Вырос порог входа для дизайнеров и работать с ней стало труднее. В статье расскажу как мы перешли на модульную архитектуру и не растеряли консистентность.

Вот немного вводных, которые позволят понять, похож наш случай на ваш или не очень.

  • Есть несколько продуктов.

  • Один продукт могут делать несколько команд дизайнеров и разработчиков.

  • Есть Web, Mobile и Desktop.

  • Есть много легаси и неконсистентности.

  • Дизайнер в одном продукте может не знать что происходит в другом.

Читать полностью »

Привет!

Меня зовут Леша Свиридо, я ведущий дизайнер продукта в Альфа-Банке (это мы делаем интернет-банк для бизнеса).

В этом посте я поведаю про дизайн-системы. Да, про них пишут так же часто, как про профессиональное выгорание или удаленную работу. Штука, прямо скажем, давно успевшая стать хайповой, набить оскомину, принести радость и разочарование, но все равно остающаяся штукой нужной. Под катом — о том, почему дизайн-система это круто и как она помогает нам в работе. О том, почему это круто не всегда, какие у дизайн-систем есть темные стороны и как им противостоять.

А ещё ссылка на дизайн-систему Альфа-Банка.

Тёмная сторона дизайн-системы и что с ней делать - 1

Начнем с очевидного. Часто думают, что дизайн-система создана для дизайнеров, чтобы сделать их жизнь проще, что это такой удобный набор компонентов, который всегда под рукой в Sketch или Figma. Но это называется UI-кит.

Дизайн-система же — цельная вещь для продуктовой команды, которая помогает в том числе и разработчикам.
Читать полностью »

Как подружить дизайнера, верстальщика и «Фигму» с помощью дизайн-системы, ломика и какой-то матери™ - 1

Привет. Недавно я выпендрился в комментариях и пообещал подробно ответить на вопрос о том, как дизайн-система упрощает взаимоотношения и нейтрализует конфликты между дизайнерами и верстальщиками (разработчиками). Плюс рассказать о некоторых вариантах стандартизации именования слоёв. Вот и отвечаю. Подробно. Про сетки. Про компоненты. Про иконки. Про язык. Про БЭМ. Про «фигмин» слэш и её же плагины. Про артборды и вьюпорты. Про типографику. Про стили и палитры. Про эффекты. Про экспорт растра. Про «мультиплеер». Про распределение обязанностей. Ну и немножко «о жизни, вселенной и вообще». Осторожно, трафик: внутри много картинок, есть gif-анимации. А ещё много, действительно много нудного текста. Я предупредил.
Читать полностью »

Опыт онлайн-кинотеатра Иви

Когда в начале 2017 года мы впервые задумались о создании собственной системы доставки дизайна в код, об этом уже многие говорили и кто-то даже делал. Однако, об опыте построения кроссплатформенных дизайн-систем и по сей день мало что известно, а понятных и проверенных рецептов, описывающих технологии и способы подобной трансформации процесса имплементации дизайна в уже работающий продукт как не было, так и нет. Да и под «компонентами в коде» часто понимают очень разные вещи.

От UI-kit до дизайн-системы - 1


Меж тем компания год от года удваивала штат — нужно было масштабировать отдел дизайна и оптимизировать процессы создания и передачи макетов в разработку. Умножаем всё это на «зоопарк» платформ, которые нужно поддерживать, и получаем подобие вавилонского столпотворения, которое просто не способно «нормально делать» и приносить доход. Развитие платформ часто шло параллельно, и один и тот же функционал мог выходить на разных платформах с лагом в несколько месяцев.
Читать полностью »

Как оседлать радугу: история создания тёмной темы - 1

В сентябре мы выпустили тёмную тему официального приложения ВКонтакте для iOS, а неделю назад релиз состоялся и на Android. За этим запуском стоит большой совместный труд разработчиков и дизайнеров. Вместе мы не просто перевели VK на тёмную сторону, но и серьёзно изменили подход к работе с цветами в наших интерфейсах, упростив их выбор и снизив вероятность ошибиться и наплодить лишних стилей.

Меня зовут Михаил Лихачёв, я ведущий дизайнер VK. Расскажу, как небольшой командой адаптировали 300 экранов и систематизировали все существующие в мобильных приложениях цвета — для этого мы синхронизировали их между платформами и вынесли работу с ними в единую дизайн-систему с токенами. Поделюсь впечатлениями о том, как нам теперь с этим живётся и усложнился ли процесс дизайна.

Читать полностью »

Привет!

У нас новая важная тема — качественная разработка IT-продуктов. Мы часто говорим на HighLoad++, как сделать нагруженные сервисы быстрыми, а на Frontend Conf — классный пользовательский интерфейс, который не тормозит. У нас регулярно есть темы про тестирование, и DevOpsConf про объединение разных процессов, включая тестирование. А про то, что можно назвать качество в целом, и как над ним комплексно работать — нет.

Исправим это на QualityConf — будем развивать культуру думать о качестве конечного продукта для пользователя на каждой стадии разработки. Привычку не зацикливаться на своей зоне ответственности, и ассоциировать качество не только с тестировщиками.

Под катом поговорим с главой программного комитета, руководителем тестирования в Тинькофф.Бизнес, создателем русскоязычного QA-сообщества Анастасией Асеевой-Нгуен о состоянии отрасли QA и миссии новой конференции.

Кто ответит за качество? - 1
Читать полностью »

Мы строим свою дизайн-систему Paradigm с 2012 года. Но такого лютого взрыва интереса к теме с уймой новых примеров и публикаций, как в последние пару лет, ещё не было. В прошлом году наконец-то вышла книга Brad Frost «Atomic Design» и про дизайн-системы говорят вообще все. Правда, большинство статей — бесконечное пережёвывание теории модульного дизайна, про практику внедрения кроме Nathan Curtis почти никто не пишет. Кроме того, хотя заслуга Брэда в популяризации идеи модульного дизайна неоценима, но и сам подход, и метафора «атомарности» / «молекулярности» существовали до него (Nathan Curtis пишет, что ещё Dell в середине 90х делал компонентную систему с такой же терминологией, а в современный обиход «atomic design» ввёл Jeremy Keith в районе 2011 года).

Книги о дизайн-системах - 1

Читать полностью »

Дизайн-система. Определение понятия - 1

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

Несколько лет портальная дизайн-команда Mail.Ru Group занимается обновлением и унификацией продуктов. У нас сформировалась дизайн-система, на которой работают медиа-проекты, мобильный веб и частично productivity-сервисы (постепенно подключаются и другие продукты), сформировался стиль пиктограмм и иллюстраций, стандартизируются промо-письма и промо-сайты. Конечно, ещё не во всех сервисах всё хорошо, а где-то первый редизайн не решил всех проблем, но огромный рывок за прошедшие годы трудно не заметить. Чтобы ускорить процесс обновления и сделать нашу работу публичной, мы открываем наружу часть нашей дизайн-системы Paradigm.

Дизайн-система Mail.Ru Group ParadigmЧитать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js