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

Под данные требования были разработаны 3 основные страницы сайта, переключаться между которыми просто и удобно. Это: главная станица, страница мультсериала и конкретной серии. Структура страниц подобна между собой. На каждой странице представлены последние добавленные мультсериалы (правый сайдбар) и серии (левый сайдбар). Разница только в центральном блоке.

Логотип

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

Логотип Multfilm

Фирменная цветовая палитра

В качестве основного цвета был выбран голубой. Этот цвет символизирует успокоение и расслабление. Так же он способствует спокойному размышлению и креативности.

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

Главная Multfilm

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

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

Страница мультсериала

Мультсериал Multfilm

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

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

Станица конкретной серии мультсериала

Серия Multfilm

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

Еще одна особенность данного проекта состоит в том, что зритель после просмотра серии может пройти тест на внимательность. При нажатии кнопки «Пройти тест» страница скролится прямо до теста.

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

Адаптивность и кроссбраузерность

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

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

Результат

Итогом стал компактный и функциональный сайт, который очень понравился клиенту: multfilm.tv.