->
Листай вниз
Зачем нам сетка?
Во-первых сетка помогает организовать пространство макета. Чтобы все стояло ровно, аккуратно и логично.
(01)
Во-вторых сетка помогает придать проекту целостности. Например, если ты делаешь многостраничный сайт, то при наличии сетки не придется выдумывать 1000+ разных приемов чтобы расположить новые элементы. У тебя уже будет готовое правило — сетка.
(02)
В-третьих, наличие сетки позволяет работать над проектом в команде. Если строить проект не по сетке, а как твоей душе угодно, то ни один твой коллега не поймет как работает пространство в макете и начнет выдумывать свои правила. В конечном итоге проект окончательно превратится в кашу
(03)
Как создать сетку?
Выбери колличество колонок
Чем больше колонок, там более «гибкими» смогут быть твои последующие дизайн решения.
Они являются «ограничителями», за которые основной контент макета не будет выходить. В целом, макет может жить и без отступов, но такое решение должно быть концептуально обоснованно (например, если хочется достичь эффекта тесноты)
Задай отступы от края макета
Задай межколонникик
Это отступы между колонками, куда контент заходить не должен. Они же и формируют границу, от которой происходит выравнивание. Чем шире межколонник, тем свободнее макет.
(01)
Это ни видимая линия, которая управляет взглядом зрителя. По ней выравнивается весь основной контент, что позволяет пользователю быстро «просканировать» макет глазами и понять все самое важное, не погружаясь в детали. Классический пример базовой линии — это выравнивание от левого края. В нашем примере я сместил ее на две колонки вправо, чтобы тебе было понятнее о чем речь.
Выбери базовую линию
(02)
(03)
(04)
помни,
не бойся
ломать правила
Если это того
теперь вперед к новым победам! жми
стоит
сетка — не клетка
Made on
Tilda