Как все устроено. Дизайнер Tilda Publishing

We Shall Burn Bright
Как все устроено
5 min readDec 22, 2015
Ира Смирнова — дизайнер, customer success manager. Изучает и формулирует потребности пользователей, а также отвечает за внешние коммуникации.

Tilda Publishing — платформа для создания контент-ориентированных веб-проектов (лонгридов, статей, спецпроектов, сайтов, лэндингов) и публикации их онлайн.

От WSBB: опыт «Тильды» показывает, насколько эффективно работают инструменты вовлекающей верстки: выносы и врезы, визуализация контента и интерактивные блоки. Это помогает удержать пользователя при чтении длинных материалов и разнообразить его опыт.

«Тильда» — это не издательство. Тем не менее, мы все время работаем над тем, чтобы привлечь и удержать внимание огромной аудитории. Каждый месяц более 3-х миллионов человек читают проекты, сделанные на «Тильде».

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

Принцип первый. Content is King

Заголовок статьи Билла Гейтса, ставший крылатым выражением, звучит сегодня удивительно свежо, несмотря на то, что статья была написана 20 лет назад. По меркам интернета — до нашей эры.

За это время люди еще больше убедились в том, что качественный контент — это единственный здоровый способ популяризации ресурса.

Читатели ценят, когда материал приносит пользу, и они становятся чуть умнее, чуть веселее или чуть информированее.

Человек интуитивно понимает, когда журналист постарался, переработал большой пласт информации и сделал что-то специально для него. Он чувствует благодарность.

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

Особое внимание мы уделяем адаптивности. Статьи, сверстанные на компьютере, должны так же эффектно смотреться на планшетах и смартфонах.

Принцип второй. Избирательное чтение

Мы читаем теперь иначе, чем во времена Пушкина и даже Хэмингуэя. Конечно, что-то очень важное и значимое можно осилить, прочитав документ из «Ворда». Но большинству материалов приходится сражаться за то, чтобы удержать внимание.

Как читают в интернете? Мы видим заголовок, который нас чем-то цепляет, переходим по ссылке и в первую очередь пролистываем материал, чтобы убедиться, что нас не обманули и тут действительно написано о том, что нас заинтересовало. И чем четче и понятнее структура материала, чем он нагляднее, тем легче убедить читателя вернуться к началу и прочитать.

В основе «Тильды» модульная система — страница собирается из блоков (комбинаций элементов, предварительно спроектированными дизайнерами) и это невольно стимулирует редактора разбивать текст на смысловые части и структурировать его.

Если говорить о конкретных приемах, которые создают структуру, то это:

  • Заголовочный комплекс

Комбинация заголовка, подзаголовка и названия рубрики / главы.

Пример использования заголовочного комплекса внутри статьи «Языческая роща» самиздата «Батенька, да вы трансформер».

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

  • Ключевая фраза

Выделенная часть текста, привлекающая внимание читателя.

Пример оформления ключевой фразы в интервью, опубликованном в издании Bunch of Questions / Беседы о разном.

Ключевая фраза добавляет «воздух» в материал, разбивает монотонность повествования. Вариантов ее оформления на «Тильде» много, но хорошим тоном будет остановиться на каком-то одном и использовать его на протяжении всего материала.

  • Изображения и подписи к ним

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

Пример использования иллюстрации для разбивки материала на главы. Редакционный спецпроект «Комсомольской правды»
  • Выносы и иллюстрации на полях

Дополнительная информация, обогащающая текст.

Пример использования сопроводительной иллюстрации в статье «Колонии на Марсе –это слишком дорого» интернет-издания «Теории и практики».

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

Перечисленные приемы — не полный список. Помогают создать структуру также: разделители (линии, декоративные элементы, цвет фона), нумерация, «карточки», цитаты, оформление абзацев.

Использование дополнительных элементов должно быть умеренным. Одного на экран вполне достаточно. В этом случае появляется необходимый контраст, который удерживает внимание читателя.

Принцип третий. Выразительность

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

Фотоистория «Иордания — затерянный мир» Елены Лисейкиной.

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

Пример, как полноэкранные изображения становятся основой макета статьи. Интернет-издание «Теории и практики»

Принцип четвертый. Мультисенсорный опыт

Мода на «мультимедийность» и «интерактивность» привела к появлению скептицизма относительно этих понятий. Хотя желание воздействовать на читателя с помощью разных модальностей возникло не в наши дни. Музыка нередко «звучит» в произведениях классиков: Бетховен у Куприна и Толстого, Моцарт у Пушкина, Брага у Чехова. Поклонники более современного Мураками собирают целые плейлисты к романам писателя.

Веб-паблишинг позволил органично соединить форматы и привел к появлению дополнительного инструмента вовлечения читателя. Видео, аудио и анимация создают атмосферу и позволяют получить цельное впечатление от истории.

Использование видео в лонгриде Maya Plisetskaya: A life in art издательского проекта Russia Beyond the Headlines
Zurkas Tepla написал музыку к каждой главе своей книги Bank Robber.

Принцип пятый. Make balance

Много лет люди жили под гнетом утверждения: make the right choice. Сейчас уже понятно, что важнее удерживать баланс. Одного правильного выбора не существует. «Тильда» — набор решений, позволяющий соблюдать баланс между содержанием и формой. Многообразие блоков позволяет исполнить разные рисунки верстки, сочетать текст и иллюстрации в разном формате, удерживая ритм повествования и внимание читателя.

Другие материалы цикла «Как все устроено»:

Больше о медиа, форматах, подаче и распространении контента, инструментах и аналитикев нашей группе на Facebook.

Редакционная коллегия We Shall Burn Bright:

--

--

We Shall Burn Bright
Как все устроено

Сергей Паранько, Мика Стецовский, Оля Сидорова