Простая сетка

Я не сторонник сложных сеток, считаю, что им все-равно невозможно придерживаться. Лучше создать простую 6-полосную или 12-полосную сетку.

Я предпочитаю 6-полосную сетку, на рабочую область 1300 px

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

Горячие клавиши для включения и выключения линеек cmd+H

Сразу разрешим вопрос "Зачем мне сетка вообще?"

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

Египтяне ввели десятичную систему чисел. Для каждой степени 10 у них был предусмотрен свой иероглиф. Палка представляла единицу, кусок верёвки — 100, палец — 10000, а парень с поднятыми руками — миллион (это демонстрирует некоторую математическую изощренность, т.к. у них был символ, обозначающий не абстрактное понятие «много», а точно «миллион» — ни больше, ни меньше).

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

Другие варианты числовой системы были с основанием 12, сейчас мы видим отголоски тех времен например в циферблате часов, основание 12 не худший вариант.

Я вижу нечто общее в этих подходах. Развитие системы чисел с развитием модульных сеток в Web. Раньше сетки были немного хаотичные, но мы уже не те что прежде, у нас есть линейки! Мы неустанно стремимся к упрощениям и повторениям, это делает наш дизайн легче для восприятия. Сложных форм все меньше, нас захватили прямоугольники =)

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

На изображении показан дизайн до и после выравнивания по сетке.

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

Вспомним о том, что Google изменил свой лого всего на 2 px, потратил на это кучу денег на исследование аудитории, восприятие пользователей и замену логотипа. Все потому что суть в мелочах.

Покладистых вам сеток.