Разбор кейса сайта для стилиста
О том, как UI и визуальные дизайн-решения должны поддерживать логику сайта и направлять пользователя по желаемому сценарию.
Разбор работ в DL PRO состоит из двух частей: статьи с анализом, который вы видите ниже и файла в Figma, который передается автору работы с большими подробностями и точечными указаниями на то, что следует исправить.
Автор работы Людмила, подписчица DL PRO
Привет, Людмила! Мы изучили твой рабочий файл в Фигме и вопросы-пожелания. Заметки организованы по четырём критериям для объективной оценки, как мы делаем это для рейтинга: Логика, Визуал, Бизнес и Команда.
Что понравилось в работе
Здорово, что ты постаралась использовать нетипичное решение с сеткой-таблицей и сделала сайт светлым, это придает ему аккуратности.
Логика
В целом последовательность повествования и подачи информации нарушена. Не понятна ценность предложения, мало пруфов. Кроме того, на одной странице используется несколько видов CTA («Оставить заявку», «Отправить запрос», «Связаться с ассистентом», «Подробнее об услугах»). Какой из них ты выбрала в качестве основного? Что нужно выбрать пользователю? Что будет, если нажать «Оставить заявку» или «Отправить запрос»? В чем различие этих действий?
Нарушена последовательность цветового кодирования: и кликабельные, и некликабельные элементы одинаково красные. Это вводит в заблуждение, потому что не понятно, на что нажимать.
Визуал
Понравилась аккуратность в работе и консистентность (целостность) стиля. По всему сайту не хватает воздуха, сделай больше расстояния между блоками и внутри блоков. Проверь общую аккуратность отступов в элементах, некоторые не выравнены между собой и внутри кнопок.
Хорошо, что не побоялась использовать шрифт с засечками, в акценте он всегда круто смотрится. Но в самом сайте нарушена иерархия шрифтов, размеры и начертания для одних и тех же сущностей отличаются. Другими словами, одни и те же элементы выполнены разными стилями (блок «Каталог»). В некоторых блоках разный межстрочник у основного текста ( «FAQ»). В общем пройдись еще раз по макету, создай стили текста (H1, H2 ....) и «причеши» их.
Начни со статьи о том, как подбирать пары. Здесь классные примеры с использованием google fonts.
Попробуй взять другой оттенок коричневого, больше уходящий в бежевый. Чтобы у тебя было сочетание малинового и бежевого. Коричневый в таком оттенке смотрится не очень привлекательно.
В композиции главного экрана типографика заголовка перевешивает вправо, такой прием может классно использоваться, но в нем нужно балансировать правую и левую часть.
В блоке «Обо мне» много сухой информации, мини-статья получается. Лучше выделять информацию визуальными акцентами. Например, для преимуществ используй иконки, чтобы разбавить текст.
Не сразу понятно, что это за блок и какая у него функция. Не хватает контролов, чтобы переключать не только кликом по вкладкам. Вкладки здесь выглядят как заголовки, и на них не хочется интуитивно нажать. Проблема этого блока в том, что не сразу заметно, что там есть интерактив, попробуй добавить дополнительные графические элементы и ховеры.
С отзывами та же проблема. Как их листать? Если это происходит по скроллу, то добавь элемент скролла снизу, так как это привычный для пользователей паттерн. Или используй стрелки. Если ты предполагала, что слайдер будет сам автоматически прокручиваться, то для отзывов это не самая лучшая идея. Так как их читать будут, а они еще движутся, что точно не круто.
В FAQ странным образом работают отступы. Нарушается правило близости. Межстрочный интервал больше, чем расстояние до линии, посмотри на скриншоте ниже.
В контактах слишком большое количество стилей у текста. Одни ссылки подчеркиваются, другие — нет. Один шрифт меньше, другой больше, в частности, в заголовках. Приведи все ссылки и заголовки к единому виду, чтобы в информации было легче ориентироваться.
Бизнес
Какая цель разработки дизайна? Даже если это учебный проект, обязательно нужно сначала отвечать на вопрос «Зачем? Что я решаю своим дизайном?»
По сайту не совсем понятно, в чем услуга и сколько она стоит. Да, есть блок с услугами, табы, на них цены. Это цена конкретно за разбор гардероба? Или если разобрали за час, то ещё 3 можно потратить на закупки? А где посмотреть результаты работы? (Да, просто отзывов уже мало).
Вообще за основу для лендинга чаще всего берут один посыл, одну деятельность, услугу или товар. Тут же очень много всего, не понятно, куда смотреть. И почему я покупаю услугу у Ольги, а свяжется со мной ассистент? Это же индивидуальная работа.
Команда
Видно, что у тебя мало опыта в работе с макетами. Нет компонентов, стили только в цветах, и то не все. Слои не названы, раскиданы по всему макету, в лучшем случае в группах. Да, такое допускается, если у тебя только наброски дизайн-концепции, и ты пока не понимаешь ок или не ок. Но у нас же готовый дизайн, поэтому культура работы с макетами просто мастхев на этом этапе.
Начни с чтения статьи Как подружить дизайнера, верстальщика и «Фигму» с помощью дизайн-системы, ломика и какой-то матери™
Что посмотреть
О методологии атомарного дизайна при работе с макетами
Много сайтов для вдохновения в категории Fashion
Работу разобрали Валерия Накушнова, Александр Ищенко и Анна Шнит.
Читатель! Хочешь такой же разбор от профи? Подписывайся на сервис развития и поддержки дизайнеров Design Line PRO.