В ноябре 2018, ко мне обратился официальный поставщик строительных материалов Альта Профиль Ижевск, для создание нового сайта в виде каталога продукции

Задача

Разработать новый сайт-каталог взамен старому с исправлением ошибок, которые были допущены на старом сайте

 

Процесс выполнения работ

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

А также изучил информацию о данной компании:

  1. Какие фирменные цвета используют
  2. Какие направления являются более приоритетными
  3. Лицензии и сертификаты

На основе собранной информации выделил наиболее важные разделы, такие как:

  1. Каталог продукции
  2. Сертификаты и гарантии
  3. Описание компании
  4. Оплата и доставка
  5. Контактная информация

Так как разрабатывал каталог продукции, то оплата на сайте не осуществляется.

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

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

 

Разработка проекта и инструменты

Для разработки проекта выбрал следующие инструменты:

  1. Язык программирования PHP — для серверной части проекта
  2. Библиотеку JQuery — для клиентской части
  3. Bootstrap 4 — для использования готовых компонентов, что позволяет быстро спроектировать базовый интерфейс системы
  4. WordPress— система для управления сайтом
  5. Asana — менеджер для управления задачами по проекту

 

Главная страница

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

Альта профиль Ижевске - Цифровой Волк

Главная страница сайта

 

Страница «Каталог»

После разработки и верстки главной страницы приступил к разработке дизайна страницы «Каталог»

Альта профиль Ижевск каталог

Страница каталога

 

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

На старом сайте, навигация выглядела следующим образом

Альта профиль Ижевск

Старая версия сайта

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

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

Список подкатегорий

 

Страница выбранного товара

На странице отдельного товара, были размещены фотографии, основные характеристики, описание товара, а также дополнительная информация о доставке и времени приема заказов

Страница отдельного товара

При вводе в поле количество товара, пользователь может увидеть итоговую стоимость

Форма заказа товара

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

 

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

Немало важную роль играют корректные пути на сайте, для дальнейшего продвижения в Интернете. На старом сайте URL содержал в себе как латиницу, так и кириллицу

На новом сайте, мы переделали все пути на латиницу

На последнем этапе, после тестирования всего сайта:

  1. заполнили его необходимой информацией
  2. перенесли 611 товаров,
  3. зарегистрировали домен, хостинг и загрузили сайт.

Получил следующий результат: по запросу «альта профиль ижевск» сайт занимает первые позиции в органической выдаче

Поисковая выдача по запросу «Альта профиль Ижевск»
Поисковая выдача по запросу «Альта профиль Ижевск»

Дополнительно

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

После того, как были разработаны все макеты дизайна и сверстаны. Дизайн был установлен на систему WordPress и настроены дополнительные поля, для товаров, контактной информации.

Чтобы администратор сайта мог без проблем добавлять и редактировать необходимую информацию без знания языков программирования

На последнем этапе, после тестирования всего сайта, заполнил его необходимой информацией, перенес 611 товаров, зарегистрировал домен, хостинг, загрузили сайт.

Дополнительно поставил защиту от автоматического копирования и настроили карту сайта для более быстрой индексации поисковыми системами

Методология разработки проекта

При разработке данного проекта, использовал гибкую методологию. За счет этого часть работ проводилась параллельно, что позволило сдать работу заказчику за 15 дней.

Для постановки и управления задачами использовал менеджер задач Asana

Полученный результат

В результате, был разработан новый сайт, перенесены 611 товаров, провел базовую SEO-оптимизацию главных страниц, прописав заголовки и мета-теги с использованием ключевых слов


Антон Чураков
Автор публикации
Антон Чураков
Руководитель IT-компании "Цифровой Волк"
Разработчик на C# и .NET Core

Да, эта статья уже закончилась. Но ничего страшного, для тебя у нас есть еще пара статей

Ответы на вопросы
Как научиться видеть проблемы в многопоточном коде ПО используемых С#
01.08.2021 Антон Чураков  21 Просмотров

Вопрос. Порой в проектах нужно использовать дополнительные потоки для обработки информации. Но работать с...

Технологии
Что входит в инфраструктуру SaaS. И в чем отличия между SaaS, IaaS и PaaS
31.07.2021 Антон Чураков  80 Просмотров

В предыдущей статье мы с вами разобрали, что такое облачный SaaS сервис и чем может быть полезен...

Ответы на вопросы
Нравится мобильная разработка, но боюсь что не найду работу. Стоит ли начать с JS в вебе
30.07.2021 Антон Чураков  20 Просмотров

Вопрос. Мне нравится мобильная разработка на Swift или Kotlin. Но боюсь, что не смогу найти работу когда изучу одну...

Ответы на вопросы
Как научиться правильно проектировать архитектуру будущего приложения
27.07.2021 Антон Чураков  30 Просмотров

Вопрос. Как правильно проектировать грамотную и легко поддерживаемую архитектуру приложения? Ответ....

Ответы на вопросы
Почему принято изначально разрабатывать проект с закрытым кодом
24.07.2021 Антон Чураков  40 Просмотров

Вопрос. Почему принято разрабатывать проект изначально с закрытым кодом. Даже если этот проект не является...

Технологии
Что такое облачный SaaS сервис и какую пользу он может принести бизнесу
23.07.2021 Антон Чураков  132 Просмотров

В последнее время появляются высказывания, что бизнесу нужно переходить в облако. Переносить туда...