Разбор лендинга для автосервиса

Разбираемся, почему важно уделять внимание копирайтингу и тем посылам, что закладываются в сайт, зачем учитывать количество фактических услуг и SEO, как работать с компонентами, чтобы они были консистенты в рамках UI-kit.

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

Автор работы Артём Смолов, подписчик DL PRO

Ссылка на проект

Какие ключевые вопросы по работе у тебя есть к менторам?
В блоке "Наши услуги" нет компонентов из-за картинок, потому что они все разного размера и расположения. Я не понимаю как делать компонент, где каждый инстанс будет иметь разный размер и расположение фоток

Задача
Создать лендинг СТО

Привет, Артём!

Большое спасибо, что поделилcя своей работой!

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

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

Выглядит в целом аккуратно и чисто, сделаны адаптивы.

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

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

Логика

У лендинга типовая структура, но есть нюансы, над которыми стоит поработать. В частности, основной посыл на экране до фолда дает малое представление о том, чем этот сервис может быть полезен для конкретного клиента. «С гарантией» — а бывают сервисы без гарантии? Это ожидаемо, тогда как мы должны показать наше УТП, в чем оно?

Писать «Вы» с заглавной излишне, от этого мы не выглядим вежливее, это отдает формализмом и не совсем похоже на тот язык, на котором может разговаривать наша ЦА. Если не убедили до конца, то рекомендуем почитать Ильяхова по этому поводу. Равно как никто не будет записываться в неудобное для него время, что тоже кажется очевидным.

Хорошо, что указал конкретные цифры по клиенту, но сразу возникает вопрос, за какое время эти цифры? Почему количество клиентов больше, чем количество отремонтированных машин? И к чему этот плюс в конце, если сама цифра довольно четкая, 10760?

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

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

На оригинальном сайте http://doctorauto.by/ как раз использован тот язык, на котором говорят владельцы автомобилей, сразу понятно, что речь идет о ремонте, тогда как понятие «сервис» довольно расплывчато и при быстром просмотре могут не понять, что именно здесь предлагается.

Бизнес

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

Еще возникли вопросы к услуге по диагностике. Указано, что она бесплатна. Всегда, везде и без ограничений? Сколько стоит время специалистов, чтобы бизнес мог позволить делать это себе безвозмездно? Или она бесплатна при условии проведения ремонтных работ? Если второе, то такая информация должна быть представлена, чтобы не вводить потенциальных клиентов в заблуждение.

Есть блок с отзывами. Чтобы отзыв сработал на доверие, надо показать лицо Андрея, его соцсеть. Иначе это больше напоминает заказные отзывы, которые в избытке сочиняют копирайтеры.

Часто до такого рода сервисов не очень понятно как добираться, поскольку они могут находиться за воротами и за гаражами. Соответственно, было бы неплохо показать схемку проезда. Или написать по-человечески инструкцию, снабдив фотографиями, на какие объекты можно ориентироваться, чтобы найти их местоположение.

Есть ошибки и в адресе, и в обозначении интервала времени

Визуал

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

Мудборд и референсы

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

Кстати, Алина рассказывала про то, как сделать стайлборд у себя в канале.

Команда

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

Молодец, что используешь цветовые стили, но их надо именовать по функции, например Text, Accent и так далее.

Очень плохо, что не сделал текстовые стили. Фронтедер был бы благодарен. Это бы ускорило вёрстку и удешевило стоимость разработки.

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

Мы уже отметили, что адаптивы ты сделал аккуратно и старательно, но есть упущение: если зайти с мобильного через Figma Mirror, то окажется, что кнопка CTA призыва к действию и заголовок не помещается на главном экране. Такие вещи лучше учитывать и тестировать на реальных экранах.

Почему-то выпадающее меню нарисовано не для 320, а шире. Кстати, в фигме обычно меню делают через Overlay.

Порядок в слоях ты не соблюдаешь! Много групп там, где нужны фреймы, много слоёв типа Frame 1254 и так далее. Это всё очень путает фронтендера.

Как не надо делать
Как надо: все слова названы, для адаптива используется Auto Layout

У тебя был вопрос: «Как сделать компонент, где каждый инстанс будет иметь разный размер и расположение фоток?» Во-первых, нужно, чтобы фотки тоже были в компонентах. Во-вторых, нужен один базовый компонент карточки.

Картинки одинакового размера, у них отключена галка Clip content. Таким образом, можно саму картнку внутри компонента позиционировать, как хочется.

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

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

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

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

Работу разобрали Валерия Накушнова и Антон Ягупов.

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

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

https://pro.dsgnline.ru/