Редизайн главной страницы сайта клиники пластической хирургии и косметологии

веб дизайн, редизайн, медицина, hostcms

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

Новый дизайн и верстка домашней страницы сайта (апрель 2021)

 О проекте

Центр инновационной медицины Damas Medical Center, до 2022 года называвшийся Клиника пластической хирургии и косметологии «Damas Clinic» (damasclinic.ru). Центр предоставляет в Москве полный спектр услуг по пластической хирургии, косметологии, дерматологии, пересадке волос, стоматологии, гинекологии, диагностики и массажа.

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

1. Разработать дизайн главной страницы с нюансным цветовым решением, модифицировав существующий внешний вид и структуру. Пожелание - уйти от так называемого бутерброда (горизонтальные ряды текста с разным оформлением).
2. Укоротить страницу за счет использования вкладок и отказа от некоторых секций.
3. Исправить неадекватное расположение элементов некоторых блоков на малых экранах (планшеты и смартфоны).
4. Исправить некорректную работу главного меню: при перемене ориентации (портретная / альбомная) планшетов и смартфонов меню полностью пропадает из хедера сайта.
5. Осуществить html верстку.
6. Интегрировать верстку с движком HostCms в админ-панели.

На видео ниже - ошибки адаптивной верстки прежней версии главной страницы: некоторые блоки (Статьи и другие), при ресайзе исчезает главное меню сайта.

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

1. Дизайн: создание в Photoshop, отрисовка графики, фонов и gif-прелоадера.
2. Верстка: модифицированы все секции, переделано главное меню (плагин mmenu), разные изображения для разных экранов (<picture>), слайдеры (Owl carousel), вкладки (jQuery UI tabs), модальные окна.
3. Интеграция верстки с cms HostCms v. 6.7.1.

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

• Прелоадер.
• Добавлены анимации (jQuery + Css) в слайдшоу первого экрана и элементов при скролле.
• Фильтры и градиентные накладки для изображений (секции Акции и Статьи).
• 2-цветные фоны секций.
• Загрузка и воспроизведение YouTube роликов только после клика (секция Видео).
• Исправлено мобильное меню: отображение и скрытие при ресайзе страницы.
• Вкладки: О клинике, Врачи, Пресса о нас.
• Ховер-эффекты для логотипа и иконок.
• Адаптивность: отлажено адекватное отображение страницы для всех экранов.

Редизайн сайта-визитки врача Новый дизайн персонального сайта врача косметолога, добавление анимаций и английского языка.

 Страницы сайта

• Прежняя страница
• Новая страница

Скриншоты и видео

Как вам понравился такой результат редизайна главной страницы сайта Damasclinic.ru? Хотели бы преобразить свои страницы и исправить некорректно работающий функционал? Просто сообщите о своем желании, я с радостью помогу осуществить это! Напишите мне на make.website.info@gmail.com:

Написать