Подробнее: rocketmind.ru/cases/gosuslugi-promotion/6
Совет: простой способ сверстать любой рассказ с иллюстрациями
У вас в арсенале уже множество приемов иллюстрирования и визуальной подачи материала: заголовки, подзаголовки, таблицы, иллюстрации, схемы и видео. А еще есть всевозможные админки и конструкторы сайтов, которые предлагают вам расположить материалы в несколько столбцов. Это опасная практика.
Фотографии и текст можно ставить напротив друг друга в очень ограниченном количестве случаев и только под присмотром профессионалов. Случаев этих так мало, а оговорок так много, что лучше туда не лезть.
Вместо этого я предложу вам простой способ подавать любой осмысленный текст с иллюстрациями. Записывайте:
Иллюстрация, заголовок, текст.Иллюстрация, заголовок, текст.Иллюстрация, заголовок, текст.Сверху вниз, подряд, в один столбец.
Это значит, что основное содержимое вашей статьи упаковано в одну удобную для чтения колонку. Иллюстрации ставим на всю ширину колонки. Заголовок должен подкреплять иллюстрацию по смыслу. Текст — развивать идею заголовка. Всё должно быть связано между собой по смыслу.
Читатель должен просматривать этот документ примерно так:
1. Увидел интересную иллюстрацию.
2. Изучил заголовок под ней, заинтересовался еще больше.
3. Прочитал сопроводительный текст.
Есть и другие способы подачи иллюстраций и текста, но они сложнее и не всегда работают. Этот способ прост и работает всегда.
Больше о композиции:
Сэндвичная верстка
Порядок элементов
Осторожно с версткой в несколько колонок. В верстке промостраниц есть такой визуальный штамп: три-четыре столбца текста, сверху — абстрактные векторные иконочки. Это плохо сразу по нескольким причинам:
Векторные иконки неинформативные, ничего толком не показывают и только занимают место. Они лишь разбавляют текст и создают визуальный шум.
Тексту тесно в двух-трех колонках. Если не включены переносы, то получается рваный правый край, а если делать выравнивание по ширине, то между словами получаются огромные пробелы.
В узкой колонке не поместится много текста, а если поместится — колонка будет высоченной
Как это читать? Человек не может одновременно прочитать три текста. Ему сложно сопоставить два стоящих рядом текста, потому что издалека они выглядят одинаково. По сути, читатель будет сосредоточен на каждом отдельном кусочке, а потом будет пытаться обдумать смысл целиком.
Три колонки с иконками — это настоящий визуальный штамп. Он создает нарочито халтурное настроение от страницы.
Лучший вариант для промостраницы или статьи — большая осмысленная иллюстрация и текст снизу. Всё это занимает основную колонку: и тексту достаточно места, и иллюстрацию хорошо видно.
Если вы хотите, чтобы читатель сравнил две фотографии (например, нашел отличия), — можно поставить их рядом. Но только для сравнения. Всё, что стоит в соседних колонках, будет автоматически сравниваться.
Если текста недостаточно или он играет второстепенную роль, можно занять иллюстрацией 80 % ширины колонки, а текст написать аккуратно сбоку — будет выглядеть как подпись.
Внизу еще можно поставить какую-нибудь акцентную штучку.
О верстке в несколько колонок
Идеи: что и как иллюстрировать
Что нужно проиллюстрировать Как Продукт, чей внешний вид важен для продажи. Торт, меню в ресторане, красивая бытовая техника, предметы одежды. Качественная фотография продукта. Можно фотографировать в контексте (на столе, на модели), но не перетягивать внимание с предмета. Всё, что хочется трогать, где важна фактура, материалы. Ювелирка, предметы роскоши, ткань, дорогая мебель, кожа. Новый смартфон с корпусом из хирургической стали. Фотография с подчеркнутой фактурой — «хочется потрогать». Акцент на бликах. Можно добавлять антураж: красивые предметы рядом. Сценарии использования: успешные люди пользуются продуктом. Физический продукт с интересным составом, из особых материалов. Пылесос циклонного типа. Многослойный термос. Взрыв-схема, трехмерная модель, продукт в разрезе. Выноски показывают, что здесь где и зачем нужно. Большой или компактный предмет, помещается в квартире, помещается на ладони. Фото предмета в сравнении с другими: рядом или свалены горой. В этот предмет помещается много других. Большая сумка, вместительная посудомоечная машина. Раскладка всего, что сюда поместится, на большой площади. Сложный прибор, дорогая физическая вещь, которой нужно как-то пользоваться. Робот-пылесос, раскладной диван. Фотографии и видео, как люди пользуются этим продуктом. Программа, сервис, электронная услуга, что угодно цифровое. Панель управления умным домом, бухгалтерская программа. Скриншот, из которого убрали лишнее и вписали то, что создаст правильную эмоцию. Человек пользуется продуктом, виден экран.
Что нужно проиллюстрировать Как В нашем продукте больше функций, чем в другом. Сравнение тарифов, устройств. Сравнительная таблица. У нашего продукта заметно больше строк или галочек. Место, где оказывают услуги: клиника, салон красоты, спортзал, массажный кабинет. Настоящие фото места с людьми, которые оказывают и получают услуги. Навести чистоту! Очный курс в группе, с интересным тренером. Агентство праздников, лекторий, музыкальная школа, вечеринка. Фотографии зала, людей, занятий. Скриншоты или фотографии раздаточных материалов. Фотографии или видео, где видны эмоции. Интересный человек: тренер, ведущий, лектор, автор книги хочет поделиться опытом, вызвать доверие. Видео человека, где он убедительно говорит о важном. Интервью или фильм. Процесс, последовательность абстрактных шагов, отношения элементов, иерархия. Как проходит обучение. Как устроена работа. Схемы, схематичные рисунки. Изменение процесса, развитие. До модернизации процесс был одним, теперь другой. Две схемы рядом. Разница видна с первого взгляда. Было очень плохо, стало очень хорошо. Последовательность конкретных шагов. Инструкция. Серия фотографий или рисунков. Изменение внешнего вида человека, здания, города, улицы, офиса, рельефа. До и после диеты. Два фото рядом в режиме «Было — стало». Много всего сделали в рамках проекта, много написали, много собрали, большой объем работ. Длиннющий перечень из всего, что входит. «Задавить массой».
Примеры работы с иллюстрациями и визуальной подачей
У вас в руках электронная книга, поэтому вы можете кликать по ссылкам и изучать дополнительные материалы в интернете. Изучите эти видеоролики, чтобы увидеть работу с иллюстрированием и визуальной подачей на практике.
Реклама товаровГотовая еда в контейнерах: авторы страницы вроде поставили фотографии еды, но недожали. Фотографии должны быть крупнее и сочнее. См. также: о сайте цветочной лавки.
Элитная недвижимость: сайт выглядит дорого, но по содержанию во многом не отвечает запросам аудитории. Иллюстраций не хватает, нет нужного эмоционального воздействия.
Ежедневники: сайт рассказывает о своих продуктах, но почти их не показывает. А это золотое правило рекламы: показывай, а не рассказывай.
Окна: основная проблема — текст спорит с фотографией.
Реклама услугСтудия интернет-рекламы: на сайте было много визуального мусора в виде векторных иконок. Вместо них ставим информативные иллюстрации: схемы работы, примеры запросов клиента, результаты работы. Из хорошего — на сайте показаны примеры работ.
Курсы ораторского мастерства: типичные проблемы промостраниц — многоколонники с векторными иконками, мало иллюстраций, абстракции в тексте и сложная, конфликтующая подача.
Курсы актерского мастерства: фотографии задавлены текстом, в странице нет порядка. Задача — сделать промостраницу модульной и упорядоченной, сделать акцент на фотографиях и «задавить массой» в конце (где мы называем цену).
Реклама программ и сервисовСайт сервиса ботов: было много векторных иконок, которые почти обозначали то, что имелось в виду. Ключевое слово — почти. Основная задача переделки — заменить «почти иллюстрации» на настоящие иллюстрации.
Программа для службы поддержки: было мало демонстраций продукта. Но куда важнее — по тем демонстрациям, которые были, никто не водил за ручку.
Конструктор отчетов: показывают продукт, но мелко и невыразительно. А нужно крупно, выразительно и «проводя за ручку».
Система для интернет-магазинов: вообще никаких демонстраций. А нужно показывать продукт в действии и объяснять, на что тут смотреть.
Сервис для поиска автомобилей: бессмысленные фотографии, но мало рассказано о самом сервисе. Делаем наоборот: рисуем схемы и коллажи, которые покажут всё. Также много проблем с многоколонниками и иконками.
Специалисты и частная практикаЮристы по интеллектуальному праву: