От диаграммы Гутенберга до grid-разметки, от шрифтов с засечками до современных фреймворков… разработка сайта постоянно совершенствуется и наполняется новыми технологиями. Но как печатные издания помогают сделать хороший сайт? И причем тут показатель отказов?
Печатные издания, например, газеты, привлекают внимание читателей уже несколько столетий. За это время сформировались основы построения качественного контента, актуальные и по сей день, в том числе и при разработке сайта.
В этой небольшой статье (которая является вольным переводом статьи «What Newspapers Can Teach Us About Web Design» (Frederick O’Brien) мы рассмотрим основные принципы построения печатных изданий, которые необходимо применять и в сайтостроении.
Разработка сайта: главная страница
Разработка сайта начинается с проработки главной страницы также, как и создание дизайна газеты начинается с шапки. Основные задачи главной страницы любого веб-проекта:
- привлечь читателя с первых же строк, с первого же заголовка,
- сформировать его представление о странице,
- задержать на странице,
- дать наиболее важную информацию, подогревая интерес к дальнейшему просмотру.
Такие глобальные задачи ведут к ответственности разработчика и необходимости следовать базовым канонам оформления (если конечно вы не хотите, чтобы посетитель уходил с сайта сразу же).
Какие шаблоны оформления пришли к нам с времен, когда газета была единственным доступным средством массовой информации?
1. Оформление «Выше линии сгиба» или «о чем вы расскажете читателю»?
Любая газета — довольно большой по формату лист бумаги. И его постоянно сгибают вдвое для придания компактности. Следовательно, важная информация и цепляющие заголовки размещаются выше линии сгиба, чтобы читатель был заинтересован, уже проходя мимо газетного прилавка.
Первый экран веб-сайта преследует точно такую же цель: заинтересовать посетителя, рассказав ему кратко о самом важном. И здесь основную роль играет комбинация элементов:
- цепляющий заголовок с тегом h1,
- уникальное торговое предложение (УТП),
- кнопки для быстрой связи с авторами (по желанию),
- красивое изображение, представляющее продукт лицом.
Важно всё: размер шрифта заголовка, вхождение ключевых слов, иллюстрации. Эталонным примером дизайна первой страницы веб-сайта не зря считаются посадочные страницы компании Apple:
Таким образом, прорисовка первого экрана при разработке сайта — основной элемент, оформлению которого следует уделить наибольшее внимание.
Важно: не стоит выкладывать в шапке сразу всю информацию, вплоть до контактных адресов. В этом случае посетитель сразу получит всё и уйдёт.
Вместо этого, сохраните некоторую интригу. Заинтересуйте вашего посетителя, мотивируйте его погулять по сайту. В будущих статьях мы рассмотрим принципы мотивации посетителя подробнее.
2. Диаграмма Гутенберга. Разработка сайта и психология.
Принцип Гутенберга или Z-шаблон представляет собой иллюстрацию направления человеческого взгляда при просмотре любого печатного издания… или веб-страницы.
Кратко: взгляд типичного читателя перемещается с левого угла страницы до правого нижнего угла (если абстрагироваться от некоторых национальных особенностей оформления текста, например в арабских странах).
Подробнее: направление взгляда читателя можно проиллюстрировать так:
Важно: нарушение этого принципа, хаотичное расположение блоков, размещение наиболее ценной информации в ненужных местах приведет к снижению читательского интереса. А это, в свою очередь, увеличит показатель отказов.
Разработка сайта в соответствии с диаграммой Гутенберга — то, что отличает профессионала.
3. «Табличка с именем» или header
Табличка с именем или шапка есть у каждой газеты. И это один из немногих элементов дизайна, не изменяющихся в течение долгого времени. Основная задача для газеты — сказать: «мы — ЭТА газета, а не другая«. Иными словами, шапка подчеркивает уникальность издания. В качестве примера приведу шапку моего любимого издания Russia Today:
В веб-дизайне хедер или шапка также важный элемент. Каждая страница проекта должна соответствовать общему фирменному стилю, содержать элементы из хедера в оформлении.
Причина проста: не все пользователи приходят на сайт по прямой ссылке, и создание единого визуального образа помогает сформировать в подсознании желание возвращаться на сайт снова и снова.
Контент-блоки и сетка
Сетка (или grid) — основа формирования правильного восприятия веб-страницы или газеты читателем. Всегда приятнее читать сайт с отрегулированными отступами и хорошим сочетанием шрифтов, и при верстке страницы и последующем тестировании очень важно уделять этому внимание.
Основным элементом газетного дизайна является колонка. В зависимости от формата издания, количество колонок варьируется от 4 до 14. При этом, поток текста в печатном издании направлен вниз по колонке.
Изображение может занимать две колонки для привлечения внимания:
Также современные газеты отличаются модульным расположением блоков, иными словами:
Каждый смысловой элемент формирует свой блок
Модульность контента важна и при разработке сайта. Объединяя контент в смысловые блоки, мы делаем его удобным для читателя.
При создании веб-сайта модульность обеспечивается современными фреймворками типа bootstrap или material design, или такими инструментами как flexbox и grid. Правильное их применение и внимание к мелочам вроде отступов при вёрстке страницы способно создать хорошее впечатление от вашего сайта.
Как и всегда, у любых правил бывают свои исключения, и вполне можно отступить от типовой вёрстки при создании оригинального сайта. Но чтобы нарушать правила, важно их знать.
Заключение
Веб-дизайн и дизайн печатных изданий, несомненно, имеют различия. Разработка сайта дает возможность предоставить читателю куда больше интерактива, добавить анимации, плавность переходов и прочие технологические новшества. Однако, несоответствие базовым принципам оформления способно разрушить впечатление от самого современного веб-сайта.
В следующих статьях мы еще более углубимся в тему веб-дизайна и правильной вёрстки, чтобы наполнить Интернет качественными проектами.
С вами был webmaster_zotov, до новых встреч!