Проблемы web-типографики на примере Meduza.io

Все новости, Правила верстки

Сегодня стартовал информационный проект Meduza (наследник Lenta.ru). Новостной ресурс делает контент. Поэтому предлагаем оставить дизайн в стороне, и обратить внимание на типографику: она напрямую связана с контентом и влияет на его восприятие. У нового ресурса есть определённый набор проблем, характерный для всей web-типографики. Чему могут научиться web-дизайнеры у print-дизайнеров?

Еще раз: контент—это всё любого новостного ресурса. Хотя, некоторые небольшие участники рынка за счёт дизайна вполне способны подвинуть на рынке крупные ресурсы (так Drive.ru составляет заметную конкуренцию «Авторевю»). Типографика работает как раз на стыке контента (все правила вёрстки ориентированы на удобство чтения) и дизайна (кроме удобства чтения типографика способна дополнительно эмоционально окрашивать текст за счёт средств типографики (формата, полей, шрифта и т.д.).

Вот несколько топографический моментов, которые на web’е портят не один ресурс:

Meduza01

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

meduza2

Неудачная структура заголовков
В заголовках все ошибки вёрстки оказываются особенно заметными: к этим словам особое внимание у читателя. Почти все заголовки в web плохо структурированы: интерлиньяж редко бывает уменьшенным (120% от размера шрифта по умолчанию редко смотрятся достойно в заголовке). Автоматическая разбивка на строки в заголовке добавляет неразберихи: разрыв связанных между собой слов усложняет восприятие смысла текста. Висячие предлоги в этом случае—лишь признак того, что над заголовками не работали. Добавляем тяжело различимую иерархию источник–заголовок–лид и получаем длинный заголовок, который хочется бросить читать после первых двух слов особо не вникая в смысл.

meduza3

Поля
Поля при наборе не просто отбивают блоки текста: они создают настроение и влияют на текст. Слишком мало белого и акцент смещается. В данном случае система из равных полей неудачно «разбивается» чрезмерно большим (визуально) полем между блоком текста и баннером справа. Хотя в редакторе поля выставлены одинаковыми.

meduza4

Выбор длинны строки
Мы оптимально воспринимаем от 8 до 10 слов в строке. Но это лишь формальный подход. Чем короче строка, тем живее она читается, но тем менее серьёзно воспринимается написанное. Верно и обратное: текст, набранный более длинными строками, воспринимается как более серьёзный, но не так живо (и охотно) читается. Поэтому врезки текста логично набирать более короткими строками, чтобы они живо были прочитаны и увлекли ознакомиться со всем текстом.

meduza6

Модульные сетки
Почти всё хорошо. С вертикальным дроблением макета сносно работают даже начинающие web-дизайнеры. А вот с горизонтальным бывают сложности: в идеале макет печатной продукции разрабатывается так, чтобы строки в разных колонках совпадали (а если набраны разными кеглями, тогда были бы кратны друг другу). В web-дизайне всё чуть более хаотично (или динамично).

meduza7

Высота колонки
Когда работаешь с макетом, не ограниченным по высоте, легко потерять чувство меры и дать читателю слишком длинный, монотонный (не разбитый иллюстрациями или врезками) текст. На примере выше как раз пример удачного решения. И вообще, материалы по этому шаблону достаточно легко «усваиваются» даже без иллюстраций.

meduza8

 

Смещение акцентов
Это беда всех ресурсов с баннерами: вы можете придумать идеальную подачу контента, а рекламодатели всё равно будут делать всё, чтобы их реклама оказалась доминантой на странице.

 

 

meduza9Отрицание (незнание) классики
Большинство «шишек» уже давно набито теми, кто работает с физически осязаемыми носителями. Есть классические решения, есть решения по пропорциям. Web-дизайнеры часто недооценивают классическую школу типографики и игнорируют её наработки. Нарушать правила можно и нужно. Только не все сразу и с чётким осознанием для какой цели.

Перечисленные слабые места типографики в web характерны практически для всех ресурсов. И уж тем более, для тех, которые работают на «шаблонных» платформах. Например, наш блог работает на wordpress, который упрямо игнорирует попытки форматирования заголовков. Так что не пытайтесь найти примеры достойной вёрстки на других web-сайтах, изучайте классические образцы типографики. Слушайте носителей традиций.

Судьба Meduza зависит по сути от того, на сколько их контент будет интересным. Необычный дизайн (тёмный новостной сайт) отлично помогает обратить первичное внимание. Это, пожалуй, даже важнее, чем контент или дизайн. Может, даже жизненно более важно, чем типографика.

 

Реклама

Проблемы web-типографики на примере Meduza.io: 2 комментария

  1. Алексей, а можете привести примеры с хорошей типографикой и вёрсткой в вебе?

    Например, что скажете про https://medium.com/ и http://alistapart.com/, или http://practicaltypography.com/. Вот еще есть fearonhay.com

    А по поводу сеток в вебе: Мюллер-Брокманн, Босхард, Виньелли и остальные уважаемые дизайнеры просто не работали с вебом, иначе классика была бы немного другой 🙂 Строго говоря, мы почти не используем колонки, делим модули по горизонтали, объединяем в регионы и чередуем. Макеты могут принимать такой вид https://www.dropbox.com/sh/6puiaw7w02no1l1/AAAVYSO6LsOfoR3wTmBwgYcfa?dl=0 Мы не можем позволить себе традиции с бумаги, совсем другая специфика. С другой стороны, в вебе нам опираться не на что, нет устойчивой вебовской типографической почвы под ногами.

    1. В web пока в действительности нет хорошей школы типографики, нет готовых решений, нет мэтров web-типографики, которых можно было бы спросить. И причина, пожалуй, в инструментах и носителях.
      Инструменты разработки мизерно уделяют внимание работе с типографикой. Зернистость экранов (как инструмента разработки) просто не даёт заметить нюансы. Именно поэтому я не читаю и не советую другим книги по типографике в электронном виде: даже самые простые иллюстрации и примеры невозможно рассмотреть.

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

Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s