Что такое дизайн система
Что такое дизайн-системы и где они применяются
О них говорят почти на каждой важной конференции, и CodeFest, про который мы недавно рассказывали, не стал исключением. Сложно не заметить тренд. Немного рассказали о явлении и поразмышляли над тем, как практика дизайн-систем применима к проектной разработке.
Дизайн-система — это набор правил и инструментов для визуального и технического исполнения, который отражает философию продукта и постоянно развивается. Это если попытаться в одном предложении. Получилось плохо, как видите — дальше станет понятнее.
То, что сегодня дизайн-системы и само явление унификации на пике популярности, вполне закономерно. Когда веб только начинался, тем, кто его создавал, было не на что ориентироваться. Каждый новый интерфейс становился экспериментом. Веб был про эмоции, а не про удобство.
Пользователь то и дело находил что-то новое, удивлялся: «вау, как они хитро замаскировали меню!». Владельцы заводов показывали сайты друг другу за кружкой пива, восторженно тыкая пальцем на крутящийся и сверкающий flash-логотип. Сайты предваряли специальные странички, на которых пользователю рассказывали, как всем этим пользоваться. Такого понятия, как юзабили, в принципе не существовало — его и не могло быть при том уровне интернет-грамотности.
Со временем произошли три логичные вещи:
Сегодня любой сайт — это в первую очередь решение проблемы. Чем быстрее человек разберется, куда нажимать, тем выше вероятность того, что он здесь останется — а не уйдет к конкурентам. Унификация — это хорошо, потому что если все сайты и элементы управления будут более-менее похожи друг на друга, ими будет проще пользоваться.
Первой осмысленной попыткой масштабной веб-унификации можно назвать Material Design от Google. Над идеей начали работать в 2011 году, а в 2014 представили готовую дизайн-систему.
Когда нужна дизайн-система: что это такое и где применяется
Последние два года дизайнеры, студии и продукты пишут о дизайн-системах и активно внедряют свои. В AIC рассказали, что это, зачем дизайн-системы нужны и как их использовать.
Когда появились дизайн-системы
Систематизация дизайна появилась вместе с тиражностью. Так, например, первые рукописные книги для удобства и оперативности копирования приводили к единым правилам, сеткам и повторяющимся элементам.
Термин «дизайн-система» появился в середине ХХ века и означал систему визуальной идентификации бренда. Правда, в то время речь шла только о физических продуктах на полках магазинов или о самой сети магазинов.
Визуальное руководство Нью-Йоркского метрополитена в 1970-х
С появлением интернета дизайнерам пришлось осваивать новое направление — веб-дизайн. О термине «дизайн-система» надолго забыли. Примерно в двухтысячных о нём вспомнили вновь — дизайнеры заметили, что многие вещи можно систематизировать, упростить и автоматизировать.
Одним из первых в России о дизайн-системах заговорил Артём Геллер, арт-директор «Лаборатории Артёма Геллера». Сейчас совместно с ним мы в AIC разрабатываем дизайн-системы для государственных сайтов.
Сайт дизайн-системы государственных порталов России gov.design
Всё, что нужно знать о рекламе в мобильных играх
Аналитический обзор Gameloft: рекламные форматы, портрет аудитории, надёжные бенчмарки.
На сегодняшний день в мире зафиксировано более 500 дизайн-систем. Все они собраны на сайте Website Style Guide Resources. Это первый и самый полный каталог со множеством категорий и полезных образовательных материалов.
Что такое дизайн-система
Понятие «дизайн-система» часто путают с более мелкими явлениями: гайдлайн, UI-кит, брендбук. На деле у этого определения более широкое значение.
Дизайн-система — это набор ценностей бренда, инструментов и компонентов, который упрощает создание, тестирование, визуальное и техническое обновление продуктов, а также обеспечивает единообразие их интерфейсов.
По моему мнению, дизайн-системы окружают нас повсеместно. В пример можно привести систему дорожных знаков или обозначений для управления музыкальными приложениями на смартфоне. Даже за рубежом мы узнаем знак пешеходного перехода и найдём кнопку «плей» в приложении.
Александра Ермоленко, директор департамента дизайна Rambler&Co, рассказывает, какие компоненты входят в дизайн-систему Rambler:
Слайд из презентации Rambler&Co о компонентах дизайн-системы
Кому и зачем нужны дизайн-системы
Обычно дизайн-системы нужны крупным продуктам, которые регулярно обновляют и запускают новые сервисы: банкам, холдингам, международным корпорациям. Самый яркий пример в России — «Яндекс» с его огромным количеством проектов: музыка, блоги, афиша, почта и другие.
Пример дизайн-системы, на которую можно ориентироваться, недавно представил «Альфа-Банк». Приветливый тон, яркие иллюстрации и понятная навигация уже располагают к продукту.
Сайт дизайн-системы Альфа-Банка — design.alfabank.ru
Кроме этого, дизайн-системы используют такие крупные компании, как Тинькофф Банк, Mail.Ru Group, Сбербанк и другие. Большинство компаний публикуют часть своих наработок. Их на своём сайте собирает Юрий Ветров, директор по дизайну в Mail.Ru Group.
Design System Club — проект Юрия Ветрова о дизайн-системах России
Бо́льшая часть российских компаний, у которых есть дизайн-система, — банки. Обычно у банка есть мобильное приложение и сайт, которые должны иметь похожие интерфейсы. Эту задачу можно решить с помощью единого подхода к дизайну и проектированию, то есть дизайн-системы. Даже если сайт и приложение будут создавать отдельные команды дизайнеров и разработчиков, они могут использовать общие компоненты и паттерны.
В будущем, когда руководство банка решит провести редизайн сайта и приложения, дизайн-система позволит централизованно обновить компоненты во всех проектах одновременно.
Дизайн-система создаёт ощущение единства и помогает потребителю достичь нужной цели в кратчайшие сроки, а крупному бизнесу — зарабатывать больше.
Для государственных сервисов и сайтов польза также очевидна: системный подход к проектированию формирует правильный пользовательский опыт. Государству важно, чтобы люди умели работать с госсайтами, а также — легко отличали их и не путали с коммерческими. Единый паттерн — подход к проектированию интерфейсов — должен быть во всём: в навигации, иконках, шрифтах и названии вкладок.
Кроме этого, дизайн-система ускоряет взаимодействие государственных институтов с дизайнерами и разработчиками: унифицирует терминологию, сокращает временные затраты на обсуждение задач, формирует общее понимание целей и принципов работы. Зрелая дизайн-система может в перспективе сэкономить время и деньги на разработку нового сервиса или обновление продукта.
Итак, если вы наблюдаете одну или несколько ситуаций из списка ниже, стоит задуматься над разработкой дизайн-системы:
Как дизайн-системы помогают в работе
Польза дизайн-системы проявляется на внутреннем и внешнем уровнях.
Польза для команды
Все участники команды проектируют, разрабатывают и внедряют продукты на основе общих элементов дизайна. Во-первых, дизайн-система экономит время дизайнеров: с готовой библиотекой и паттернами они гораздо быстрее создают и тестируют макеты.
Во-вторых, дизайн-система упрощает коммуникацию внутри команды, помогает дизайнерам и разработчикам решать задачи, которые ставят менеджеры.
Принципы работы с сеткой в дизайн-системе Mail.Ru Group Paradigm
Дизайн-система повышает лояльность сотрудников компании к собственным продуктам, положительно влияет на репутацию бренда на рынке. Сам факт создания дизайн-системы — это хороший PR-повод, который привлекает внимание к бренду.
Вдобавок, наличие дизайн-системы позволяет привлекать в команду специалистов любого уровня и не бояться, что они испортят продукт. Дизайн-система, созданная сильной командой, минимизирует вероятность ошибки.
Польза для потребителей
Дизайн-система меняет отношение пользователей к бренду. Во-первых, общий подход к проектированию UX и UI делает продукт более доступным и понятным для клиентов. Во-вторых, единый визуальный стиль всех проектов повышает узнаваемость компании на рынке и планку качества для конкурентов.
Как понять, нужна ли вам дизайн-система
Дизайн-система не появляется из воздуха — она создаётся на основе ценностей компании. Если раньше большинство команд формировали подход к дизайну в ходе развития бизнеса, то сегодня компании всё чаще закладывают дизайн-культуру на старте. Появление общих ценностей означает, что у компании появилась необходимость, возможность и внутренние ресурсы оформить эту культуру в систему.
Чтобы определить, нужна ли дизайн-система вашей команде, проверьте, актуальны ли для вас эти утверждения.
Несколько отделов вашей компании одновременно работают над одним проектом
Если да, то дизайн-система поможет работать всем в одном направлении и экономить время на коммуникацию. Единый подход в разработке интерфейсов исключает риск сделать работу впустую и позволяет быстрее протестировать новый сервис.
Например, вы разрабатываете CRM-систему. Если у вас есть дизайн-система, не нужно шлифовать прототип до идеала, чтобы протестировать новый сервис. Достаточно собрать первый прототип и дать доступ к ограниченному кругу пользователей, которые укажут на недостатки продукта. А дизайн-система поможет доработать его и быстро внедрить новые функции.
Есть потребность масштабировать дизайн на сотни макетов
Если у вас сложный продукт, растущая или уже большая команда, как минимум стоит начать с UI-кита, популярных паттернов и библиотеки, откуда макеты будут подтягивать свои компоненты. Это заметно упростит работу в будущем, когда дизайнеров будет в два-три раза больше и станет тяжело собраться вместе, чтобы обсудить макет.
У компании есть ресурсы на создание дизайн-системы
Разработка дизайн-системы — внутренний проект компании, который не приносит прибыль здесь и сейчас. На её создание нужны время и ресурсы, которые можно было бы потратить на проектирование макетов без системы.
Руководить её разработкой должен осознанный специалист, который понимает, как продукт выиграет от систематизации в долгосрочной перспективе. Это должен быть дизайнер, который не боится скучной методичной работы.
Прежде чем приступить к созданию дизайн-системы, обязательно определите критерии, по которым вы сможете оценить эффективность её внедрения. Также составьте смету расходов и план работ.
Что надо запомнить
Вместо вывода мы составили список основных тезисов.
Дизайн-системы для чайников: статьи, книги, примеры, инструментарий
Что такое дизайн-системы и чем полезны
Дизайн-системы — большие наборы правил и готовых элементов интерфейса, которые дизайнеры и разработчики создают, чтобы ускорить и удешевить разработку новых версий сайтов и приложений. Дизайн-системы помогают создавать интерфейсы, которые понятны людям, логично устроены и оформлены в едином стиле. Самый, наверное, известный пример, это дизайн-система Material Design от Google, на которой строится множество приложений на Андроиде.
Обычно дизайн система включает в себя несколько больших разделов. Набор разделов может варьироваться в зависимости от компании и количества продуктов у неё. Чем больше компания, тем более полная и продуманная дизайн-система ей нужна. Вот, что в них может входить:
Ниже я собрал материалы, которые пригодятся, чтобы понять пользу дизайн-систем и внедрить их у себя в компании.
Статьи про дизайн-системы
Дизайн-системы: UI-киты, CSS-фреймворки, гайдлайны
Лонгрид, часть тильдовского курса «Дизайн в цифровой среде», рассказывающая про разные виды компонентов дизайн-систем.
По каждому виду компонентов разбирают, что это такое, кто и зачем применяет в работе, из каких элементов состоит, где скачать.
Есть примеры и чеклисты, которые помогут собрать гайд или кит для вашего проекта или продукта.
Everything I Know About Style Guides, Design Systems, and Component Libraries
Прикладная статья Ли Робинсона, в которой он суммирует свои знания о гайдах, дизайн-системах и библиотеках компонентов.
Названия разделов и их супер короткая суть:
Design Systems
Команда Figma обновила свой сайт с коллекцией статей о проектировании и развитии дизайн-систем.
Создание дизайн-систем с помощью Atomic Design
Очень хорошая статья, которая будет полезна тем дизайнерам сайтов и интерфейсов, которые ещё не знакомы с методикой атомарного дизайна на практике.
Атомарный дизайн — методика проектирования, в которой вы описываете дизайн на пяти уровнях компонентов:
Автор (Игорь Сивец, Senior Experience Designer в EPAM Киев) рассказывает:
The 2019 Design Systems Survey by Sparkbox
Отчёт об исследовании «рынка» дизайн-систем. Кто и как использует, в каком состоянии, что дают.
Книги про дизайн-системы
Обзор книг Юрия Ветрова
Юрий — бывший дизайн-директор Mail Ru Group. Человек, который знает о дизайн-системах, пожалуй, больше всех в России. Вот, какие книги из прочитанных им он рекомендует:
Вот, что я могу посоветовать дополнительно:
Нюансы разработки дизайн-систем
The ABCs of Design Systems
Толковые советы по разработке и управлению дизайн-системой, оформленные в формате азбуки: A is for Adoption, B is for Beta, C is for Canon и так далее. С развёрнутым пояснением к каждой букве.
Как включить анимацию в вашу дизайн-систему
Перевод материала Калеба Барклэя, консультанта по дизайну, помогает компаниям проектировать дизайн-системы.
Typography in Design Systems
Подробный рассказ о грамотном описании типографики в дизайн-системах.
Дизайн-система: как хорошо начать и не закончить плохо
Базовая статья Ксении Толокновой, UX/UI дизайнера и арт-директора в Газпромбанке, о сетках, типографике и цветах в дизайн-системах.
Project Worlds — Achieving God Mode in Digital Design
Статья предлагает оригинальную ментальную модель для проектирования дизайн-систем — «миры». Это своеобразное развитие идей атомарного дизайна. Автор предлагает рассматривать разные уровни дизайн-системы как маленькие «миры»: у каждого есть входные данные, внутренние правила/алгоритмы и выходные данные. Звучит сложно, но прочитайте или хотя бы пролистайте. Станет понятно.
Including Animation In Your Design System
О том, как грамотно описать интерфейсную анимацию в дизайн-системе. С примерами.
Дизайн-системы в сайтостроении
Лекция Александра Гладких, сооснователя и арт-директора Charmer.
Методы построения гибкой цветовой палитры для вашей дизайн-системы, перевод статьи Designing Systematic Colors
В статье подробно и обстоятельно разбирается, как разработать работающую и гибкую систему цветов, основанную на логике.
Design System in Figma
Бесплатный курс по созданию дизайн-систем в Figma от создателя DesignCode.io.
Примеры дизайн-систем
Инструментарий
Программы и сервисы, которые могут дополнить общепринятые в индустрии решения: Figma, Sketch, Adobe XD и Zeplin.
Бонус
Если этих материалов оказалось мало, идите на Design Systems Repo — сайт с большой коллекцией статей, книг, докладов и инструментов по теме.
Добавляйте в комментариях годные материалы по теме, которые не вошли в подборку.
Netflix за 45 минут: Краткий рассказ о system design-интервью, чего ожидать + подборка полезных ссылок
В нашем блоге мы много пишем о построении карьеры в ИТ в разных странах, поиске работы, отличиях в процессе собеседований крупных компаний. В сегодняшней статье мы пойдем дальше и раскроем тему так называемых интервью по system design – это один из этапов собеседований известных технологических компаний, на котором отсеиваются многие кандидаты.
Итак, что такое system design и как пройти интервью такого типа?
Что это такое
В современном мире ИТ-системы стали крайне сложными. Каждая новая «фича» в продукте должна соответствовать множеству требований, всегда есть ограничения, между которыми приходится балансировать инженерам. То, что для обычного пользователя выглядит супер-просто – как например, отправка поискового запроса через Google или Яндекс – на самом деле несет в себе огромный уровень сложности.
Отличие интервью по проектированию систем от обычных технических собеседований в том, что здесь от кандидата ждут не четких ответов на вопросы по структурам данных и алгоритмам. Как правило задачи на этом этапе таковы, что для них не существует однозначно верного или неверного решения, они провоцируют мыслительный процесс – именно в нем и раскрывается кандидат.
Грубо говоря, интервью по system design – это что-то типа сессии мозгового штурма, где человек мыслит вслух, перебирает возможные решения и анализирует недостатки каждого из них в режиме реального времени. В этом трудность, но и главный плюс – мыслительный процесс здесь важнее результата. Как правило, такие интервью проводят крупные компании, разрабатывающие масштабные системы (FAANG и подобные).
Как же проходить интервью по проектированию систем? Ниже – несколько практических советов.
Чтобы попасть на интервью в компании, где инженеры действительно проектируют масштабные системы, используйте бота @g-jobbot. Это сервис, который найдет и бесплатно пришлет вам прямо в Telegram вакансии, которые подходят вам лучше всего – в том числе удаленная работа, в том числе с релокацией.
Самое важное – четко разобраться с задачей
Поскольку в интервью по system design самое важное – это то, как вы решаете задачу, крайне важно на самом первом этапе четко ее для себя уяснить. Бывший инженер Microsoft и Facebook в своей статье на практическом примере показывает важность этого факта.
Обычно задача звучит примерно как «Как бы вы спроектировали Netflix за 45 минут?» На первый взгляд, такие вопросы – полный бред. Подобные масштабные системы проектируют и реализуют сотни и тысячи инженеров на протяжение многих лет. Сорока пяти минут будет недостаточно даже чтобы начать обсуждать хоть один из компонентов такого продукта!
Как раз здесь очень важно понимание задачи. Нужно понять, чего хочет интервьюер. А он очевидно хочет, чтобы ему:
На каких-то из этих компонентов можно остановиться чуть подробнее – вам укажут на это, или нужно будет спросить. Обычно на интервью по проектированию систем даже код писать не нужно, а если вы сразу углубитесь в технические дебри, без того, чтобы сначала обсудить всю систему в целом – это будет минусом.
Задавайте уточняющие вопросы
Главная цель интервью по проектированию систем – дать кандидату возможность продемонстрировать свои знания и опыт. Как уже было сказано выше, нет правильных и неправильных ответов. Гораздо важнее не решить задачу как таковую – тем более, что это может быть просто невозможно за отведенное время – а показать свой мыслительный процесс во всей красе.
Поэтому крайне важно задавать вопросы, даже если вдруг получилось так, что вы четко знаете ответ на поставленный вопрос. В такой ситуации не нужно просто писать решение задачи, это противоречит целям интервью. Нужно забыть известное решение, и начать искать новое, по ходу дела задавая вопросы.
Это позволит интервьюеру понять сразу несколько вещей:
Вопросы могут быть такими:
Информации стало заметно больше, теперь уже можно думать о решении такой уточненной задачи.
Не пытайтесь произвести впечатление
Частая ошибка на интервью по проектированию систем – многие кандидаты думают, что раз на этом этапе нужно работать на уровне абстракции, то достаточно будет накидать в ходе разговора крутых терминов и названий модных технологий, чтобы сойти за эксперта. Так это не работает.
Во-первых, на интервью по системному дизайну наверняка будет не просто рекрутер, а инженер, который ищет человека себе в команду. Такому человеку недостаточно просто услышать слова вроде No-SQL, Mongo DB и Hadoop. Он явно начнет задавать уточняющие вопросы, и если у вас на самом деле нет особого опыта в работе с упоминаемыми технологиями, это все очень быстро станет ясно.
Будьте честными
Интервью по проектированию систем – это как раз тот случай, когда не страшно чего-то не знать наверняка. Поэтому ответы вида «Я с этой конкретной технологией никогда не работал, но знаю, что ее часто используют для решения подобных задач» – это хороший вариант. Помимо честности, здесь кандидат показал определенные знания и дал интервьюеру понять, с чего он начнет решение задачи (попробует известное решение, если не получится, будет «копать» дальше).
Помимо этого, не стоит выдавать свое решение за идеальное и не содержащее никаких минусов. Ограничения есть всегда, и опытный инженер-интервьюер это понимает как никто другой. Поэтому в ходе интервью стоит честно говорить о том, что в решение есть такие и такие узкие места, но их можно попробовать обойти таким и таким способом, использовать дополнительные инструменты или провести еще больше исследований.
Так станет понятно, что кандидат не просто придумывает решение и затем жестко пытается его продавить, но может быть гибким, вносить корректировки, и вообще адекватен и понимает, что всегда можно сделать лучше.
Вот прекрасный вымышленный диалог на интервью по проектированию систем, который показывает, как НЕ надо делать:
Интервьюер: Давайте сделаем свой Twitter. Как вы будете хранить твиты?
Кандидат: Я использую NoSQL-базу MongoDB.
Интервьюер: Почему не MySQL?
Кандидат: СУБД не масштабируются. Для нашей задачи точно понадобится MongoDB или BigTable.
Интервьюер: Но мы тут в Twitter храним все твиты в MySQL, все нормально масштабируется.
Кандидат: Ну, тогда, возможно, у вас просто еще пока недостаточно большой объем. По-настоящему огромные системы типа Facebook используют NO-SQL.
Интервьюер: Но Facebook также использует MySQL.
Кандидат: Хм, не знаю, как они его масштабируют, надо разобраться. Возможно, у них MySQL только на фронтенде, а на бэке BigTable.
Интервьюер: Неважно. А где будем хранить аналитические данные?
Кандидат: Очевидно, что в MySQL.
Интервьюер: Но не слишком ли их много для MySQL? Сейчас у нас для этого HDFS.
Кандидат: Похоже, что вы начали разрабатывать Twitter еще до того, как MongoDB достаточно развился. MongoDB может легко вместить и твиты и аналитические данные.
Интервьюер: Супер, спасибо за ваше время. Было приятно пообщаться.
Как подготовиться к интервью: полезные ссылки
Несмотря на то, что проектирование систем – один из наиболее нечетких этапов интервью, к нему можно подготовиться. В помощь кандидатам мы собрали список полезных материалов:
Что еще почитать
Чтобы попасть на интервью в компании, где инженеры действительно проектируют масштабные системы, используйте бота @g-jobbot. Это сервис, который найдет и бесплатно пришлет вам прямо в Telegram вакансии, которые подходят вам лучше всего – в том числе удаленная работа, в том числе с релокацией.
Создание дизайн системы (пошаговое руководство)
Мы, лаборатория Friendly Design, следим за трендами и исследованиями в области дизайна и около. Хотим поделиться с вами переводом статьи о том, что такое дизайн-система и как нужно подойти к ее разработке.
Дизайн система интерфейса представляет собой набор компонентов для проектирования, который помогает создавать качественный продукт, заложенный в концепции. Это также похоже на некий «инвентарь», который можно использовать для сбора ресурсов и использования их в вашем дизайне.
Дизайн система налаживает взаимодействие внутри продукта, помогая дизайнерам и разработчикам структурировать интерфейс продукта.
Также, органичная система пользовательского интерфейса учит пользователя интуитивно ориентироваться по всему продукту.
Лучший способ — это составить список всех различных шаблонов, цветов, стилей текста и паттернов, которые вы будете использовать в своем дизайне. Это должен быть четкий набор, который показывает все компоненты и функции, необходимые для создания продукта (веб-сайта или приложения). Дизайн системы пользовательского интерфейса требуют достаточно много времени и самоотверженности, что может утомить, но никогда не сдавайтесь!
Давайте начнем с мудборда и цветовой палитры, таким образом, вы зададите тему для своего дизайна и получите довольно хорошую картину о том, как будет выглядеть ваш дизайн. Ваш мудборд может состоять из изображений трендовых пользовательских интерфейсов, вдохновляющих продуктов или простых изображений, которые вам импонируют. Эта доска также поможет вам выбрать цветовую палитру. Помните, что выбор цвета также должен быть основан на ваших исследованиях. Перечислите основные и вторичные цвета и не также забывайте об оттенках этих цветов. Оттенки используются для различных элементов дизайн системы. Большинству интерфейсов понадобятся, как пример, следующие оттенки: