Разработка лендинга Косметологические курсы
сайт под ключ, лендинг, медицина
Дизайн и верстка лендинга Косметологические курсы (сайт под ключ, август 2019)
О проекте
Обучающие курсы школы косметологии Dr.Perfetto (Москва). Самые новейшие технологии, цены ниже, чем в других школах, индивидуальный график занятий, коммерческий сертификат по окончании.
Задача проекта
- Разработать дизайн посадочной страницы с контрастными цветами и графическими элементами в классическом стиле.
- Сверстать landing page.
- Разместить сайт на хостинге и опубликовать в интернете.
Разработка дизайна лендинга
Референсы для дизайна: логотип, который уже был у компании, античная скульптура и архитектура, тематические flat изображения.
Что было сделано
- Разработан макет страницы (Photoshop) с секциями: интро, о нас (партнеры, преподаватели, фотогалерея), почему мы (достоинства, видео-отзывы), список программ, как записаться на курс, отзывы учеников, контакты.
- Отрисованы: логотип в векторном формате и декор подзаголовков (CorelDraw, SVG), фоны и favicon (Photoshop).
- Созданы gif-картинки для блоков с кнопкой заявки: скидка 5%, Акция (Photoshop).
- Составлены маркетинговые заголовки, а также несколько вариантов призыва к действию и текста кнопки, отредактированы тексты (подзаголовки, абзацы, списки).
- Осуществлена адаптивная верстка посадочной страницы: Html, Css, jQuery (Atom).
На сайте реализовано
- вкладки, галереи фото и видео, поп-ап окна (заказ обратного звонка, согласие пользователя, политика конфиденциальности, яндекс карта), Slick слайдер (отзывы), форма обратной связи;
- анимация заголовков, текстовых блоков и фона при прокрутке страницы;
- ховер-эффекты для логотипа и иконок;
- стилизованный скролл-бар;
- блок Поделиться в соцсетях;
- адаптивность.
UI-элементы сайта
Gifs


Верстка сайта
Подключенные плагины
- Magnific-popup
- Slick slider
- Slick lightbox
- Slimscroll
Интересные блоки на сайте
Вкладки с липким меню в сайдбаре (секция Программы):
- Фиксирующееся вверху при скролле sticky меню в сайдбаре;
- Скролл страницы к верху контентной части новой активной вкладки после клика на пункт меню в сайдбаре;
- Сворачивание меню в кнопку "Все программы" при малых экранах.
JavaScript плагин адаптивных вкладок с липким меню Такие вкладки с плавающим (липким) меню в левой колонке (сайдбаре) я реализовал в плагине Responsive Sticky Menu Tabs. С его помощью их можно добавить на любую страницу сайта.
Фотогалерея
В ленте чередуются превью изображения квадратных и вертикальных прямоугольных форматов.
Давайте общаться
Я хотел бы поговорить о вашем бизнесе, отправьте мне письмо на make.website.info@gmail.com.
Оставьте свой комментарий!
Комментарии (0)