Войти
Каталог
курс
Дизайн-системы:
погружение
погружение
CONTENTED
Оптимизируйте дизайн и разработку для эффективной работы над продуктом
авторский курс Андрея Сундиева, развившего дизайн-системы в vk и intercom
5%
Онлайн-курс «Дизайн-системы: погружение»
скидка
вам нужна
дизайн-система,
если это про вас
неконсистентный дизайн продуктов
1
потерянное время на работу с ui
2
нехватка ресурсов на проработку ux
нет шаблонов с готовым кодом
3
4
бесконечный бэклог из задач по сбору интерфейса
5
про что курс
Про дизайн, который создает целостный пользовательский опыт и влюбляет клиентов в ваш продукт.
Про систему, которая объединяет дизайн и разработку, позволяя им говорить на одном языке и ускоряя процесс создания продукта
Про систему, которая объединяет дизайн и разработку, позволяя им говорить на одном языке и ускоряя процесс создания продукта
ПО ИТОГУ КУРСА ВЫ
научитесь разбираться в дизайн-системах
создадите план своего проекта
разработаете отдельные элементы системы
поймете, как инициировать работу внутри компании
сможете дать оценку эффективности своих внедрений
будете знать, как масштабировать созданную систему
Product designer в Intercom
с 2018
Product designer в Intercom. Запуск и развитие дизайн-системы. Перевод системы на распределенную модель, с целью ее развития, не имея выделенной команды
2016 - 2018
Шеф-дизайнер VK
Шеф-дизайнер VK. Работа над дизайн-системой и ее публичный запуск. Формулировка идеологии системы и проработка модели масштабирования. Запуск первой версии сайта дизайн-системы
2013 - 2016
Руководитель группы дизайна в Яндексе
Руководитель группы дизайна в Яндексе. Проведение редизайна Яндекс. Почты
AВТОР КУРСА
Андрей Сундиев
Ведущий дизайнер дизайн-систем Intercom и VK с опытом работы более 10 лет
Cооснователь проекта Design Systems Club. Со-организатор конференции Dribbble Meetup Russia и конкурса Russian Design Cup
для тех,
кто
Никогда не работал с дизайн-системами и хочет узнать больше
Собирается внедрять дизайн-систему у себя и хочет сразу сделать хорошо
Хочет развивать и масштабировать уже имеющуюся дизайн-систему
ПРОГРАММА ОБУЧЕНИЯ
4-недельный интенсив от евангелиста дизайн-систем в России Андрея Сундиева. В курс входят видеоуроки и практические занятия для самопроверки. По итогу вы сформируете необходимый уровень знания для самостоятельного проектирования и внедрения дизайн-системы
Курс: Figma
научитесь собирать
прототипы сайтов
и мобильных приложений
научитесь собирать
прототипы сайтов
и мобильных приложений
Цели вашей дизайн-системы
Погружаемся и учимся отличать дизайн-систему от UI-kit, разбираться в типах дизайн-систем.
Получите понимание, какие именно проблемы сможет решать дизайн-система в вашей компании, поставите приоритетные цели и на год и определитесь с главной траекторией развития своей системы
Получите понимание, какие именно проблемы сможет решать дизайн-система в вашей компании, поставите приоритетные цели и на год и определитесь с главной траекторией развития своей системы
Части системы. Визуальный язык
Учимся формулировать принципы системы, создавать доступную цветовую палитру, разбираться в методах построения типографической сетки, применять базовые принципы accessibility.
Проверяем и объединяем созданные элементы визуального языка системы, закладывая основу для «единого источника правды»
Проверяем и объединяем созданные элементы визуального языка системы, закладывая основу для «единого источника правды»
Части системы. Компоненты и документация
Закрепляем понимание связки дизайн → документация → код.
Собираем простую версию UI-kit.
Генерируем с помощью инструмента сайт системы и описываем 1-2 компонента вашей дизайн-системы
Собираем простую версию UI-kit.
Генерируем с помощью инструмента сайт системы и описываем 1-2 компонента вашей дизайн-системы
Инструменты, внедрение, масштабирование
Проходим внедрение системы на практике.
Проводим аудит текущего интерфейса, который ляжет в основу вашей презентации по внедрению системы
Проводим аудит текущего интерфейса, который ляжет в основу вашей презентации по внедрению системы
Подготовка к защите перед руководством
В заключительном задании готовим презентацию для защиты своей концепции перед командой и руководством.
В итоге вы сможете презентовать проект своей компании и подготовитесь к внедрению дизайн-системы в жизнь
В итоге вы сможете презентовать проект своей компании и подготовитесь к внедрению дизайн-системы в жизнь
более 90% студентов,
довольных курсом
Количество полезных знаний просто зашкаливает! У меня такого не было даже в креативном университете Лондона. Ребята-наставники и IT support вообще заслуживают отдельных, потому что подобную отзывчивость...
Contented помог мне войти в мир графического дизайна, и за это я бесконечно благодарна всей команде школы. Поменять профессию требует сил и времени, это путь полный сомнений. Contented помог мне распределить...
Лучшая платформа! Мне безумно повезло получить новую профессию именно здесь! Ребята постоянно совершенствуются, работают с лучшими, с профессионалами своего дела, дают реальные кейсы и очень ценные знания. Даже сейчас, когда я получаю рабочие задачи…
Хочу выделить профессиональных наставников (даже записывают видео-разбор): всегда можешь обратиться за помощью и задать вопросы, спикеров — рассказывают понятно и подробно, дают ссылки на рефы...
Алиса Макаренко
дизайнер продукта в «сберспасибо»
дизайнер продукта orderry
UX-дизайнер в inDriver
ведущий UX-аналитик в БФТ
как мы учим
Задания для самопроверки
Этот курс предназначен для самостоятельного прохождения без внешней проверки домашних заданий. Вы сможете проверить, насколько хорошо усвоили материал, выполняя практические задания после видеоуроков
Удобный формат
онлайн-обучение
Каждую неделю вы смотрите короткие видеоуроки и выполняете домашние задания
Учеба занимает в среднем 4–8 часов в неделю. При необходимости можно сдвигать дедлайны или даже «заморозить» обучение, например, на время отпуска
часто задаваемые
вопросы
Работать с дизайн-системами можно как в крупных компаниях вместе с командой, так и в более маленьких проектах. Актуальность этого решения не зависит от масштабности проекта, а зависит от задач.
В случае, когда вы работаете над проектом совместно с командой, а ваше обучение оплачено компанией, мы предоставляем доступ к материалам для всей команды (за исключением участия на практических занятиях).
Поскольку количество мест в группе ограничено, если вам необходимо отложить обучение, вы сможете пользоваться всеми материалами курса, но без проверки домашних заданий. В любом случае вы всегда можете обратиться к координатору курса и в индивидуальном порядке получить нашу помощь по этому вопросу.
В рамках обучения предусмотрены каникулы, вы сможете перезагрузиться и отдохнуть.
В рамках обучения предусмотрены каникулы, вы сможете перезагрузиться и отдохнуть.
Существует два вида дизайн-систем — с открытым и закрытым кодом.
Если система с открытым кодом, вы можете использовать наработки (шрифты, кнопки, иконки) и менять их под себя. Есть много популярных систем, например Material Design от Google или Fluent, разработанная Microsoft.
Дизайн-системы с закрытым кодом создают специально для компании или продукта. Доступ к материалам обычно есть только у сотрудников.
Если система с открытым кодом, вы можете использовать наработки (шрифты, кнопки, иконки) и менять их под себя. Есть много популярных систем, например Material Design от Google или Fluent, разработанная Microsoft.
Дизайн-системы с закрытым кодом создают специально для компании или продукта. Доступ к материалам обычно есть только у сотрудников.
Существует два вида дизайн-систем — с открытым и закрытым кодом.
Если система с открытым кодом, вы можете использовать наработки (шрифты, кнопки, иконки) и менять их под себя. Есть много популярных систем, например Material Design от Google или Fluent, разработанная Microsoft.
Дизайн-системы с закрытым кодом создают специально для компании или продукта. Доступ к материалам обычно есть только у сотрудников.
Если система с открытым кодом, вы можете использовать наработки (шрифты, кнопки, иконки) и менять их под себя. Есть много популярных систем, например Material Design от Google или Fluent, разработанная Microsoft.
Дизайн-системы с закрытым кодом создают специально для компании или продукта. Доступ к материалам обычно есть только у сотрудников.
Дизайн-система — набор правил и ограничений. Включает:
- руководства по стилю — цветам, типографике, иллюстрациям, иконкам
- UI-кит — кнопки, шаблоны страниц
- библиотеки шаблонов
- макеты элементов и их реализацию в коде
- описание принципов работы для дизайнера и разработчика
Чтобы описать дизайн-систему, расскажите о каждом элементе структуры. Объясните, для чего он нужен, где и как использовать.
UI-кит — набор элементов для разработки пользовательского интерфейса. В него входят кнопки, списки, иконки, таблицы, формы. А также правила использования цветов, эффектов, иллюстраций, шрифтов и их размеров.