Разработка промо-сайта для компании Bayer

В начале года мы завершили промо сайт "Смарт контрацепция" для компании Bayer AG. Сайт о лекарственном средстве для женщин.

Разработка промо-сайта для компании Bayer
Просмотров 124
Время чтения: 5 минут

Задача

Новый современный дизайн для сайте smartcontraception.ru, который посвящен лекраственному препарату для умной женской контрацепции производства Bayer Healthcare LLC был закончен в феврале 2016. Из особенностей данного сайта стоит отметить его адаптивность для всех устройств, сложную анимацию объектов, и удобство просмотра контента в один экран по высоте. Натяжку верстки на движок сайта осуществляли другие разработчики, так как политика компании Байер не позволяет проводить все работы по проекту в одной компании. В дальнейшем сайт будет работать на Team CMS.

Краткое ТЗ

Главная страница
  1. Главная страница представляет из себя ТРИ СЛАЙДА.
    Переход от одного слайда к другому осуществляется ползунком.
  2. При переключении состояния ползунка меняется большая картинка. А так же меняется заголовок у ползунка «Насыщенная жизнь», «Умные гаджеты» и «Ты и Фолаты»
  3. И становятся активными определенные картинки, соответствующие состоянию СЛАЙДА. Нужно реализовать плавный переход от слайда к слайду с эффектом выезжающих полей для заголовка и появлением текста.  
  4. При бездействии пользователя более чем 5 секунд, происходит автоматический передвижение ползунка в следующее состояние. Данный процесс нужно зациклить. Т.е. переход по слайдам осуществляется в следующем порядке 1-2-3-1-2-3… 
  5. При наведении на подсвеченную (активную) картинку, она должна иметь эффект плавного увеличения на 10%.
  6. Ссылки в подвале сайта. При наведении должно пропадать подчеркивание и менять цвет на голубой. Берем цвет с кнопки «ГИНЕКОЛОГ ONLINE».
  7. Ссылки соц. сетей, тоже должны менять цвет при наведении на голубой как в пункте №6. 
  8. Кнопка «ГИНЕКОЛОГ ONLINE» при нажатии имеет эффект зажатой кнопки.
  9. Страница должна масштабироваться под любое разрешение экрана с условием отображения во весь экран без появления вертикального или горизонтального скрола.
    Т.е. высота и ширина 100%.
  10. Обеспечить плавный переход от слайда к слайду пункт №3.
Главная страница (Адаптивная версия)
  1. Адаптивная верстка для отображения сайта на мобильных устройствах (смартфоны и планшеты).
  2. Функционал и эффекты перехода постараться сохранить с desktop версии сайта.
  3. Так же обеспечить автоматический переход от слайда к слайду в случае бездействия пользователя в течении 5 секунд.
Второстепенная страница

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

  1. Логотип SMART является ссылкой на главную страницу.
  2. Появляется вертикальное меню слева, которое закреплено по высоте и не прокручивается вместе с контентом находящимся в правой части экрана (картинки). Содержащее три ползунка. И ссылки по сайту ведущие на типовые страницы.
    А так же ссылки на соц. сети. И Гинеколог online.
    Для адаптивной версии меню должно иметь возможность скрыть. 
  3. Страница должна отображаться во весь экран при любом разрешении экрана. 100% по ширине. Высота страница обусловлена набором отображаемых картинок соответствующей зажатым ползункам. Масштабируется в результате набора картинок.
  4. Функционал ползунков следующий:
    • Насыщенная жизнь
    • Умные гаджеты
    • Ты и фолаты

При заходе на страницу отображается зажатым ползунок соответствующий переходу с главной страницы. Т.е. если мы перешли на второстепенную страницу с слайда №1 главной страницы, то зажатым будет ползунок «Насыщенная жизнь».
Соответственно если зашли на второстепенную страницу со второго слайда главной страницы, то зажатым будет «Умные гаджеты».

разработка сайта для Bayer Smart Contraception
верстка сайта для Bayer Smart Contraception
дизайн сайта для Bayer Smart Contraception

У вас есть деловой запрос?
Давайте обсудим!

Оставьте свои контакты,
мы свяжемся с вами в ближайшее время.

Cайт jetbit.ru использует файлы cookie для хранения данных. Продолжая использовать сайт, Вы даете согласие на работу с этими файлами. Подробнее