Сайт компании "ПСКБ"

Когда мы получили в работу сайт компании “Борус”, мы не планировали производить на нем серьезных работ. Сайт достался нам от другой компании и уже был довольно сложным, как внутри, так и снаружи. Поэтому пока он способен был обеспечить возможности внесения правок, мы решили его сильно не переделывать.

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

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

Дизайн

От старого сайта нам достался логотип, заказанный в “Студии Лебедева”. Логотип был современный, легкий, то что нужно в качестве отправной точки.

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

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

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

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

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

На некоторые страницы был внедрен блок с вариантами реализции той или иной конструкции из стекла, с ценами и раскрывающимссписком работ. Для некоторых стайтей так-же была наприсована инфографика и подобраны подходящие тизеры.

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

Верстка

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

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

Разработка

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

Так как было решено обновить MODx Evolution до MODx Revolution и сохранить при этом множество существующих дополнительных полей и связей, мы сделали полную копию базы данных, а затем специальным скриптом переконвертировали данные из старого формата в новый.

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

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

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

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

Проведенные работы

Дизайн
Наполнение
Каталог товаров
Верстка
Настройка

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

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

Наш заказчик и мы остались довольны результатом.

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

Хотите заказать похожий проект? Звоните нам и мы поможем сделать расчет стоимости

Давайте знакомиться!

Заявка на получение обратного звонка