ng.Grace 2021

#промышленный_дизайн

#веб_приложение

#лендинг

#лого

Об основном продукте

ng.Grace - это приложение для проектирования цифровых подстанций по стандарту МЭК 61850 с применением искусственного интеллекта.

Это революционный подход к полностью автоматизированному проектированию цифровой подстанции. Такой подход позволяет с учетом требований к функциональности, надежности и стоимости цифровой подстанции автоматически синтезировать общую архитектуру комплексов РЗА и АСУ ТП.

Это проектная работа. Клиент ООО «Интеллектуальные электроэнергетические системы». Плотно работали с командой от клиента.

Состав команды клиента: проект менеджер, три программиста.

Состав моей дизайн команды: Лид-продуктовый дизайнер (Катя Фокина), продуктовый дизайнер (Ильдан Хайруллин), ux/ui дизайнер (Анна Ульянова).

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

О проекте в целом

Проблемы

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

Решения

В течение нескольких дней я сформулировала план реализации всех задач от клиента. Прописала все подзадачи, поставила им четкие сроки.
Было решено запустить создание логотипа и веб-приложения ng.Grace параллельно.
Для того чтобы ускорить разработку, была предложена и согласована идея, что покупаем готовый UI-kit. Его стиль мы перенесли на все продукты бренда.
Когда веб-приложение было почти готово мы начинали реализовывать лендинг. Сдали почти в один день готовый лендинг на Tilda и готовые к верстке макеты веб-приложения ng.Grace.
После мы начали работать с новым логотипом для ng.Air. Уже по проработанной схеме сразу начали разработку веб-приложения ng.Air. После сдачи макетов для верстки мы начали реализовывать редизайн оборудования Терминала.

Логотипы

У клиента был логотип компании. На его основе надо было придумать логотип для ng.Grace. ng.Air.

Логотип клиента компании

Логотип ng.Grace

Логотип ng.Air

Минималистичный и консервативный логотипы. Созданный из деталей логотипа бренда. Переплетение и связь в знаке в виде треугольников. Цвета сдержанные и в оттенках логотипа бренда, но только сделаны более яркими и чистыми цветами. Геометричные формы хорошо сочетаются с тематикой it технологий. Можно использовать 2 вариации вертикальную и горизонтальную. Легко масштабировать для других продуктов экосистемы продуктов.

Концепт

Создать простой и минималистичный логотип. Хотелось чтобы фирменный стиль отображал сферы и инновационные технологии.

Задачи к логотипу и фирменному стилю

Стиль

Был запрос проработать цвета и фон. Так как он будет использоваться в основном веб-приложении ng.Grace.

Реализовать дизайн без дизайна. Функционал на первом месте, чтобы визуал не кричал.

Задачи к фону, которые я поставила

Было принято собрать частично внедрить стиль стекло морфизма, так чтобы он только подчеркивал интерфейс, а не усложнял его. Этот стиль применять только в фонах!

Решение

Создали несколько своих градиентов

Выбрали который больше подходит по цветам

Процесс

Зелено-синий самый подходящий

+ Он в стилистике приложения и бренда в целом.
+ Яркие и приятные цвета глазу. Глаза не устают.
+ Подходит к белому интерфейсу приложения, так как веб-приложение будет бело-серым.

Дополнительные элементы: круги, линии, окружности.

Применение фона в приложении

Ключевые экраны ng.Grace

До/После

Лендинг

Ключевые экраны ng.AIR

До/После

Терминал

Figma

Ссылка на проект по личному запросу

Контакты

Телеграм

Телефон:

Адрес

Рабочее время

E-mail: