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

Посоветуйте, пожалуйста, пока не сошёл с ума.

Часто бывает, что какая-то из плашек на всю ширину окна браузера (шапка в данном случае), и, например, справа кнопка со своими внутренними отступами, а слева логотип или пункты меню, как в этом случае.

По той причине, что текст у кнопки смещён за счёт своих полей, а также потому что у контента ниже есть внутренний отступ, хочется сделать отступ и у меню слева. Но как только сделаешь его — сразу заметно, что у шапки по правому краю никакого отступа нет и она становится «перекошенной».

Отдельным вопросом идёт случай, когда пункты меню имеют свои внутренние отступы, которые явно видно только при наведении, например (последний пример — рамка при наведении). Тогда без отступа не обойтись, но, опять же, всё встает на места только при наведении на первый пункт, а я на скриншоте навёл на второй — опять шапка «перекошена».

Извините за запутанный текст и спасибо.


Вторая часть. Ещё несколько мыслей


Илья Бирман уже ответил на вопрос, но я хочу добавить свои пять копеек.

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

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

Например, до обновления сайта бюро страница совета выглядела так:



Вопроса, как выравнивать плашки относительно текста, толком не стоит. Логотип на плашке прямо таки просит выровняться с ним. Более того, внутренние отступы у логотипа и плашек одинаковы.

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



Наверняка мы тут что-то поменяем, когда обновим советы.

Торчащая за текст контрастная плашка, как правило, смотрится неуместно. Например, меню на странице Коворкафе живёт на чёрной плашке, которая выровнена по тексту страницы. Текст меню слегка смещён вправо:



А бывает, что хорошо поставить на плашки абсолютно всё. На главной странице Системы Юрист собраны интерактивные независимые виджеты. Каждому виджету своя плашка, аккуратно:



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

Иногда от мучительного выбора можно уйти, растянув плашку от края до края. На странице учебника «Управление проектами, людьми и собой» вступительный рассказ о книге живёт на цветной плашке до краёв окна. Содержание плашки выровнено и с меню, и с остальным текстом на странице:



Рекомендую не злоупотреблять этим приёмом, не то получите матрас. А то и вот такое:

Артём Горбунов зашёл почитать статью на Гардиане

Ну и наконец, бывает, что небольшими торчащими штуками можно пренебречь. На страницах проектов бюро плашка выбранного пункта меню слегка торчит налево, но никто не умер:



Приглашаю уважаемых советчиков поделиться своими примерами.

P. S. Это был совет по средам о вёрстке и типографике в вебе. Хотите знать всё об интерлиньяжах, полях, отступах, кеглях, выравниваниях и модульных сетках? Присылайте вопросы.

Типографика и вёрстка — дисциплина Школы дизайнеров. Набор открыт до 13 августа или пока есть свободные места.
 

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

Комментарии

Максим Грязнов
1 ноября 2017

Если варианты равнозначны по смыслу, то делаю так: большие поля — плашка шире основного блока. Узкие поля — плашка равна основному блоку, а текст внутри ýже остального.

С другой стороны, яркую плашку хочется сделать равной блоку, чтобы не торчала.

Александр Мальцев
2 ноября 2017

Я выношу плашку, когда плашка визуально слабее текста. Например, как на этой картинке. Тогда левый край текста не нарушается. Другое дело с тёмными плашками. Их я вписываю в ширину текста. А сам текст делаю контрастным.

Никита Козин
8 ноября 2017

Александр привёл правильный пример. Если сводить до правила, то всё дело в контрасте.

Если плашка не контрастна с окружением, то делаем вылет. Потому что основным содержанием будет контент внутри плашки, он же будет дружить с окружающими элементами.

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


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

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

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

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

В какой программе вы делаете макеты? 7 Как оформить портфолио маркетологу? 1 У вас в учебнике по вёрстке написано, что нельзя разрывать текст статьи иллюстрацией




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

Почему вы используете jQuery для хождения по дереву и управления событиями? 2 2 3 Не преступление использовать Бутстрап? 3