Металлопрокат
О компании
Задача
Наш заказчик, сайт которого находился на продвижении и технической поддержке обратился к нам с просьбой обновить внешний вид сайта, чтобы улучшить привлекательность сайта для заказчиков и увеличить конверсию.
Старый сайт совершенно не отвечал современным требованиям по внешнему виду и функциональности, и поэтому обновление сайта для крупного поставщика металлопроката и металлических элементов было решено сделать с нуля, начиная с отрисовки макета, заканчивая большими работами по обновлению контента сайта.
Проведенные работы
- Редизайн
- Вёрстка
- Наполнение
- Каталог товаров
- СЕО-оптимизация
Шрифт Roboto
Цвета
Кнопки
Разработка дизайна
Отправной точкой в создании стилистики дизайна были выбрал красный цвет логотипа и металлическая текстура. Из текстуры получен ряд серых тонов, которые наряду с красным акцентным цветом легли в основу всех элементов сайта.
Фон решено было сделать белым, а не серым, как он был на оригинальном сайте, что-бы повыстить контрастность и читаемость информации.
Так как объем информации на сайте большой, предополагается множество различных блоков с ценами, акций, тизерами и т.п. Места для фотографий или красивых иллюстраций практически не остается, поэтому решили использовать плотную компоновку, с 4мя колонками на больших разрешениях.
Чтобы гармонично поделить контент мы решили чередовать темный и светлые блоки на сайте, каждый из которых будет нести свою функциональную нагрузку.
Чтобы яркий, контрастный логотип не отвлекал внимание от других элементов,, все важные элементы было также решено подчеркнуть красным цветом. Например боковое меню сделано в красном цвете, чтобы привлекать внимание посетитей к ассортименту продукции.
Текстовое наполнение было решено оставить без лишних украшений. Объем текстов был очень большой, поэтому мы определили лишь основные элементы для оформления текста, такие как параграфы, списки и т.п.
Для сайта был нарисован набор пиктограмм и тизеров. При этом информационные элементы мы оставили плоскими, а все элементы связанные с каталогом продукции были отрисованы на основе фотографий, для сохранения объема и узнаваемости у посетителей сайта.
Так как в области, в которой работает наш заказчик документы и рекомендации солидных компаний играют важную роль, мы постарались вынести эти ключевые элементы в отдельные блоки “Сертификаты” и “Отзывы” и “Наши поставщики”.
Дополнительно внизу главной страницы размещен большой блок с ссылкой на каталог продукции
Верстка
Внутри старого сайта был найден самописный “движок”, разработанный в далеком 2000 году неизвестными “умельцами”. Все страницы сайта были сверстаны отдельными файлами, никакого способа редактировать контент не страницах не было. Старая админка сайта позволяла лишь обновлять стоимости в прайс-листе.
Разумеется для такого крупного проекта было единственным решением перенести все на полноценную CMS.
Для данного проекта мы использовали MODx + джентельменский набор стандартных расширений. Самописного кода было написано немного, все задачи решались наиболее простым способом.
Разработка
Перед началом разработки мы проанализировали множество сайтов конкурентов, так как возмник вопрос, не реализовать ли данный сайт на каком-нибудь современном фреймворке? Но мы решили что и в этот раз достаточно возможностей нашей любимой в “Вэбас” CMS - MODx Revolution. Так как похожих сайтов у нас не было, сборку мы решили начинать с нуля.
Для начала мы подготовили все необходимые макеты, и нарезали их в блоки внутри CMS. Затем контент-менеджеры совместо с SEO-оптимизаторами подготовили структуру сайта и изложили нам требования по управлению и генерации контента.
Данный сайт частично является генерируемым, но при этом нам бло нужно, чтобы страницы были не заполнены непонятным контентом, с содержали актуальную информацию по запросам. Для этого был разработан модуль, который благодаря сложным алгоритмам позволял не только создавать страницы по нужным темам автоматически, но и в дальнейшем позволял “замораживать” их, превращая в обычные, статические страницы, которые контент-менеджеры смогут дополнять и редактировать в соотвествии с планами по развитию сайта.
Дополнительно мы сделали немного нестандартную форму, в которую можно было прикреплять изображение автомобиля для отправки на предварительную оценку.
Контент с сайта был собран программным способом, в виду отсутствия возможности забрать его через базу данных. С размещением его на страницах проблем не было, здесь мы положилсь лишь на опыт наших СЕО-шников, которые подготовили заранее грамотную структуру для разделов.
Наибольшую сложность представлял собой весьма приличных размеров прайс-лист, размещенных на некоторых страницах сайта, и каталог с примерами работ. Управление этими элементами было возложено на компонент MIGx, который позволил собрать все управление данными элементами в одном месте.
