x
 
Роман Хлебников
16 ноября 2015
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Артём!

Вы писали, что иллюстрация, которая находится в левой «подмышке», отделяет заголовок от текста. Так почему же на сайтах «Системы Главбух», «Системы Юрист» и «Системы Кадры» на главной странице именно левая «подмышка»?


Роман!

Краткий и честный ответ — так исторически сложилось. В 2011 году мы начали работать с Актионом и запустили первую версию Системы Кадры:


Здесь впервые появилась конструкция главной рекомендации на жёлтой плашке с фотографией эксперта.

На основе этого интерфейса через год мы спроектировали «Систему Главбух» и «Систему Юрист». Конструкция не изменилась, но фотография эксперта стала крупнее, а вёрстка чище. Заголовок стал занимать меньше строк, а из текста рекомендации исчезли внутренние ссылки.


Но и этот дизайн обновился и сейчас выглядит так:


Вы правы, эта конструкция вёрстки называется «левая подмышка» — иллюстрация находится под заголовком сбоку от текста. Я критикую её в совете о вёрстке текста с иллюстрациями и в третьем разделе книги «Типографика и вёрстка». Проблема в том, что заголовок оказывается оторван от начала основного текста, что затрудняет чтение.

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

Рекомендация на главной странице — самый важный и узнаваемый элемент систем, который не должен меняться слишком резко.

Модуль рекомендации выделяется на странице. Он единственный с подобным дизайном и не входит в конфликт с другими модулями. Если бы несколько соседних модулей были свёрстаны так же, то в плотной вёрстке возникли бы двусмысленности — в каком направлении читать страницу.

Главная функция крупной надписи в рекомендации — показать пример запроса. Пример запроса относится к полю поиска и должен стоять рядом.

Фотографии экспертов в системах приведены к однообразному положению — так, чтобы смотреть вправо на текст. Чтобы поменять вёрстку, пришлось бы отыскать или переснять новые фотографии — ведь зеркально отражать портреты недопустимо.

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

Компромиссы в вёрстке случаются. Главное всегда осознавать, что делаешь, и не идти на необязательные компромиссы.


Поделиться
Отправить

Комментарии

Иван Тихомиров
16 ноября 2015

Артём!

Разве фотография эксперта должна быть такой большой?
И разве «Отвечает Иван Шкловец, заместитель руководителя Федеральной службы по труду и занятости» должно сливаться с основным текстом?


20 ноября 2015

Иван!

Мне нравится рекомендация Тима Харровера: лицо на портрете в газете для различимости должно быть не меньше 25-центовой монеты — это 2,5 см.

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

В целом картинки-марочки в экранном дизайне — это тяжёлое наследие веба 90-х и 2000-х. Вы не встретите подобного в хорошей полиграфии. И мы с этим активно боремся.

Никита Скоробулатов
13 октября 2016

А что, если выделить экспертную статью в отдельный блок и в нём избавиться от подмышки?


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Расскажите об иллюстрациях как базовом элементе 1 13 2 Как сделать нагляднее таблицу перфорированных лотков? Часть вторая 5




Недавно всплыло

Без стоп-слов текст мне кажется сухим, чёрствым, грубым и резким 33 2 Несмотря на то, что между нами была договорённость о работе по ФФФ, клиент был в бешенстве 5 Это какие‑то другие пиксели? Как они соотносятся? 2