Разбор сайта «Builds. Таунхаусы»
В этом выпуске много заметок по визуалу, а также про то, почему важен social proof, чтобы продавать недвижимость онлайн.
Разбор работ в DL PRO состоит из двух частей: статьи с анализом, который вы видите ниже и файла в Figma, который передается автору работы с большими подробностями и точечными указаниям на то, что следует исправить.
Автор работы Анастасии, подписчица DL PRO
Привет, Анастасия! Мы изучили твой файл в Фигме. Организовали наши заметки по четырём критериям для объективной оценки как, мы это делаем для рейтинга: Логика, Визуал, Бизнес и Команда.
Логика
Большое количество стилей и сущностей, поэтому возникает непонимание, как именно это работает или должно работать.
Очень важно подбирать фото или иллюстрации, которые усиливают посыл и текст, соответствуют ему, а не противоречат. Это касается главного экрана и фото парка в том числе.
Второй момент — логика цвета. Если ты вводишь цвет активных (кликабельных) элементов, то важно использовать его именно в этом контексте. Потому что у пользователя формируется привычка: вижу фиолетовый — кликаю на него. И если ничего при клике не происходит — это странно. Это как раз касается кнопок и иконок, которые одинакового цвета, но имеют разные функции.
Визуал
Ты используешь качественные фото, благодаря этому твой макет выглядит более профессиональным. Молодец!
Ты нашла классные шрифты для сайта. Но не стоит использовать сразу четыре шрифта на одном лендинге. В идеале использовать не более двух шрифтов и трех начертаний (обычно хватает и двух у каждого). Можно экспериментировать со шрифтами, но это должен быть именно визуальный прием. Сейчас это не выглядит продуманной фишкой. Советую оставить максимум два шрифта.
И обязательно обращай внимание на иерархию шрифтов: важная информация должны быть крупнее дополнительной. Например, в форме заявки. Здесь имя, телефон и текст в кнопке точно важнее строки с информацией о согласии.
Ты молодец, что используешь сетку. Но по ней необходимо выстраивать весь контент. Особенно большие блоки, такие как фото, например.
Это здорово, что ты понимаешь необходимость общности компонентов разных размеров. Обрати внимание, что в таких элементах необходимо использовать одинаковые отступы, кратные микромодулям.
Всегда смотри на то, легко ли прочитать текст, помни, что дизайн должен помогать функционалу, а не мешать. Например, белый текст поверх фото читается сложно. Добавь темный полупрозрачный градиент под текст или расположи его на непрозрачной подложке.
Классно, что нашла иконки в одном стиле. Видно, что все, кроме календаря построены по одному принципу и имеют примерно одинаковый вес.
Но иконку календаря лучше найти другую, более подходящую. Обрати внимание, что только у календаря используются такие тонкие линии обводки.
Самый простой способ проверить визуальный баланс — размыть иконки. И если размытые пятна будут почти одинаковыми, то все хорошо)
Ты очень интересно придумала оформить контакты, классно вписала карту в страницу. Но плашка с контактными данными и точкой, указывающей расположение, кажутся не связанными элементами. Чтобы элементы выглядели связанными, у них должно быть что-то общее. Попробуй сделать их похожими: например, использовать одинаковый цвет, размер, близкое расположение.
Бизнес
Очень не хватает ценности для покупателей. Кто эти люди, почему они должны принять решение о покупке дома на этом сайте? В чем ценность конкретно этого предложения? Чем оно лучше всех других на рынке недвижимости?
Даже если это учебный проект, очень важно продумать все эти пункты и посмотреть, как это реализовано у других. Важно разобрать сайты конкурентов на блоки и понять, что каждым блоком решается. Кроме того, прописать сначала текстом, что за чем должно идти именно у тебя, чтобы повествование было последовательным и убедительным.
Смотря на картинки из Шаттерстока, говорим, как Станиславский: «Не верю». Больше доверия вызывают пусть не постановочные и красивые, но реальные фото. Так же нет social proof — ссылок на соцсети компании, чтобы проверить, реально ли все это или просто картинка?
Нет планов и условий, как происходит заказ. Какие этапы, какой тайминг (через какое время от создания проекта я заеду в дом), какие доказательства работы?
Посмотри, пожалуйста, примеры сайтов недвижимости внизу статьи, как они подают информацию о своих объектах и услугах. На что акцент, какая последовательность подачи информации, ее объем и качество.
Команда
Обязательно всегда используй стили шрифта и переменные цветов. Когда их не используешь, это усложняет работу тебе самой. А если будешь работать в команде с другими дизайнерами — всей команде.
Обязательно надо составить UI-kit. С ним разработчику будет намного проще сверстать твой макет. Да и тебе самой проще будет, если придется спустя время вернуться к твоему макету.
Классно, что ты нашла картинки для мудборда, но не стоит их хранить вокруг основного макета, это отвлекает от сути и может запутать твою команду.
Что посмотреть
Примеры сайтов по продаже недвижимости:
Работу разобрали Ксения Маркелова и Наталья Бухтиярова.
Читатель! Хочешь такой же разбор? Подписывайся на сервис обучения и поддержки дизайнеров DL PRO: https://pro.dsgnline.ru/