Дизайн
Создается визуальный стиль проекта — прорисовываются уникальные экраны и элементы, проектируется анимация и т.д.
Визуальная концепция
В первую очередь проходит ряд внутренних совещаний с арт-директором, на которых определяется модульная сетка, стиль элементов, цвета, соотвествие текущему визуальному образу и т.д.
В результате такого рода дискуссий и внесения улучшений, формируется продуманная концепция дизайна нескольких ключевых страниц системы. Результатом работы является PDF презентация, которая поясняет почему были выбраны те или иные решения.
Формирование UI-кита
Для крупно масштабируемых проектов мы формируем единый набор элементов, который используются в проекте. Кнопки, формы, сортировки, таблицы, различные состояния элементов при взаимодействии с ними и т.д.
Это позволяет соблюдать единый стиль элементов при работе над интерфейсом. Набор формируется индивидуально под проект.
Элементы могут быть в виде графического файла Photoshop или Sketch. Либо библиотекой элементов сверстанных в HTML.
Элементы могут быть в виде графического файла Photoshop или Sketch. Либо библиотекой элементов сверстанных в HTML.
Отрисовка уникальных экранов
Обычно интерфейс состоит из нескольких основных уникальных экранов и множества повторяющихся, в которых изменяется только содержимое, особо не затрагивая дизайн.
Количество уникальных экранов индивидуально проекту и зависит от личного подхода клиента. Часто клиенту необходимо видеть все экраны с актуальным содержанием, для внутреннего согласования или как ориентир для сторонних разработчиков проекта.
Проектирование анимации
Многие элементы в современных интерфейсах имеют микро и макро анимацию.
Микро-анимация — это эффекты при наводке курсором мыши, либо открытие выпадающих списков, выезд поисковых результатов и т.д.
Макро-анимация — это глобальные эффекты появления объектов, выезд и закрытие модальных окон, слайд-эффекты, подгрузка контента и т.д.
Микро-анимация — это эффекты при наводке курсором мыши, либо открытие выпадающих списков, выезд поисковых результатов и т.д.
Макро-анимация — это глобальные эффекты появления объектов, выезд и закрытие модальных окон, слайд-эффекты, подгрузка контента и т.д.
Грамотно спроектированная система микро и макро-анимации оживляет интерфейс и исключает неожиданные для пользователя эффекты при взаимодействии.
Дигитальный брендбук
В дигитальный брендбук входит описание принципов оформления страниц и элементов.
Мы формируем так называемый визуальный язык, который дает основу для оформления будущих продуктов, страниц и элементов интерфейса.
Мы формируем так называемый визуальный язык, который дает основу для оформления будущих продуктов, страниц и элементов интерфейса.
Это особенно необходимо развивающимся компаниям, где происходят постоянные обновления, причем не только одним подрядчиком.
Обычно такой документ содержит описание графических элементов, шрифтовые начертания, основные принципы композиций, работу с акцентами, правила обращений к пользователю (tone of voice), правила использования анимации и т.д.
Обычно такой документ содержит описание графических элементов, шрифтовые начертания, основные принципы композиций, работу с акцентами, правила обращений к пользователю (tone of voice), правила использования анимации и т.д.