Рубрика «дизайн-системы»
Архитектура дизайн-системы для нескольких продуктов
2021-01-09 в 19:28, admin, рубрики: Анализ и проектирование систем, дизайн, дизайн-системы, интерфейсыС увеличением количества обслуживаемых продуктов наша дизайн-система начала разваливаться. Вырос порог входа для дизайнеров и работать с ней стало труднее. В статье расскажу как мы перешли на модульную архитектуру и не растеряли консистентность.
Вот немного вводных, которые позволят понять, похож наш случай на ваш или не очень.
-
Есть несколько продуктов.
-
Один продукт могут делать несколько команд дизайнеров и разработчиков.
-
Есть Web, Mobile и Desktop.
-
Есть много легаси и неконсистентности.
-
Дизайнер в одном продукте может не знать что происходит в другом.
Тёмная сторона дизайн-системы и что с ней делать
2020-03-16 в 10:43, admin, рубрики: alfa digital, usability, Альфа-Банк, веб-дизайн, дизайн, дизайн-системы, интерфейсы, паттерныПривет!
Меня зовут Леша Свиридо, я ведущий дизайнер продукта в Альфа-Банке (это мы делаем интернет-банк для бизнеса).
В этом посте я поведаю про дизайн-системы. Да, про них пишут так же часто, как про профессиональное выгорание или удаленную работу. Штука, прямо скажем, давно успевшая стать хайповой, набить оскомину, принести радость и разочарование, но все равно остающаяся штукой нужной. Под катом — о том, почему дизайн-система это круто и как она помогает нам в работе. О том, почему это круто не всегда, какие у дизайн-систем есть темные стороны и как им противостоять.
А ещё ссылка на дизайн-систему Альфа-Банка.
Начнем с очевидного. Часто думают, что дизайн-система создана для дизайнеров, чтобы сделать их жизнь проще, что это такой удобный набор компонентов, который всегда под рукой в Sketch или Figma. Но это называется UI-кит.
Дизайн-система же — цельная вещь для продуктовой команды, которая помогает в том числе и разработчикам.
Читать полностью »
Как подружить дизайнера, верстальщика и «Фигму» с помощью дизайн-системы, ломика и какой-то матери™
2019-08-20 в 11:02, admin, рубрики: figma, usability, БЭМ, веб-дизайн, верстка сайтов, дизайн, дизайн-системы, интерфейсы, модульная сетка, процесс разработки, Разработка веб-сайтов
Привет. Недавно я выпендрился в комментариях и пообещал подробно ответить на вопрос о том, как дизайн-система упрощает взаимоотношения и нейтрализует конфликты между дизайнерами и верстальщиками (разработчиками). Плюс рассказать о некоторых вариантах стандартизации именования слоёв. Вот и отвечаю. Подробно. Про сетки. Про компоненты. Про иконки. Про язык. Про БЭМ. Про «фигмин» слэш и её же плагины. Про артборды и вьюпорты. Про типографику. Про стили и палитры. Про эффекты. Про экспорт растра. Про «мультиплеер». Про распределение обязанностей. Ну и немножко «о жизни, вселенной и вообще». Осторожно, трафик: внутри много картинок, есть gif-анимации. А ещё много, действительно много нудного текста. Я предупредил.
Читать полностью »
От UI-kit до дизайн-системы
2019-06-20 в 13:02, admin, рубрики: Блог компании онлайн-кинотеатр ivi, дизайн, дизайн мобильных приложений, дизайн-системыОпыт онлайн-кинотеатра Иви
Когда в начале 2017 года мы впервые задумались о создании собственной системы доставки дизайна в код, об этом уже многие говорили и кто-то даже делал. Однако, об опыте построения кроссплатформенных дизайн-систем и по сей день мало что известно, а понятных и проверенных рецептов, описывающих технологии и способы подобной трансформации процесса имплементации дизайна в уже работающий продукт как не было, так и нет. Да и под «компонентами в коде» часто понимают очень разные вещи.
Меж тем компания год от года удваивала штат — нужно было масштабировать отдел дизайна и оптимизировать процессы создания и передачи макетов в разработку. Умножаем всё это на «зоопарк» платформ, которые нужно поддерживать, и получаем подобие вавилонского столпотворения, которое просто не способно «нормально делать» и приносить доход. Развитие платформ часто шло параллельно, и один и тот же функционал мог выходить на разных платформах с лагом в несколько месяцев.
Читать полностью »
Как оседлать радугу: история создания тёмной темы
2019-04-29 в 10:10, admin, рубрики: Блог компании ВКонтакте, дизайн интерфейсов, дизайн мобильных приложений, дизайн-системы, интерфейсы, продуктовый дизайн, разработка мобильных приложений
В сентябре мы выпустили тёмную тему официального приложения ВКонтакте для iOS, а неделю назад релиз состоялся и на Android. За этим запуском стоит большой совместный труд разработчиков и дизайнеров. Вместе мы не просто перевели VK на тёмную сторону, но и серьёзно изменили подход к работе с цветами в наших интерфейсах, упростив их выбор и снизив вероятность ошибиться и наплодить лишних стилей.
Меня зовут Михаил Лихачёв, я ведущий дизайнер VK. Расскажу, как небольшой командой адаптировали 300 экранов и систематизировали все существующие в мобильных приложениях цвета — для этого мы синхронизировали их между платформами и вынесли работу с ними в единую дизайн-систему с токенами. Поделюсь впечатлениями о том, как нам теперь с этим живётся и усложнился ли процесс дизайна.
Кто ответит за качество?
2019-04-10 в 16:05, admin, рубрики: quality assurance, Блог компании Конференции Олега Бунина (Онтико), дизайн-системы, инфраструктура как код, качество, качество по, конференции, Тестирование IT-систем, управление разработкойПривет!
У нас новая важная тема — качественная разработка IT-продуктов. Мы часто говорим на HighLoad++, как сделать нагруженные сервисы быстрыми, а на Frontend Conf — классный пользовательский интерфейс, который не тормозит. У нас регулярно есть темы про тестирование, и DevOpsConf про объединение разных процессов, включая тестирование. А про то, что можно назвать качество в целом, и как над ним комплексно работать — нет.
Исправим это на QualityConf — будем развивать культуру думать о качестве конечного продукта для пользователя на каждой стадии разработки. Привычку не зацикливаться на своей зоне ответственности, и ассоциировать качество не только с тестировщиками.
Под катом поговорим с главой программного комитета, руководителем тестирования в Тинькофф.Бизнес, создателем русскоязычного QA-сообщества Анастасией Асеевой-Нгуен о состоянии отрасли QA и миссии новой конференции.
Книги о дизайн-системах
2018-04-26 в 6:57, admin, рубрики: usability, Блог компании Mail.Ru Group, веб-дизайн, дизайн-системы, интерфейсы, книгиМы строим свою дизайн-систему Paradigm с 2012 года. Но такого лютого взрыва интереса к теме с уймой новых примеров и публикаций, как в последние пару лет, ещё не было. В прошлом году наконец-то вышла книга Brad Frost «Atomic Design» и про дизайн-системы говорят вообще все. Правда, большинство статей — бесконечное пережёвывание теории модульного дизайна, про практику внедрения кроме Nathan Curtis почти никто не пишет. Кроме того, хотя заслуга Брэда в популяризации идеи модульного дизайна неоценима, но и сам подход, и метафора «атомарности» / «молекулярности» существовали до него (Nathan Curtis пишет, что ещё Dell в середине 90х делал компонентную систему с такой же терминологией, а в современный обиход «atomic design» ввёл Jeremy Keith в районе 2011 года).
Дизайн-система. Определение понятия
2018-03-21 в 12:52, admin, рубрики: usability, Блог компании Mail.Ru Group, веб-дизайн, дизайн-системы, интерфейсы, унификация
В российском дизайн-сообществе сформировалось и все чаще встречается мнение о том, что возникший в последние годы хайп вокруг дизайн-систем — не более, чем пузырь, раздутый вокруг давно существующей темы, а вовлеченные в это дело авторы спекулируют на старых понятиях.
Читать полностью »
Paradigm — Дизайн-система Mail.Ru Group, часть 1: Визуальный язык
2017-07-17 в 12:50, admin, рубрики: usability, Блог компании Mail.Ru Group, веб-дизайн, дизайн-системы, интерфейсы, унификация, метки: дизайн-системыНесколько лет портальная дизайн-команда Mail.Ru Group занимается обновлением и унификацией продуктов. У нас сформировалась дизайн-система, на которой работают медиа-проекты, мобильный веб и частично productivity-сервисы (постепенно подключаются и другие продукты), сформировался стиль пиктограмм и иллюстраций, стандартизируются промо-письма и промо-сайты. Конечно, ещё не во всех сервисах всё хорошо, а где-то первый редизайн не решил всех проблем, но огромный рывок за прошедшие годы трудно не заметить. Чтобы ускорить процесс обновления и сделать нашу работу публичной, мы открываем наружу часть нашей дизайн-системы Paradigm.
