Разбор лендинга Beauty Studio
Разбор работ в DL PRO состоит из двух частей: статьи с анализом, который вы видите ниже и файла в Figma Jam, который передается автору работы с большими подробностями и точечными указаниям на то, что следует исправить.
Автор работы Елена Тихонова. Работа подана на разбор во время DL INTENSIVE 2021.
ЗАДАЧА
Разработать лендинг для салона красоты в минималистичном стиле, чтобы можно было показать все виды работ, цены, а также записаться в салон.
Привет, Лена!
Мы рады, что ты не побоялась прислать нам свою первую работу. Хорошо, когда дизайнер с самого начала в поиске точек для роста. В этом разборе мы ответим на твои вопросы про ошибки и про сферы знаний, на которые стоит обратить внимание. Также вышлем тебе дополнительные ресурсы для изучения.
Что понравилось в работе
Хорошо, что попробовала поработать с трендовым приёмом, изображением в hover-эффекте.
Знание трендов часто помогают дизайнеру использовать интересные идеи в проекте. Главное — это правильно понимать, как работает этот приём, его сильные и слабые стороны.
В следующий раз углубись в состояния отдельных блоков и экранов. Например, экран ошибки 404 или экран оформления подарочного сертификата.
Хочу отметить работу с цветом. Проект в этом плане достаточно чистый. Не бойся работать с оттенками основного цвета, так дизайн заиграет новыми красками. А потом попробуй использовать 2 различных цвета. Step by step, как говорится.
Логика
Чтобы понимать, какую структуру должен иметь сайт, необходимо изучить целевую аудиторию, понять, какую потребность закрывает проект. В твоём случае не хватило исследования аудитории: их приоритеты при выборе услуги (качество, мода, стоимость), почему текущие клиенты выбирают именно этот салон (уникальное торговое предложение, преимущество), какую проблему клиента решает сайт и какую боль бизнеса закрывает его разработка. Всё это влияет на UX и UI сайта. Например, для девушек, которым важно качество предоставляемой услуги, основной информацией будет опыт мастеров и примеры выполненных работ.
UX записи на услугу в салоне требует отдельной проработки и исследования. Детальнее разберу это в блоке бизнеса, так как данное целевое действие сайта в правильной реализации может упростить бизнес-процессы компании.
Визуал
На первый взгляд сайт сделан неплохо: чёрно-белый с использованием одного цвета, яркие фотографии, достаточно воздуха между блоками, нет бросающихся в глаза моментов с типографикой. А теперь давай пройдёмся по деталям ...
Типографика
Работа со шрифтовыми парами — одна из интереснейших задач для дизайнеров. А также это очень сложная тема, в которой многие начинающие допускают ошибки. В дальнейшем не бойся использовать антикву не только на главной, но и, например, дальше в заголовках. Дизайн должен быть консистентным, сохраняя и проводя через всю работу заложенные паттерны.
Примеры работы с антиквой:
https://gucciosteria.com/en/florence
https://www.fromcaviar.com
Выделения и акценты в типографике можно делать не только за счёт размеров шрифта (как это сделано в заголовке на главной). Цвет и насыщенность помогают обратить внимание пользователя на нужную информацию. И эти приёмы смотрятся легче в дизайне.
Посмотри работы с хорошей мобильной вёрсткой. Вышло достаточно мелко для телефона. Можешь также изучить гайдлайны от Google (Material Design) и Apple (Human Interface Guidelines).
Композиция
Для интересных решений с композицией нужно вырабатывать чувство насмотренности. Помимо изучения базовых знаний о том, как строится композиция и как она реализована в искусстве, попробуй другой метод. Бери работы лучших дизайн-студий или проекты, получившие награды Awwwards или FWA. Разбирай чужие проекты на детали. Попробуй понять, какая сетка используется, где и какие отступы заложены. Повтори полностью этот проект. Так ты разберёшь его на атомы. Чем больше чужих качественных работ ты разберёшь, тем выше больше насмотренности у тебя будет. И уже интуитивно ты сможешь переносить этот опыт в свои работы.
Цвет
Как писали выше, с цветом ты отработала хорошо. Однако сделать светлый сайт с серыми блоками и одним основным цветом — это не так уж и сложно. Пробуй дальше. Начинай работать с оттенками цвета (более светлый, тёмный), не бойся экспериментировать. Потом попробуй добавить на сайт второй цвет.
Расскажу о маленький лайфхаках. Окружающий мир и природа помогают нам подобрать те оттенки, которые будут прекрасно сочетаться вместе. Плагин Фигмы на основе фотографии соберёт тебе палитру.
Вернёмся к нашим кейсам с наградами. Оттуда можно вдохновляться. Продолжай изучать и разбирать работы на винтики только уже с новой стороны.
Примеры:
https://fuentereal.es (оттенки)
https://joseph-berry-webflow-master-class.webflow.io (два цвета)
Бизнес
Сайт должен решать задачу бизнеса. Если целевое действие на сайте — это запись онлайн, то такая функция должна оптимизировать работу салона. Что же у нас получилось в работе?
Записаться можно на тип услуги без её детализации. Сложное окрашивание может занимать 5-8 часов, а стрижка – 1 час. И это существенная разница для менеджера, который обрабатывает заявку.
Отсутствуют временные интервалы. Это ещё один пункт, который сотрудник салона будет уточнять у клиента по телефону.
Отображение свободных окошек. Календарь, в котором можно автоматически записаться на свободные даты, позволяет клиенту действительно записываться онлайн. Также это требует минимальной работы с клиентом, лишь подтвердить саму бронь.
Существует не мало готовых решений для онлайн-записи, например Yclients
Лучше интегрировать подобный сервис, чем проектировать свой с нуля, изобретая велосипед.
Выбор соответствующего мастера. Если клиент хочет записаться к определённому сотруднику, то ему необходимо дать возможность это сделать при записи онлайн.
Калькулятор услуг. Такая функция поможет автоматически рассчитывать среднее время на вашу услугу или даже комплекс. Так клиент может запланировать своё время более точно. И в системе менеджеру эта бронь будет отображаться детализировано.
Эти инсайты можно было вытащить из детального исследования, задав вопросы по процессу записи, и после заложить их в интерфейс.
Команда
Молодец, что сделала анимацию. Это упростит процесс реализации для разработчика.
Состояния кнопок и других элементов при наведении также необходимо передавать разработчикам. Помимо Hover эффекта есть и другие состояния:
- Active (состояние кнопки в момент нажатия)
- Focus (элемент в фокусе)
- Disabled (недоступный элемент, с которым запрещено взаимодействовать)
- Error (Ошибка валидации; относится к текстовым полям и селектам)
Состояния есть также у блоков и экранов:
- Идеальное состояние
Как выглядит экран, когда он отображает контент с идеальными данными. - Пустое состояние
Когда отсутствует контент для отображения - Как выглядит экран, когда пользователь просматривает его впервые?
- Как выглядит экран, когда поиск не находит подходящий контент, и как экран сообщает об этом пользователю?
- Как выглядит экран, когда пользователь выполняет действие, которое удаляет контент?
- Состояние загрузки (+ Скелетоны)
При получении контента или выполнении какого-либо действия (от индикаторов текущего состояния и спиннеров до каркасных экранов, скелетонов) - Состояние частичной наполненности Что происходит, когда отображается только часть контента
- Не идеальное состояние Как выглядит экран, когда полученный контент не является оптимальным
- Интерактивное состояние Когда пользователь взаимодействует с контентом
- Что произойдет, когда пользователь кликнет по этому элементу?
- Что произойдет, когда пользователь сфокусируется на этом элементе?
- Что произойдет, когда пользователь переключит этот элемент?
- Понятно ли пользователю, что элемент изменился, потому что он взаимодействовал с ним?
- Состояние ошибки Когда пользователь сталкивается с системной ошибкой (ошибка, вызванная пользователем или самой системой, например, потеря соединения с интернетом)
- Состояние успешного выполнения действия Когда пользователь успешно выполнил определенную задачу
Контент
Не забывай чистить текст. Твоя работа – твоё лицо.
Что посмотреть
Для старта поможет блок Принципы в гайдах компании Контур: https://guides.kontur.ru/
Типографика и верстка, Артём Горбунов
Шрифтовые пары с использованием Google Fonts
Сервис Главред для копирайтинга и улучшения смысла текста.
Работу разобрали Алана и Валерия
Эй, читатель! Хочешь такой разбор? Подписывайся на сервис обучения и поддержки дизайнеров