Разобрать по буквам: The Economist vs Smashingmagazine



Сегодня мы проведем небольшой анализ типографики двух солидных онлайн-ресурсов — The Economist и хорошо известного многим дизайнерам Smashingmagazine. 

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

Вы ведь, наверняка, знаете анекдот про разработчика «Вконтакте» Дурова, да? Говорит, возьму и сделаю Вконтакте на китайском языке. Знаю вас, юзеров, — помучаетесь недельку, но привыкнете, а заодно и язык освоите.

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

Для Smashingmagazine аккуратность и привлекательность внешнего вида принципиальна. Дизайнерский журнал (по понятным причинам) не имеет права следовать известному «сапожник без сапог». Шапка сайта включает логотип, иконки соцсетей и основные разделы. Гораздо больше внимания, нежели у второго издания, уделено навигации — она удобна, структурирована и лишних вопросов у пользователя не вызывает. При этом стоит заметить, что на разных разрешениях сайт выглядит по-разному, меняется структура страницы. Не поленились и подумали, что и почему будет удобно пользователю.

Шрифты и текстовые блоки

Разработчики «Экономиста», наверняка, знали о том, что сайт открывается не только с ноутбуков и небольших десктопов, но также с айпадов и с больших аймаков :) У вторых в большой экран вмещается очень многое. При этом на сайте нет речи ни об эластичной верстке, ни о читабельности текста.

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

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

Как это и делает Smashingmagazine:

Цвет заголовков и ссылок

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

С другой стороны, не стоит забывать и о цвете — открытый красный цвет на экране слишком броско выглядит. Гораздо аккуратнее работают с сочетанием красного и синего создатели Smashingmagazine:

Верстка текста

В «Экономисте» взяли в качестве основного шрифта стандартный, в меру аккуратный гротеск, который гарантированно прочитается на всех устройствах. Это обусловлено тем, что аудитория не обратит на него внимания и прочтет в любом случае. Дизайнеры — аудитория куда более требовательная к качеству картинки. Поэтому в Smashingmagazine, который является законодателем мод в вебе, подключили читабельный, хоть и статичный, сериф. Еще и озаботились подстановкой лигатур, которые здесь нужны и важны.

Лично для меня это первый пример применения лигатур в вебе, а ребята написали про это целую статью (технологи — велкам, море интересного для вас!):

«Экономист» не то что лигатурами не располагает, а еще и ставит в неожиданных местах полужирные начертания шрифта:

Внутренние страницы

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

Smashingmagazine при этом делает текст разнообразным. Грамотная разбивка, отделение введения от основного текста, крупный читабельный заголовок, примечания, аккуратные пиктограммы — все это помогает пользователю прочитать текст, который ему и так интересен:

В чем смысл?

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

В Smashingmagazine текст разбивается на блоки и по важности, и по смыслу. Благодаря нескольким уровням заголовков, мы четко понимаем иерархию текста.

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

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

Семен Лобач, арт-директор Davinci