Строительная компания Банзай

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

Задача:

  • Обновить старый дизайн сайта
  • Добавить админ панель, в которой можно легко вносить правки по сайту
  • Сделать сайт «мультиязынчым». Добавить русский язык и украинский.

Компания работает на протяжении многих лет, дизайн сайта уже явно знаком многим людям и представителям других организаций (компания Банзай работает с гос. учреждениями и другими крупными компаниями).

Изначально я подобрал несколько вариантов дизайна. То, что сейчас более популярно. Клиенту не захотелось отходить от основного дизайна и тогда было принято решение просто «освежить» дизайн старого сайта оставив основные признаки.

  • Сохранить основные цвета
  • Сохранить анимацию в шапке сайта
  • Сохранить компактность дизайна
Изначальный дизайн сайта компании Банзай
Вид содержимого одной из страниц

Еще раз изучив сайт, я набросал еще раз план, как можно его обновить. Сложность состояла в двух вещах:

  1. Компактность. Сейчас этот стиль очень редко используется с таким небольшим количеством данных. Обычно, компактное расположение объектов отлично смотрится в новостных сайтах или крупных порталах, форумах. А тут минимум контента. Не большая картинка, да два абзаца текста (в лучшем случае).
  2. Анимация в шапке. Клиент еще давно заказал красивую анимацию. Смотрится восхитительно. НО. Анимация выполнена на «флеше» (расширение файла .swf). Сейчас этот формат не поддерживается браузерами. Он либо не работает, либо вместо него появляется отвратительное серое окно с просьбой «Кликните, чтобы активировать флеш плеер», согласитесь, так себе ситуация.

Решение проблем и разработка

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

Нет, этот конструктор не нагружает хостинг и не создает много дополнительных кодов. Он работает с современной версии создания страниц, потому нагрузка минимальна. Помимо этого, он работает на версии PHP 7.0, она сама по себе работает в два раза быстрее предыдущей версии (5,6).

Что мне это дало? Мне, толком ничего. А вот клиент теперь легко, в пару кликов может менять любые блоки на сайте, добавлять новую информацию и редактировать старую. Не залезая в коды, а просто «играясь» с конструктором. Чтобы не возникало трудностей я записал четкую видео инструкцию по работе с сайтом, как редактировать каждый блок, как работать с страницами.

Для мультиязычности я использовал достаточно популярный и мощный плагин WMPL. Он отлично справился с своей задачей.

Как и говорил выше, для быстрой работы сайта я настроил хостинг. Перевел программную часть на версию PHP 7, она в два раза быстрее популярной PHP 5.6. Добавил оперативной памяти в настройках, вместо 64мб стало 256мб.

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

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

Анимация. Я скачал редактор флеш анимаций и «разобрал» готовую анимацию на множество файлов. После этого, я сохранил её как обычную гифку, которые мы часто видим в интернете. Но столкнулся с её весом)) Весила анимация почти 20Мб! Это губительно для сайта. Тогда, я решил преобразовать анимацию в видео. Это было верным решением. Видео весит всего 160кб. Я установил его в шапку сайта, поставил автовоспроизведение и зациклил, чтобы оно работало по кругу. Получилось отлично)

Что в итоге?

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

  1. Разработан новый сайт на движке WordPress
  2. Я сохранил стилистику старого дизайна, сохранив узнаваемость.
  3. Восстановили анимацию и переработал её в современный формат
  4. Добавлена удобная админ панель
  5. Добавлена мобильная версия сайта
  6. Добавлен второй язык для удобства пользователей
  7. Обновлены фото на сайте, добавлены новые страницы и свежие сертификаты
  8. Подключили новый хостинг с более высокой мощностью (до этого сайт находился на хостинге разработчика первой версии сайта)

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

Ссылка на готовый проект: частная фирма Банзай

Новая главная страница сайта.
Одна из внутренних страниц сайта

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *