Текст – основа получения информации. В работе современного веб-дизайнера он занимает одно из ключевых мест. Без него никуда – будь это сайт-визитка, Интернет-магазин или небольшой рекламный баннер.
Но если рассудить логически, текст, пожалуй, даже важнее графики, ведь последняя далеко не всегда способна передать вложенный в нее смысл – без искажений и иносказаний. Текстовая информация в этом смысле – более точна и недвусмысленна (разумеется, и здесь не обходится без исключений из общего правила, но в большинстве случаев дело обстоит именно так).
Направление дизайна, описывающее правила и закономерности работы с текстовой информацией, принято называть «типографикой».
Многие дизайнеры, к сожалению, уделяют слишком мало внимания оформлению текстов в своих макетах. Причем, грешат этим далеко не всегда только новички: опытные специалисты тоже часто закрывают глаза на ключевые аспекты работы с текстом, то ли надеясь на всемогущий русский «авось» (заказчика и так устроит!), то ли всерьез не воспринимая важность грамотного подхода к визуализации текстовых данных.
В этой статье я собрал 10 наиболее распространенных ошибок веб-дизайнеров в работе с текстом. Рассмотрим их более подробно.
1. Не шрифтом единым
Существует великое множество всевозможных шрифтов, часть из них считаются веб-ориентированными и собраны на сайте Google.Fonts. Современные и старинные, печатные и рукописные, с засечками и без. Остается только подобрать наиболее подходящий шрифт для своего проекта – исходя из его тематики, целевой аудитории, современных тенденций, а также пожеланий заказчика (чьи вкусы, как известно, зачастую могут быть диаметрально противоположны самым распространенным эталонам красоты).
Сайт http://www.ronoslund.com – пример, сочетающий в себе все 10 ошибок из этой статьи 🙂
На мой взгляд, отлично подобранные шрифты – http://www.transitplus.ru.
2. Когда размер имеет значение
Одни сильно мельчат, другие страдают гигантизмом. Третьи не в курсе, что такое иерархия заголовков, и искренно не понимают, почему <Н3> не может быть визуально меньше основного текста.
Основной текст не должен быть слишком мелким или слишком крупным, иначе затрудняется его восприятие и усвоение, особенно в течение длительного времени. Размер шрифта для основного текста – вопрос очень субъективный. Во времена, когда самым популярным разрешением экранов для ПК было 1024х768, наиболее оптимальным считалось делать 11-12 px. Сейчас приоритеты сменились и основной текст чаще всего делают размером 17-20 px. Само собой разумеется, многое здесь еще зависит от выбранного шрифта, ведь иногда один и тот же размер, набранный различными шрифтами, выглядит по-разному.
Текст размером 30 px, набранный разными шрифтами (сверху вниз): Gabriola Regular, Garamond Regular, PT Sans Regular и Exo 2 Regular.
Заголовки всегда должны быть крупнее и заметнее основного содержания. Это – здравый смысл. Заголовок первого уровня не должен быть мельче заголовка третьего уровня. Это – аксиома, подкрепленная спецификацией HTML.
Фрагмент № 1 является подзаголовком и не может быть в данном контексте мельче фрагмента № 2 (основного текста).
Полная чехарда с заголовками. № 1 и 2 – это по логике <Н1> и <Н2>, соответственно, однако, под № 4 мы видим стиль заголовка, аналогичный <Н1> (автор дизайна явно не в курсе, что на одной странице не может быть более одного заголовка первого уровня). № 3 – это <H3>, которым в лендинге было бы целесообразно озаглавливать отдельные блоки данных, однако, ниже мы видим № 5, что по стилю соответствует <H2> (только другого цвета). Почему равнозначные по структуре блоки озаглавлены разными уровнями заголовков, – об этом история умалчивает.
3. На вкус и цвет
Текст (будь это заголовок или основное содержание) должен быть четким, заметным и читабельным (за исключением случаев, когда художественная задумка не подразумевает обратного). Для соответствия этому правилу необходимо понимать, какие цвета (оттенки) между собой сочетаются, а какие – наоборот.
И главный заголовок слева, и неактивные подзаголовки слайдера справа нечитабельны: темно-коричневый цвет на темном фоне не может быть выигрышным.
Не знаю, чем руководствовался дизайнер, размещая текст белого цвета на фоне таких спокойных, не ярких оттенков, но посетителю такого сайта придется хорошо поднапрячь зрение.
4. Кто во что горазд
Существует ряд простейших способов визуального выделения текста (без применения эффектов и фильтров в графическом редакторе): жирное начертание, курсив, подчеркивание, зачеркивание, верхний регистр (Caps Lock) и др. Как и где нужно (и можно) применять такое форматирование?
- Жирное начертание. Обычно используется для визуального и логического выделения одного текстового фрагмента относительно других (заголовки, ключевые места в слоганах и пр.). Часто взаимосвязано с SEO.
- Курсив. Не очень хорошо воспринимается в больших объемах. Оптимален для коротких текстовых блоков второстепенной важности (например, для подписей к заголовкам). Также широко используется в SEO.
- Подчеркивание. Предназначено для обозначения гиперссылок. Огромное количество пользователей Интернета привыкло к тому, что ссылка – подчеркнута. Использовать подчеркивание для визуального выделения обычного текста – не совсем уместно.
Зачеркивание. Идеально подходит для визуализации старых данных (особенно на фоне новых, как правило, – более выгодных для целевой аудитории). Самый распространенный пример – старая цена на товар.- ВЕРХНИЙ РЕГИСТР. Использовать нужно с осторожностью, соблюдая чувство меры. Подходит для не длинных слоганов, заголовков и надписей на кнопках. Противопоказан для больших объемов текста.
Капслок в длинных текстах – залог затрудненного восприятия и плохого усвоения текстового материала.
5. Равняйсь!
Проблемы с выравниванием (выключкой) текста наблюдаются чуть ли не у каждого второго дизайнера. Кто-то прибивает нумерованные и маркированные списки к правому краю. Другие размещают целые абзацы текста по центру. Третьи – согласно моде 90-х годов ХХ века – делают выключку по ширине.
Между тем, выключка по ширине является общим методом выравнивания, применяемым в печатной продукции, где промежуточное расстояние между словами и (в меньшей степени) между глифами или буквами, разрежено или сжато, с целью выровнять как левый, так и правый конец каждой строки текста. В совокупности с отсутствием переносом слов такой тип выравнивания способен творить поистине страшные вещи с текстами. Однако, многих дизайнеров это нисколько не смущает и они растягивают тексты по ширине, не задумываясь о последствиях. А они могут быть самыми непредсказуемыми.
Огромные дырки между словами в одних местах, слипшиеся символы в других – все это создает ужасный эффект. Эффект текста, который не удобно и не приятно читать.
Могу озвучить следующие простые рекомендации по выбору типа выравнивания:
- По левому краю: в любых ситуациях (длинные и короткие фрагменты текстов, любые списки, подписи к рисункам и пр.).
- По правому краю: в редких случаях, когда такое расположение продиктовано особенностями композиции. Делать нумерованные и маркированные списки, прижатые вправо, – это моветон. Понять и усвоить подобное расположение информации способны носители тех языков, в которых принято читать справа налево.
- По центру: оптимально для подрисуночных подписей, тезисных описаний к пиктограммам и других текстовых фрагментов небольшой длины.
- По ширине: НИКОГДА в веб-дизайне!
Я перестал использовать выключку по ширине в макетах лет пятнадцать назад. Присоединяйтесь!
6. Шаг влево, шаг вправо
Отступы. Еще один камень преткновения в современном веб-дизайне. Тут либо у половины глазомер сбит, либо люди попросту не понимают, что это выглядит ужасно, не красиво и нечитабельно.
Буквы в блоке контактных данных прилипли к краям прямоугольной плашки.
Отсутствие нормальных боковых отступов в совокупности с мелким и блеклым текстом создают обратный эффект: вместо того, чтобы привлекать (это – блок преимуществ), он вызывает малоприятные чувства.
Здесь обратная ситуация: отступы между новостями больше, чем расстояние от заголовка до первой новости (противоречит логике). Здесь просится какой-то разделитель между новостями, либо просто уменьшение отступа.
Любым блокам текстовых данных нужен воздух, нужно свободное пространство – и для визуального (логического) отделения от смежных элементов, и для удобства восприятия пользователем. Текст, слипшийся с соседними данными, – ухудшает восприятие и затрудняет усвоение текстовых (и прочих) данных.
7. Семь раз отмерь
Выбор не самого оптимального значения межстрочного интервала – очень частое явление в работах дизайнеров. И здесь тоже палка о двух концах: одни делают это расстояние чересчур большим, другие – мельчат, в результате чего строки текста слипаются друг с другом.
Воздуха между строками явно не хватает. Плюс ко всему (особенно в правой колонке) наблюдается почти полное отсутствие отступов, все это вместе создает эффект зажатости и тесноты.
Реже встречаются ошибки с трекингом – межсимвольным интервалом. Я категорически не рекомендую делать этот параметр больше или меньше 0 в больших фрагментах текста. Подобные значения допустимы в каких-то ключевых заголовках или кнопках (и то – далеко не всегда).
Сверху – различный трекинг для текста (0,50, 150). Отчетливо видно, как ухудшается восприятие с ростом межсимвольного интервала. Снизу – кнопки с текстом, набранным с различным трекингом: 0, –75 и 250.
8. Я не волшебник, я просто учусь
Я очень рад, что прошли те времена, когда использование таких текстовых эффектов, как Bevel&Emboss (тиснение) или Stroke (обводка), считалось верхом современности и мастерства дизайнера. Сейчас подобные «изыски» встречаются все реже и, в основном, у новичков, которые только недавно в совершенстве освоили MS Word и готовы перейти к более серьезным инструментам.
Любые эффекты должны быть в меру. Главное – не забывать еще о том, что после утверждения вашего макета заказчиком исходник пойдет в работу к верстальщику. Используйте приемы и эффекты, которые потом легко можно будет реализовать в верстке – без потери функционала и отклонения от макета-оригинала.
Одна из самых распространенных ошибок – использование огромной тени в тексте для контраста с фоновой картинкой.
Правильный способ реализации – создание отдельного полупрозрачного слоя с эффектом размытости.
9. Рыба ищет, где глубже, а человек — где лучше
Lorem ipsum… Наверное, не найдется пользователя Интернета, которому оказались бы не знакомы эти слова. Ведь так начинаются в макетах многие «тексты для примера» (именуемые в среде дизайнеров «рыбой»).
Lorem ipsum — классическая панграмма, условный, зачастую бессмысленный текст-заполнитель, вставляемый в макет страницы. Используется в качестве заполнителя по крайней мере с XVI века. Является искаженным отрывком из философского трактата Марка Туллия Цицерона «О пределах добра и зла», написанного в 45 году до н. э. на латинском языке.
Некоторое время назад считалось, что этот отрывок является оптимальным с точки зрения распределения текста в рамках области заданной ширины. С учетом пробелов, переносов и пр. Впрочем, многие дизайнеры считают так и по сей день. Поэтому ленятся использовать реальные тексты (или тексты, максимально приближенные к действительности) в своих макетах. И это зачастую приводит к тому, что на практике (когда дизайн уже сверстан и установлен на CMS) все выглядит иначе, чем представлял себе (и заказчику) дизайнер, используя однотипные и/или заезженные тексты для наполнения.
Отзывы никогда не бывают одинакового объема. Как будет выглядеть блок отзыва с меньшей или большей длиной?
А если название товара будет в две строки? А если в три? Хорошо, если верстальщик попадется думающий и сможет самостоятельно ответить на эти вопросы. А если нет?
Необходимо всегда предусматривать все возможные варианты поведения текста, ведь это напрямую связано с общим видом дизайна. А для этого нужны нормальные, «живые» тексты. Мне кажется, совершенно не сложно открыть любой новостной портал и брать реальный текстовый материал оттуда, а не потчевать заказчика однообразным Lorem ipsum.
10. Чукча не писатель, чукча – читатель
Мне как человеку образованному всегда очень неприятно видеть орфографические ошибки в дизайне. Это коробит, вызывает негативные эмоции, и (на мой взгляд) не добавляет плюсов в копилку дизайнера.
Ну, хорошо – допустим, в школе вы прогуливали уроки русского языка и литературы, но ведь проверку правописания в том же Word’е никто не отменял, неужели так сложно прогонять все тексты через умную программу?
Самые заезженные ошибки, которые давно перешли из разряда досадных «очепяток» в категорию эталонов безграмотности:
- Га
ллерея - Пре
йимущества - Ди
лллер - К
оампания - Буду
ющее - И другие
Казалось бы – такая мелочь, а осадочек, как говорится, остался.
Само собой, речь идет о русских и русскоговорящих дизайнерах, к представителям других национальностей – требования уже другие, исходя из специфики их родного языка.
Заключение
Как видите, промахи веб-дизайнеров в работе с текстом – не самое редкое явление. И необходимо регулярно проводить работу над ошибками, стараясь уделять оформлению текста гораздо больше внимания.
На ошибках учатся.
