Дизайн сайта и вёрстка на Wordpress

Какие задачи были поставлены

Работы по созданию сайта включают в себя:

Создание прототипа сайта: разработка базовой структуры сайта, user flow, варфреймы основных страниц (главная, каталог, карточка товара).
Дизайн-концепция сайта (макеты первых экранов основных страниц + логотип для каждой дизайн-концепции), 3 варианта на выбор Заказчика. Выбирается один из 3-х предложенных вариантов и дорабатывается.
Дизайн-макеты основных страниц сайта согласно утвержденной дизайн-концепции.
Создание элементов дизайн-системы (кнопки, иконки, формы, карточки и т.п., конечный список утверждается в работе над страницами).
Перенос и настройка сайта https://car-trucks.info/ на движок Wordpress, с использованием next.js and react.js для ускорения движка.
Расширение возможностей по добавлению необходимой технической информации о товаре.
Добавление функции «подбор/поиск техники» по карточке товара, по любому признаку из карточки.
Добавление управляемого квиза.
Перенос контента со старого сайта на новый.
Добавление страниц «Отзывы», «Блог».
Подключение специфических плагинов Wordpress: Contact Form 7; Duplicator; Yoast SEO; Autoptimize; Cyr-To-Lat; Redirection; WebP Express и др.
Перенос домена на новый сайт (домен старый, сайт новый – развертывается, привязывается).
Подключение систем аналитики Яндекс и Google, пикселов ВК и другой статистики по необходимости.
Базовая сео-оптимизация: склейка главного зеркала; настройка сжатия картинок; favicon’ки под все размеры; формирование sitemap.xml; создается robots.txt; настраивается транслитерация url; настраивается формирование структуры сайта по типу /каталог/товар.
Запись видеоуроков по взаимодействию с системой управления сайтом (бонусная часть).

Работа над сайтом

Первые наброски. Сначала было принято решение определиться со стилистикой первого экрана.

Анализ целевой аудитории и конкурентов

85% клиентов являются мужчинами в возрасте от 35 до 55 лет с доходом выше среднего и интересами в сфере грузоперевозок. Решение по сотрудничеству принимается после тщательного изучения всех условий, срок сделки может составлять до 1 года.

КОГДА возникает необходимость в расширении бизнеса и приобретении новой техники,
Я ХОЧУ иметь полное представление обо всех новинках на современном рынке, их преимуществах и недостатках перед старыми моделями и их реальной стоимости,
ЧТОБЫ выбрать технику с оптимальными параметрами и сроком окупаемости.

КОГДА возникает необходимость в расширении бизнеса и приобретении новой техники,
Я ХОЧУ выбрать технику у проверенного надежного поставщика,
ЧТОБЫ получить гарантии и быть уверенным что в случае неисправностей или производственного брака мне не придется вкладывать свои деньги в ремонт и терять прибыль из-за простоя.

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

Следующим этапом было создание варфреймов

Версия сайта до редизайна

Компания уже давно работает на рынке и имеет определенный уровень узнаваемости, поэтому дизайн решения соответствуют прежнему бренд-буку и тематике бизнеса.
Usability требовало улучшения. Об этом говорили высокий процента отказов и низкая конверсия. Решено было переделать структуру страниц, сделать логику взаимодействия интуитивно понятной и простой.

Цвета и типографика

Базовая SEO-оптимизация

Так как работа велась с доменом, имеющим уже определенную историю, наша команда относилась к нему не как к сайту с "нуля". Мы не стали ограничиваться базовыми настройками технички и провели SEO-аудит всех основных параметров:

Определение главного зеркала сайта.
Сканирование Robots.txt и sitemap.xml.
Проверка кодов ответов 3ХХ, 4ХХ, 5ХХ (на сайте не должно быть редиректов, битых ссылок, проблем с сервером).
Сканирование мета тегов (дубли, отсутствие, повторы).
Выявление мало уникальных и страниц с низкой ценностью (МПК).
Тестирование скорости загрузки, определение действий по её улучшению.
Проверка соответствия микро разметки организации на сайте рекомендациям поисковых систем.
Usability-аудит, проверка адаптивности ко всем устройствам.
Проверка наличия всех форматов Favicon на сайте.
Настройка всех систем аналитики (Яндекс Метрика, Яндекс Вебмастер, Google Analitics и Google Search Console).

Итоги работы

В результате мы получили полноценный интернет-магазин, проработанный по всем параметрам и готовый к любым форматам продвижения: SEO, Яндекс.Директ и т.п.