Техническое задание: Верстка сайта типа Landing Page
Прототип: http://w79qk4.axshare.com/#g=1&p=home&c=1
1. Необходимо сверстать, по сетке (bootstrap или другой) шаблон «Шри-Ланка».
2. Шаблон должен быть адаптивным и корректно отображаться на всех устройствах.
3. Все графические элементы должны быть векторными (кроме фотографий). Векторные элементы предоставляет дизайнер. Если како-то векторного элемента нет в архиве - нужно сообщить менеджеру. Далее векторный элемент будет предоставлен либо будет подтверждение, что можно использовать его в растровом формате.
3. На кнопках по сайту происходит вызов модального окна с формой обратной связи Форма одинаковая во всех случаях. Нужен функционал который будет отправлять данные из формы на конкретный электронный адрес или же использовать google формы в данном модальном окне (в случае с гугл формами - заявка будет обрабатываться приложением гугл форм, потому ничего никуда отправлять не нужно. Вставка форм происходит через iframe готовым кодом, который выдает сервис гугл форм). В обоих случаях нужно чтобы после заполнения заявки, клиента перебрасывало на страницу «спасибо» с другим адресом (задача с этой страницей возможно будет отдельно или не будет вообще). Предпочтительно использовать гугл форму, если возможно реализовать редирект после отправки формы клиентом.
4. В блоке «программы» есть детальный обзор программы. Это модальное окно (в таком же стиле как и окно с формой), где клиент может почитать более детальную программу тура. Это окно важно реализовать со скролом, чтобы не листать страницу, а листать только содержимое окна. Желательно скролл в заданном дизайном стиле, если не увеличивает стоимость проекта.
5. На сайте используется всего 1 шрифт Fire Sans. Будет предоставлен в архиве с Макетом.
6. У шрифт задан межбуквенный интервал. Все заголовки - 30, остальной текст - 15.
Формула для расчета letter-spacing в em :
X / 1000 = Y
Где X — значение интервала в Photoshop, а Y-то же значение, выраженное в em для CSS.
Есть и формула для расчета значения в пикселях:
X * S / 1000 = P
Где X — значение интервала в Photoshop, S — размер шрифта в пикселях (при работе в 72 dpi), и P — значение интервала для CSS.
7. На сайте используются иконки из пакета Material Design Icons. Все иконки маркированы своими оригинальными названиями для более удобной ориентации. Пакет иконок с инструкциями будет в архиве с макетом.
8. Все эффекты наведения на сайте должны быть плавными, благодаря transition. Скорость анимации нужно согласовать в процессе разработки.
9. Нужны анимационные эффекты для элементов сайта. Писать с нуля ничего не нужно, используем готовые решения из просторов интернета. Со стороны разработчика приветствуются предложения, которые можем задействовать. (В целом нужна разработка с энтузиазмом. Сайт должен быть живой и красивый, аудитория в основном - женщины. Просто разработать может каждый, а вот качественно и с энтузиазмом - это прерогатива тех, кого интересует долгосрочное сотрудничество и перспективные проекты).
10. Навигация сайта - плавающая (должна двигаться вместе с прокруткой). Плавающая навигация появляется тогда, когда скрывается первый экран (главный экран). Плавающая навигация меньше по высоте, стили есть в макете с дизайном, появляется плавно, без резких движений.
11. Скрол «вверх» - желательная анимация из готовых решений, которая в начале доли секунды медленновато прокручивает, а потом резко ускоряется. Если это сложно (хотя почему? в интернете полно готовых решений), то ждем предложений от разработчика.
12. В шаблоне некоторые стили для «Hover» эффектов показаны, а другие скрыты. Разделы с этими эффектами помечены как HOVER и имеют красную отметку внутри раздела с каждым конкретным экраном сайта.
13. Лендинг не малый, потому нельзя перегружать его «мусором» в коде, чтобы это не создавало лишних нагрузок. Изображения необходимо пережимать без потерь, но при этом с малым весом. Данную процедуру можно выполнить вместе с дизайнером, если у разработчика возникнут сложности.
