Игорь Штанг (nobelfaik) wrote,
Игорь Штанг
nobelfaik

Бутерброды текста

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

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







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




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

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




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




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




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




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

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

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

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


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







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


См. также: Переверстка №27. Листовка маникюрного салона

Серия «Неудачные приемы верстки»
Горки текста
Ноги текста
Колонки разной ширины
Бутерброды текста
Картинка без модуля
Слишком ровный правый край
Tags: верстка, заголовок, знаю как, композиция, конструкция, неудачные приемы верстки, статья, типографика
Subscribe

Posts from This Journal “статья” Tag

  • Слишком ровный правый край

    Продолжаю серию статей про неудачные приемы верстки. Когда дизайнеры впервые узнают о принципе модульности и о том, что прямоугольники нужно…

  • Стыковка линеек и плашек

    Линейки и плашки — сильный инструмент верстки, а с любым сильным инструментом нужно уметь обращаться. Попытки организовать макет с помощью…

  • Связь выключки и полей

    Текст, выключенный по левому краю, лучше сочетается с узкими полями, ровный край как бы примагничивается к границе формата. Слишком широкие поля…

  • Post a new comment

    Error

    default userpic

    Your IP address will be recorded 

    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.
  • 5 comments