+7(495)066-03-76
Предоставляемые услуги
  1. Сайты
  2. Порталы
  3. Интернет-магазины
  4. Мобильные приложения
  5. Лендинги
  6. Брендинг
  7. Нейминг
  8. Продвижение
  9. Дизайн сайта
  10. Личные кабинеты
  11. Аудит сайта
  12. Образовательные платформы
  13. Сайты на Тильде
  14. Комплексный интернет маркетинг
  15. Техническая поддержка
  16. Коммерческие фотосессии

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

UI UX дизайн
14.12.2017

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

Линейки 1

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

Линейки 2

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

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

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

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

Линейки 3

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

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

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

Линейки 4

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

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

Опубликовано: 2017-12-14

Оценить

Разработка сайтов и мобильных приложений любой сложности Оставить заявку