Дизайн-система
Сочетает в себе содержимое более упрощённых баз знаний UX/UI-проектирования:
- UI kit — визуальные элементы интерфейса;
- фреймворк — если элементы хранятся в виде кода, позволяя разработчикам пользоваться библиотекой готовых компонентов;
- гайдлайн — правила и рекомендации по работе с элементами, шаблонами и макетами (работа с сеткой, цветами, иконками, как и когда заданные параметры можно модифицировать).
Готовые элементы интерфейса чаще всего хранятся в виде кода (что усиливает эффект автоматизации).
По сути, дизайн-система для проектировщиков интерфейса — это энциклопедия, а для остальных разработчиков— инструкция. Чем масштабнее проектируемая система или многочисленнее команда разработчиков, тем острее стоит потребность в наличии дизайн-системы. Дизайн-система чаще всего создаётся в единственном варианте для всей компании, чтобы унифицировать производство всех цифровых продуктов организации.
UX/UI-дизайн: что это такое и как ему обучиться
UX/UI-дизайн — это процесс создания инструментов для удобного и привлекательного взаимодействия пользователя с цифровым продуктом или сервисом. Он включает в себя две основные составляющие: UI-дизайн и UX-дизайн, разницу между которыми мы объясним далее.
Что такое UI-дизайн?
- создание дизайна элементов интерфейса;
- разработку стилей и цветовой гаммы;
- создание иконок и графических элементов;
- работу с типографикой;
- создание анимаций и эффектов.
Принципы хорошего UI-дизайна — это простота и минимализм, цветовая гармония, читаемость, консистентность и интуитивность.
Что такое UX-дизайн?
UX-дизайн (User Experience Design) — это процесс создания удобного и приятного для пользователя взаимодействия с продуктом или сервисом. UX-дизайнеры работают над тем, чтобы пользователь чувствовал себя комфортно и мог легко выполнять задачи.
Задачи UX-дизайнера включают:
- исследование потребностей и проблем пользователей,
- создание пользовательских сценариев,
- проектирование информационной архитектуры,
- разработку прототипов и тестирование их на пользователях,
- оптимизацию процесса взаимодействия пользователя с продуктом.
Принципы хорошего UX-дизайна — это ориентирование на пользователя, простота, наглядность, доступность и эмоциональная привлекательность.
Задачи UX/UI-дизайнеров
UX/UI-дизайнеры работают над созданием продукта, который будет удобен и приятен для пользователя. Они учитывают как внешний вид продукта (UI), так и его функциональность и удобство использования (UX).
Задачи UX/UI-дизайнера включают исследование потребностей и проблем пользователей, создание пользовательских сценариев, проектирование информационной архитектуры, разработку дизайна элементов интерфейса, создание прототипов и тестирование их на пользователях, работу над улучшением процесса взаимодействия пользователя с продуктом.
Принципы хорошего UX/UI-дизайна — это центрирование на пользователе, простота, наглядность, доступность и эмоциональная привлекательность.
Будущая профессия
UX/UI дизайнер
Mobile разработчик
Frontend разработчик
Fullstack разработчик
Разработчик приложений
Как стать UX/UI-дизайнером?
Чтобы стать UX/UI-дизайнером, нужно изучить основы дизайна, включая цветовую гармонию, типографику и композицию, а также основы программирования и веба. Все эти навыки и компетенции вы можете приобрести в Школе дизайна НИУ ВШЭ, на профиле бакалавриата «UX/UI и frontend-разработка».
Обучение начинается с основ проектирования фирменного стиля компании или бренда. Студент осваивает создание абстрактного бренда, над которым он будет работать в течение всего первого года обучения, и проектирует разработку малого фирменного стиля для него. В малый фирменный стиль входят: графические элементы, логотип, подбор типографических решений. Малый фирменный стиль экспонируется на фирменной документации и носителях, соответствующих созданному бренду. Для освоения базовых навыков в рамках технологий дизайна студенты изучают инструменты растровой и векторной графики.
Помимо digital-дизайна, студенты изучают web-разработку и основы языков программирования. В процессе обучения они делают обзор web-технологий, узнают, что такое хостинг, деплой и тестирование, осваивают архитектуру приложений, сервисы для разработки интерфейсов и прототипирования.
«На первом году обучения мы работаем с лонгридами и лэндингами, далее мы начинаем работу со сложными корпоративными системами, включая сложную обработку данных на клиенте, работу с приложениями (как десктопными, так и мобильными). Начинаем с курса HTML и CSS, дальше Type Script, Java и Java Script. Потом — NODE JS , React JS, React Native, Swift, Kotlin. Третий год обучения посвящен мобильным платформам полностью», — рассказывает куратор направления Антон Ларин.
На втором курсе студенты разрабатывают корпоративный сайт, используя Figma, а также изучают создание промо-сайтов и максимального эмоционального представления информации.
Третий курс обучения посвящён разработке казуальной мобильной игры для Android или iOS.
Подробная информация о дисциплинах, которые изучают студенты в каждом модуле на курсе «UX/UI и frontend-разработка», содержится в «Карте креативных компетенций».
Пройдя полный курс обучения, вы создадите портфолио с разработанными проектами, которые помогут вам продемонстрировать свои навыки и опыт при поиске работы в IT-компании. Кураторы Школы дизайна помогут вам присоединиться к сообществу UX/UI-дизайнеров и получить ценные советы и рекомендации от опытных профессионалов.
Дизайн-система: что это, для чего и как создать
Я рад вернуться к вам, дорогие читатели сообщества, и поделиться опытом и знаниями.
Тема дизайн-систем, казалось бы, уже рассмотрена со всех сторон: можно найти множество статей, постов, докладов и других материалов. Несмотря на это, у каждого, кто сталкивается с этим термином, возникает множество вопросов. Я постараюсь подробно ответить на главные из них:
- Что такое дизайн-система?
- Для чего она нужна?
- Как её создать?
Что такое дизайн-система?
Давайте разбираться по порядку. Дизайн-система представляет собой совокупность трех сущностей:
- Визуальный язык – то, что мы видим.
- Framework – библиотека визуального языка, его код.
- Guidelines – правила, как должно все выглядеть и каким образом применяться.
Можно считать, что дизайн-система является отдельным продуктом внутри любого IT-продукта.
Визуальный язык
Визуальная составляющая дизайн-системы включает в себя множество элементов, основные из которых:
- Цвета
- Шрифты
- Пространство
- Формы объектов
- Иконки
- Изображения
- Взаимодействия
- Анимации
- UI-компоненты
- Звуки
Задача визуального языка – передать ценности бренда потребителю. Например, чтобы передать домашнюю атмосферу, можно использовать теплые тона и соответствующие изображения. Чтобы передать какой-то другой характер бренда, например, строгость и честность, использовать определенные шрифты и формы.
Какой образ приходит вам в голову, когда слышите или видите названия таких банков, как Альфа-Банк, ВТБ, Сбербанк, Тинькофф и других? Какие эмоции вы испытываете? Визуальный язык является одним из фактором того, каким мы запомним тот или иной продукт.
Framework
Фреймворк – это, по сути, код визуального языка. Благодаря нему все визуальные элементы можно взять из библиотеки и легко применить во всех своих продуктах.
Давайте представим простую ситуацию. Итак, у нас есть одна кнопка «Оплатить счет». И тут нам нужно поставить точно такую же кнопку для другой страницы, только называться она будет «Перевести деньги».
Что, если у нас фреймворка нет? Тогда данную кнопку необходимо создать заново, пусть даже путем копирования существующего. А если мы решили изменить цвет кнопки, то нам придется вручную менять цвет во всех подобных кнопках? А если таких кнопок десятки, сотни или больше?
Поэтому нужна централизованная библиотека элементов визуального языка, которая позволит создавать и переиспользовать каждую деталь продукта.
Guidelines
Чтобы все, кто взаимодействуют с дизайн-системой, «разговаривали на одном языке», необходимо выработать правила.
Например, один дизайнер считает, что кнопка недостаточно яркая и нужно изменить оттенок ближе к малиновому. Другой уверен, что кнопка должна быть темно-красного оттенка. В то же время разработчики уже неделю ругаются на тему идеального кода для реализации формы поиска. Все это ведет к хаосу в компании и продукте.
Казалось бы, условностей много. Как описать все так, чтобы не запутаться в правилах? Опишите только то, что нужно для конкретного элемента:
- Что это за элемент?
- Где он используется?
- Какие задачи решает?
Также для UI-компонентов можно описывать анатомию: обозначьте структуру и все параметры, из которых они строятся.
Таким образом, правила применения элементов дизайн-системы позволяют упорядочить процесс работы для всех. Они задают определенные рамки для полета фантазии и формируют понимание, что любое изменение дизайн-системы может затронуть множество экранов и сценариев взаимодействия пользователя в продукте. Это развивает чувство ответственности на каждом участке работы над любой, даже самой мелкой, деталью продукта.
Для чего нужна дизайн-система?
Как и для любого IT-продукта, важно ответить на вопрос: для чего нужна дизайн-система? Или, как говорят некоторые коллеги по цеху – «чтобы что»?
Ответ на него даст понять ценность продукта. Отчасти ее уже можно увидеть из того, что я описывал выше. Но давайте разложим по полочкам и рассмотрим глубже.
Автоматизация
Автоматизация – это самая очевидная ценность. Дизайн-система позволит автоматизировать процессы и выиграть время на другие задачи.
Например, дизайнеры смогут сформировать библиотеку компонентов в графическом редакторе Figma и применять их во всех необходимых макетах. Разработчики, в свою очередь, просто используют ранее реализованные компоненты из фреймворка.
Итеративность
Возможность наследования и автоматического применения изменений в элементах дизайн-системы является мощным инструментом для продуктовой команды. Вы можете легко внедрить косметические или даже серьезные правки в одном месте. Таким образом шаг за шагом можно улучшать продукт бесконечно.
Однако любое внесение изменений – это большая ответственность. Поэтому любая коррекция должна быть сознательной и аргументированной.
Консистентность
Консистентность говорит о том, что объекты и сущности, которые мы используем в продукте и которые выполняют одну и ту же работу, должны стремиться к унификации, стремиться быть похожими.
Когда мы пользуемся в продукте похожими функциями, он становится привычным и удобным: мы знаем интуитивно, как работает и выглядит кнопка, где она расположена.
Синхронизация
Все элементы в IT-продукте должны обладать единым языком общения на основе четких правил.
С ними новые члены продуктовой команды выполняют задачи в рамках продукта, не теряя времени на раскачку: дизайнеры создают новые элементы на основе заданного визуального языка, а разработчики точно знают, каким образом их реализовать и использовать.
Больше времени на UX
Эта ценность является, по сути, совокупностью всех предыдущих преимуществ. Ручная работа с визуальным языком, на которую раньше тратилось много времени, становится максимально автоматизированной.
После создания дизайн-системы можно выделить больше времени на исследование и детальнее спроектировать user flow сценариев продукта (да, бывает, флоу не все делают и просто фигачат). Кстати, я писал подробно о user flow в предыдущей статье.
Скорость прототипирования
Дизайн-система позволяет быстро собрать прототип из готовых элементов и проверить гипотезу. Это, в свою очередь, экономит бюджет проекта и дает быстрые результаты.
Недостатки дизайн-системы
Все вышеописанное можно отнести к плюсам дизайн-систем, но у них, конечно, есть минусы.
Во-первых, дизайн-система – это дорого. Нужны ресурсы для ее создания и непрерывной поддержки. Дизайн-система должна развиваться вместе с продуктом. В противном случае между ними возникнет явная рассинхронизация: продукт будет развиваться, а дизайн-система будет постепенно отставать от продукта и терять свою актуальность.
Если бренд сформулировал новые правила визуального и вербального взаимодействия с клиентами, то визуальный язык дизайн-системы необходимо адаптировать. Дизайн-система должна идти в ногу с бизнесом и нести правильную идеологию бренда, развиваясь и трансформируясь вместе с ним.
Однако хочется отметить, что поддержка дизайн-системы в какой-то степени упрощается благодаря использованию современных инструментов, например, редактора Figma. У него достаточно функционала, чтобы дизайнеры могли с комфортом формировать и развивать UI-kit. К тому же, с помощью Figma можно легко перенять опыт коллег по цеху, используя готовые библиотеки
Как создать дизайн-систему?
Есть множество подходов для создания дизайн-системы. Я рекомендую рассмотреть атомарную систему, главным преимуществом которой является наследуемость. Пожалуй, тема атомарной дизайн системы может потянуть на отдельную статью. Про это можно почитать в переводе статьи Брэда Фроста (Brad Frost) «Atomic Web Design».
Примеры того, как сделаны дизайн системы:
- https://www.lightningdesignsystem.com/
- https://atlassian.design
После создания дизайн-системы немаловажно разобраться в том, как ее внедрить в практику компании. Во второй статье я расскажу о том, как пошагово выстроить процесс внедрения дизайн-системы в любой компании.
Я надеюсь, что каждый почерпнул для себя ценное из статьи. А я еще раз убедился в том, что работа над статьей структурирует знания и мотивирует на дополнительное изучение.
Перевод «design-» на русский
Volkswagen R GmbH is the competence center for design- and performance-oriented products of the Volkswagen brand.
Volkswagen R GmbH является центром компетенций для продуктов марки Volkswagen, ориентированных на дизайн, мощность и динамику.
Responsive Design- Google has made things clear.
Адаптивный дизайн — Google ясно дал понять.
Design- like to adjust as buyer request.
З. Дизайн любит отрегулировать как запрос покупателя.
Website design-: Nigerians are becoming more aware of the benefits of having an online presence.
Дизайн сайта: Россияне все больше осознают преимущества присутствия в Интернете.
Regular architect magazines never write a word about this- but what it’s about is a fantastic street design- which I’m now documenting before it completely disappears.
Обычные архитектурные журналы никогда не напишут об этом ни слова, но здесь потрясающий дизайн, Который я сейчас документирую, пока он окончательно не исчез.
Graphics design-: Ever since Online introduced the Online targeted ads scheme, which allows advertisers to float their ad banners in specific sections of the forum, there has been an increased demand for graphics designers.
Графический дизайн: с тех пор, как вконтакте представила схему таргетированной рекламы вконтакте, которая позволяет рекламодателям размещать свои рекламные баннеры в определенных разделах форума, спрос на графических дизайнеров возрос.
Western Design- Historically is characterized by Symmetrical, Asymmetrical, Horizontal, and Vertical Style of Arrangements.
Западный дизайн исторически характеризуется: симметричным, асимметричным, горизонтальным, вертикальным стилем.
I like the design- very unusual.
Мне очень нравится дизайн: он довольно необычный.
We create well-made and innovative products both design- and function wise.
Они создают хорошо сделанную и инновационную продукцию, как дизайнерскую, так и функциональную.
Speed, security, durability and great design- you can have it all.
Скорость, безопасность, надежность и превосходный дизайн — вы можете получить все это.
Pressional design- Come with rubber splint which can protect for weak or over stressed wrist and minimizes the risk of injury.
Приходите с резиновой шиной, которая может защитить слабый или напряженный запястье и минимизирует риск получения травмы.
The aircraft is about the size of a Boeing 747 and is equipped with four turboprop engines of Chinese design-.
Самолет размером примерно с «боинг-747» и оснащен четырьмя турбовинтовыми двигателями китайской разработки.
To put it into perspective, 94% of internet users stopped trusting sites with poor design- so there’s simply no room for compromises anymore.
Чтобы поместить это в перспективу, 94% интернет-пользователей перестали доверять сайтам с плохим дизайном — так что компромиссов просто больше нет.
Creativity and design- delivering winning products that achieve the desired results
Творчество и дизайн- разработка выигрышной продукции, которая позволяет добиться желаемых результатов
Design- Different people look for different qualities in a car.
Разные люди хотят видеть в своем автомобиле разные качества.
Keyline design- Has anyone tried it?
Косметика «Эмолиум» — кто-нибудь пробовал?
The legacy of WDD 2012 lives on in the Finnish capital as the design- driven city seeks to find sustainable solutions for the future.
Наследие 2012 года и сегодня живет в финской столице — посредством дизайна город стремится к внедрению экологически устойчивых решений.
Our next new design- could be yours!
Следующая публикация Было ваше — станет нашим!
Architecture — You will be designing more than buildings — you’ll be design- ing whole cities and worlds.
Архитектура — вы будете не просто проектировать здания — вы будете проектировать целые города и миры.
As the Mission moves towards the transition, a considerable number of facilities and premises will be closed, resulting in reduced requirements for engineering staff to carry out design- and maintenance-related functions.
По мере перехода Миссии к переходному этапу будет закрываться значительное количество объектов и помещений, что приведет к сокращению потребностей в осуществлении инженерно-техническим персоналом функций, связанных с проектированием и техническим обслуживанием.
Возможно неприемлемое содержание
Примеры предназначены только для помощи в переводе искомых слов и выражений в различных контекстах. Мы не выбираем и не утверждаем примеры, и они могут содержать неприемлемые слова или идеи. Пожалуйста, сообщайте нам о примерах, которые, на Ваш взгляд, необходимо исправить или удалить. Грубые или разговорные переводы обычно отмечены красным или оранжевым цветом.