Дизайн системы и компоненты
UI-кит — набор готовых решений пользовательского интерфейса. Это могут быть кнопки, поля ввода, «хлебные крошки», меню, переключатели, формы — все те элементы, что помогают пользователям взаимодействовать с сайтом или приложением.
Обычно готовый кит представляет собой графику в слоях для работы в Photoshop или Sketch. В документе хранятся элементы для дизайна интерфейсов, которые можно использовать в неизменном виде или редактировать их и подстраивать под стиль проекта.
Пример набора элементов из Flat UI-кита:
Например, существует множество iOS UI-китов, которые созданы для помощи в разработке приложений под iPhone, iPod touch, и iPad:
Можно каждый раз начинать работу над сайтом или мобильным приложением с чистого листа. А можно выбрать из UI-кита готовое меню, кнопки, текстовые блоки и форму для подписки и отредактировать. Во втором случае работа займёт значительно меньше времени.
Кто применяет UI-киты в работе
Компании, которые разрабатывают один или несколько продуктов
В этом случае, как правило, в компании есть команда из нескольких дизайнеров и разработчиков. Собственный UI-кит помогает скоординировать их действия таким образом, чтобы дизайн получился единообразным на разных страницах одного проекта или во всех продуктах компании.
Дизайнеры или дизайн-студии
И у дизайнеров, и у целых дизайн-студий есть собственный почерк. Чтобы сохранить узнаваемость визуального стиля, они могут собрать свой UI-кит, а затем применять его в работе над проектами разных заказчиков.
Дизайнер, у которого мало опыта
Работа с UI-китом — это отличная практика для начинающего дизайнера. Обычно он покупает готовый кит, разбирается в библиотеке и учится компоновать элементы.
Элементы, которые входят в UI-кит
Содержание UI-китов отличается в зависимости от того, над каким проектом работает дизайнер. Обычно 90% любого кита — это элементы управления, то есть кнопки, поля для ввода, предупреждения. Остальное — правила их использования, включающие типографику, цвета, отступы — всё то, что поможет создать собственный визуальный язык.
Прежде чем собирать собственный UI-кит, составьте список всех необходимых элементов. Например, готовый набор может включать следующие компоненты.
У каждого элемента из UI-кита может быть несколько состояний, которые помогают пользователям понять интерфейс.
Возьмём для примера простую форму с несколькими полями ввода и кнопкой. На первый взгляд может показаться, что это простой элемент. Однако при его создании дизайнеру приходится учитывать множество нюансов. Нужно показать пользователю несколько состояний: какие поля обязательны для заполнения, а какие нет, в какой строке допущена ошибка, а какую пользователь пропустил.
Пример разных состояний полей ввода из дизайн-системы компании СКБ Контур:
С кнопкой тоже не всё просто: она может быть неактивной, пока поля незаполнены, или переходить в режим ожидания, когда информация отправляется на сервер после нажатия. Успешную передачу данных тоже нужно продемонстрировать — поставить кнопку с сообщением успеха, или скрыть форму, или поставить всплывающий попап с сообщением.
Проблема в том, что таких состояний для нотификаций, предупреждений, меню и прочих элементов очень много, и все их необходимо продумывать. Они повторяются от проекта к проекту и не являются чем-то уникальным. Но без них интерфейс будет непонятным и неудобным. UI-киты нужны для решения этой проблемы: дизайнер не отрисовывает десятки однотипных элементов, а пользуется готовыми решениями.
Зачем использовать UI-кит
UI-кит оптимизирует работу и позволяет дизайнерам даже в жёстких временных рамках создавать красивые интерфейсы. Что важнее, они могут перенаправить усилия с рисования на разработку более важных вещей — структуры и концепции проекта.
Этот пункт отчасти связан с предыдущим. Компании не придётся нанимать большой штат дизайнеров. Ведь дизайн, по сути, уже готов: нужно лишь выбрать элементы, скомпоновать их в макете и настроить под конкретный бренд.
Проблема унификации может возникнуть, когда над крупным проектом трудится команда дизайнеров, и каждый — со своим уровнем, опытом и чувством прекрасного. Бывает так, что даже самых подробной постановки задачи недостаточно, чтобы у разных специалистов получился похожий дизайн страниц. Например, в ситуации, когда команда разрабатывает несколько форм — регистрации, оплаты и авторизации. C UI-китом дизайнерам не придётся каждый раз отрисовывать разные кнопки.
Часть пробных вариантов неизбежно отправляется в корзину, поэтому дизайнеры делают схематичные наброски, на которые не нужно тратить много времени и сил. Но UI-киты позволяют создавать макеты с высокой точностью: вы сможете посмотреть, как дизайн будет выглядеть в жизни, сразу отметить его слабые места и быстро исправить. С UI-китом можно быстро собрать два, три варианта и протестировать их.
Если в компании вы используете единый набор деталей интерфейса, к которому есть доступ у всех сотрудников, новичкам будет проще адаптироваться. Даже на начальном этапе в их работе будет намного меньше ошибок.
С UI-китом, особенно если он представляет собой элементы с прописанными CSS-стилями, дизайн легко перенастроить при ребрендинге. Чтобы изменить внешний вид интерфейса, нужно только заменить один UI-кит на другой.
Представьте, что вы уже разрабатывали интерфейсы для десктопа, но впервые приступаете к дизайну мобильного приложения. И сталкиваетесь с необходимостью принимать решения: как должно выглядеть меню, как сделать форму, чтобы её было удобно заполнять со смартфона. И подобных мелочей десятки! Не факт, что вы с ними не справитесь, но точно потратите много сил. Плюс, вы можете предложить решение, которое отличается от того, что уже знакомо пользователям.
UI-киты помогут создавать удобный дизайн по общепринятым правилам, которые люди уже научились считывать. Это не значит, что вы не можете усовершенствовать дизайн — в случаях, когда уверены, что нашли более элегантное и удобное решение. Но для начала лучше посмотреть, вдруг что-то классное уже изобрели до вас.
Где найти UI-кит
Готовый UI-кит можно купить или скачать бесплатно на специализированных ресурсах для дизайнеров.
Что такое фреймворк
Фреймворк — это и платформа для разработки программ, и библиотека для верстальщика. В рамках этой темы мы поговорим про вторую разновидность — CSS-фреймворки.
Фреймворки похожи на UI-киты: они также содержат готовые элементы для создания веб-страниц, помогают ускорить процесс создания сайта, выдержать проект в едином стиле. Но если с UI-китом вы сделаете только макет страницы в форматах Sketch или Photoshop, то фреймворк поможет быстро сверстать готовый для публикации веб-проект. Обычно фреймворк содержит библиотеку CSS и JavaScript-файлов, которые используются в оформлении html-страницы.
Сверстать страницу с фреймворком легче: у вас уже есть готовая сетка и спроектированные кнопки, формы или меню с подобранными шрифтами и гармоничными пропорциями. Элементы адаптивные, поэтому сайт будет хорошо выглядеть на смартфонах или планшетах и корректно отображаться в современных браузерах.
Эти фреймворки отличаются не только дизайном, но и набором элементов в библиотеке — есть небольшие библиотеки для простых сайтов, а есть обширные системы для крупных проектов. Одни легко освоить новичку, а с другими придётся долго разбираться. Поэтому к выбору фреймворка надо подходить индивидуально.
Популярная сфера применения CSS-фреймворков — создание MVP (англ. minimum viable product — минимально жизнеспособный продукт) для проверки гипотез и быстрого старта.
В компании с помощью фреймворков создаются сервисы для внутреннего пользования — личный кабинет, небольшие приложения. Независимым разработчикам такие инструменты позволяют не заморачиваться с оформлением и быстрее запустить продукт.
Например, разработчики хотят сделать собственный движок для тестов. На первом этапе им не нужен дизайнер и уникальный продукт. Их первостепенная задача — сделать сервис с максимально простым интерфейсом, который будет работать и выполнять конкретную функцию. Фреймворки вроде Bootstrap помогут стартовать: разработчики, используя готовое оформление, смогут потратить больше времени на логику проекта.
На примере Bootstrap разберём механику и особенности работы в фреймворке.
Bootstrap — интерфейсный фреймворк для разработки адаптивных веб-проектов в стиле плоского дизайна, изначально созданный в качестве внутренней библиотеки Twitter.
Bootstrap содержит готовые инструменты для вёрстки — шаблоны для кнопок, навигации, предупреждений и других элементов интерфейса. Оформление уже прописано в CSS-классах, поэтому вам нужно только сделать разметку сайта и подключить стили.
Чтобы научиться работать с Bootstrap достаточно внимательно изучить документацию фреймворка. В ней есть реальные примеры, фрагменты кода, шаблоны и ссылки на инструменты. Официальную документацию можно прочитать в русском переводе.
Сейчас можно скачать две официальные версии фреймворка: Bootstrap 3 и Bootstrap 4. Новая версия пока находится в стадии беты, но ей уже можно пользоваться.
Макеты в Bootstrap строятся из строк и столбцов, в которые вы размещаете весь контент. В системе разметки — 12 колонок, которые автоматически масштабируются под разные устройства.
Bootstrap спроектирован по принципу Mobile First: веб-страницы, созданные на фреймворке, автоматически адаптируются под разное разрешение мониторов, не требуют много ресурсов и высокой скорости подключения. Поэтому их любят поисковики и ставят выше в выдаче.
Включает стили для красивого оформления разных типов текста — заголовков, основного текста, цитат, списков, контактной информации. Предусмотрены и стили для выделений — ссылок, жирного или курсивного начертания, второстепенного текста.
Оформление лаконичное и простое. Например, вот так выглядит система заголовков от h1 до h6.
На Bootstrap удобно делать таблицы — простые и адаптивные. Для этого нужно добавить класс .table в табличный тег. Есть несколько вариантов оформления.
Простая таблица. С отступами и горизонтальными разделителями.
Зебра. Чередуются тёмные и светлые строки.
Таблица с границами. Позволяет обрамлять все стороны таблицы и ячейки тонкими линиями.
С курсором. Строка таблицы реагирует на наведение курсора.
Сокращённая таблица. Более компактный вариант с урезанными отступами.
В таблицах можно использовать контекстные классы. Они помогают выделить цветом отдельные строки или ячейки, чтобы показать пользователям сайта её текущее состояние. Так, вы сможете указать на успешное действие, предупредить о моментах, которые требуют внимания или сообщить об опасном, негативном состоянии.
Различные классы позволяют оформить вертикальную, горизонтальную или строчную форму. В Bootstrap можно создать как простой контейнер (например, для ввода ника на сайте), так и более сложные — с выпадающими списками, загрузкой файлов и выбором из нескольких вариантов.
Чтобы пользователям было легче заполнять форму, в Bootstrap продуманы состояния (успех, предупреждение и ошибка), подсказки, чек-боксы или радиокнопки для выбора одного или нескольких параметров. Вручную можно изменять размеры элементов формы.
В Bootstrap используется семь видов кнопок: стандартная, основная, успех, информация, предупреждение, опасность и ссылка.
Для каждой из этих кнопок можно задать состояние:
- Активное — при нажатии на кнопку затемняется фон, появляется тёмный ободок и внутренняя тень. Оно помогает понять, что действие совершено и пользователю сайта нужно подождать обратной реакции.
- Заблокированное — прозрачность в 50% показывает, что кнопка неактивна. Это значит, что до нажатия пользователь должен совершить ещё какие-то действия, скажем, заполнить все поля формы.
Кнопки можно использовать не только по отдельности, но и формировать группы — ставить несколько кнопок в одну линию. Для них есть возможность настроить дополнительные параметры: использовать малые и большие размеры, добавить вложенность, вставить иконки и отображать состояние загрузки.
Навигация в Bootstrap реализуется двумя способами — навигационными кнопками, расположенными в строку или вертикально, и меню с выпадающими элементами, вкладками и кнопками.
Навигация по умолчанию адаптивная: на мобильных и планшетах пункты автоматически сжимаются или заменяются иконкой. Но для корректной работы нужно подключить JavaScript-расширение — bootstrap.js. Оно же позволяет добавить стиль поведения для кнопок и чекбоксов и быстро переключаться между разными вкладками.
Это строчные элементы, которые располагаются на одном уровне с другими компонентами.
Метки. Привлекают внимание к важной информации на странице, например, предупреждают об ошибке или сообщают, что на на сайте появилось что-то новенькое. В Bootstrap они выделяются ярким цветом (с теми же классами, что и в кнопках — default, primary, success, info, warning и danger).
Значки. Работают по тому же принципу, что и метки. Но в отличие от них, они обычно содержат не текстовую, а числовую информацию и чаще всего используются в навигационных панелях. Значками можно отметить новое сообщение, количество запросов в друзья, непрочитанное уведомление.
В фреймворк включена большая коллекция плагинов, которая помогает оживить оформление веб-страницы — создать плавные переходы между вкладками, добавить всплывающие уведомления, вставить галереи с прокручиванием слайдов.
В формате шрифта Glyphicon Halflings в Bootstrap включён сет из 200 символов-иконок, которые можно использовать на своём сайте бесплатно.
Что такое гайдлайн
Гайдлайн — это правила и рекомендации от разработчиков платформы, которые помогают сторонним пользователям создавать продукты, которые органично впишутся в существующую систему.
Здесь можно провести простую аналогию: когда вы приезжаете в новую страну, то чтобы пообщаться с местными, вам нужно понимать их язык, во Франции — французский, а в Японии — японский. У платформ, например, у Android и iOS, тоже есть свои языки — визуальные. И гайдлайны в этом случае будут чем-то вроде словаря.
Рекомендации обычно касаются не только внешнего вида, но по большей части — пользовательского опыта. Люди уже знают, пусть и не всегда осознанно, как их смартфоны реагируют на разные действия — открыть вкладку, закрыть, перейти на новый экран, увеличить изображение. Поэтому разработчики приложений должны учитывать и особенности разных ОС, и самих устройств: правильно использовать камеру, голосовое управление или отслеживание местоположения. Гайдлайны сильно облегчают им задачу.
Киты и фреймворки содержат уже готовые к использованию элементы — в виде векторной графики или кода. Гайдлайны тоже могут включать небольшой набор рекомендованных элементов, но это, скорее, приятное дополнение. Главное в гайдлайне — это требования к стороннему продукту.
Перед дизайнером появляется задача — руководствоваться принципами единой среды, но в то же время создать уникальный продукт, который будет отличаться от остальных.
В качестве примера рассмотрим два важных гайдлайна, которые используются в мобильной разработке — Material Design от Google и Human Interface Guidelines от Apple.
Material Design
Подход Material Design развился из идеи плоского дизайна, в котором все детали изображаются в максимально упрощённом, схематичном виде, чтобы не отвлекать пользователей интерфейса на декоративные элементы и быстрее загружать страницы.
Но плоский дизайн существует в двумерной плоскости, а в Material Design появляется третье измерение — глубина. Трёхмерность создаётся с помощью теней, которые создают уровни и показывают — что важно в конкретный момент, а что второстепенно.
Принципы Material Design
Составляющие материального дизайна
Материальный дизайн использует свойства материальных поверхностей в Material UI. Поверхности на экране двигаются в трех измерениях и взаимодействуют как в материальном мире.
Тактильные поверхности — это листы цифровой бумаги, у которой есть особенности. Как и обычная бумага, это твёрдый, непрозрачный материал, который занимает заданное место на пространстве экрана. Но он умеет менять свои размеры, сгибаться, накладываться на другие листы, отбрасывать тени и отражать свет.
По принципам Материального дизайна интерфейс должен быть интуитивным и предсказуемым, последовательным и отзывчивым. Макеты Material Design визуально сбалансированы и адаптированы под размер экрана и его ориентацию. Все размеры и размеры приравниваются к сетке в 8dp. Более мелкие компоненты, такие как иконки и типографика могут измеряться в 4dp.
Навигация в материальном дизайне разделяется на 3 направления:
Горизонтальная навигация (Lateral navigation) позволяет передвигаться между экранами одинакового уровня и иерархии.
Навигация, помогающая двигаться вперед (Forward navigation) включает в себя навигацию, помогающую во время вертикального скролла вниз; последовательную навигацию через последовательность экранов (например, при регистрации и онбординге); прямую навигацию с главной страницы приложения на втутренние.
Обратная навигация (Reverse navigation) помогает передвигаться и возвращаться назад через иерархию приложения.
В материальном дизайне используется два типа цветов — основные и акцентные. Их можно использовать и при создании иллюстраций, и при разработке палитры бренда. Google предлагает использовать 500 различных оттенков, уже собранные в группы. Цветовые палитры Material Design можно скачать архивом на сайте гайдлайна.
Использование большого количества разных размеров и стилей текста может разрушить макет. Поэтому Google предлагает пользоваться готовой типографской шкалой с ограниченным набором стилей, которые хорошо работают в сетке макета.
Типографские стили Material Design продуманы для разных групп языков, с учётом особенностей символов в разных странах.
Гравитация, трение, реакция на приложенную силу — всё это позволяет рассчитать, как должны двигаться объекты в пространстве экрана.
Например, в реальном мире чтобы сдвинуть предмет с места, необходимо приложить к нему силу. Так же и в интерфейсе: чтобы сдвинуть один кусочек цифровой бумаги и открыть следующий, пользователь прикладывает усилия и преодолевает сопротивление свайпом.
Реальные объекты движутся с разной скоростью, в зависимости от их веса и трения с поверхностью. Поэтому элементы интерфейса начинают движение и останавливаются с небольшой задержкой. При этом анимация довольно быстрая, чтобы не заставлять пользователя ждать дольше, чем это необходимо. Такие мелочи помогают создать ощущение реальности происходящего.
Помимо рекомендаций в гайдлайне присутствуют готовые решения и элементы интерфейса, которые разработчики стороннего продукта применяют в своем проекте.
Чтобы увидеть примеры использования Material Design в жизни, откройте любой продукт Google — от поисковика до карт. Компания активно использует этот стиль на всех экранах (десктопа, смартфонов, планшетов, часов, телевизоров) и призывает других дизайнеров создавать продукты по материал-гайдлайнам.
iOS Human Interface Guidelines
Human Interface Guidelines — обширная система правил, инструментов и фреймворков, который помогают создавать приложения для всех систем Apple — MacOS, iOS, watchOS и tvOS. Все эти гайдлайны объединены общими принципами. В основе дизайна Apple — минималистичность, функциональность и отзывчивость к действиям пользователя.
Гайдлайны iOS часто обновляются — в соответствии с выходом новой продукции. Сейчас вы можете изучить нововведения iOS 12 и проектировать приложения уже с учётом новых особенностей. Например, на айфонах больше нет физической кнопки и управлять приложением нужно жестами. В гайдлайне описано, каких жестов нужно избегать, чтобы они не перекликались с системными и не вводили пользователей в заблуждение.
Дополнительные инструменты собраны в разделе Apple UI Design Resources. Здесь вы сможете найти готовые инструменты для дизайнеров и разработчиков, в том числе шаблоны, UI-киты и плагины. Например, если делаете игру, скачайте GameKit с элементами интерфейса, которые заставляют пользователей снова и снова возвращаться в игру. Или подключите Siri к приложению с помощью SiriKit. Полный список инструментов — на официальном сайте гайдлайна.
Зачем разрабатываются корпоративные системы
Корпоративная дизайн-система — не просто набор графических элементов, отражающих фирменный стиль бренда. Дизайн-система включает в себя визуальный язык, готовые элементы интерфейса в коде и группы шаблонов для дизайнерских программ. Это помогает бренду сократить время работы над новыми продуктами.
Гайдлайн и UI-кит — только части корпоративной дизайн-системы. С их помощью нельзя сразу приступить к разработке продукта. Все элементы приходится верстать заново каждый раз. Это приводит к новым багам и ошибкам дизайна. Когда разные продукты делают разные команды, число ошибок только возрастает. Такой подход к разработке стоит дороже, продолжается дольше и мучительнее.
Дизайн-система создается под определенный бренд для того, чтобы упростить работу над новыми продуктами. Независимо от команд и сложности задач, проекты одной компании должны сохранять узнаваемость и привычный опыт использования.
Как и UI-кит, корпоративная система должна содержать набор элементов интерфейса в фирменном стиле. Как в фреймворках, элементы должны быть выполнены в коде, чтобы разработчики пользовались библиотекой готовых компонентов. Как и гайдлайны, корпоративная дизайн-система должна содержать правила и рекомендации: как работать с сеткой, какие цвета и элементы использовать, в каких случаях заданные параметры можно менять.
Разработка дизайн-системы — сложная и большая работа. Мало просто создать правила, элементы и шаблоны прототипов. Разработчикам должно быть удобно этим пользоваться, поэтому необходимо хранить все компоненты в одном месте. Для своих сотрудников компании создают сайты и приложения корпоративных дизайн-систем. Некоторые из них можно найти в открытом доступе. Отечественные дизайн-системы собраны на сайте designsystemsclub.ru.
Примеры дизайн-систем
Компания СКБ Контур разрабатывает онлайн-сервисы для бухгалтерии и бизнеса: Эльбу, Фокус, Экстерн, Диадок и другие. Чтобы все продукты были узнаваемыми и удобными, компания разработала единые гайдлайны для проектировщиков.
Гайдлайны Контура выложены в открытый доступ, и изложенные принципы можно свободно использовать в своей работе. Разработчики просят лишь не копировать внешний вид элементов интерфейса — это фирменный стиль компании.
Гайд периодически дополняется, но уже сейчас вы можете посмотреть, какие правила установлены для типографики, использовании цветовой палитры, форм, кнопок и компонентов, которые позволяют унифицировать дизайн (шапка, подвал, приветственные страницы). В систему также входит редполитика с требованиями к тексту и принципы, по которым происходит разработка мобильных интерфейсов.
Дизайн-система Альфа-Банка
У Альфа-банка 4 больших цифровых продукта: 2 приложения мобильного банка и 2 интернет-банка для бизнеса и физических лиц. Над ними непрерывно работают несколько разных команд, которые добавляют новые функции, тестируют идеи, улучшают опыт использования.
Дизайн-система Альфа-Банка разработана по принципу mobile first — в первую очередь все внимание уделяется мобильной версии продукта. Главные правила: делать как можно больше элементов в коде, все тестировать и добавлять в библиотеку только проверенные элементы.
Принципы, библиотека компонентов, цвета, иконки, типографика и паттерны находятся в открытом доступе. Ознакомиться с ними можно на сайте design.alfabank.ru.
Дизайн-система Мегафона
Мобильный оператор Мегафон обновил стиль и позиционирование. Параллельно с этим дизайнеры занялись формированием собственной дизайн-системы и рассказали о результатах проделанной работы в блоге на Medium.
У компании обновились цвета и правила их использования, шрифты, стиль иконок и сетки. Так новый бренд стал более ярким и дружелюбным.
Дизайн-система компании состоит из трёх частей: гайдлайна с принципами, которые отражают связь с брендом, UI-кита с библиотекой компонентов для дизайнеров и React-библиотеки для разработчиков. Команда проектировщиков учитывала, что системой будут пользоваться разные сервисы Мегафона, поэтому условно поделила все элементы на две категории: базовые — те, что используются во всех проектах, и уникальные — созданные для конкретного продукта.
Ratio — дизайн-система Рамблера
Рамблер состоит из 20 проектов — сайтов, медиа, сервисов. Дизайн-система создавалась с целью упорядочить их и привести их к единому визуальному оформлению, чтобы пользователи ассоциировали все продукты с брендом Рамблера.
Система разрабатывалась с прицелом на будущее, поэтому правила разрабатывались так, чтобы в будущем их можно было дополнять, а продукты — совершенствовать.
Сейчас дизайн-система Рамблера включает философию бренда, визуальный язык (сетка, палитра, цветовые схемы, микроанимации, разные виды контента), гайдлайн с правилами, определяющими порядок работы с интерфейсами, структурированный UI-кит и библиотеку компонентов React+JSS для разработчиков.
Дизайн-система Mail.Ru Group
Дизайн-система Mail.Ru Group находится в процессе доработки, обновления и унификации продуктов. На ней уже работают медиа-проекты, мобильный веб и частично productivity-сервисы, постепенно подключаются новые продукты. Разработан стиль пиктограмм и иллюстраций, стандартизируются промо-письма и промо-сайты.
Сейчас дизайн-система состоит из идеологии, переменных (цвета, размеры, границы, тени), типографики, изображений, сетки, гайдлайнов с правилами, определяющими порядок работы с интерфейсами, принципов дизайна и базовых элементов интерфейса.
В планах команды стоит перевести оставшиеся продукты на дизайн-систему и доработать гайдлайн, который выводит использующиеся на продуктах компоненты.
Платформа Tilda Publishing — это система, которая состоит из большой библиотеки UI-элементов, фреймворка с CSS-стилями/JavaScript-плагинами и удобного редактора. Всё это позволяет создавать сайты без помощи программистов или дизайнеров.
В этом главное отличие Тильды от перечисленных дизайн-систем: вы можете делать веб-проекты самостоятельно и в результате получать готовый продукт, а не макет, прототип или нишевой проект.
Библиотека блоков Тильды
Тильда содержит один из самых объёмных наборов UI-элементов: сейчас в коллекции 450+ блоков, и постоянно появляются новые.
Каждый блок — это сбалансированная группа элементов, объединенная общим смыслом и отвечающая на один вопрос. Например, блок «Услуги компании» отвечает на вопрос «Что мы предлагаем?». С помощью комбинации этих блоков можно быстро создать веб-проект.
У каждого блока есть настройки внешнего вида и возможность загрузить свой контент — изображения и текст.
Все сайты, созданные на Тильде, адаптивны без дополнительных настроек, ничего не придётся делать вручную. Блоки подстраиваются под любую страницу и корректно отображаются на смартфонах или планшетах.
Чтобы нужные блоки было легко найти, они разбиты по категориям.
Обложка. Начальные экраны с заголовками, подзаголовками, кнопками, формами и изображением во всю ширину экрана на фоне.
О проекте. Блоки для описания особенностей проекта: только с текстовой информацией, галереей изображений или кнопками для социальных сетей.
Заголовок. Комбинации разных размеров заголовков с дополнительными элементами — описаниями, подзаголовками и надзаголовками.
Текстовый блок, Ключевая фраза, Прямая речь. Готовые варианты для оформления обычного текста и для выделения важной информации в виде цитат, прямой речи или ключевых фраз.
Изображение и Галерея. Блоки для представления визуального контента — фотографий, иллюстраций и графики.
Видео. Блоки для вставки видеоплееров с Youtube, Vimeo, Coub в одну или несколько колонок.
Преимущества. Комбинации фотографий, текста и иконок в формате списков.
Колонки. Сочетания текста и изображений в несколько колонок.
Разделитель. Дополнительные отступы, линии и модификаторы цвета, чтобы наглядно разделить смысловые части.
Список страниц. Карточки, слайдеры и оглавления для перехода на другие страницы сайта.
Плитка и ссылка. Красиво оформленные ссылки в виде карточек с описаниями и картинками на фоне.
Форма и кнопка. Кнопки и формы приёма данных с полями для заполнения. Форма может быть очень простой, например, поле для ввода и элекронной почты с кнопкой «Подписаться», но есть и усложнённые варианты — с чекбоксами, радиокнопками, загрузкой файлов, масками, выпадающими списками.
Магазин. Карточки продуктов с описаниями и кнопками, блок для подключения платёжных систем, всплывающие окна с товарами.
Команда. Блоки для оформления персональной информации о сотрудниках компании или лекторах на конференции.
Отзывы. Доступно несколько вариантов оформления: в виде слайдера, текста с фотографиями в несколько колонок или отзыва с фоновым изображением.
Расписание и Этапы. Таймлайны, таблицы и колонки для вёрстки расписаний или наглядного представления процесса.
Услуги. Карточки, списки с изображениями, колонки с иконками и другие варианты для самых разных сфер бизнеса.
Тарифы. Представление цен на услуги в формате карточек или таблиц.
Партнёры. Сетка из логотипов и дополнительная информация о партнёрах.
Другое. Инструменты Тильды, которые не вошли в остальные категории. Например, блок для вставки html-кода, якорные ссылки, индикатор прокрутки или загрузки страницы или эффект печатной машинки для заголовков
Меню. Для создания навигации есть выбор из меню с логотипом и пунктами, гамбургера, вкладок, фиксированной панели при скролле и других.
Контакты. Контактная информация может быть дополнена логотипом, фоновым изображением, иконками или картой.
Соцсети. Кнопки для Facebook, Вконтакте, Twitter и других социальных сетей в стандартном и фирменном оформлении, выровненные по центру, зафиксированные в углу или появляющиеся при прокрутке.
Подвал. Футеры со ссылками, кнопками для социальных сетей, контактной информацией.
Редактор Zero Block для создания собственного дизайна с нуля
Если у вас появилась идея, которую не получается реализовать с помощью готовых блоков, спроектируйте собственный блок во встроенном редакторе с нуля.
В редакторе нет никаких ограничений: можете располагать элементы как угодно, задавать блоку любую длину и помещать неограниченное число элементов.
Коллекция готовых шаблонов
Если раньше вам не приходилось делать веб-проекты, вы можете воспользоваться готовыми шаблонами. Все блоки спроектированы дизайнерами, которые учли специфику конкретного бизнеса: студия йоги, персональная страница консультанта, конференция или обучающие вебинары.
В шаблонах продумана логика построения сайта, расставлены правильные отступы, подобраны гармоничные цвета. Используя шаблон, вам достаточно только добавить свой текст и изображения. Также вы можете редактировать все блоки, удалять и добавлять новые и при необходимости менять их местами.
Особенности работы в редакторе
Основа работы в Тильде — блочный механизм редактирования, который действует по принципу «кликнул — перетащил». Заходите в конструктор, выбираете в библиотеке нужный блок и кликаете. Элемент появляется на странице, и вам остаётся наполнить его своим контентом и, когда это необходимо, подкрутить настройки.
Чтобы начать работу в Тильде, не потребуется читать мануалы и громоздкие инструкции: поначалу система будет давать подсказки, но даже без них принцип работы понятен интуитивно. Когда нужный блок в библиотеке выбран, вам нужно проверить две вкладки: в «Контенте» добавить нужный текст и иллюстрации, а в «Настройках» задать оформление.
Подведем итоги
Дизайн-системы помогают сберечь время, деньги и нервы при проектировании дизайна продукта.
UI-кит — набор готовых решений пользовательского интерфейса. Это все те элементы, которые помогают пользователям взаимодействовать с сайтом или приложением.
Кто применяет UI-киты в работе. Компании, которые разрабатывают один или несколько продуктов; дизайнеры или дизайн-студии; дизайнеры, у которых мало опыта.
Элементы, которые входят в UI-кит. Обычно 90% любого кита — это элементы управления: кнопки, поля для ввода, предупреждения. Остальное — правила их использования, включающие типографику, цвета, отступы, то есть всё то, что поможет создать собственный визуальный язык.
Зачем использовать UI-кит. Экономия времени, удешевление проекта, единообразие, проверка гипотез, удобство командной работы, смена стиля, упрощение процесса проектирования.
Где найти UI-кит. Готовый UI-кит можно купить или скачать бесплатно на специализированных ресурсах для дизайнеров.
Фреймворк — это и платформа для разработки программ, и библиотека для верстальщика.
Гайдлайн — правила и рекомендации от разработчиков платформы. Они помогают сторонним пользователям создавать продукты, которые органично впишутся в существующую систему.
Material Design. Подходразвился из идеи плоского дизайна, в котором все детали изображаются в максимально упрощенном, схематичном виде, чтобы не отвлекать пользователей интерфейса на декоративные элементы и быстрее загружать страницы.
Составляющие материального дизайна: материальная среда, макет и расположение элементов, навигация, цвета, типографика, анимация, работающая по законам физики.
iOS Human Interface Guidelines — обширная система правил, инструментов и фреймворков, которые помогают создавать приложения для всех систем Apple. В основе дизайна Apple — минималистичность, функциональность и отзывчивость к действиям пользователя.
Корпоративные системы — не просто набор графических элементов, отражающих фирменный стиль бренда. Дизайн-система включает в себя визуальный язык, готовые элементы интерфейса в коде и группы шаблонов для дизайнерских программ. Это помогает бренду сократить время работы над новыми продуктами.
Платформа Tilda — это система, которая состоит из большой библиотеки UI-элементов, фреймворка с CSS-стилями/JavaScript-плагинами и удобного редактора. Всё это позволяет создавать сайты без помощи программистов или дизайнеров. Тильда содержит один из самых объемных наборов UI-элементов: сейчас в коллекции 500+ блоков и постоянно появляются новые.
Особенности работы в редакторе. Основа работы в Тильде — блочный механизм редактирования. Заходите в конструктор и выбираете в библиотеке нужный блок. Элемент появляется на странице, и вам остаётся наполнить его своим контентом и, когда это необходимо, подкрутить настройки. Понятный интерфейс, гибкие настройки дизайна, не нужно разбираться в коде.