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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

P. S. Это был совет по средам о вёрстке и типографике в вебе. Хотите знать всё об интерлиньяжах, полях, отступах, кеглях, выравниваниях и модульных сетках? Присылайте вопросы.
Типографика и вёрстка — дисциплина Школы дизайнеров. Набор закрыт. Оставьте почту, и мы напишем вам, когда откроется следующий набор.
 

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

Комментарии

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

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

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

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

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

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

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

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

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


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

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

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

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

1 Как оформить портфолио маркетологу? 1 2 4