Не так давно обратился ко мне мой закадычный клиент. Он маркетолог и занимается контекстной рекламой. Иногда по долгу службы ему приходится делать сайты для того, чтобы гнать на них трафик.
Так вот. Обратился он поо мне с таким запросом:
— Юра, переделай блок «До-После» на сайте. Мне не нравится, как дизайнер его сделал. Иконки добавь там… облагородь его...
— Окей, без проблем 👍🏻
Вот фрагмент макета, который нужно было облагородить:
Перым делом я проанализировал,
что эта за таблица «До-После»:
- Какая информация в ней важна посетителю сайта
- Что надо выделить в этой информации
Итак, смотрим:
1) Заголовок
Он бросается в глаза. Его не заметить трудно)
НО. «До / После» чего? Кота? Диеты? Пробежки? Пирожков? — не понятно. А раз не понятно, то никто не будет вникать (если только это не горячущий клиент, что вряд ли)…
Мозг большинства посетителей будет избегать нагрузки, и если ему что-то не понятно, то он не будет себя утруждать и просто пролистает дальше…
Решение: переписываем заголовок так, чтобы было понятно «До / После чего…»
2) Сама таблица
Таблица, как таблица. Визуальное разделение строк пунктиром из точек, а столбцы разделены воздухом.
Но вот текст однообразен и сливается. Да тут есть выделение цены оборудования и срока окупаемости красным, но сделано это так, что взгляду зацепиться не за что.
Решение: сделать акценты в тексте, чтобы взгляду было за что цепляться и добавить иконки для удобства быстрой визуальной навигации по строкам, чтобы не читая заголовков строк было понятно о чём они.
И да — грамотность надо повышать! Вместо «руб» ставим ₽, и грамотно пишем знак шкалы температуры по Цельсию — °С
Мой вариант:
Теперь у нас понятный заголовок и сразу понятно, что таблица сравнивает ДО и ПОСЛЕ установки котлов «Гестия», а не результаты похудения или чего-то ещё.
В таблице появились иконки, что позволят визуально ассоциировать содержание строк.
Столбец «До» я выделил сереньким, чтобы сильнее разделить столбцы.
Единицы измерения (рубли и градусы Цельсия) я вынес в название строк — спорное решение: посетитель сайта может не прочитать название строк и не понять о каких величинах идёт речь, но по мне так опрятней 😇
Ещё я выделил цветом расходы.
Расходы до установки котлов сделал красным и жирным — так создаётся ощущение крупной, большой цифры — больших расходов.
Расходы после — зелёным и лёгким шрифтом — зелёная, лёгкая цифра — маленькие расходы.
Ниже, вместо красного шрифта, я покрасил низ таблицы в чёрный и сделал акцент на сроке окупаемости — цена за систему котлов 70 000 ₽ довольно-таки крупная, и посетителя сайта, скорее всего, заинтересует срок окупаемости вложений. По этому я и сделал акцент на этом.
Но это ещё не всё…
(Только не упади — сейчас будет ржака 😅🤣)
Скидываю результат. А мне в ответ:
— Юра! Почему ты сделал только таблицу? То, что выше, тоже относится к этому блоку!
— *********** 😑
Вот! Вот так получается, когда в дизайне нет чёткой структуры (или она есть, но не правильная)!
Я даже не смог понять, что таблица и, что находится над ней — связанные вещи, а не разные блоки!
Давайте ещё раз посмотрим на дизайн:
👆 Таблица же реально выглядит, как отдельный блок!
Почему?
Потому, что шрифт заголовка таблицы = шрифту заголовка блока. Отступы от таблицы и остального контента = отступам между блоками.
Вот вам даже отдельно все заголовки со всего сайта заскринил 👇
Что скажите? Это же заголовки отдельных блоков! Отдельных блоков, Карл!
Окей, исправляем ошибки:
- Заголовок таблицы должен отличаться от заголовка блока — это 100000%
- Структурируем информацию — выделяем название фирмы и выделяем исходные данные этой фирмы. Т.к. лендинг про котлы, акцент делаем на необходимом температурном режиме.
Вот, что у меня получилось в итоге:
Итог
Совет №1
— при создании дизайна нужно подумать над структурой, над тем, что нужно выделять нужную и важную информацию, иначе её тупо никто не увидит (кроме тебя, конечно)😅
Всё, что получилось после подумания — отметить в прототипе или в ТЗ для дизайнера.
Совет №2
— не скупись на работу дизайнера. Закажи дизайн у заинтересованного человека, у того, кто делает не конвейерный дизайн на отебись, а у того кто вникает в проект и думает над ним.
Иначе, ты заплатишь дважды. Сначала нерадивому дизайнеру. Потом радивому. А если сайт при этом ещё и запустили с плохим дизайном, то готов кошелёк ещё раз программисту заплатить.
Но это ещё не страшно — это всё фигня 😏
Самое страшное, что из-за нерадивого дизайна ты упускаешь прибыль.Ты крутишь на сайт рекламу, сливаешь деньги на неё (да, да – в этом случаи именно сливаешь), а выхлопа с этого совсем нет, либо он очень маленький.
Почему? Потому, что с нерадивым дизайном, информацию с сайта считать трудно и все твои посылы, все УТП просто не доходят до посетителей….
Что делать?
И как быть, если ты столкнулся с нерадивым дизайнером?
— Принять ситуацию. Да, нерадивые дизайнеры есть и от них никто не застрахован — даже я (сам нарывался на таких) 😑
— Решить вопрос с дизайнером. Лучше и грамотней всего — попросить его переделать нормально. И если дизайнер не мудак — он переделает.
Ну, а если он начинает выёбываться, то таким людям платить не стоит. Потому, что работа сделана хуйово…
Но… Я считаю, что всё должно быть по справедливости. Если человек реально старался, потел, но у него не получилось (новичок ещё, например), то ему следует заплатить, хотя бы часть.
— На худой конец: написать мне. Я разберу нерадивый дизайн, укажу на ошибки и варианты решения этих ошибок.
С этим разбором ты можешь вернуться к дизайнеру-новичку и попросить внести правки. Не стоит сильно корить начинающего дизайнера — я тоже не сразу всему научился, да и сейчас учусь. А вот к нерадивому дизайнеру лучше не возвращаться, потому что себе дороже выйдет — нафиг его 😈. Либо можешь сразу заказать переделку дизайна у меня 😉
P.S. Вопрос к дизайнерам, если такие сюда забрели:
— А вы сталкивались с подобными просьбами от клиентов? Переделывали работы нерадивых чуваков? Пишите свой опыт и впечатления в комменты)