Выравнивание нетекстовых элементов по базовой сетке

Я начинаю использовать базовую сетку для веб-дизайна.

Должны ли все элементы выравниваться по базовой линии или только шрифт, и должны ли они быть того же размера, что и масштаб типографики или базовая сетка?

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

Привет, Мэтт, добро пожаловать в GDSE и спасибо за вопрос. Если вы хотите узнать больше о сайте, обратитесь в справочный центр или свяжитесь с одним из нас в чате графического дизайна , как только ваша репутация станет достаточной (20). Продолжайте вносить свой вклад и наслаждайтесь сайтом!

Ответы (1)

Несколько приемов и руководств, которые мне помогли, далеко не полные:

  • Также создайте направляющие на половине высоты строки. Очень сложно выровнять все по сетке с одной высотой, особенно если вы используете разные размеры шрифта. Таким образом, вы можете сделать границы или промежутки половинными или сделать типографику с меньшим шагом высоты строки.
  • Не пытайтесь выровнять вставленные пользователем изображения (как в CMS) по сетке со всех сторон. Это кошмар — пытаться изменять размеры изображений во всех направлениях без того, чтобы ваш пользователь в конечном итоге боролся с системой и не любил ее за это. Выровняйте изображения по сетке верхним и левым или правым краями, дайте другой стороне и низу «упасть свободно».
  • Выровняйте как можно больше элементов по сетке, и пусть размеры ваших элементов будут определяться ею.
  • Игнорируйте сетку, если результат выглядит не очень хорошо. Сетка — это средство, а не цель. Если инструмент мешает хорошему дизайну, игнорируйте его. Не позволяйте инструменту ограничивать ваш дизайн.
  • Имейте в виду, что размер вашей сетки может измениться, если изменится размер окна просмотра, то есть если изменится размер экрана. Я говорю «может быть», потому что я видел веб-дизайны, которые сохраняют один и тот же (вертикальный) ритм на всех размерах экрана и при этом остаются великолепными.
Спасибо, Винсент, это помогает. Мне нравится наконечник в половину высоты строки, я собираюсь пойти и попробовать его сейчас.