В ноябре 2018, ко мне обратился официальный поставщик строительных материалов Альта Профиль Ижевск, для создание нового сайта в виде каталога продукции
Задача
Разработать новый сайт-каталог взамен старому с исправлением ошибок, которые были допущены на старом сайте
Процесс выполнения работ
Перед началом работы, я полностью проанализировали структуру и информацию старого сайта.
А также изучил информацию о данной компании:
- Какие фирменные цвета используют
- Какие направления являются более приоритетными
- Лицензии и сертификаты
На основе собранной информации выделил наиболее важные разделы, такие как:
- Каталог продукции
- Сертификаты и гарантии
- Описание компании
- Оплата и доставка
- Контактная информация
Так как разрабатывал каталог продукции, то оплата на сайте не осуществляется.
Как уже указал ранее, данная компания является официальным представителем, в связи с этим все основные фирменные цвета, а также логотип были взяты с официального сайта завода производителя.
После сбора всей информации и составления технического задания, приступил к разработке дизайна.
Разработка проекта и инструменты
Для разработки проекта выбрал следующие инструменты:
- Язык программирования PHP — для серверной части проекта
- Библиотеку JQuery — для клиентской части
- Bootstrap 4 — для использования готовых компонентов, что позволяет быстро спроектировать базовый интерфейс системы
- WordPress— система для управления сайтом
- Asana — менеджер для управления задачами по проекту
Главная страница
Первым делом разработал главную страницу с учетом фирменных цветов, на которой разместил основную информацию с меню и главную кнопку, сделав акцент на ней — это каталог товаров. Чтобы пользователь мог сразу перейти к поиску и выбора товара
Главная страница сайта
Страница «Каталог»
После разработки и верстки главной страницы приступил к разработке дизайна страницы «Каталог»
Страница каталога
Принял решение, что при переходе на данную страницу, пользователь сразу должен видеть все категории, а также подкатегории. Для того, чтобы он мог быстро сориентироваться и выбрать необходимый раздел.
На старом сайте, навигация выглядела следующим образом
Старая версия сайта
На мобильной версии у пользователя не было возможности перейти в каталог продукции.
Помимо этого, я добавил на страницу родительской категории, возможность выбора подкатегорий, в случае если пользователь сразу выберет её.
Список подкатегорий
Страница выбранного товара
На странице отдельного товара, были размещены фотографии, основные характеристики, описание товара, а также дополнительная информация о доставке и времени приема заказов
Страница отдельного товара
При вводе в поле количество товара, пользователь может увидеть итоговую стоимость
Форма заказа товара
Каждый посетитель может со страницы товара отправить заявку, указав свое имя и номер телефона. При этом все данные товара, такие как: название, его стоимости, а также количество, которое вы введете автоматически отправиться менеджеру компании.
SEO-оптимизация
Немало важную роль играют корректные пути на сайте, для дальнейшего продвижения в Интернете. На старом сайте URL содержал в себе как латиницу, так и кириллицу
На новом сайте, мы переделали все пути на латиницу
На последнем этапе, после тестирования всего сайта:
- заполнили его необходимой информацией
- перенесли 611 товаров,
- зарегистрировали домен, хостинг и загрузили сайт.
Получил следующий результат: по запросу «альта профиль ижевск» сайт занимает первые позиции в органической выдаче
Поисковая выдача по запросу «Альта профиль Ижевск»
Дополнительно
Во время создания сайта Альта Профиль Ижевск, дизайн был сделан адаптивным под мобильные устройства с сохранением всего функционала.
После того, как были разработаны все макеты дизайна и сверстаны. Дизайн был установлен на систему WordPress и настроены дополнительные поля, для товаров, контактной информации.
Чтобы администратор сайта мог без проблем добавлять и редактировать необходимую информацию без знания языков программирования
На последнем этапе, после тестирования всего сайта, заполнил его необходимой информацией, перенес 611 товаров, зарегистрировал домен, хостинг, загрузили сайт.
Дополнительно поставил защиту от автоматического копирования и настроили карту сайта для более быстрой индексации поисковыми системами
Методология разработки проекта
При разработке данного проекта, использовал гибкую методологию. За счет этого часть работ проводилась параллельно, что позволило сдать работу заказчику за 15 дней.
Для постановки и управления задачами использовал менеджер задач Asana