Разработка лендинга Косметологические курсы

сайт под ключ, лендинг, медицина

Перейти на сайт

Дизайн и верстка лендинга Косметологические курсы (сайт под ключ, август 2019)

 О проекте

Обучающие курсы школы косметологии Dr.Perfetto (Москва). Самые новейшие технологии, цены ниже, чем в других школах, индивидуальный график занятий, коммерческий сертификат по окончании.

 Задача проекта

  1. Разработать дизайн посадочной страницы с контрастными цветами и графическими элементами в классическом стиле.
  2. Сверстать landing page.
  3. Разместить сайт на хостинге и опубликовать в интернете.

 Разработка дизайна лендинга

Референсы для дизайна: логотип, который уже был у компании, античная скульптура и архитектура, тематические flat изображения.

 Что было сделано

  1. Разработан макет страницы (Photoshop) с секциями: интро, о нас (партнеры, преподаватели, фотогалерея), почему мы (достоинства, видео-отзывы), список программ, как записаться на курс, отзывы учеников, контакты.
  2. Отрисованы: логотип в векторном формате и декор подзаголовков (CorelDraw, SVG), фоны и favicon (Photoshop).
  3. Созданы gif-картинки для блоков с кнопкой заявки: скидка 5%, Акция (Photoshop).
  4. Составлены маркетинговые заголовки, а также несколько вариантов призыва к действию и текста кнопки, отредактированы тексты (подзаголовки, абзацы, списки).
  5. Осуществлена адаптивная верстка посадочной страницы: Html, Css, jQuery (Atom).

 На сайте реализовано

  • вкладки, галереи фото и видео, поп-ап окна (заказ обратного звонка, согласие пользователя, политика конфиденциальности, яндекс карта), Slick слайдер (отзывы), форма обратной связи;
  • анимация заголовков, текстовых блоков и фона при прокрутке страницы;
  • ховер-эффекты для логотипа и иконок;
  • стилизованный скролл-бар;
  • блок Поделиться в соцсетях;
  • адаптивность.

 UI-элементы сайта

 Gifs

Гифка скидка
Гифка Акция

 Верстка сайта

Подключенные плагины

  1. Magnific-popup
  2. Slick slider
  3. Slick lightbox
  4. Slimscroll

Интересные блоки на сайте

Вкладки с липким меню в сайдбаре (секция Программы):

  • Фиксирующееся вверху при скролле sticky меню в сайдбаре;
  • Скролл страницы к верху контентной части новой активной вкладки после клика на пункт меню в сайдбаре;
  • Сворачивание меню в кнопку "Все программы" при малых экранах.

JavaScript плагин адаптивных вкладок с липким меню Такие вкладки с плавающим (липким) меню в левой колонке (сайдбаре) я реализовал в плагине Responsive Sticky Menu Tabs. С его помощью их можно добавить на любую страницу сайта.

Фотогалерея

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

Верстка лендинга Курсы косметологии

Оставьте свой комментарий!


Разрешённые теги: <b><i><br>


Комментарии (0)

 

Давайте общаться

Я хотел бы поговорить о вашем бизнесе, отправьте мне письмо на make.website.info@gmail.com.