Слава
13 мая 2013

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



Чтобы хорошо сверстать, в самом начале лучше забыть о направляющих. Прямо взять и убрать:

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

Заодно подтянем вертикальные расстояния между абзацами, чтобы они не побеждали расстояния между колонками.

Никто нам не запретит и сделать наоборот: выровнять высоты блоков, а не ширину колонок. Это, скорее, бумажный приём, чем экранный, но вполне допустимый в предсказуемых блоках, как наше меню:

Заодно уделим внимание осмысленности в переносах слов.

Если меню состоит только из отдельных слов, их естественнее объединить в «строку Воронежского» с равными пробелами:

Я советую использовать гайды как чертёжную линейку, чтобы точно построить, что уже придумано. Исходник макета с миллионом вертикальных и горизонтальных направляющих — верный признак любителя.

P. S.

Закрыт набор в Школу стажёров. Опоздавшим: оставьте нам почту, и мы напишем вам, пока есть свободные места. Занятия с 30 января.

 

Поделиться

Комментарии

Кирилл Горбань
13 мая 2013

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

Вадим Паясу
13 мая 2013

Фишка в том, что надо не делать равное расстояние между линиями выключки столбиков, а в том, чтобы создать иллюзию равного расстояния. Знание типографики открывает клёвые вещи — например что меню тоже можно кернить.

Есть два способа:
1. Сделать пустое пространство между столбиками визуально одинаковым. На глазок. Это имеет смысл в жёстком дизайне — в постерах, на афишах, на картинках.

2. Сделать расстояние между столбиками численно одинаковым. Имеет смысл в веб-дизайне (так не уломаешься объяснять верстальщику, что тебе от него надо). Только здесь надо заранее свести столбики к прямоугольнику (чтобы не было слишком длинных строк рядом со слишком короткими).

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

Виталий Кузнецов
31 мая 2013

Виды горизонтальных панелей навигации: http://habrahabr.ru/post/180473/


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

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

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

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

8 1 3 2




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

Как работать со слабомотивированными кадрами. Как мотивировать 1 Меня бесит, что как клиент я должна переживать больше, а менеджер забивает 1 Собеседница психует и кидает трубку. Причём до этого дама была вполне адекватной, и мы нормально работали 1 Уместно ли травить леску перед выступлением? 1



© 2007—2017

Запрещённые слова
Пишите: mail@artgorbunov.ru