Как сделать сайт-визитку так, чтобы заявки оставляли Adidas и Swarovski?

0

Зрелищный кейс от Rocket Business: сайт-портфолио для студии видеографии из Дубая. Делимся нашим первым опытом разработки для клиента, у которого целевая аудитория — мировые бренды.

2.8K показов 322 открытия


                    Как сделать сайт-визитку так, чтобы заявки оставляли Adidas и Swarovski?

Дорого-богато, но со вкусом

QVAL Film — известная студия в премиум-сегменте ОАЭ. За 12 лет на рынке команда видеографов успела поработать с именитыми клиентами: Four Seasons, Chopard, Marks&Spencer, Adidas, Swarovski.

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

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

  • стильный total black дизайн;
  • видео и фото в качестве 4к;
  • моментальная загрузка страниц.

Теперь разберем каждый пункт.

Шаг 1: продумать и отрисовать дизайн

В индустрии видео-продакшена продает визуал, поэтому разработка дизайна в этом проекте — ключевая задача.

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

2. Минимализм в черном цвете. Дополнять интерфейс 3D-анимацией и перегружать его интерактивом было бы неуместно. Мы сделали акцент на работах студии, оставили однотонный лаконичный фон и классические цвета шрифтов: белый и красный.

3. Логичная структура. Только полезные разделы: в каждом из них лучшие фото и видео, разбитые на категории.


                    Как сделать сайт-визитку так, чтобы заявки оставляли Adidas и Swarovski?

4. Имиджевая история. Студия предлагает дорогой продукт без фиксированного прайса. Прежде чем заказать коммерческое видео, лейблы и бренды тщательно изучают подрядчика. Отдельные страницы на сайте позволяют увидеть бекстейдж, оценить рабочий процесс и познакомиться с командой. Целый блок посвящен техническому оборудованию студии.

Шаг 2: разработать легкий сайт

Контента на сайте много: одни только видеозаписи в полном качестве весят по несколько гигабайт. «Тяжеловесным» оказалось и фото-портфолио.

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

Система управления для маленьких сайтов — Flat File CMS

CMS, использующие базы данных для хранения информации, не подошли для нашего сайта-портфолио. В отличие от WordPress, Drupal, ModX и других систем Grav хранит страницы, настройки и контент в отдельных файлах.


                    Как сделать сайт-визитку так, чтобы заявки оставляли Adidas и Swarovski?

С flat-file CMS:

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

Сайт верстали на сборщике проектов. Его функционал позволяет собрать добавленную или измененную пользователем информацию из CMS и генерировать контент один раз. После открытия страниц выдается уже сгенерированная версия: так нагрузка с сервера снимается. Затем мы настроили кэш, заполнили мета — и получили легкий и быстрый сайт

Александр, senior-программист «Rocket Business»

Шаг 3: ускорить загрузку и добиться идеального качества

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

Сначала мы подключили трансляцию всех видео с Youtube. По правилам платформы качество изображения настраивается автоматически и зависит от скорости интернета. А значит — выбирается оптимальное разрешение 720p. Этого для «вау-эффекта» явно недостаточно. Но хуже всего видео выглядели в первые секунды загрузки.

Вот такую пиксельную и заедающую картинку мы наблюдали на стандартной скорости 4G:

А такие показатели выдавал Pagespeed после проверки:


                    Как сделать сайт-визитку так, чтобы заявки оставляли Adidas и Swarovski?

Мы решили поменять видеохостинг, чтобы добиться отображения всех роликов в 4k.

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

Стандартных способов интеграции с сайтом Vimeo не предлагает. Для этого программисты переписали код и добавили новые скрипты.

Работу проверяли по контрольному чек-листу:

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

Проверьте и вы — сайт доступен по ссылке.

Любуемся результатами

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


                    Как сделать сайт-визитку так, чтобы заявки оставляли Adidas и Swarovski?

Неожиданный бонус: сайт попадает в ТОП-5 выдачи по ключевым запросам на русском и английском без SEO-продвижения.


                    Как сделать сайт-визитку так, чтобы заявки оставляли Adidas и Swarovski?

Задача для нас была непростой: «Rocket Business» знают как одно из лучших SEO-агентств в России. Но отказываться от интересного вызова не стали — программисты и дизайнеры переросли стандартные задачи и решили сделать проект для международного рынка.

Ждем вашей оценки в комментариях!

Источник: vc.ru

Leave A Reply

Your email address will not be published.