Рамки и плашки в дизайне

Рамки и плашки — эффективный инструмент верстки. С их помощью можно упорядочивать, выделять и разделять контент, улучшая визуальное восприятие.

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

Автор Karina Tarhoni, dribble.com

Как стыковать рамки друг с другом

При соприкосновении двух рамок (например, несколько рамок рядом) их стоит объединить в одну, с разделяющей линией внутри. Так мы избавимся от ненужных элементов.

Разделяющие линии в интернет-магазине Naumi.ru — хороший пример, когда можно обойтись вовсе без рамок

Как стыковать рамки + плашки

Когда встречаются рамка и плашка, будет лучше объединить их, убрав линию в месте соприкосновения. Рамки можно заменить на линии, если это не противоречит концепции, так  дизайн будет более аккуратным. Также не нужно добавлять линию после последнего элемента, потому что под ней ничего нет.

Грамотный hover в docs.google.com. При наведении появляется плашка и исчезают линии. Нет ненужной линии после последнего элемента

На сайте Lalalab.ru после последнего элемнта нет линии, вместо этого увеличенный отступ перед изображением

Как стыковать плашки друг с другом

Есть разные варианты расположения плашек относительно друг друга:

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

2. Плашки трансформируются в линейку. Этот вариант самый чистый. Подходит в том случае, когда плашки разделяют блоки, но не выделяют их.





3. Плашки разных цветов и фактур прилегают вплотную друг к другу. Этот вариант удается использовать нечасто, но иногда он отлично подходит.

Палитра цветов на coolors.co

Как стыковать блоки, если в них есть рамки и плашки

Например, когда один блок — сетка из рамок, эстетично состыковать его со следующим блоком может быть не так просто. Чтобы избежать некрасивого стыка, можно использовать прослойку — еще один блок, максимально просто оформленный.

Прослойка между двумя блоками с линиями и плашками на сайте школы искусств tuladshi-6.ru. В нашем случае в блоке-прослойке нет сильной необходимости, но с ним в верстке появляется больше «воздуха»

Выводы:

1. При стыковке рамок друг с другом лучше их объединять.

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

3. Есть 3 способа состыковать плашки друг с другом: располагать плашки близко друг к другу, чтобы не было эффекта зебры; трансформировать плашки в линейки и придвигать вплотную друг к другу плашки разных цветов.

4. Блок-прослойка эстетично состыкует ваши блоки с линиями и плашками.