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

На странице есть информация об обучающих офлайн-программах компании. Сразу после него идет блок с формой обратной связи и заголовком «Хотите узнать больше об обучении?».

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

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

Место найдено.

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

Изучаю презентацию курса, которую прислал клиент.

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

Это значит, что если блок должен привлечь внимание, нужно использовать именно акцентный цвет.

Чтобы выделить блок, но при этом остаться в визуальном стиле сайта, нужно делать это крайне аккуратно.

На одном из вариантов выделена только часть заголовка.
На другом — только квадрат.
На третьем — и то, и другое.

Для списка используется то же решение, которое уже встречалось на странице.

Для фото тоже, но с небольшим дополнением — оранжевый квадрат. Он сильно смещает акцент и привлекает много внимания. Поэтому разумно попробовать поместить туда какое-то важное сообщение. Пока пробую «онлайн-программа».

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

Отправляю заказчику эти 3 варианта.

Получаю обратную связь.

Клиенту нравится первый вариант.

Комментарии и вопросы:

• Получится ли сделать надзаголовок бегущей строкой, чтобы еще больше выделить блок на фоне остальной страницы?
• "Онлайн-программа" в оранжевом квадрате — это хорошее решение. Но хочется заменить это на «индивидуальное онлайн-обучение».

Работаю с обратной связью.

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

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

Макет согласован.
Получилось вот так:

Переходим к вёрстке и финальной части.

Всё, что создавалось на прошлых этапах, происходило в Фигме — графическом редакторе. Клиент видел дизайн только в виде изображений.

Теперь нужно перенести всё это непосредственно в Тильду.
Также параллельно идёт оптимизация под мобильные и остальные виды экранов.

Всё готово.
Блок отлично вписывается на страницу.
Хорошо сочетается с остальными элементами, но при этом является значительно более заметным на их фоне:

После завершения вёрстки всё еще раз перепроверяется с помощью инструментов разработчиков, тестируется на реальных устройствах и исправляются ошибки.

Клиент принимает работу.

Финал.