новая структура, свежий дизайн и оптимизированное видео

сушарешает

— проект о физической подготовке профессиональных пловцов и любителей, триатлонистов, а также других водных видов спорта
Объем работ:
  • Главная посадочная страница
  • 3 внутренние страницы услуг
Технические задачи:
  • формы захвата
Срок разработки:
  • 2 месяца
Дата публикации сайта:
  • февраль 2023

Задача

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

Структура

  • Для удобной навигации приняла решение создать главную страницу с общей информацией о проекте, тренерах и программах и внутренние страницы по каждому направлению.
  • Вкарточках программ указала основную информацию по направлению, а при клике на карточку добавила ссылки на отдельные страницы с подробной информацией по каждой программе
  • Навигация по разделам осуществляется через выпадающее меню, подвал и блок с категориями программ
{структура блоков и прототип страницы}

Дизайн решения

Пожеланием заказчика была 1 дизайн концепция.
Основные цвета проекта – оттенки синего, в этой концепции подобрала комплементарные цвета.
Формы простые – прямоугольник и круги в кнопках и элементах навигации.
Для акцента на целевых блоках сайта (карточках программ) добавила рукописный элемент.
Подготовила монохромный и более насыщенный по цветам варианты.
{дизайн-концепции}
школа плавания сайт
Заказчик выбрал более насыщенный по цветам вариант. Продолжаю его разрабатывать
На основной странице важно было показать как работает платформа и дать понять что ученик получит во время пользования программой. Блок с описанием процесса обучения акцентировала рукописными элементами и проиллюстрировала скринами интерфейса платформы.

Блок с тренерами не хотелось заполнять большим количеством текста, поэтому карточки с заслугами тренеров сделала открывающимися при наведении и клике в десктопной и мобильной версии сайта соответственно.
{дизайн-макет главной страницы}
школа плавания сайт
занятия плаванием
Внутренние страницы под каждую из программ создаются типовые – для удобного восприятия контента и структуры. Для того чтобы отделить каждую из них приняла решение сделать основные элементы – карточки в разных оттенках, в соответствии с иконками этих же программ на основной странице:
спортсмены – голубой,
тренеры – синий,
юные спортсмены – бирюзовый.
{дизайн-макеты  страниц программ}
{мобильная версия сайта}

Оптимизация

В дизайне основной страницы на главном экране сайта у нас размещается видео. Для того, чтобы оно быстро загружалось во всех браузерах и на всех устройствах я провела оптимизацию файла в современный формат – webm. Это позволило сократить вес видео вдвое, а скорость загрузки страницы сократить на 0,3 сек.

А на внутренних страницах оптимизировала изображения в формат webp, в результате чего вес страницы также сократился вдвое.
{видео на главной странице}
{фото на странице программы}

Анимация

Эффекты анимации размещены в целевом месте на основной странице – при наведении на карточки продукта происходит движение иконок, что отсылает на идею взаимодействия с объектом – при нажатии на карточку открывается страница с подробной информацией.
Также эффекты взаимодействия добавлены на все кнопки.
{десктоп}
{мобильная версия}
Награды
Сайт попал в подборку лучших проектов, созданных в рамках фреймворка Tilda Publishing.
{MADE ON TILDA}
Сайт доступен по ссылке – sushareshaet.com
НАД ПРОЕКТОМ РАБОТАЛИ
  • Марина
    Дизайн и верстка
Made on
Tilda