Рубрики
Веб-разработка

Как печатные издания помогают при разработке сайта?

От диаграммы Гутенберга до grid-разметки, от шрифтов с засечками до современных фреймворков… разработка сайта постоянно совершенствуется и наполняется новыми технологиями. Но как печатные издания помогают сделать хороший сайт? И причем тут показатель отказов?

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

В этой небольшой статье (которая является вольным переводом статьи «What Newspapers Can Teach Us About Web Design» (Frederick O’Brien) мы рассмотрим основные принципы построения печатных изданий, которые необходимо применять и в сайтостроении.

Разработка сайта: главная страница

Разработка сайта начинается с проработки главной страницы также, как и создание дизайна газеты начинается с шапки. Основные задачи главной страницы любого веб-проекта:

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

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

Какие шаблоны оформления пришли к нам с времен, когда газета была единственным доступным средством массовой информации?

1. Оформление «Выше линии сгиба» или «о чем вы расскажете читателю»?

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

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

  • цепляющий заголовок с тегом h1,
  • уникальное торговое предложение (УТП),
  • кнопки для быстрой связи с авторами (по желанию),
  • красивое изображение, представляющее продукт лицом.
Cover of The New York Times, 21 July, 1969
Пример: оформление газеты The New York Times выше линии сгиба

Важно всё: размер шрифта заголовка, вхождение ключевых слов, иллюстрации. Эталонным примером дизайна первой страницы веб-сайта не зря считаются посадочные страницы компании Apple:

Apple website homepage
Шапка посадочной страницы Apple.

Таким образом, прорисовка первого экрана при разработке сайта — основной элемент, оформлению которого следует уделить наибольшее внимание.

Важно: не стоит выкладывать в шапке сразу всю информацию, вплоть до контактных адресов. В этом случае посетитель сразу получит всё и уйдёт.

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

2. Диаграмма Гутенберга. Разработка сайта и психология.

Принцип Гутенберга или Z-шаблон представляет собой иллюстрацию направления человеческого взгляда при просмотре любого печатного издания… или веб-страницы.

Кратко: взгляд типичного читателя перемещается с левого угла страницы до правого нижнего угла (если абстрагироваться от некоторых национальных особенностей оформления текста, например в арабских странах).

Подробнее: направление взгляда читателя можно проиллюстрировать так:

Gutenberg diagram
Направление взгляда читателя или Reading Gravity

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

Разработка сайта в соответствии с диаграммой Гутенберга — то, что отличает профессионала.

3. «Табличка с именем» или header

Табличка с именем или шапка есть у каждой газеты. И это один из немногих элементов дизайна, не изменяющихся в течение долгого времени. Основная задача для газеты — сказать: «мы — ЭТА газета, а не другая«. Иными словами, шапка подчеркивает уникальность издания. В качестве примера приведу шапку моего любимого издания Russia Today:

Шапка Russia Today не меняется почти никогда

В веб-дизайне хедер или шапка также важный элемент. Каждая страница проекта должна соответствовать общему фирменному стилю, содержать элементы из хедера в оформлении.

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

Контент-блоки и сетка

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

Основным элементом газетного дизайна является колонка. В зависимости от формата издания, количество колонок варьируется от 4 до 14. При этом, поток текста в печатном издании направлен вниз по колонке.

Изображение может занимать две колонки для привлечения внимания:

Front page of Dagbladet newspaper
Типичный пример вёрстки газеты.

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

Каждый смысловой элемент формирует свой блок

Modular layout in The Guardian newspaper
Формирование смысловых блоков на примере The Guardian

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

При создании веб-сайта модульность обеспечивается современными фреймворками типа bootstrap или material design, или такими инструментами как flexbox и grid. Правильное их применение и внимание к мелочам вроде отступов при вёрстке страницы способно создать хорошее впечатление от вашего сайта.

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

Заключение

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

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

С вами был webmaster_zotov, до новых встреч!