Разработка одностраничного сайта и интеграция с видео-хостингом

«Фонд 2020» обратился к нам с запросом на создание сайта для просмотра фильма «Аркаим. Колесница времени».

Результат

Разработать сайт с возможностью онлайн-просмотра фильма. Защитить авторские права и ограничить свободное скачивание

Техническое задание:

Разработать понятный, удобный в использовании и информативный для посетителей сайт. Заинтересовать их визуальным оформлением. Сохранить оптимальную скорость работы сайта

Цель разработки:

люди, заинтересованные в истории Челябинской области

Основная ЦА:

Этапы разработки:

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

Подбор цветовой гаммы и шрифтов

1 Этап

2 Этап

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

Работа с текстом и фотографиями

Несмотря на то, что сайт является небольшим и одностраничным, мы создали для него меню, чтобы пользователям было удобно переходить к интересующим разделам. В меню входит всего 3 пункта: Информация, Фильм, Контакты

Создание структуры сайта

3 Этап

Мы тщательно подбирали площадку для показа фильма с возможностью сохранения авторских прав и защиты от пиратства. В итоге был выбран видео-хостинг kinescope (https://kinescope.ru/). Площадка позволяет установить запрет на скачивание фильма на сторонние ресурсы. Важно, что она очень удобно интегрируется на сайт.

Технические настройки

4 Этап

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

Отображение контактов и парнеров

5 Этап

Провели необходимые SEO-настройки: для каждой страницы выставили заголовок h1; сделали описание и заголовок страниц; добавили favicon. Подключили Яндекс Метрику, Яндекс Вебмастер, Google Search Console, Google Analytics для отображения сайта
в поисковой выдаче и дальнейшего анализа посещаемости

SEO-Настройка сайта

6 Этап

Результат:

Ссылка на сайт:

arkaim-film.ru