Задание на верстку

Шрифт

В дизайне используется Gotham Pro, который нужно подключить через font-face. 

Загрузка

Необходимо оптимизировать загрузку сайта. При посещении вывести спиннер (прим. http://dmitriylevin.ru) в течении загрузки первого и второго экрана. Можно прогружать страницу частями по мере прокрутки. В этом месте хотим услышать возможные решения.

Первый экран и навигация

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

Ссылки на разделы в навигации — якори страницы до соответствующего пункта. Клик по логотипу в любой части страницы работает как scroll to top. Подходящую динамику скролла можно посмотреть на примере http://designmodo.com/slides/

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

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

Информер скролла, иконку мыши, нужно анимировать на примере http://codepen.io/ajrdesign/pen/jEOBRL


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

Фотогалереи

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

Смену фотографий можно сделать с каким-нибудь простым эффектом типа кросс-фейда. Клик по фото работает как переход к следующей фотографии. Галерею можно сделать зацикленной.

Отзывы

Самый свежий отзыв представлен крупным сниппетом. Клик по «Еще отзывы» подгружает порцию из еще 4 отзывов. Полная версия раскрывается в фуллскине с возможностью перейти на следующий/предыдущий.

Нужна возможность добавления новых отзывов. Подойдет даже инструкция в формате: «Вставить этот кусок кода сюда, поменять эту ссылку… и т.д.» Не нужна какая-то отдельная админка, которая очевидно повлияет на бюджет. Пусть это будет не самый удобный способ добавления новых отзывов, зато дешевый.

Социальные сниппеты

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

Контент

Видео 1:
Видео 2:
Фото отзывов:
Фото раздела «О себе»:
Фото раздела «Свадебный ужин»:

Мета

Заголовок страницы: Дмитрий Лёвин. Ведущий с идеями
Описание: Автор и актер КВН на Первом канале, сценарист популярных сериалов на канале ТНТ, телеведущий и автор развлекательных программ. Креативный директор и основатель авторской event-группы «Светлые головы». Постоянный спикер образовательных мероприятий для ведущих event-индустрии.