Стоит начать с того, что любые ограничения в дизайне полезны только тогда, когда они не мешают дизайнеру. Вообще, лучше сначала просто сделать хороший дизайн, а потом искать в нём закономерности и структуру. Но "Дизайн120" не накладывает на Вас серьёзных ограничений, он лишь помогает выбирать размеры и положение элементов.
Идея дизайна в том, чтобы разделить экран на равные квадратики и действовать уже в них.
В случае с самым популярным разрешением экрана - 1920x1080 - эти равные квадратики получились 120 на 120 пикселей. Поэтому и название именно такое)
Откуда взялось это число? Чистая математика. Соотношение сторон - 16x9.
Разрешение - 1920x1080. 1920 : 16 = 120. 1080 : 9 = 120.
Вообще, название меняется в зависимости от разрешения экрана.
То есть при разрешении 1280x720 один квадратик имеет размер 80x80.
Тогда название изменится на "Дизайн80". Но продолжим статью с вариантом "Дизайн120"!
Далее я разбил каждый квадратик на сетку, каждый сектор которой в 10 раз меньше всего квадратика, то есть 12 пикселей. Я составил 3 простых правила использования этой схемы:
1) Каждый элемент должен начинаться и заканчиваться отдельным квадратиком.
То есть в квадратике В4 может начаться только один элемент. Пример:
2) Размеры каждого элемента должны быть кратны десятой части квадратика.
То есть высота или ширина элемента может быть 12, 24, 36, 48, 60 и т.д. пикселей. Пример:
3) Отступы между элементами должны составлять не менее 60 пикселей.
Тут всё просто, поэтому даже примера не будет)
- Что дальше? Зачем это нужно? - спросил читатель.
- Если Вы не дизайнер - время потрачено напрасно, можете дальше не читать.
А если Вы дизайнер - теперь Вы не будете долго мучиться. Кнопка высотой в 24 пикселя - значит текст в ней высотой 12 пикселей. Какой отступ сделать от края экрана, чтобы даже при обрезке в формат 4:3 всё самое важное оставалось? 240 пикселей. Какой высоты делать хедер на сайте или в приложении? Можно 48, 60, 72, 84, хоть 120 пикселей.
Итог таков: как Вы видите, эта система не ограничивает дизайнера, лишь помогает ему быстрее принять решение в размещении элемента или его размере.
