| Дизайнер: | Владимир Потапов. |
| Суть задачи: | Разработать привлекательный и функциональный дизайн сайта для сети фитнес-центров Dr.Loder. Дизайн сайта должен отражать уникальность и эксклюзивность услуг оказываемых компанией, быть по стилю похожим на глянцевый журнал. |
После обсуждения задания, структуры и функционала сайта с заказчиком, начинаем работу над главной страницей.
Здесь размещаем точки входа на наиболее важные разделы, работаем над общим стилем сайта, стараясь отобразить премиальность фитнес-центра.
После того как проработан общий стиль, не забываем, что сайт — это не просто картинка, а интерактивная среда. Прорабатываем состояния управляющих элементов и интерактивность.
Элементы карусели основного баннера (кнопки переключения и пагинатор). Разрабатываем все необходимые состояния. Баннер у нас цикличный, поэтому неактивное состояние не требуется.
Одним из важнейших преимуществ сети фитнес-центров Dr.Loder является болшое количество клубов расположенных по всей Москве. Нужно сделать большой упор на географическую доступность, поэтому для каждого клуба на главной разрабатываем виджет с адресами, телефонами и ближайшими станциями метро.
Ссылки выполненные фирменным цветом при наведении становятся светлее. Цвет hover-эффекта #EF3981. Это придает сайту больше интерактивности.
Пункты списка адресов при наведении становятся подчеркнутыми, давая пользователю понять, что это ссылка, на которую можно нажать.
Для придания большей интерактивности делаем блоки с основными услугами анимированными. При наведении курсора цвет подложки изменяется плавно, это выглядит более естественно, чем применения свойства hover без анимации.
правильно
:hover {-webkit-transition: background 0.5s;}
неправильно
:hover {-webkit-transition: none;}
Прорабатываем поведение блока «Новости», разрабатываем состояния при наведении курсора.
Блок с анонсом новости делаем полностью кликабельным.
Заголовок и аннотация становятся подчеркнутыми, давая пользователю понять, что это ссылка, на которую можно нажать.
Работая над макетом учитываем условия в которых может просматриваться сайт и отрисовываем фоны в размере до 2560 px в ширину. Таким образом сайт будет отлично смотреться на любом мониторе.
Продолжаем работу над сайтом, прорабатывая внутренние страницы.
Так же как и на главной, для каждой внутренней страницы прорабатываем состояния элементов и механику взаимодействия, например страница со списком услуг состоит из списка баннеров с описанием услуги, фотографиями и адресами клубов в которых услуга предоставляется.
Общий вид модуля по умолчанию. Помещаются все адреса, описание, кнопка для просмотра фотографий.
По умолчанию кнопка просмотра фото полупрозрачна (для привлечения внимания). При наведении она становится ярко-белой, а все под ней затемняется.
При наведении название и текст описания становятся подчеркнутыми, тем самым показывая, что это ссылка для перехода к странице описания.
Вариант, когда услуга предоставляется не во всех клубах.
Hover-эффект при наведении на адрес клуба.
В процессе работы над проектом родилась идея реализации интерактивной ленты мероприятий. Модульная структура сайта позволила легко внедрить новый блок в существующий дизайн. В верхней части модуля расположена лента событий, в нижней находится интерактивная карта Москвы с отмеченными клубами. Слайдер по которому проводится мероприятие выделяется цветным маркером. Есть возможность отобразить в ленте только мероприятия для одного филиала, для этого кликнув по нужному маркеру на карте.
Готовим дополнительные рекламные баннеры на главной и сдаем проект в верстку.
