Картинка без модуля
Продолжаю серию статей про неудачные приемы верстки. Сегодня о том, как не надо ставить иллюстрации. (Прошлые выпуски собрал под одним тегом.)
Иллюстрациями часто пытаются спасти плохую верстку, например, закрыть дыру или сгладить форму рваного края. Иногда это может сработать, но в целом стратегия неудачная. Кривой текст останется кривым, независимо от того, подопрете вы его иллюстрацией или нет. Картинке в таком положении тоже нелегко: она выглядит не как полноценный элемент, а как «закрывашка» или декор.
Я собрал примеры и сгруппировал их по тем местам, в которые чаще всего пытаются пристроить изображение.
В угол
Бывает, что текст не дотягивается до угла, и оставшееся место занимают иллюстрацией. Так можно делать, но только если пространства достаточно и картинка не мешает соседним элементам.
Ниже неудачные примеры:
Велосипедист врезается в линейку. Динамичной картинке нужно намного больше воздуха.
Вместо того, чтобы занимать маленький уголок маленькой иллюстрацией, лучше слегка удлинить заголовок. Или вообще оставить его как есть и успокоиться.
К пустой стороне
Стороны, как и углы, тоже нередко остаются пустыми. Обычно это случается с нижней или правой сторонами, потому что там естественным образом собирается воздух. Принцип тот же, что и с углами: не пытайтесь запихать иллюстрацию, если не выделили для нее достаточно места.
Ложка сильно уходит под обрез, но всё равно мешается тексту. Простое решение: поджать текст наверх.
Кому-то покажется, что дерево изящно закрыло дыру с правой стороны, но на самом деле никакого изящества тут нет. Подгонять иллюстрацию под форму рваного края - плохая затея: они почти никогда не стыкуются красиво.
Неожиданно большое правое поле забито картинками. Петрушка уместилась, а вот тарелка теснит заголовок.
В отступ между элементами
Речь идет именно об отступе, а не о самостоятельном модуле между блоками. Отступ как правило невелик и поэтому плохо приспособлен для размещения картинки. Аккуратно вписаться в отступ - целое искусство, обычно получается не очень.
Между колонками недостаточно пространства для такой массивной графики.
Скелеты и бокал чувствуют себя комфортно, а вот колонки из-за них меняют ширину и шатаются во все стороны.
Лист не вписался в дыру между этажами.
Под мышку заголовка
Не знаю, как такое вообще может прийти в голову, однако новичкам нравится. Слишком короткая строка в заголовке - проблема, но иллюстрацией она не лечится. Нужно редактировать или по-другому разбивать на строки.
Чайник вроде бы вписался, но, по-моему, такая верстка всё равно выглядит странной.
Печенька закатилась под диван.
![]()
На фон
И наконец, любимый прием дизайнеров всех времен и народов - иллюстрация за текстом. Проблема даже не в том, что она за текстом, а в том, что ради текста ее делают бледной. Я советую так: если вы обнаружили на своем макете бледную фоновую картинку, либо уберите ее совсем, либо выделите ей отдельный модуль и сделайте непрозрачной.
Зачем ставить на фон и бледнить, когда есть место рядом?
Большое грязное пятно.
(@_@)
Все эти примеры объединяет одно: у иллюстрации нет своего, заранее определенного блока. Ее ставят на макет в последний момент, когда площадь уже поделена между другими элементами.
Тем не менее, эти способы нельзя назвать однозначно плохими. Точнее будет сказать, что они сложные и неуниверсальные. Сложные, потому что требуют тонкой подгонки, но даже она не гарантирует хороший результат. Неуниверсальные, потому что не подходят для шаблонных макетов. Шаблонам противопоказаны кастомные решения. Намного практичнее предусмотреть для картинки отдельный блок, чем пытаться уместить ее в случайно образовавшуюся дыру.
См. также: Переверстка №5. Меню пивного бара
Серия «Неудачные приемы верстки»:
Горки текста
Ноги текста
Колонки разной ширины
Бутерброды текста
Картинка без модуля
Слишком ровный правый край
Иллюстрациями часто пытаются спасти плохую верстку, например, закрыть дыру или сгладить форму рваного края. Иногда это может сработать, но в целом стратегия неудачная. Кривой текст останется кривым, независимо от того, подопрете вы его иллюстрацией или нет. Картинке в таком положении тоже нелегко: она выглядит не как полноценный элемент, а как «закрывашка» или декор.
Я собрал примеры и сгруппировал их по тем местам, в которые чаще всего пытаются пристроить изображение.
В угол
Бывает, что текст не дотягивается до угла, и оставшееся место занимают иллюстрацией. Так можно делать, но только если пространства достаточно и картинка не мешает соседним элементам.
Ниже неудачные примеры:
Велосипедист врезается в линейку. Динамичной картинке нужно намного больше воздуха.
Вместо того, чтобы занимать маленький уголок маленькой иллюстрацией, лучше слегка удлинить заголовок. Или вообще оставить его как есть и успокоиться.
К пустой стороне
Стороны, как и углы, тоже нередко остаются пустыми. Обычно это случается с нижней или правой сторонами, потому что там естественным образом собирается воздух. Принцип тот же, что и с углами: не пытайтесь запихать иллюстрацию, если не выделили для нее достаточно места.
Ложка сильно уходит под обрез, но всё равно мешается тексту. Простое решение: поджать текст наверх.
Кому-то покажется, что дерево изящно закрыло дыру с правой стороны, но на самом деле никакого изящества тут нет. Подгонять иллюстрацию под форму рваного края - плохая затея: они почти никогда не стыкуются красиво.
Неожиданно большое правое поле забито картинками. Петрушка уместилась, а вот тарелка теснит заголовок.
В отступ между элементами
Речь идет именно об отступе, а не о самостоятельном модуле между блоками. Отступ как правило невелик и поэтому плохо приспособлен для размещения картинки. Аккуратно вписаться в отступ - целое искусство, обычно получается не очень.
Между колонками недостаточно пространства для такой массивной графики.
Скелеты и бокал чувствуют себя комфортно, а вот колонки из-за них меняют ширину и шатаются во все стороны.
Лист не вписался в дыру между этажами.
Под мышку заголовка
Не знаю, как такое вообще может прийти в голову, однако новичкам нравится. Слишком короткая строка в заголовке - проблема, но иллюстрацией она не лечится. Нужно редактировать или по-другому разбивать на строки.
Чайник вроде бы вписался, но, по-моему, такая верстка всё равно выглядит странной.
Печенька закатилась под диван.
На фон
И наконец, любимый прием дизайнеров всех времен и народов - иллюстрация за текстом. Проблема даже не в том, что она за текстом, а в том, что ради текста ее делают бледной. Я советую так: если вы обнаружили на своем макете бледную фоновую картинку, либо уберите ее совсем, либо выделите ей отдельный модуль и сделайте непрозрачной.
Зачем ставить на фон и бледнить, когда есть место рядом?
Большое грязное пятно.
(@_@)
Все эти примеры объединяет одно: у иллюстрации нет своего, заранее определенного блока. Ее ставят на макет в последний момент, когда площадь уже поделена между другими элементами.
Тем не менее, эти способы нельзя назвать однозначно плохими. Точнее будет сказать, что они сложные и неуниверсальные. Сложные, потому что требуют тонкой подгонки, но даже она не гарантирует хороший результат. Неуниверсальные, потому что не подходят для шаблонных макетов. Шаблонам противопоказаны кастомные решения. Намного практичнее предусмотреть для картинки отдельный блок, чем пытаться уместить ее в случайно образовавшуюся дыру.
См. также: Переверстка №5. Меню пивного бара
Серия «Неудачные приемы верстки»:
Горки текста
Ноги текста
Колонки разной ширины
Бутерброды текста
Картинка без модуля
Слишком ровный правый край