ДизайнТипографика. Полезно знать.

Всем привет. Вот наконец добрался до интеренета и решил всё-таки написать вам статью. (Давно же их не было). А тема сегодняшнего обсуждения - "Типографика". Очень много дизайнеров уделяют этому пункту мало времени, а ведь именно типографика составляет 95% всего дизайна. Почему такие цифры?

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

Итак, что же полезно знать?

  • Для начала, что размер шрифта должен быть пропорционален остальному контенту, то есть не быть слишком большим, но и не слишком маленьким. Помните, что чем текст заметнее, тем больше внимания он будет к себе привлекать (спасибо кэп). Хоть это и очевидно, многие расставляют приоритеты не совсем верно.
    razmer_shrifta.jpg
    Вот такая путаница в приоритетах и приводит к плохой посещаемости

  • Межстрочное расстояние лучше увеличивать приблизительно до 140% от стандартного. Все потому, что при чтении зрение захватывает не одну строчку, а несколько, и чтобы не возникало путаницы, просто необходимо отделять их. Таким образом текст читается быстрее и лучше.
    mejstrochnii_interval.jpg
    Слева месиво, а справа читабельный текст.

  • Никогда, никогда... НИКОГДА не используйте заглавные буквы для написания больших текстов. Вы не только выставите себя "блондинкой", но и убьёте у пользователя всякое желание читать ваш текст. Подобное написание приемлемо в заголовках (но я не ярый фанат подобной практики), а так же в логотипостроении. Если вы всё же отважитесь использовать заглавные буквы, то обязательно увеличьте межбуквенный интервал. В противном случае всё слипнется и будет напоминать салат "ошибка сапёра".
    upper.jpg
    Дочитаете левую часть и вы мужик.

  • Текстовые блоки не должны быть слишком узкими или широкими. Этому опять же мы найдём объяснение в изучении того, как мы читаем. Во время этого процесса мы не скользим по строке, а как бы "прыгаем". То есть фиксируем зрение на определённых участках, чтобы увидеть близлежащие слова. Чем больше таких прыжков мы совершим, тем больше устанет наше зрение. Не заставляйте мучиться ваших посетителей, прыгая по коротким строчкам. Но и не раздвигайте текстовый блок на всю страницу. Эстетическая составляющая тоже должна присутствовать.
    shirina.jpg
    Понравилось читать левую часть? А правую? То-то же!

  • Гармоничный цветовой контраст. Это значит, что он не должен быть слишком явным, как например #000000 и #ffffff. Такое сочетание порвёт ваше зрение и заставит сильно напрягаться. Лучше разбавить цвета и привнести в них чуть чуть друг от друга.
    contrast.jpg
    Ничего не видно слева, а справа я прочитал

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

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

На этом всё, всем спасибо, все свободны.

Комментарии

Аватар пользователя Роман
Роман написал:

Спасибо! Очень полезно

13.12.2011 15:38
Аватар пользователя Smouk
Smouk написал:

Всегда пожалуйста! )

13.12.2011 15:39
Аватар пользователя Niklan
Niklan написал:

Когда статьи по Views появятся? Хотябы как оформлять свои exposed формс.
А за статью спасибо. Тоже достаточно полезная.

13.12.2011 21:21
Аватар пользователя Smouk
Smouk написал:

Как оформлять нет 100% рецепта, но пару советов дать могу) Вот только разберусь с типографикой )

13.12.2011 22:21
Аватар пользователя Niklan
Niklan написал:

Я имею ввиду оформление не внешне (фишки, плюшки), а их вывод как нужно, и чтобы они еще и рабочие были :о
Т.е. есть множественный список, например. Если указывать что можно выбирать несколько, то он делает list-box где можно контролом несколько вариантов выбрать. А например, как сделать их чекбоксами. Я про такое оформление.

14.12.2011 09:37
Аватар пользователя Smouk
Smouk написал:

Я это под советами и имел ввиду )

14.12.2011 13:17
Аватар пользователя Inglar
Inglar написал:

супер, спасиб за типографику, по поводу как сделать чекбоксами, есть мод "Better Exposed Filters"

16.12.2011 00:01
Аватар пользователя Niklan
Niklan написал:

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

16.12.2011 12:30

Комментировать