Чтобы погрузиться в контекст, представим начинающего повара — такого, что ни разу в жизни не готовил и даже не смотрел, как это делают мама или бабушка. Он просто ел. И вот, жизнь занесла его на кухню.
Задача — приготовить борщ. Борщ — сложная штука, с кучей ингредиентов внутри. Если наш повар начнет готовить вслепую и по собственным ощущениям, наверняка получится что-то несъедобное. Например, так он будет работать с ингредиентами:
— Картошку надо, нет? Наверное, надо. Ну, я люблю фри, поэтому добавлю ее
— Чтобы вода получилась красной, вылью туда кетчуп
— Слышал, что на Востоке в борщ добавляют помидоры. Надо тоже попробовать, наверняка будет вкуснее
— Какой суп без мяса? Закину сырое под конец, должно успеть свариться
В общем, пищевое отравление гарантировано.
Даже если повар знает, что такое борщ, и ел его кучу раз, — это далеко не гарантия того, что он его нормально приготовит. Рано или поздно кулинар ошибется, и суп снова станет несъедобным.
И даже если борщ каким-то чудом получится неплохим — это исключение, а не правило. На дистанции в несколько блюд повар не сможет выдержать такой уровень.
В дизайне то же самое
Новичкам кажется, что красота и эстетика — главное в работе. Поэтому, чтобы показать, чему они научились на курсах, джуны ударяются в искусство.
В результате получается мешанина из всего: модные шрифты, яркие кнопки, бессмысленные картинки. Одна страница белая, вторая красная, третья вообще зеленая, у одинаковых кнопок разный размер, еще и отступы между блоками перепутаны. Красота победила, консистентность отошла на второй план.
Даже если основанный на чувстве прекрасного проект получится неплохим, это не значит, что дизайнер будет делать так всегда. Такая схема прокатит один-два раза, но на дистанции даст сбой. Дизайнер не сможет постоянно выдавать один и тот же уровень — у него не будет основы, за счет которой можно оставаться стабильным.
В статье расскажем, как перестать делать как получится, а вместо этого начать систематизировать дизайн-приемы и держать уровень от проекта к проекту.
Что нужно, чтобы приготовить классный суп
Проблема нашего повара в том, что ему не на что ориентироваться. Он лепит отсебятину и верит, что в итоге получится кулинарный шедевр. Поэтому, чтобы такие ситуации не повторялись, нужен рецепт. Он предотвратит самодеятельность и даже начинающему повару поможет приготовить съестной суп.
Рецепт дизайнера — UI-кит
Это набор правил, который дизайнер создает в начале, чтобы придерживаться на протяжении всего проекта. В него входят цвета, шрифты, размеры отступов и так далее.
Основная задача UI-кита — не дать дизайнеру намешать всего подряд. Благодаря этому набору правил дизайн получается консистентным: отдельные части не перетягивают на себя внимание, а все элементы служат во благо пользователю.
Структура кита может выглядеть так:
- Заголовки и текст
- Цвета
- Отступы
- UI-элементы
Сейчас расскажем про каждый элемент подробнее, а заодно посмотрим, как его используют в реальных проектах.
Заголовки и текст
Размер шрифта — мощный инструмент для построения визуальной иерархии в проекте. Тексты помогают структурировать содержимое страницы, и у них есть три уровня восприятия.
- Заголовки. Это самый важный контент, который пользователь должен заметить в первую очередь.
- Подзаголовки. Они помогают сделать плавный переход между заголовками и основным контентом.
- Текстовые блоки. Они вмещают больше всего информации, поэтому основной контент — здесь. Тем не менее, пользователь должен считать их в последнюю очередь.
Реальный пример — приложения K9 для тренировки собак, которое сделала наша студентка Яна. Повествование строится по той же логике:
Сверху — крупный заголовок, выделенный жирным. Его задача — заинтересовать читателя, кратко дать ему самую главную информацию.
Ниже — подзаголовок. Он уже не такой крупный, но все еще выделен жирным. Он расширяет информацию из заголовка и дает переход к тексту, где содержится основная информация.
Текст написан обычным маленьким шрифтом. Он объясняет суть заголовка и подзаголовка.
Все текстовые стили макета мы отражаем в нашем UI-ките.
Цвета
Палитра в UI-ките показывает, какие цвета стоит брать за основу и использовать в проекте. Например, здесь: белый, черный, акцентный синий и ещё пара серых оттенков.
UI-элементы
Это готовые дизайнерские решения, которые можно использовать в разных частях проекта. С их помощью компании регламентируют все, с чем пользователь взаимодействует на сайте. Универсальные элементы одновременно и ускоряют работу дизайнера, и упрощает ее.
Например, на сайте K9 это набор вариантов из нескольких состояний кнопки. И эта система будет повторятся в каждом блоке и на каждой странице. Это нужно для того, чтобы пользователь быстрее ориентировался и не путался на сайте и в приложении.
Весь кейс Яны можно посмотреть на Behance. Кстати, эта работа попала в подборку UI/UX на главной странице.
UI-кит не обязательно должен выглядеть так
В статье мы лишь показали примерную структуру, которую чаще всего используют дизайнеры. Вы можете как использовать шаблон из статьи, так и создать собственный UI-кит и работать по нему. Делайте так, как удобно вам.