UI-дизайн интерфейсов

Визуальная идентификация бренда на сайте.

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

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

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

Анимация делает интерфейс более понятным и даже может уточнять некоторые детали проектирования. Пример удачного использования анимации для взаимодействия — дизайн-концепция Material design от Google.

Анимация показывает реакцию интерфейса на вешнюю команду от пользователя: нажатие, клик, жест. Анимация отображает, как машина восприняла команду и подтверждает ее правильность. К примеру, расплывающиеся по элементу круги в Android material свидетельствуют о том, что клик/нажатие произошло и сейчас команда выполнится — откроется пост в Facebook, запустится музыкальный трек и т. д.

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

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

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

Принцип mobile first: сначала думаем, как интерфейс будет выглядеть и вести себя на мобильном устройстве:

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

Интерактивные типы интерфейсов, которые своим поведением указывают пользователю следующее действие — это визарды (wizard — мастер, проводник).

Необходимость визардов возникает, когда пользователю для достижения конкретной цели (например, корректно заполнить свой профиль на сайте) необходимо верно произвести ряд настроек. Сам пользователь не справится с задачей, так как не знает, какие данные необходимы системе для корректной работы. Поэтому визард “ведет” его по задаче, последовательно показывая экран за экраном, в которых нужно выполнить действия. Последовательность действий и набор опций для них определяет UX-проектировщик, а UI-дизайнер использует графику и анимацию для того, чтобы сделать это взаимодействие понятным, легким, а главное — успешным.

Знание особенностей имплементации дизайна помогает предотвратить сложности в разработке и способствует нормальной коммуникации между командами дизайнеров и разработчиков.

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

Стандартный пакет исходных файлов
  • Исходные документы ( Psd, Ai, Eps.)
  • UX-карта
  • Шаблон UI-элементов — по запросу

Что не входит в стандартный пакет

В стандартный пакет не входят услуги дизайн-сопровождения, выполнение работ по marketing kit.