Доработка сайта ВентПромКлимат

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

Шрифт был изменен с этой же целью. Необходим был шрифт без засечек и более округлый для заголовков.

Изменена главная страница, добавлено фоновое изображение неба с облаками, которое переходит плавно в контент. На этом месте располагался не нужный слайдер с баннерами, не дававший понимания того куда попал пользователь. Также сразу после слогана идут "Услуги" и "Продукция". Такой подход сразу дает понимание цели ресурса, ранее приходилось искать услуги и непонятно было что сайт в общем позиционирует себя как интернет-магазин.

Исходя из обновленных идей и проекта - необходимость была и в обновлении логотипа. В логотипе отображено название и отображено направление воздуха, неся за собой такие понятия как "циркуляция", "вентиляция". Акцент сделан именно на стрелочках, оставляя название темным и в жирном начертании. Такого рода логотип гармонично смотрится в "горизонтальных" проектах. Предложенный вариант отлично подошел, клиент остался доволен.

Обновление коснулось и шапки с подвалом. Необходимо было отобразить в них информацию по контактам, сгруппировать и отобразить категории контента. Сделать многоуровневое меню на основе этой систематизации. В итоге удалось сделать легкий и простой в восприятии вариант шаблона, который в последствии был адаптирован на мобильные устройства. 

Легкости в шапке удалось добиться светлыми (неотяжеленными) оттенками и по-минимому использование серого и акцентного цвета. Новый вариант шапка проекта:

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

Категории товара были также переосмыслены и заключены в переиспользуемый шаблон. Например их удалось таким образом вывести на главной.

Штатное решение было трудным для восприятия и не содержало изображений категорий. Каждая карточка категории была обрамлена рамкой, что сковывало контент внутри и в общей композиции. Подкатегории штатного решения выводились в строчку и было трудно отличить или найти нужную. 

Решение проблемы с восприятием позволило добиться путем убирания рамок, и использование столбцов. Столбцы, помимо упрощения восприятия позволили уместить в ряд 4 категории, вместо двух от штатного решения. 

Поскольку количество подкатегорий в одной категории может быть гораздо большим, то вывод подкатегорий доступных сразу для показа ограничен. Остальные можно увидеть после того как нажать на кнопку "Раскрыть". 

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

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

Для ресурса был написан фронт проект на будущее изменение, использование webpack, scss, es6 позволило быстро решить проблемы, которые с темами Аспро переодически возникает, требуется либо их обновление, либо переписывание части логики. Саму тему Аспро клиент попросил не обновлять, поэтому был создан фронт-проект, где по-тихоньку замещались стили оригинальной темы.

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