UI Kit – это набор компонентов пользовательского UI интерфейса со всеми состояниями и вариантами использования. О том что это и почему это важно мы уже писали ранее.

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

Из каких элементов состоит UI Kit:

  • элементы фирменного стиля: модульная сетка, типографика, цвета, интервалы, изображения, визуальные формы, анимация, звук;
  • элементы интерфейса: кнопка и группы кнопок, флажки (check boxes), формы с полями ввода (inputs), подсказки, иконки, меню, уведомления, пагинация, поп-апы, алерты, переключатели, вкладки и хлебные крошки, таблицы, ярлыки и лейблы, галереи, прогресс-бары.

Из каких элементов состоит UI Kit

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

1. Сделать свой UI kit.

2. Взять в качестве базы готовый UI kit и редизайнить его.

3. В случае, если у вас уже есть существующий продукт с каким-то интерфейсом, можно принять решение редизайнить этот интерфейс, оставив существующие UI элементы.

По сути пункт 3 это подвид пункта 2, но довольно специфический. Поэтому мы выделяем его в отдельную группу. Например, так получается если у вас есть проект на очень старой и сильно кастомизированной версии JQuery UI. Вы хотите сделать UI интерфейс более современным, но перенос всего UI + FrontEnd на новые технологии, например на React.js или Vue.js будет стоить ну очень много денег. Поэтому так или иначе вы будете редизайнить ваш существующий UI kit на jQueryUI.

В этой статье мы рассмотрим пункты 2 и 3 из этого списка. О первом пункте и создании собственного UI Kit читайте здесь.

Как работать с готовыми UI kit?

Если у вас есть возможность взять готовый UI kit для проекта, который создается с нуля или бюджет позволяет полностью переработать front-end, существуют следующие варианты:

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

UI kit можно применять:

  • сразу в дизайне
  • сразу в прототипе
  • делать на его основе верстку, по прототипу, сделанному без учета особенностей UI kit – это путь боли и страданий, потому что в результате вы не попадете в размеры и в сетку

2. Брать UI Kit операционной системы (для ПК Windows, MacOS, для мобильных iOS, Android) и дизайнить приложения по ним. У операционных систем есть свои гайдлайны и их не рекомендуется нарушать (там всё описано просто прям до пикселя) . Таким образом и время сэкономишь .

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

Как правильно проводить редизайн готового UI кита, если вас устраивает UX

Редизайним мы обычно не просто готовые юай-киты (набор элементов в файле Photoshop или т.п.), а элементы фреймворка (т.е. уже сверстанные и работающие элементы). Такие элементы можно посмотреть здесь и здесь. Для чего мы их меняем? Потому что эти наборы известные, их применяют многие сайты. И если не менять дизайн, то нельзя будет подчеркнуть уникальность проекта. У пользователя обязательно возникнет чувство “где-то я уже это видел”.

Если вы выбрали готовый UI kit на современном фреймворке, и его UX вас устраивает: компоненты удобные, делают всё, что вам нужно для проекта, то при редизайне этих элементов существует главное правило: менять  только цветовую тему (theme) – цвета, тени, шрифты, иконки – и не менять весь внешний вид элементов и их функционал. Это помогает сохранить единство UI Kit и самого ресурса.

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

Что делать, если у вас legacy UI framework, а вам всё равно нужно делать редизайн

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

Таким образом вы поставите перед дизайнером задачу, объяснив, что есть вот такой набор компонентов такой-то вложенности, и связаны эти компоненты так и так. Связи важно прояснить, чтобы избежать ситуации, когда дизайнер что-то нарисовал, выглядит красиво, а внедрить в проект трудно или нереально. Например, элемент “стрелка вниз” используется в 20-ти других компонентах, поэтому все стрелки должны быть унифицированы, а дизайнер нарисовал в разных макетах разный вид этой стрелки.

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

Наш опыт создания своих UI китов и редизайна чужих

Создаем свой UI кит

Главные преимущества своего кита в том, что он уникальный и дает возможность на 100% попадать в стилистику сайта. В нем нет ограничений фреймворка, можно соединять разные решения и функционалы.

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

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

Но даже при таком подходе есть проблемы:

  • проблема со стороны дизайнера: внесены только базовые элементы, или не все элементы, или не все состояния элементов (например, показано как кнопка будет выглядеть при наведении, но не показано, как она выглядит в состоянии disabled; или показан выпадающий список с одним пунктом, но неясно как будет выглядеть 20 пунктов). В этом случае забытые элементы дизайнятся после сдачи дизайна, во время верстки.

  • проблема со стороны верстальщика: он видит UI Kit, но не вносит элементы сразу себе в верстку, обращается к нему только когда есть вопросы, а все остальное делает “на глаз”.

Редизайн чужих UI Kits. Наши кейсы

Работая над редизаном чужих UI китов, мы часто используем front-end framework’и Materialize и Vuetify. Это происходит в основном не потому, что нам подходит дизайн элементов фреймворка, а потому, что они позволяют сэкономить время на верстке и разработке. Дизайн этих фреймворков основан на material design от Google, т.е. он достаточно современен. Для чего же ему редизайн? Чтобы он соответствовал стилистике сайта, для которого его применяют. Как мы справились с этой задачей, мы можете посмотреть ниже:

BBQ (BBQ leads, аукцион для строительных компаний)

Например, так выглядят checkbox, input,select:

В фреймвроке

Как выглядят checkbox, input,select

В дизайне 

Как выглядят checkbox, input,select

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

Как решили: как видно, мы изменили цвет и вид полей ввода. Редизайнили также и флажки (check box), но на этапе верстки дизайнеров попросили вернутся к стандартному варианту, чтобы не тратить время верстальщика. Поэтому check box оставили такими же, как во фреймворке.

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

Оптовый кабинет OSD

Вот так выглядят radio button, text input и select

В фреймворке

Как выглядят radio button, text input и select

В дизайне

Как выглядят radio button, text input и select

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

Forland - система управления агробизнесом

В проекте много таблиц, все они были сделаны на фреймворке Kendo.

Старый дизайн

Редизайн таблиц - Старый дизайн

Новый дизайн

Редизайн таблиц - новый дизайн

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

Как решили: пришлось идти на компромиссы: где-то менять дизайн, где-то “докручивать” таблицы.

Так хорошая ли идея редизайнить UI Kit

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

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

18.06.2019
Рейтинг: 5 / 5 (1)