Изучив старый сайт, мы приступили к обновлению. Особенность проекта — команды айдентики и разработки работали над стратегией параллельно. После нескольких общих интервью с клиентом команда брендинга ушла формулировать концепцию позиционирования, а в веб-отделе началась работа над структурой сайта. Во всём придерживались принципа: стиль — яркий, сайт — простой в наполнении.
Концепция визуальной идентификации
Решение о выборе подрядчика на стороне клиента компании принимает главный инженер, оценивая вдумчивость, рациональность и обоснованность предложения. Поэтому и визуальное решение подобрали под стать — четкое, понятное, без лишний лирики. Но обязательно про профессиональные компетенции.
Ключевой образ концепции — графическое изображение инженерной схемы. Строгая, геометричная, стандартизированная рамка задает экспертный тон в решении. Она обрамляет и приводит к единой системе все внутреннее содержание. Контент, наполняющий ее, может конструироваться по-разному в зависимости от поставленной задачи.
Основной элемент идентификации состоит из трех обязательных элементов — внешняя рамка, штамп в правом нижнем углу и стилизованная инженерная схема внутри. Последняя, благодаря своей модульности и гибкости, может отображать любые метафоры про преимущества и выгоды компании.
Логотип
Для того, чтобы логотип органично вписался в визуальную систему, мы поместили его в область штампа, разделив знаковую часть и буквенное написание. У клиента было пожелание оставить некоторую преемственность с прежним фирменным стилем, в основе которого были три горизонтальные полосы, поэтому мы перенесли их в логотип.
Логотипы направлений
Еще один проект компании — облачная диспетчерская. Для нее понадобился отдельный логотип. Выполнив логотип Ресэнерго и TD Cloud по единому принципу, мы изменили положение трех линий, проиллюстрировав через значок приема сигнала специфику дочернего проекта.
Иконки
В простой графике для усиления профессиональной аналогии мы добавили стилизованные условные обозначения основных элементов арматуры. Клапаны, задвижки, стрелки с направлением потока разнообразили и придали строгим и несколько аскетичным схемам небольшую декоративность.
Сложные иллюстрации Комбинируя пиктограммы и условные обозначения арматуры, мы создаем иллюстрации разного уровня детализации — от простых до полноценных и узнаваемых изображений под задачу носителя. Для большей строгости и органичности вся графика выполнена в линейной стилистике. Толщина линий в иллюстрациях подчинена толщине линий в основной рамке, упрощая отрисовку изображений и поддержку решения.
Носители
Идею проектной документации продолжили развивать в носителях, добавив иллюстрации и копирайты про выгоды работы с компанией.
![]() | ![]() |
![]() | ![]() |
![]() | ![]() |
![]() | ![]() |
Пока дизайнеры работал над стилем, информационный архитектор собрал структуру сайта, содержание страниц, продумал навигацию. Самое важное — собрал схематичные прототипы, чтобы зафиксировать структуру, содержание и функции ключевых страниц.
Новости |
Главная
|
О компании |
Визуально сайт поддерживает фирменный стиль. Мы сохранили преемственность и адаптировали элементы под веб. В итоге получился акцентный и характерный сайт.
Главная страница
Услуги |
О компании |
Проекты |
Шаблон проекта |
Команда заказчика поддерживала нас и сильным желанием сделать все по уму, и фирменным чувством юмора.
![]() | ![]() | ![]() | ![]() |
![]() | ![]() | ![]() | ![]() |
Ресэнерго заботятся о портфолио, поэтому у нас оказались хорошие видео и фотоматериалы, которые не стыдно показать. Мы этим воспользовались.
Легкая анимация и неназойливый параллакс создали эффект мягких переходов и плавной подгрузки контента.
Проведите конкурс среди участников CMS Magazine
Узнайте цены и сроки уже завтра. Это бесплатно и займет ≈5 минут.