Розробка промо-сайту для лікарського препарату
Задача
Новий сучасний дизайн для сайту smartcontraception.ru, який присвячений лікарському препарату для розумної жіночої контрацепції виробництва Bayer Healthcare LLC був закінчений в лютому 2016. З особливостей даного сайту варто відзначити його адаптивність для всіх пристроїв, складну анімацію об'єктів, і зручність перегляду контенту в один екран по висоті. Натяжку верстки на движок сайту здійснювали інші розробники, так як політика компанії Байєр не дозволяє проводити всі роботи за проектом в одній компанії. Надалі сайт буде працювати на Team CMS.
Короткий ТЗ
Головна сторінка
- Головна сторінка представляє з себе ТРИ СЛАЙДА.
перехід від одного слайда до іншого здійснюється повзунком. - При перемиканні стану повзунка змінюється велика картинка. А так само змінюється заголовок у повзунка & laquo;насичене життя & raquo;,«розумні гаджети » і«ти і фолати & raquo;
- I стають активними певні картинки, відповідні стану СЛАЙДА. Потрібно реалізувати плавний перехід від слайда до слайда з ефектом виїжджають полів для заголовка і появою тексту.
- При бездіяльності користувача більш ніж 5 секунд, відбувається автоматичний пересування повзунка в наступний стан. Даний процес потрібно зациклити. Тобто перехід по слайдах здійснюється в наступному порядку 1-2-3-1-2-3…
- При наведенні на підсвічену (активну) картинку, вона повинна мати ефект плавного збільшення на 10%.
- Посилання в підвалі сайту. При наведенні має пропадати підкреслення і міняти колір на блакитний. Беремо колір з кнопки«гінеколог ONLINE & raquo;.
- Посилання соц. мереж, теж повинні змінювати колір при наведенні на блакитний як в пункті №6.
- Кнопка«гінеколог ONLINE & raquo; при натисканні має ефект затиснутою кнопки.
- Сторінка повинна масштабуватися під будь-який Дозвіл екрану з умовою відображення на весь екран без появи вертикального або горизонтального скрола.
тобто висота і ширина 100%. - Забезпечити плавний перехід від слайда до слайда пункт №3.
Головна сторінка (Адаптивна версія)
- Адаптивна верстка для відображення сайту на мобільних пристроях (смартфони та планшети).
- Функціонал і ефекти переходу постаратися зберегти з desktop версії сайту.
- Також забезпечити автоматичний перехід від слайда до слайда в разі бездіяльності користувача протягом 5 секунд.
Другорядна сторінка
Сторінка представляє з себе лендінг пейдж.
при перегортанні сторінки, в залежності від приналежності контенту в послідовності перемикається повзунок в меню зліва.
меню зліва статично по відношенню до контенту сторінки.
- Логотип SMART є посиланням на головну сторінку.
- З'являється вертикальне меню зліва, яке закріплено по висоті і не прокручується разом з контентом знаходяться в правій частині екрану (картинки). Містить три повзунка. І посилання по сайту провідні на типові сторінки.
а так само посилання на соцмережі. І гінеколог online.
для адаптивної версії меню повинно мати можливість приховати. - Сторінка повинна відображатися на весь екран при будь-якому дозволі екрану. 100% по ширині. Висота сторінка обумовлена набором відображуваних картинок відповідної затиснутим повзунків. Масштабується в результаті набору картинок.
- Функціонал повзунків наступний:
- Насичене життя
- Розумні гаджети
- Ти і фолати
При заході на сторінку відображається затиснутим повзунок відповідний переходу з головної сторінки. Тобто якщо ми перейшли на другорядну сторінку з слайда №1 головної сторінки, то затиснутим буде повзунок «насичене життя».
відповідно якщо зайшли на другорядну сторінку з другого слайда головної сторінки, то затиснутим буде «розумні гаджети».
