Дизайн — статьи о сайтах
У студии видеопродакшна на странице услуги много материала: этапы работы, примеры роликов, состав команды, сроки, условия согласования, вопросы и ответы. Если выложить всё подряд, посетитель теряется, а вам важно, чтобы он дошёл до заявки. Ниже о том, как перестроить такую страницу, не сокращая содержание.
Почему длинная страница видеопродакшна читается тяжело
Обычно проблем три. Во-первых, тяжёлые видеоблоки перебивают текст: человек листает, а плеер то захватывает прокрутку, то сдвигает вёрстку при загрузке. Во-вторых, разные по смыслу вещи идут без границ: процесс работы смешан с портфолио, а условия сотрудничества спрятаны в середине абзаца. В-третьих, на телефоне длинные колонки текста превращаются в сплошную ленту без ориентиров.
Задача не в том, чтобы страницу укоротить, а в том, чтобы читатель в любой момент понимал, где он находится и как перейти к нужному разделу.
Оглавление в начале: как дать быстрый переход к нужному разделу
Сразу после первого экрана разместите короткий список разделов со ссылками-якорями на заголовки ниже. Владельцу бизнеса, который выбирает подрядчика, часто нужен один ответ: «Сколько длится производство?» или «Что входит в работу?». Оглавление даёт ему прямой путь.
- Формулируйте пункты как вопросы или действия клиента: «Как проходит съёмка», «Что нужно от вас», «Сроки и согласования».
- Не делайте больше 6–7 пунктов, иначе оглавление само станет длинным текстом.
- На телефоне пункты должны быть достаточно крупными, чтобы попасть пальцем.
- В конце крупных разделов добавьте ссылку «Наверх» к оглавлению.
Как разместить видео, чтобы оно не мешало чтению
Для студии видео — главный аргумент, но на длинной странице его лучше дозировать. Не запускайте воспроизведение автоматически со звуком и не ставьте фоновое видео на всю страницу: это отвлекает и тратит трафик на мобильном интернете.
- Вместо готового плеера можно показать обложку с кнопкой запуска и загружать плеер по нажатию. Страница откроется быстрее.
- Под каждым роликом дайте подпись: задача, формат, хронометраж, ваша роль. Так видео привязано к тексту, а не висит отдельно.
- Задайте плееру заранее известные пропорции (например, 16:9), чтобы текст не прыгал при загрузке.
- Если в ролике важна речь, добавьте краткое текстовое изложение или субтитры: не всегда есть возможность включить звук.
Условный пример: страница «Рекламный ролик под ключ»
Представим страницу услуги. Это иллюстрация структуры, а не описание реального проекта. Порядок блоков может быть таким:
- Первый экран: одно предложение о том, для кого услуга, и кнопка «Обсудить ролик».
- Оглавление из шести пунктов: «Что входит», «Этапы и сроки», «Примеры работ», «Что нужно от вас», «Как формируется смета», «Вопросы».
- «Что входит»: короткий список из пяти-шести позиций (сценарий, съёмка, монтаж, звук и так далее) по одной строке на каждую.
- «Этапы и сроки»: нумерованный список, где у каждого этапа есть результат и момент согласования с заказчиком.
- «Примеры работ»: три ролика с подписями, остальные в отдельном разделе портфолио.
- «Как формируется смета»: перечень факторов, влияющих на стоимость (число съёмочных дней, локации, актёры, графика), без обещаний конкретных сумм, если вы их не публикуете.
- «Вопросы»: раскрывающиеся блоки, где заголовок виден, а ответ открывается по нажатию.
- Повторная кнопка заявки с коротким описанием, что произойдёт после отправки.
Текст: ширина строки, абзацы и подзаголовки
Для чтения с экрана комфортна строка примерно в 60–80 знаков. Если текст растянут на всю ширину монитора, глаз теряет начало следующей строки. Ограничьте ширину текстовой колонки, а видео и галереи при необходимости делайте шире.
Абзацы держите в 3–5 строк. Подзаголовок ставьте там, где меняется тема, и пишите его так, чтобы по одним подзаголовкам можно было понять содержание. Важные условия (например, число правок в стоимости) выносите в отдельную строку или список, а не прячьте внутри абзаца. Размер основного шрифта на телефоне — не мельче 16 px, межстрочный интервал около 1,4–1,5.
Проверочный список перед публикацией
- Есть ли оглавление со ссылками в первой трети страницы?
- Понятно ли по подзаголовкам, о чём страница, без чтения абзацев?
- Не запускается ли видео само и не сдвигает ли оно текст при загрузке?
- У каждого ролика есть подпись с задачей и форматом?
- Этапы работы оформлены списком, а не одним длинным абзацем?
- Кнопка заявки встречается минимум дважды: после первого экрана и в конце?
- Страница проверена на телефоне: можно ли нажать пункты меню и прокрутить без случайных запусков плеера?
- Колонка текста ограничена по ширине, абзацы короткие?
Пройдите по списку сами, а затем попросите коллегу, не знакомого со страницей, найти на ней сроки и порядок согласования. Если на это уходит больше минуты, структуру стоит доработать.
