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

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

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

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

Моей задачей было работать ведущим специалистом исследователем UX и разработчиком концепции на этапе создания идеи. После внедрения я возглавила UI, сосредоточившись на визуальном дизайне веб-приложения (основного продукта). Остальные задачи я доверила своей команде, которую собрала под данный проект.
О проекте в целом
Задачи
Клиент поставил перед нами ряд задач.
  1. Разработка логотипа на два продукта ng.Grace и ng.Air
  2. Онлайн консультация по сложным экранам - UX экспертиза
  3. Разработка сайта лендинга до 10 блоков (концепт+макет+Tilda)
  4. Разработка веб-приложения ng.Grace по схематическому макету клиента
  5. Разработка веб-приложения ng.Air по схематическому макету клиента
  6. Доработка схематических макетов клиента
  7. Редизайн корпуса оборудования (терминала)
Проблемы
Основная проблема была в схематических макетах клиента (Вайрфреймах). Так как они были не проработы с точки зрения юзабилити. Не было понимания как реализовать проект и с чего начать. Не было четкого ТЗ и плана работ.
Были хотелки и четкое понимание, как и для кого будет создано приложение. Так же были сжатые сроки для реализации всех задач. Поэтому я начала думать и распутывать этот клубок задач вместе с проектным менеджером Аленой.
Решения
В течение нескольких дней я сформулировала план реализации всех задач от клиента. Прописала все подзадачи, поставила им четкие сроки.
Было решено запустить создание логотипа и веб-приложения 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
Ссылка на проект по личному запросу
Наш личный выезд на тестирование бета-версии :)
Я и Ильдан приехали в лабораторию в Москве, чтобы посмотреть лично, как реализовано приложение для ng.Grace и ng.AIR.

На месте был проведен визуальный анализ терминалов. Зашла даже в музей терминалов. Выявлены потерны взаимодействий и расположения кнопок. Нарисовали прототип и сразу его согласовали.
Контакты
@designer_fokina
Телеграм
+7 915 112-06-03
Телефон:
Адрес
Рабочее время
E-mail:
Made on
Tilda