Слава
13 мая 2013

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



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

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

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

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

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

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

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

P. S.

Дата следующего набора в Школу стажёров пока неизвестна.

 
Мы напишем вам, когда будет открыт набор. Без спама.

Поделиться

Комментарии

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

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

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

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

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

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

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

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

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


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

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

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

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

8 1 3 2




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

Меня бесит, что как клиент я должна переживать больше, а менеджер забивает 1 Я бы покрасил стены новой рабочей студии белой краской. А коллега хочет клеить обои 3 Как флексить. Отступить от идеала 2 Расскажите об обратной связи в интерфейсе 1