?

Log in

No account? Create an account

nobelfaik


Блог Игоря Штанга

light gray is the new white, dark gray is the new black


Previous Entry Поделиться Next Entry
Бутерброды текста
nobelfaik
Продолжаю рассказывать о неудачных приемах верстки. В прошлых выпусках: горки текста, ноги текста и колонки разной ширины. Сегодня про бутерброды.

Бутерброд получается, когда друг под другом встают текстовые блоки с разным оформлением — три, четыре или больше. Обычно это выглядит тяжеловесно и неряшливо. Примеры с курса:







Много маленьких бутербродиков:




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

Всплывающее окно на сайте «Уральских авиалиний». Встретились два заголовка, получилось 3 текстовых слоя + кнопки:




Шапка профиля на Пинтересте. Иконки + 4 текстовых слоя + табы. Еще эти точечки:




Анонс статьи на Медиуме. 5 текстовых слоев:




Шапка профиля в Твиттере. Количество слоев и приемов оформления зашкаливает:




Чтобы избавиться от бутерброда, нужно его сокращать и упрощать. Например:

  1. Убрать один из блоков совсем или переместить в другое место.

  2. Убрать лишнее оформление, свести к минимуму количество выделительных средств.

  3. Объединить несколько блоков в один.


Конечно, бутерброды — это не всегда плохо, но подобрать правильное сочетание шрифтов, цветов, кеглей и отступов — непростая задача. Прекрасные бутерброды были в журнале «Афиша-Еда»:







Если так не получается, будьте проще)

Записи из этого журнала по тегу «статья»

  • Швейцарские плакаты по-русски

    Недавно я опубликовал заметку под названием « Кириллица и латиница». Главная мысль такая: Несовершенство кириллического алфавита не…

  • Как я делал афишу «Большой переверстки»

    «Большая переверстка» — это мастер-класс, который я придумал два года назад и провел в нескольких городах. Афиша делалась долго, но…

  • Грациозная деградация текста

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



  • 1
А почему одни выглядят неряшливо пёстро, а другие, хотя вроде бы сделаны абсолютно так же, смотрятся нормально?

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

Не вижу ничего плохого с вёрсткой Медиума. Как бы вы её переверстали в условиях, когда нужно оставить весь текст?

очень не хватает переверстки данных примеров. Пусть даже теоретических...

  • 1