ДизайнТипографика. Контрасты.

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

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

А для примера мы возьмём стандартное превью ноды. Изначально оно будет иметь вид, ну положим вот такой:
11_1.jpg
Согласитесь весь текст слился воедино, нужно что-то делать.

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

  • Размер.
  • С помощью этого сво-ва можно сделать акценты на более важную информацию, сделав её больше остальных.
    11_2.jpg
    Или же уменьшить приоритет дополнительной (например поясняющих комментариев или имени автора).
    11_3.jpg

  • Цвет.
  • Как бы банально это не звучало, но цвет действительно помогает отделить нужный кусочек текста.

    11_4.jpg

  • Шрифт.
  • Когда пользователь настраивается на восприятие одного шрифта, он автоматически меньше внимания уделяет остальным. Этим можно воспользоваться и сделать все заголовки нод другим шрифтом, нежели основной контент.

    11_5.jpg

  • Регистр.
  • В заголовках (хотя я уже упомянал, что я не ярый поклонник подобного) можно выставить у всех букв верхний регистр, что явно выделит его из общей массы. Так же можно использовать курсив, но заклинаю вас! Никогда не используйте подчёркивание, для выделение важного, потому что пользователь будет злиться, когда обнаружит отсутствие кликабельности. По простому подчёркнутый текст путается со ссылками, а это не есть хорошо.
    11_6.jpg

  • Начертание.
  • Всё просто: раскорми текст и он сразу станет бросаться в глаза.
    11_7.jpg

  • Больше пространства.
  • Чем больше пространства между отдельными блоками, тем легче пользователю сосредоточить внимание на одном из них. Но не переборщите, потому как если расстояние будет через чур большим, то блоки будут восприниматься отдельными, а не цельной структурой.

    11_8.jpg
    Вот он конечный вариант, довольно неплохо.

На этом и сказочке конец, все просто, но часто забывается, поэтому теперь есть куда подсмотреть.

Всем спасибо, все свободны.

Комментарии

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

спасибо за статейку, встречал сайты с такими проблемами, это просто ужс, не читабельно ваще...
а что по "Начертание." что это такое я ток увидел что текст чуть жирнее стал и насыщеннее

25.12.2011 03:07
Аватар пользователя Smouk
Smouk написал:

Это оно и есть начертание шрифта Bold или Italic )

25.12.2011 12:43
Аватар пользователя Michael
Michael написал:

Болд (или , , ) делает текст жирным, но италикс () делает его курсивным, они не одинаковы ;)

25.11.2014 17:41

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