Школа
Вёрстка

Работаю над шаблоном горящих путёвок, но так как нет опыта, (есть только небольшие теоретические знания) не могу увидеть проблему в шаблоне.

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

Григорий Балаян
29 янв 2025
👁 1184  
Вёрстка

Работаю над шаблоном горящих путёвок, но так как нет опыта, (есть только небольшие теоретические знания) не могу увидеть проблему в шаблоне.

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

Григорий Балаян
29 янв 2025
👁 1184  
Михаил Нозик
Арт‑директор и автор курса «Типографика и вёрстка»
Полезно
Непонятно
Войдите в Бюросферу, чтобы голосовать

Григорий!

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

Что касается вёрстки в целом, то первым делом я бы разобрался с фотографией. В отличие от текста, который нужно читать последовательно, иллюстрация мгновенно и гораздо полнее передаёт нам информацию. Читателю достаточно одного взгляда на картинку, чтобы распознать образы и лица, выстроить в воображении сцену, простроить связи между объектами. Наконец, иллюстрация формирует эмоцию и вызывает желание (например, если мы хотим что‑то продать).

Что вы хотите сказать зрителю этими двумя фотографиями? Какие эмоции он должен ощутить, увидев искажённый широкоугольным объективом безвкусный фасад или кровать? Почему после такого он захочет эту путёвку?

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

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

В соответствии с правилом якорных объектов к заголовку очень легко присоседить текст:

Следующим этапом добавим и цену:

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

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

Продолжим тему дружбы фотографии и заголовка, слегка врезав текст и ценник в фотографию. Обратите внимание, как нам помогают в том внешние поля:

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

Новый курс по типографике

Вышел мой новый курс «Типографика и вёрстка 2.0». Теперь курс длится четыре недели, ближайший пройдёт с 23 марта по 19 апреля. Новые темы: мобильная вёрстка, таблицы, шрифт в тексте, айдентике, на бумаге и на улице, сочетание шрифтов, их поиск и хранение. Все лекции перезаписаны в высоком качестве и с хорошим звуком. Записывайтесь, пока цена ниже и есть свободные места:
Типографика и вёрстка 2.0

Типографика в вебеМодульная вёрсткаПравило внутреннего и внешнегоСмешать комкиДоработка вёрстки
Полезно
Непонятно
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментариев пока нет

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

Рекомендуем другие советы