Skip to content

Выравнивание улучшит ваш дизайн

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

Модульные сетки помогут вам решить проблемы с выравниванием, но мы должны сосредоточиться на взаимодействии различных элементов. Хорошее выравнивание соединяет визуальный разрыв между каждым элементом в вашем дизайне, помогая создавать связи между элементами, которые у нас есть. Иначе у нас был бы дизайн, в котором блоки текста и изображений разбросаны повсюду.

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

Текст

Больше всего вариантов выравнивания есть для текста. Это можно сделать через свойства CSS. Так текст можно выравнивать слева, справа, по центру или по ширине.

Выравнивание по ширине - это всегда спорно: может произвести негативное влияние на читаемость содержания
Выравнивание по ширине — это всегда спорно: может произвести негативное влияние на читаемость содержания

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

Выровненная по центру форма контактов
Выровненная по центру форма контактов

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

.content {
    direction: rtl;
    text-align: right;
}

Изображения

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

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

Первый вариант достаточно легко осуществить. Без разрывания текста вы можете размещать изображения в полную ширину по центру в области текста. Это достаточно просто и хорошо выглядит как на лэптопах, так и на смартфонах (если дизайн адаптивный).

mixed-alignment

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

Таким образом, ваши фотографии могут быть размещены на ширину одного или нескольких модулей вашей сетки, а содержание «обтечет» ваши изображения. Это не нарушает чтение, а также добавит интерес к вашему дизайну: он будет выглядеть визуально свежее и более привлекательно.

Фоновые изображения

Как и в случае с текстом, выравнивание изображения фона происходит через CSS правила: фиксированное, абсолютное, к верху или низу, слева или справа. Это зависит от вашего дизайна и как фоновое изображение вписывается в него. Если в вашем дизайне присутствует паттерн, то подумайте о том, как он смотрится с элементами.

Кроме того, если у вас есть большое фоновое изображение (фотография), подумайте о том, как оно согласуется с вашим дизайном, как другие элементы и модули вписываются в дизайн. Это все вопросы о том, как ваши изображения работают с другими частями вашего дизайна и как вы можете сделать ваш дизайн более изысканным.

Группы элементов

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

Тем не менее, группы элементов не обязательно должны быть близки друг к другу. Например, группой элементов может быть хедер сайта (логотип и навигационное меню, например), а также футер (возможно, другой набор ссылок и копирайт). Это группы элементов, и вы можете применить к ним выравнивание в вашем дизайне. Хотя хедер и футер могут быть не видны одновременно на пространстве экрана, выравнивание сделает дизайн более сильным, визуально привлекательным и последовательным.

Задания

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

Источник: WebDesign Tuts+

Данная запись является частью серии "Школа дизайна для разработчиков".

Выбор модульной сетки

Введение в композицию