Зачем нужна сетка. База знаний для веб-дизайнера
Выдано в печать 2014-10-11
Мы уже поговорили о том, как придумать сайт и каким содержанием его наполнить. Как реализовать уже придуманное таким образом, чтобы получилось аккуратно и стильно?
Здесь хорошим подспорьем будет сетка. Сетка – это как миллиметровка для чертежа, как прописи для школьника, как клеточки в школьной тетради. Смысл её абсолютно такой же: задать какую-то базу, под которую подгонять все блоки с графикой и текстом, чтобы всё было ровно и без разнобоя.
Буду говорить о том типе сеток, которыми пользуюсь я. Это сетки чисто вертикальные. Они помогают размещать весь контент в определенное количество колонок-столбцов. При скролле сайта, сделанного по такой сетке, будет не какая-то каша и мусор перед глазами, а аккуратно расставленные блоки информации.
Мне не нравятся сетки, в которых есть не только вертикальные, но и горизонтальные направляющие, потому что они излишне ограничивают свободу. Всё, что касается выравнивания блоков по вертикали, я делаю «на глаз» -- двигаю блоки вверх-вниз, отталкиваясь от ощущения, насколько хорошо смотрится результат. Умещать контент в какое-то определённое количество пикселей по вертикали сложно: всё равно в разных браузерах отображение будет различное и сетка «поедет».
Поэтому я делаю колонки, в колонках добавляю небольшие отступы, которые создают поля безопасности, чтобы содержание соседних колонок не прилипало друг к другу.
Выравнивание текста и графики по этим колонкам и единые отступы создают ту самую одинаковость, тот самый единый принцип оформления, который делает сайт стильным. Почему это так, я расскажу позже в главе про стиль. Это важная составляющая, без которой результата достичь будет очень трудно.
Да, можно делать дизайн сайта без сетки – но тогда сложно выдерживать все пропорции так, чтобы страничка смотрелась гармонично.
Вертикальная сетка, с одной стороны, держит тебя в рамках, чтобы всё было упорядочено, но с другой стороны – не ограничивает слишком сильно, и задача «попадания» в сетку не превалирует над задачей сделать хороший дизайн.
Ещё про сетки в дизайне:
Зачем нужна сетка
Выход за границы
колонок
Правило плотности
Сетка и настроение
Адаптивная сетка
под Bootstrap
Формула для сетки
Метод: если по сетке
не получается
