Главная
/
#сушарешает

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

сушарешает

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

Объем работ:

Главная посадочная страница
3 внутренние страницы услуг

Технические задачи:

формы захвата

Срок разработки:

2 месяца

Дата публикации сайта:

февраль 2023

Задача

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

Структура

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

{структура блоков и прототип страницы}

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

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

{дизайн-концепции}

Заказчик выбрал более насыщенный по цветам вариант. Продолжаю его разрабатывать

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

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

{дизайн-макет главной страницы}

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

{дизайн-макеты страниц программ}

{мобильная версия сайта}

Оптимизация

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

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

{видео на главной странице}

{фото на странице программы}

Анимация

Эффекты анимации размещены в целевом месте на основной странице – при наведении на карточки продукта происходит движение иконок, что отсылает на идею взаимодействия с объектом – при нажатии на карточку открывается страница с подробной информацией.
Также эффекты взаимодействия добавлены на все кнопки.

{десктоп}

{мобильная версия}

Награды

Сайт попал в подборку лучших проектов, созданных в рамках фреймворка Tilda Publishing.

{MADE ON TILDA}

Сайт доступен по ссылке – sushareshaet.com

НАД ПРОЕКТОМ РАБОТАЛИ

Марина
Дизайн и верстка

ЗАКАЗАТЬ САЙТ