Разбор кейса для компании «Сантехпром»

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

Разбор работ в DL PRO состоит из двух частей: статьи с анализом, который вы видите ниже и файла в Figma, который передается автору работы с большими подробностями и точечными указаниям на то, что следует исправить.

Автор работы Агнесса, подписчица DL PRO

https://www.behance.net/gallery/126811663/dizajn-mnogostranichnogo-sajta

Привет, Агнесса! Мы изучили твой кейс на Беханс и рабочий файл в Фигме. Организовали наши заметки по четырём критериям для объективной оценки как, мы это делаем для рейтинга: Логика, Визуал, Бизнес и Команда.

Что понравилось в работе

Здорово, что нашла и использовала качественные фото в презентации на Behance, от этого сайт сразу выглядит более профессиональным. Хорошо, что ты задействовала приём с оформлением фото через маски и предложила переделать логотип.

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

Логика

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

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

Так прописана цель

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

Мы так и не поняли, что обозначают красные точки на схеме.

В презентации и в Фигма-макете формально присутствует структура сайта, но при этом она таковой не является. Получилось нечто промежуточное между картой сайта и юзер флоу, эта схема не даёт представление о том, как сайт организован, какие уровни навигации и вложенности он имеет.

Визуал

В целом ты сделала большую работу и выбрала нестандартный подход к оформлению сайта, это здорово.

Типографика

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

В твоих референcах были хорошие примеры. Обрати внимание на то, как собрать крепкую шрифтовую пару, так как она сейчас у тебя слабовата. Не стоит использовать акцидентные шрифты для основного текста, лучше подобрать шрифт, удобный для чтения. Узкий Oswald читать сложно, особенно в больших массивах текста. Вот, например, хорошая статья о том как подбирать пары. Здесь классные примеры с использованием google fonts.

Цвет

Ты выбрала очень смелые цвета для оформления сайта. Сейчас не очень понятно, чем это обусловлено. Помни, что любое дизайн-решение должно нести в себе бизнес-цель или иметь какое-то другое обоснование.

Читаемость

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

Композиция

Хорошо, что ты используешь сетку на всем сайте. Будет здорово, если начнешь также использовать систему отступов, учитывать вертикальный ритм и модульную сетку.

Иконки

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

Ховеры

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

Бизнес

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

Если предполагается несколько видов пользователей, например, частные лица и юридические лица (компании), то условия сотрудничества и оказания услуг для них будут отличаться. Это необходимо учитывать и отражать на сайте, а также правильно брифовать клиента. Кто конкретно является его конечным заказчиком? Если у клиента несколько видов конечных заказчиков, нужно спрашивать о том, какие различия в процедурах взаимодействия и формировании цен существуют для каждого из них.

В форме заявки, которая есть на сайте, необходимо запрашивать только те данные, которые действительно нужны. Если связь идёт только через телефон, то стоит оставить лишь это поле. Так человек потратит меньше времени на заполнение формы.

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

При брифовании стоило уточнить у клиента, есть ли у компании бизнес-аккаунты в мессенджерах.

Команда

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

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

Начни с чтения статьи Как подружить дизайнера, верстальщика и «Фигму» с помощью дизайн-системы, ломика и какой-то матери™

И отдельный пункт про viewports: были ли проведены исследования, что вашим пользователям нужно разрешение 2560 пикселей, к примеру? Если нет, то не стоит увеличивать количество работы разработчику.

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

Что посмотреть

О методологии атомарного дизайна при работе с макетами

О работе с компонентами

Видео о вёрстке таблиц

Больше практики по дизайну таблиц можно найти в блоге Игоря Штанга

Успехов в будущих проектах!

Работу разобрали Наталья Бухтиярова, Валерия Накушнова и Ксения Маркелова.

Наш бот Прошка оценил работу так

Читатель! Хочешь такой же разбор от профи? Подписывайся на сервис развития и поддержки дизайнеров Design Line PRO.

https://pro.dsgnline.ru/