Разбор лендинга для фитнес-клуба
Разбор концепта сайта MegaGym
Как яркая цветовая гамма и исследования влияют на результат. Расскажем, что такое иерархия заголовков, как делать классные карточки и что надо исследовать, чтобы сделать продающий лендинг.
Разбор работ в DL PRO состоит из двух частей: статьи с анализом, который вы видите ниже и файла в Figma, который передаётся автору работы с большими подробностями и точечными указаниями на то, что следует исправить.
Автор работы Валентина Рожковская, подписчик DL PRO
Задача
Создать лендинг для нового спортивного зала. Показать спорт зал привлекательно для новых клиентов. Показать преимущества зала, ознакомить пользователя с важной информацией, дать возможность купить через сайт, дать информацию как связаться с залом, увеличить продажи. Ключевое - увеличить продажи.
Большое спасибо, что поделилась своей работой!
Что понравилось в работе
Хорошо, что проводились исследования, а также было стремление лучше понять нужды ЦА. При проектировании лендинга продумывалась система отступов, есть сетка.
Бизнес
Насколько глубокое исследование необходимо проводить, если рисуется одностраничный сайт?
Выбор методов исследования зависит от разных факторов, например, от:
- бизнес-задач, которые должен решать дизайн;
- высококонкурентная ниша, в которой работает бизнес, или нет;
- количества времени и средств, выделенных на этап исследования;
- количества гипотез к проверке и др.
В твоём случае, бизнес работает в высококонкурентной бизнес-нише. Ты пишешь, что это спортзал, но по факту и описанию — это фитнес-зал, тренажёрный зал. В твоём случае следовало бы начать с мониторинга рынка фитнес и спортивных услуг.
Целевая аудитория у тебя слишком общая, нужно её сегментировать, чтобы лучше понять потенциальных клиентов бизнеса.
Для кого легче сделать позиционирование и разработать дизайн — для «мужчины и женщины от 24-59 лет» или, например, для «молодые мамы, которые хотят вернуть себе стройное тело и готовы тратиться на услуги профессиональных тренеров»?
Откуда можно взять более сегментированные данные о ЦА зала? У них, скорее всего, есть страницы в соцсетях. Там можно почитать комментарии, посмотреть статистику. Посмотреть страницы, сайты конкурентов, чтобы понять, на какой сегмент аудитории ориентируются конкуренты. Если помониторить рекламу других фитнес/спортивных залов.
Для этой бизнес-индустрии существует много исследований. Например, вот одно из них:
Здесь уже есть обобщённый портрет потребителей фитнес-услуг и их предпочтения:
Одними из важнейших критериев для большинства клиентов фитнес- и спортивных услуг при выборе территориальная доступность и время проведения занятий, время работы клуба. Это важно с точки зрения планирования клиентами своего времени. У тебя сейчас время работы зала и адрес спрятано в подвал.
А на первом экране у тебя нет этой важной для решения бизнес-задач информации:
При исследовании ты не выяснила один из ключевых вопросов. С каких устройств чаще всего твоя ЦА взаимодействует с похожими сайтами и будет заходить на этот? У тебя есть только версия для десктопа и вообще не предусмотрен дизайн мобильной версии.
Логика
Если ты делаешь лендинг, на котором предусмотрены какие-либо формы, поп-апы после взаимодействия с элементами, то обязательно показывай их. Например, что произойдёт по клику на пункт меню «Обратный звонок»? Это сработает, как якорная ссылка и посетителя сайта перекинет вниз лендинга к форме? Или откроется поп-ап с аналогичной формой?
Непонятно, шапка с навигацией по лендингу у тебя фиксирована сверху при скролле или нет? Если навигация не фиксирована, то человеку придётся вверх и вниз скроллить вручную. На мобильных разрешениях это может оказаться критичным для бизнес-задач. Люди будут уходить.
Визуал
Ты молодец, используешь в проекте очень хорошую цветовую гамму. Яркие цвета, ассоциирующиеся со спортом. Хороший контраст. Всё легко считывается за исключением пары заголовков, о них расскажем чуть позже.
Фотографии, что ты выбрала тоже очень хорошие. Качественный контент всегда поднимает работу на уровень выше. Только обязательно смотри, откуда берешь фотографии. Они могут быть защищены авторским правом и/или требовать указания авторства.
Мудборд и референсы
Ты собрала хорошие стилистические примеры. Но не хватает составляющей мудборда. Какое настроение ты хочешь создать, чем твой проект отличается от остальных? Постарайся найти изюминку своего проекта. Что он должен олицетворять, какие эмоции вызывать?
Сами референсы очень похожи между собой. Но референс в центре мы бы не рекомендовали использовать в качестве ориентира. Когда выбираешь референсы, старайся брать во внимание работы, которые были отмечены галереями, имеют награды или как-то иначе отмечены дизайн-сообществом. Например, работы известных студий или признанных дизайнеров.
Типографика
Ты взяла очень хороший шрифт. Inter — один из самых читабельных шрифтов для web-проектов.
Для хорошей типографики в проекте не хватает иерархии. Она нужна для того, чтобы создать визуальные якоря. С их помощью ты управляешь вниманием, даёшь понять, что важно, а что второстепенно. Качественная иерархия шрифтов позволяет легко ориентироваться на странице.
Сейчас, если быстро пролистывать лендинг, то глазом сложно найти заголовок, за который можно зацепиться, чтобы быстро понять, где ты находишься.
Пример иерархии: заголовок «Наши преимущества» по логике должен быть либо равен заголовку «Галерея», либо больше, если галерею логически отнести к преимуществам. Сейчас кажется, что галерея важнее. И есть ощущение несоответствия стилистики. То есть эти два варианта заголовка не составляют общую композицию. Надо привести их к созвучному виду, например, выровнять их по одному принципу (по центру или по левому краю).
Главное правило в использовании типографики — информация превыше всего. Это значит, что текст должен читаться. Лучше не использовать приём перекрытия на важных текстах.
Стоит немного увеличить размер текста в карточках. И помни про правило о длине строки, она должна быть между 40 и 80 символами. Иначе пользователям может быть неудобно читать такой текст.
Сетка и направляющие
Здорово, что ты используешь 12-колоночную сетку, это универсальная удобная сетка.
Обрати внимание на горизонтальные направляющие. Например, в футере стоит выровнять всё по ним. Ниже показываем пример, как это можно сделать.
Композиция
Очень классно, что ты смысловые блоки разделила разным цветом фона. Это очень упрощает восприятие информации.
Обрати внимание на паттерны считывания информации в вебе. Обычно мы не читаем весь текст на сайте, а сканируем сверху вниз самое важное на странице. Если что-то заинтересовало, перемещаем взгляд слева направо. Поэтому не стоит подпункты и заголовки ставить вторым рядом справа.
Карточки преимуществ
Если в карточках разное количество информации, это не страшно, не надо с этим как-то по-особенному бороться. Это встречается во всех проектах. Если есть возможность отредактировать текст, это хорошо. Если нет, то вот несколько вариантов:
- Максимум информации уместить таким образом, чтобы карточки выглядели идентично. Например, в твоём варианте, внести заголовок внутрь карточки.
- Увеличить отступ снизу от текста вровень с остальными. Да, в той карточке, где слишком мало информации, будет много пустого пространства, но это ок.
- Сделать карточки разными по ширине. Например, боковые поменьше, среднюю побольше, или в шахматном порядке.
- Если текста прямо очень много, то можно добавить кнопку «развернуть»/«далее».
Что делать, если карточки товара "разношерстные" и в одной мало текста, в другой - много?
Не стоит выравнивать текст внутри посередине, это мешает удобству считывания.
Команда
Советуем пересмотреть войс от DL Pro, который был посвящён критерию Команда. Там очень много полезной информации по организации макетов в Фигме.
Сейчас твой макет слишком сырой и практически не готов к передаче в вёрстку. Нужно научиться наводить порядок в слоях, правильно показывать состояния элементов, оформлять пункты меню.
Что посмотреть
Как организовать иерархию проекта с помощью типографики
Работу разобрали Ксения Маркелова и Наталия Бухтиярова.
Читатель! Хочешь такой же разбор от профи? Подписывайся на сервис обучения и поддержки дизайнеров: