Дизайн-системы: UI-киты, CSS-фреймворки, гайдлайны // Дизайн в цифровой среде

# 21. Дизайн-системы

UI-киты, CSS-фреймворки, гайдлайны и другие компоненты дизайн-систем, которые помогут проектировать интерфейсы

UI-киты
Фреймворки
Гайдлайны платформ
Корпоративные дизайн-системы
Платформа Tilda Publishing

Создание интерфейсов — невероятно сложный процесс. Чтобы сайтом или приложением было легко пользоваться, дизайнер должен быть погружён в тему UI и UX, понимать особенности человеческой психологии, работать с архитектурой проекта и доводить до совершенства множество небольших деталей.

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

часть 1

UI-киты

Что такое UI-кит / Кто применяет UI-киты в работе / Элементы UI-кита / Зачем использовать UI-кит / Где найти готовый набор

Что такое UI-кит

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

Обычно готовый кит представляет собой графику в слоях для работы в Photoshop или Sketch. В документе хранятся элементы для дизайна интерфейсов, которые можно использовать в неизменном виде или редактировать их и подстраивать под стиль проекта.

Пример набора элементов из Flat UI-кита:

Например, существует множество iOS UI-китов, которые созданы для помощи в разработке приложений под iPhone, iPod touch, и iPad:

iOS 10 iPhone GUI от Facebook Design

iOS Design Kit от Great Simple Studio

Можно каждый раз начинать работу над сайтом или мобильным приложением с чистого листа. А можно выбрать из UI-кита готовое меню, кнопки, текстовые блоки и форму для подписки и отредактировать. Во втором случае работа займёт значительно меньше времени.

Элементы из Adobe XD UI kit

UI kit by Alex Vanderzon

Детали из Android Lollipop Material Design UI kit

Элементы из VXPOSE UI Style Guide by Udara

Кто применяет UI-киты в работе

Компании, которые разрабатывают один или несколько продуктов

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

Дизайнеры или дизайн-студии

И у дизайнеров, и у целых дизайн-студий есть собственный почерк. Чтобы сохранить узнаваемость визуального стиля, они могут собрать свой UI-кит, а затем применять его в работе над проектами разных заказчиков.

Дизайнер, у которого мало опыта

Работа с UI-китом — это отличная практика для начинающего дизайнера. Обычно он покупает готовый кит, разбирается в библиотеке и учится компоновать элементы.

Элементы, которые входят в UI-кит

Содержание UI-китов отличается в зависимости от того, над каким проектом работает дизайнер. Обычно 90% любого кита — это элементы управления, то есть кнопки, поля для ввода, предупреждения. Остальное — правила их использования, включающие типографику, цвета, отступы — всё то, что поможет создать собственный визуальный язык.

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

Элементы фирменного стиля

Модульная сетка

Количество колонок, строк и отступы между ними

Типографика

Шрифты, размеры заголовков и основного текста, оформление списков и цитат, выравнивание текста

Цвета

Основные и вспомогательные оттенки, готовые палитры

Интервалы

Поля, отступы, границы элементов

Изображения

Иконки, иллюстрации

Визуальные формы

Глубина, высота, тени, закругления углов, текстуры

Анимация

Полоса загрузки, реакция на действия пользователя, появляение элементов на странице

Звук

Саунд-эффекты и музыкальное сопровождение

Элементы интерфейса

Кнопка и группы кнопок

Чекбоксы

Формы с полями ввода

Подсказки

Иконки

Меню

Уведомления

Пагинация

Попапы

Предупреждения
(алерты)

Переключатели

Вкладки и хлебные крошки

Таблицы

Ярлыки и лейблы

Галереи

Прогресс-бары

У каждого элемента из UI-кита может быть несколько состояний, которые помогают пользователям понять интерфейс.

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

Пример разных состояний полей ввода из дизайн-системы компании СКБ Контур:

С кнопкой тоже не всё просто: она может быть неактивной, пока поля незаполнены, или переходить в режим ожидания, когда информация отправляется на сервер после нажатия. Успешную передачу данных тоже нужно продемонстрировать — поставить кнопку с сообщением успеха, или скрыть форму, или поставить всплывающий попап с сообщением.

Состояния кнопок из дизайн-системы Рамблера Ratio

Состояния кнопок из дизайн-системы Контур.Гайд

Проблема в том, что таких состояний для нотификаций, предупреждений, меню и прочих элементов очень много, и все их необходимо продумывать. Они повторяются от проекта к проекту и не являются чем-то уникальным. Но без них интерфейс будет непонятным и неудобным. UI-киты нужны для решения этой проблемы: дизайнер не отрисовывает десятки однотипных элементов, а пользуется готовыми решениями.

Зачем использовать UI-кит

Экономия времени

Отрисовка всех деталей для проекта занимает меньше времени.

UI-кит оптимизирует работу и позволяет дизайнерам даже в жёстких временных рамках создавать красивые интерфейсы. Что важнее, они могут перенаправить усилия с рисования на разработку более важных вещей — структуры и концепции проекта.

Удешевление проекта

Работа с китом не требует много усилий для поддержки интерфейса.

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

Единообразие

Дизайн-система помогает сохранить преемственность от одной страницы к другой.

Проблема унификации может возникнуть, когда над крупным проектом трудится команда дизайнеров, и каждый — со своим уровнем, опытом и чувством прекрасного. Бывает так, что даже самых подробной постановки задачи недостаточно, чтобы у разных специалистов получился похожий дизайн страниц. Например, в ситуации, когда команда разрабатывает несколько форм — регистрации, оплаты и авторизации. C UI-китом дизайнерам не придётся каждый раз отрисовывать разные кнопки.

Проверка гипотез

UI-кит — отличный инструмент для прототипирования.

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

Удобство командной работы

У всех работников будет доступ к актуальному набору.

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

Смена стиля

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

С UI-китом, особенно если он представляет собой элементы с прописанными CSS-стилями, дизайн легко перенастроить при ребрендинге. Чтобы изменить внешний вид интерфейса, нужно только заменить один UI-кит на другой.

Упрощение процесса проектирования

Не придётся изобретать велосипед.

Представьте, что вы уже разрабатывали интерфейсы для десктопа, но впервые приступаете к дизайну мобильного приложения. И сталкиваетесь с необходимостью принимать решения: как должно выглядеть меню, как сделать форму, чтобы её было удобно заполнять со смартфона. И подобных мелочей десятки! Не факт, что вы с ними не справитесь, но точно потратите много сил. Плюс, вы можете предложить решение, которое отличается от того, что уже знакомо пользователям.

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

Где найти UI-кит

Готовый UI-кит можно купить или скачать бесплатно на специализированных ресурсах для дизайнеров. Cписок сайтов, где можно подыскать качественный набор:

Библиотека Ui8

Библиотека шаблонов, китов, иконкок, шрифтов и тем. Обычно киты платные: в среднем, они стоят около 20 $. Но в категории Freebies можно найти и скачать качественный шаблон бесплатно.

Ui8 отличается строгим отбором материалов для публикации на сайте и подробным представлением информации.

Great Simple

Студия Great Simple разрабатывает и продаёт собственные киты. Есть UI-наборы для мобильных устройств, выполненные в соответствии с гайдлайнами iOS и в стиле Material Design, а также киты для веб-интерфейса — Administrator, Odessa, Stamp.

Creative Market

Площадка, где дизайнеры, художники и фотографы продают свои работы. Стоимость готовых китов варьируется от 5 до 100 с лишним долларов. Смотрите представленные UI-киты в категории Graphics > Web-elements.

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

Sketch App Sources

Sketch App Sources предлагает бесплатные наборы для Sketch. При этом, под китом здесь имеются в виду не только элементы интерфейса, а вообще всё, что может пригодиться при работе над сайтом — иконки, мокапы, шаблоны лендингов и сайтов.

Market Designmodo

В категории UI-kit периодически появляются новые проекты. Платные можно приобрести за 20−40 $, но есть и бесплатные наборы в разделе Free Goods.

Кроме китов на Designmodo можно найти и другие инструменты для дизайна — шрифты, мокапы, иконки.

часть 2

Фреймворки

Чем фреймворки отличаются от UI-китов / Как работать с Bootstrap

Что такое фреймворк

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

Фреймворки похожи на UI-киты: они также содержат готовые элементы для создания веб-страниц, помогают ускорить процесс создания сайта, выдержать проект в едином стиле. Но если с UI-китом вы сделаете только макет страницы в форматах Sketch или Photoshop, то фреймворк поможет быстро сверстать готовый для публикации веб-проект. Обычно фреймворк содержит библиотеку CSS и JavaScript-файлов, которые используются в оформлении html-страницы.

Примеры фреймворков на getbootstrap.com, getskeleton.com, semantic-ui.com

Сверстать страницу с фреймворком легче: у вас уже есть готовая сетка и спроектированные кнопки, формы или меню с подобранными шрифтами и гармоничными пропорциями. Элементы адаптивные, поэтому сайт будет хорошо выглядеть на смартфонах или планшетах и корректно отображаться в современных браузерах.

Популярные фреймворки

Bootstrap

UIkit

Semantic UI

Foundation Zurb

AngularJs Material

Skeleton

Amazium

Вulma

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

Популярная сфера применения CSS-фреймворков — создание MVP (англ. minimum viable product — минимально жизнеспособный продукт) для проверки гипотез и быстрого старта.

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

Например, разработчики хотят сделать собственный движок для тестов. На первом этапе им не нужен дизайнер и уникальный продукт. Их первостепенная задача — сделать сервис с максимально простым интерфейсом, который будет работать и выполнять конкретную функцию. Фреймворки вроде Bootstrap помогут стартовать: разработчики, используя готовое оформление, смогут потратить больше времени на логику проекта.

Как работать с фреймворком Bootstrap

На примере Bootstrap разберём механику и особенности работы в фреймворке.

Bootstrap — интерфейсный фреймворк для разработки адаптивных веб-проектов в стиле плоского дизайна, изначально созданный в качестве внутренней библиотеки Twitter.

Bootstrap содержит готовые инструменты для вёрстки — шаблоны для кнопок, навигации, предупреждений и других элементов интерфейса. Оформление уже прописано в CSS-классах, поэтому вам нужно только сделать разметку сайта и подключить стили.

Чтобы научиться работать с Bootstrap достаточно внимательно изучить документацию фреймворка. В ней есть реальные примеры, фрагменты кода, шаблоны и ссылки на инструменты. Официальную документацию можно прочитать в русском переводе.

Сейчас можно скачать две официальные версии фреймворка: Bootstrap 3 и Bootstrap 4. Новая версия пока находится в стадии беты, но ей уже можно пользоваться.

Из чего состоит Bootstrap

В фреймворк входит сетка из двенадцати колонок, шрифты, графические значки, выпадающие меню, навигационные панели, предупреждающие сообщения и другие настраиваемые элементы. Рассмотрим основные компоненты Bootstrap.

Сетка

Макеты в Bootstrap строятся из строк и столбцов, в которые вы размещаете весь контент. В системе разметки — 12 колонок, которые автоматически масштабируются под разные устройства.

Bootstrap спроектирован по принципу Mobile First: веб-страницы, созданные на фреймворке, автоматически адаптируются под разное разрешение мониторов, не требуют много ресурсов и высокой скорости подключения. Поэтому их любят поисковики и ставят выше в выдаче.

Типографика

Включает стили для красивого оформления разных типов текста — заголовков, основного текста, цитат, списков, контактной информации. Предусмотрены и стили для выделений — ссылок, жирного или курсивного начертания, второстепенного текста.

Оформление лаконичное и простое. Например, вот так выглядит система заголовков от h1 до h6.

Таблицы

На Bootstrap удобно делать таблицы — простые и адаптивные. Для этого нужно добавить класс .table в табличный тег. Есть несколько вариантов оформления.

Простая таблица. С отступами и горизонтальными разделителями.

Зебра. Чередуются тёмные и светлые строки.

Таблица с границами. Позволяет обрамлять все стороны таблицы и ячейки тонкими линиями.

С курсором. Строка таблицы реагирует на наведение курсора.

Сокращённая таблица. Более компактный вариант с урезанными отступами.

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

Контекстные классы с в таблицах

Формы

Различные классы позволяют оформить вертикальную, горизонтальную или строчную форму. В Bootstrap можно создать как простой контейнер (например, для ввода ника на сайте), так и более сложные — с выпадающими списками, загрузкой файлов и выбором из нескольких вариантов.

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

Кнопки

В Bootstrap используется семь видов кнопок: стандартная, основная, успех, информация, предупреждение, опасность и ссылка.

Для каждой из этих кнопок можно задать состояние:

Активное — при нажатии на кнопку затемняется фон, появляется тёмный ободок и внутренняя тень. Оно помогает понять, что действие совершено и пользователю сайта нужно подождать обратной реакции.

Заблокированное — прозрачность в 50% показывает, что кнопка неактивна. Это значит, что до нажатия пользователь должен совершить ещё какие-то действия, скажем, заполнить все поля формы.

Кнопки можно использовать не только по отдельности, но и формировать группы — ставить несколько кнопок в одну линию. Для них есть возможность настроить дополнительные параметры: использовать малые и большие размеры, добавить вложенность, вставить иконки и отображать состояние загрузки.

Навигация

Навигация в Bootstrap реализуется двумя способами — навигационными кнопками, расположенными в строку или вертикально, и меню с выпадающими элементами, вкладками и кнопками.

Навигационные кнопки.

Вкладки с выпадающим меню.

Навигационная панель.

Навигация по умолчанию адаптивная: на мобильных и планшетах пункты автоматически сжимаются или заменяются иконкой. Но для корректной работы нужно подключить JavaScript-расширение — bootstrap.js. Оно же позволяет добавить стиль поведения для кнопок и чекбоксов и быстро переключаться между разными вкладками.

Метки и значки

Это строчные элементы, которые располагаются на одном уровне с другими компонентами.

Метки. Привлекают внимание к важной информации на странице, например, предупреждают об ошибке или сообщают, что на на сайте появилось что-то новенькое. В Bootstrap они выделяются ярким цветом (с теми же классами, что и в кнопках — default, primary, success, info, warning и danger).

Значки. Работают по тому же принципу, что и метки. Но в отличие от них, они обычно содержат не текстовую, а числовую информацию и чаще всего используются в навигационных панелях. Значками можно отметить новое сообщение, количество запросов в друзья, непрочитанное уведомление.

JavaScript-компоненты

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

Коллекция иконок

В формате шрифта Glyphicon Halflings в Bootstrap включён сет из 200 символов-иконок, которые можно использовать на своём сайте бесплатно.

Как подключить Bootstrap на сайт

Существует несколько способов подключить Bootstrap на свой сайт — в зависимости от ваших потребностей и уровня опыта.

Скачивание архива

1. Зайдите на официальный сайт Bootstrap.
2. Скачайте архив.
3. Распакуйте архив и перенесите его в папку с сайтом.
4. В html-разметке проставьте ссылки на стили и скрипты.

Если у вас уже есть опыт работы с фреймворками и вы точно знаете, какие стили и плагины вам понадобятся для работы, предварительно зайдите в раздел «Настроить и скачать» и выберите нужные файлы. Так вы получите собственный, облегчённый вариант сборки.

Подключение через CDN

1. Перейдите на сайт BootstrapCDN.
2. Скопируйте ссылки на минимизированную версию фреймворка (отдельно для CSS-стилей и JavaScript-файлов).
3. Добавьте ссылки в html-разметку. Архив скачивать не нужно, содержимое фреймворка будет подключаться автоматически.

часть 3

Гайдлайны платформ

Что такое гайдлайн / Material Design / iOS Human Interface Guidelines

Что такое гайдлайн

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

Здесь можно провести простую аналогию: когда вы приезжаете в новую страну, то чтобы пообщаться с местными, вам нужно понимать их язык, во Франции — французский, а в Японии — японский. У платформ, например, у Android и iOS, тоже есть свои языки — визуальные. И гайдлайны в этом случае будут чем-то вроде словаря.

Рекомендации обычно касаются не только внешнего вида, но по большей части — пользовательского опыта. Люди уже знают, пусть и не всегда осознанно, как их смартфоны реагируют на разные действия — открыть вкладку, закрыть, перейти на новый экран, увеличить изображение. Поэтому разработчики приложений должны учитывать и особенности разных ОС, и самих устройств: правильно использовать камеру, голосовое управление или отслеживание местоположения. Гайдлайны сильно облегчают им задачу.

Киты и фреймворки содержат уже готовые к использованию элементы — в виде векторной графики или кода. Гайдлайны тоже могут включать небольшой набор рекомендованных элементов, но это, скорее, приятное дополнение. Главное в гайдлайне — это требования к стороннему продукту.

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

В качестве примера рассмотрим два важных гайдлайна, которые используются в мобильной разработке — Material Design от Google и Human Interface Guidelines от Apple.

Material Design

Подход Material Design развился из идеи плоского дизайна, в котором все детали изображаются в максимально упрощённом, схематичном виде, чтобы не отвлекать пользователей интерфейса на декоративные элементы и быстрее загружать страницы.

Но плоский дизайн существует в двумерной плоскости, а в Material Design появляется третье измерение — глубина. Трёхмерность создаётся с помощью теней, которые создают уровни и показывают — что важно в конкретный момент, а что второстепенно.

Принципы Material Design

Тактильность

Дизайнеры Google даже в интерфейсах предлагают ориентироваться на реальный мир: использовать объекты, похожие на обычную бумагу и чернила, учитывать законы физики, показывать глубину светом. Пользователям легче понять устройство интерфейса, когда элементы располагаются на разных слоях и отбрасывают тени.

Печатный дизайн в цифровой среде

Элементы печатного дизайна — это типографика, сетки, пространство, масштаб, цвет и изображения. Google предлагает использовать уже подобранные параметры из гайдлайна, чтобы правильно структурировать графику в интерфейсе и привлекать внимание пользователей к важной информации.

Понятная анимация

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

Составляющие материального дизайна

Материальная среда

Материальный дизайн использует свойства материальных поверхностей в Material UI. Поверхности на экране двигаются в трех измерениях и взаимодействуют как в материальном мире.

Тактильные поверхности — это листы цифровой бумаги, у которой есть особенности. Как и обычная бумага, это твёрдый, непрозрачный материал, который занимает заданное место на пространстве экрана. Но он умеет менять свои размеры, сгибаться, накладываться на другие листы, отбрасывать тени и отражать свет.

Читать главу про материальную среду в гайде Material Design

Макет и расположение элементов

По принципам Материального дизайна интерфейс должен быть интуитивным и предсказуемым, последовательным и отзывчивым. Макеты Material Design визуально сбалансированы и адаптированы под размер экрана и его ориентацию. Все размеры и размеры приравниваются к сетке в 8dp. Более мелкие компоненты, такие как иконки и типографика могут измеряться в 4dp.

Density-independent Pixels (dp)

Абстрактная единица измерения, позволяющая приложениям выглядеть одинаково на различных экранах и разрешениях.

Читать главу про макет в гайде Material Design

Навигация

Навигация в материальном дизайне разделяется на 3 направления:

Горизонтальная навигация (Lateral navigation) позволяет передвигаться между экранами одинакового уровня и иерархии.

Навигация, помогающая двигаться вперед (Forward navigation) включает в себя навигацию, помогающую во время вертикального скролла вниз; последовательную навигацию через последовательность экранов (например, при регистрации и онбординге); прямую навигацию с главной страницы приложения на втутренние.

Обратная навигация (Reverse navigation) помогает передвигаться и возвращаться назад через иерархию приложения.

Читать главу про навигацию в гайде Material Design

Цвета

В материальном дизайне используется два типа цветов — основные и акцентные. Их можно использовать и при создании иллюстраций, и при разработке палитры бренда. Google предлагает использовать 500 различных оттенков, уже собранные в группы. Цветовые палитры Material Design можно скачать архивом на сайте гайдлайна.

Читать главу про цвета в гайде Material Design

Типографика

Использование большого количества разных размеров и стилей текста может разрушить макет. Поэтому Google предлагает пользоваться готовой типографской шкалой с ограниченным набором стилей, которые хорошо работают в сетке макета.

Типографские стили Material Design продуманы для разных групп языков, с учётом особенностей символов в разных странах.

Читать главу про типографику в гайде Material Design

Анимация, работающая по законам физики

Гравитация, трение, реакция на приложенную силу — всё это позволяет рассчитать, как должны двигаться объекты в пространстве экрана.

Например, в реальном мире чтобы сдвинуть предмет с места, необходимо приложить к нему силу. Так же и в интерфейсе: чтобы сдвинуть один кусочек цифровой бумаги и открыть следующий, пользователь прикладывает усилия и преодолевает сопротивление свайпом.

Реальные объекты движутся с разной скоростью, в зависимости от их веса и трения с поверхностью. Поэтому элементы интерфейса начинают движение и останавливаются с небольшой задержкой. При этом анимация довольно быстрая, чтобы не заставлять пользователя ждать дольше, чем это необходимо. Такие мелочи помогают создать ощущение реальности происходящего.

Читать главу про анимацию в гайде Material Design

Саша Ермоленко

Head of Design Department в Rambler&Co

Материалы из гайдлайнов платформ очень часто используются в работе с корпоративными системными решениями в дизайне. Например, дизайн-система Рамблера использует правила анимации из Material Design.

Компоненты

Помимо рекомендаций в гайдлайне присутствуют готовые решения и элементы интерфейса, которые разработчики стороннего продукта применяют в своем проекте.

Чтобы увидеть примеры использования Material Design в жизни, откройте любой продукт Google — от поисковика до карт. Компания активно использует этот стиль на всех экранах (десктопа, смартфонов, планшетов, часов, телевизоров) и призывает других дизайнеров создавать продукты по материал-гайдлайнам.

Состояния элементов в Material Design

Интерфейс Material Design

iOS Human Interface Guidelines

Human Interface Guidelines — обширная система правил, инструментов и фреймворков, который помогают создавать приложения для всех систем Apple — MacOS, iOS, watchOS и tvOS. Все эти гайдлайны объединены общими принципами. В основе дизайна Apple — минималистичность, функциональность и отзывчивость к действиям пользователя.

Принципы Human Interface Guidelines

Чистота

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

Внимание

Задача дизайнера — помогать людям понимать контекст, а не отвлекать их внимание второстепенными украшательствами. Поэтому градиенты, тени, индикаторы стоит использовать в минимальных количествах, чтобы интерфейс получался лёгким и понятным.

Глубина

Визуальная иерархия слоёв и их реакция на действия помогут пользователям понять текущее положение. Плавные переходы и отзывчивость к жестам обеспечат ощущение глубины в навигации.

Гайдлайны iOS часто обновляются — в соответствии с выходом новой продукции. Сейчас вы можете изучить нововведения iOS 12 и проектировать приложения уже с учётом новых особенностей. Например, на айфонах больше нет физической кнопки и управлять приложением нужно жестами. В гайдлайне описано, каких жестов нужно избегать, чтобы они не перекликались с системными и не вводили пользователей в заблуждение.

Дополнительные инструменты собраны в разделе Apple UI Design Resources. Здесь вы сможете найти готовые инструменты для дизайнеров и разработчиков, в том числе шаблоны, UI-киты и плагины. Например, если делаете игру, скачайте GameKit с элементами интерфейса, которые заставляют пользователей снова и снова возвращаться в игру. Или подключите Siri к приложению с помощью SiriKit. Полный список инструментов — на официальном сайте гайдлайна.

часть 4

Корпоративные
дизайн-системы

Зачем разрабатываются корпоративные системы / Примеры дизайн-систем

Зачем разрабатываются корпоративные системы

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

Гайдлайн и UI-кит — только части корпоративной дизайн-системы. С их помощью нельзя сразу приступить к разработке продукта. Все элементы приходится верстать заново каждый раз. Это приводит к новым багам и ошибкам дизайна. Когда разные продукты делают разные команды, число ошибок только возрастает. Такой подход к разработке стоит дороже, продолжается дольше и мучительнее.

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

Саша Ермоленко

Head of Design Department в Rambler&Co

Важно понимать, что дизайн-система это не UI-Kit, Brand book или CSS фреймворк по отдельности, это комплексное решение в работе с интерфейсами цифровых продуктов, где архитектура, инструменты и технологии подбираются в соответствии с задачами, которые должна решать система.

В работе с интерфейсами сама дизайн-система не может выступать самоцелью, прежде всего это инструмент, который должен делать жизнь продуктовых команд проще, а не сложнее.

Как и UI-кит, корпоративная система должна содержать набор элементов интерфейса в фирменном стиле. Как в фреймворках, элементы должны быть выполнены в коде, чтобы разработчики пользовались библиотекой готовых компонентов. Как и гайдлайны, корпоративная дизайн-система должна содержать правила и рекомендации: как работать с сеткой, какие цвета и элементы использовать, в каких случаях заданные параметры можно менять.

Разработка дизайн-системы — сложная и большая работа. Мало просто создать правила, элементы и шаблоны прототипов. Разработчикам должно быть удобно этим пользоваться, поэтому необходимо хранить все компоненты в одном месте. Для своих сотрудников компании создают сайты и приложения корпоративных дизайн-систем. Некоторые из них можно найти в открытом доступе. Отечественные дизайн-системы собраны на сайте designsystemsclub.ru.

Примеры дизайн-систем

Контур.Гайд

Контур.Гайд: guides.kontur.ru

Цвета

Иконки для интерфейса

Компания СКБ Контур разрабатывает онлайн-сервисы для бухгалтерии и бизнеса: Эльбу, Фокус, Экстерн, Диадок и другие. Чтобы все продукты были узнаваемыми и удобными, компания разработала единые гайдлайны для проектировщиков.

Гайдлайны Контура выложены в открытый доступ, и изложенные принципы можно свободно использовать в своей работе. Разработчики просят лишь не копировать внешний вид элементов интерфейса — это фирменный стиль компании.

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

Дизайн-система Альфа-Банка

Сайт дизайн-системы Альфа-Банка design.alfabank.ru

У Альфа-банка 4 больших цифровых продукта: 2 приложения мобильного банка и 2 интернет-банка для бизнеса и физических лиц. Над ними непрерывно работают несколько разных команд, которые добавляют новые функции, тестируют идеи, улучшают опыт использования.

Дизайн-система Альфа-Банка разработана по принципу mobile first — в первую очередь все внимание уделяется мобильной версии продукта. Главные правила: делать как можно больше элементов в коде, все тестировать и добавлять в библиотеку только проверенные элементы.

Принципы, библиотека компонентов, цвета, иконки, типографика и паттерны находятся в открытом доступе. Ознакомиться с ними можно на сайте design.alfabank.ru.

Дизайн-система Мегафона

Описание процесса создания системы Мегафона на Medium

Мобильный оператор Мегафон обновил стиль и позиционирование. Параллельно с этим дизайнеры занялись формированием собственной дизайн-системы и рассказали о результатах проделанной работы в блоге на Medium.

У компании обновились цвета и правила их использования, шрифты, стиль иконок и сетки. Так новый бренд стал более ярким и дружелюбным.

Дизайн-система компании состоит из трёх частей: гайдлайна с принципами, которые отражают связь с брендом, UI-кита с библиотекой компонентов для дизайнеров и React-библиотеки для разработчиков. Команда проектировщиков учитывала, что системой будут пользоваться разные сервисы Мегафона, поэтому условно поделила все элементы на две категории: базовые — те, что используются во всех проектах, и уникальные — созданные для конкретного продукта.

Ratio — дизайн-система Рамблера

Дизайн-система Рамблера Ratio

Рамблер состоит из 20 проектов — сайтов, медиа, сервисов. Дизайн-система создавалась с целью упорядочить их и привести их к единому визуальному оформлению, чтобы пользователи ассоциировали все продукты с брендом Рамблера.

Система разрабатывалась с прицелом на будущее, поэтому правила разрабатывались так, чтобы в будущем их можно было дополнять, а продукты — совершенствовать.

Сейчас дизайн-система Рамблера включает философию бренда, визуальный язык (сетка, палитра, цветовые схемы, микроанимации, разные виды контента), гайдлайн с правилами, определяющими порядок работы с интерфейсами, структурированный UI-кит и библиотеку компонентов React+JSS для разработчиков.

Дизайн-система Mail.Ru Group

Paradigm — Дизайн-система Mail.Ru Group

Дизайн-система Mail.Ru Group находится в процессе доработки, обновления и унификации продуктов. На ней уже работают медиа-проекты, мобильный веб и частично productivity-сервисы, постепенно подключаются новые продукты. Разработан стиль пиктограмм и иллюстраций, стандартизируются промо-письма и промо-сайты.

Сейчас дизайн-система состоит из идеологии, переменных (цвета, размеры, границы, тени), типографики, изображений, сетки, гайдлайнов с правилами, определяющими порядок работы с интерфейсами, принципов дизайна и базовых элементов интерфейса.

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

часть 5

Платформа
Tilda Publishing

UI-кит Тильды / Особенности работы в редакторе

Платформа Tilda Publishing — это система, которая состоит из большой библиотеки UI-элементов, фреймворка с CSS-стилями/JavaScript-плагинами и удобного редактора. Всё это позволяет создавать сайты без помощи программистов или дизайнеров.

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

Библиотека блоков Тильды

Тильда содержит один из самых объёмных наборов UI-элементов: сейчас в коллекции 450+ блоков, и постоянно появляются новые.

Каждый блок — это сбалансированная группа элементов, объединенная общим смыслом и отвечающая на один вопрос. Например, блок «Услуги компании» отвечает на вопрос «Что мы предлагаем?». С помощью комбинации этих блоков можно быстро создать веб-проект.

У каждого блока есть настройки внешнего вида и возможность загрузить свой контент — изображения и текст.

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

Библиотеке блоков в Тильде

Чтобы нужные блоки было легко найти, они разбиты по категориям.

Обложка. Начальные экраны с заголовками, подзаголовками, кнопками, формами и изображением во всю ширину экрана на фоне.

О проекте. Блоки для описания особенностей проекта: только с текстовой информацией, галереей изображений или кнопками для социальных сетей.

Заголовок. Комбинации разных размеров заголовков с дополнительными элементами — описаниями, подзаголовками и надзаголовками.

Текстовый блок, Ключевая фраза, Прямая речь. Готовые варианты для оформления обычного текста и для выделения важной информации в виде цитат, прямой речи или ключевых фраз.

Изображение и Галерея. Блоки для представления визуального контента — фотографий, иллюстраций и графики.

Видео. Блоки для вставки видеоплееров с Youtube, Vimeo, Coub в одну или несколько колонок.

Преимущества. Комбинации фотографий, текста и иконок в формате списков.

Колонки. Сочетания текста и изображений в несколько колонок.

Разделитель. Дополнительные отступы, линии и модификаторы цвета, чтобы наглядно разделить смысловые части.

Список страниц. Карточки, слайдеры и оглавления для перехода на другие страницы сайта.

Плитка и ссылка. Красиво оформленные ссылки в виде карточек с описаниями и картинками на фоне.

Форма и кнопка. Кнопки и формы приёма данных с полями для заполнения. Форма может быть очень простой, например, поле для ввода и элекронной почты с кнопкой «Подписаться», но есть и усложнённые варианты — с чекбоксами, радиокнопками, загрузкой файлов, масками, выпадающими списками.

Магазин. Карточки продуктов с описаниями и кнопками, блок для подключения платёжных систем, всплывающие окна с товарами.

Команда. Блоки для оформления персональной информации о сотрудниках компании или лекторах на конференции.

Отзывы. Доступно несколько вариантов оформления: в виде слайдера, текста с фотографиями в несколько колонок или отзыва с фоновым изображением.

Расписание и Этапы. Таймлайны, таблицы и колонки для вёрстки расписаний или наглядного представления процесса.

Услуги. Карточки, списки с изображениями, колонки с иконками и другие варианты для самых разных сфер бизнеса.

Тарифы. Представление цен на услуги в формате карточек или таблиц.

Партнёры. Сетка из логотипов и дополнительная информация о партнёрах.

Другое. Инструменты Тильды, которые не вошли в остальные категории. Например, блок для вставки html-кода, якорные ссылки, индикатор прокрутки или загрузки страницы или эффект печатной машинки для заголовков

Меню. Для создания навигации есть выбор из меню с логотипом и пунктами, гамбургера, вкладок, фиксированной панели при скролле и других.

Контакты. Контактная информация может быть дополнена логотипом, фоновым изображением, иконками или картой.

Соцсети. Кнопки для Facebook, Вконтакте, Twitter и других социальных сетей в стандартном и фирменном оформлении, выровненные по центру, зафиксированные в углу или появляющиеся при прокрутке.

Подвал. Футеры со ссылками, кнопками для социальных сетей, контактной информацией.

Редактор Zero Block для создания собственного дизайна с нуля

Если у вас появилась идея, которую не получается реализовать с помощью готовых блоков, спроектируйте собственный блок во встроенном редакторе с нуля.

В редакторе нет никаких ограничений: можете располагать элементы как угодно, задавать блоку любую длину и помещать неограниченное число элементов.

Интерфейс редактора Zero Block

Коллекция готовых шаблонов

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

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

If a building becomes architecture, then it is art

Особенности работы в редакторе

Основа работы в Тильде — блочный механизм редактирования, который действует по принципу «кликнул — перетащил». Заходите в конструктор, выбираете в библиотеке нужный блок и кликаете. Элемент появляется на странице, и вам остаётся наполнить его своим контентом и, когда это необходимо, подкрутить настройки.

Понятный интерфейс

Чтобы начать работу в Тильде, не потребуется читать мануалы и громоздкие инструкции: поначалу система будет давать подсказки, но даже без них принцип работы понятен интуитивно. Когда нужный блок в библиотеке выбран, вам нужно проверить две вкладки: в «Контенте» добавить нужный текст и иллюстрации, а в «Настройках» задать оформление.

Гибкие настройки дизайна

У каждого блока есть тонкие настройки, благодаря которым вы сможете настроить внешний вид каждого элемента: типографику, отступы, анимацию, выравнивание, цвет, размер.

Не нужно разбираться в коде

Платформа автоматически генерирует код сайта — c html-разметкой, готовыми CSS-стилями и контентом. Но чтобы настраивать параметры отдельных элементов под себя, не придётся копаться в самом коде: все действия совершаются в удобном редакторе.

Хотите изменить размер шрифта? Заходите в настройки сайта и укажите нужный кегль. Нужно поменять цвет кнопки и добавить обводку? Снова отправляетесь в настройки и там устанавливаете нужный оттенок. Все изменения видны сразу, поэтому вы можете на ходу оценить, удачное ли вы подобрали решение.

Как сделать сайт на Тильде

Зарегистрируйтесь на сайте и выберите нужный тариф.
Откройте в списке подходящий шаблон или начните работу с чистого листа. Из библиотеки выберите необходимые UI-элементы: меню из 3−5 пунктов, обложку, заголовки, изображения и галереи, кнопки, формы и футер. Наполните их текстом и иллюстрациями и отредактируйте оформление.
Выберите в настройках сайта шрифт или подключите свой.
Нажмите кнопку «Опубликовать».
Подключите собственный домен (возможность доступна на тарифах Personal и Business).

Подведем итоги

Дизайн-системы помогают сберечь время, деньги и нервы при проектировании дизайна продукта.

UI-кит — набор готовых решений пользовательского интерфейса. Это все те элементы, которые помогают пользователям взаимодействовать с сайтом или приложением.

Кто применяет UI-киты в работе. Компании, которые разрабатывают один или несколько продуктов; дизайнеры или дизайн-студии; дизайнеры, у которых мало опыта.

Элементы, которые входят в UI-кит. Обычно 90% любого кита — это элементы управления: кнопки, поля для ввода, предупреждения. Остальное — правила их использования, включающие типографику, цвета, отступы, то есть всё то, что поможет создать собственный визуальный язык.

Зачем использовать UI-кит. Экономия времени, удешевление проекта, единообразие, проверка гипотез, удобство командной работы, смена стиля, упрощение процесса проектирования.

Где найти UI-кит. Готовый UI-кит можно купить или скачать бесплатно на специализированных ресурсах для дизайнеров.

Фреймворк — это и платформа для разработки программ, и библиотека для верстальщика.

Гайдлайн — правила и рекомендации от разработчиков платформы. Они помогают сторонним пользователям создавать продукты, которые органично впишутся в существующую систему.

Material Design. Подход развился из идеи плоского дизайна, в котором все детали изображаются в максимально упрощенном, схематичном виде, чтобы не отвлекать пользователей интерфейса на декоративные элементы и быстрее загружать страницы.

Составляющие материального дизайна: материальная среда, макет и расположение элементов, навигация, цвета, типографика, анимация, работающая по законам физики.

iOS Human Interface Guidelines — обширная система правил, инструментов и фреймворков, которые помогают создавать приложения для всех систем Apple. В основе дизайна Apple — минималистичность, функциональность и отзывчивость к действиям пользователя.

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

Платформа Tilda — это система, которая состоит из большой библиотеки UI-элементов, фреймворка с CSS-стилями/JavaScript-плагинами и удобного редактора. Всё это позволяет создавать сайты без помощи программистов или дизайнеров. Тильда содержит один из самых объемных наборов UI-элементов: сейчас в коллекции 500+ блоков и постоянно появляются новые.

Особенности работы в редакторе. Основа работы в Тильде — блочный механизм редактирования. Заходите в конструктор и выбираете в библиотеке нужный блок. Элемент появляется на странице, и вам остаётся наполнить его своим контентом и, когда это необходимо, подкрутить настройки. Понятный интерфейс, гибкие настройки дизайна, не нужно разбираться в коде.

Введение

Задача и идея

Дизайн-исследование и фокусировка

Оcновы графического дизайна

Прототипирование

Контент

Дизайн

Редактор Zero Block для создания собственного дизайна с нуля

Коллекция готовых шаблонов

Понравилась лекция? Купите годовую подписку на Тильду и получите курс бесплатно!

Также в этом курсе