Внутреннее и внешнее: основные правила

Все дизайнеры много раз слышали про правило внешнего и внутреннего и правило близости, но многие допускают одни и те же ошибки из раза в раз.

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

Пример 1 (организация карточек):

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

Пример 2 (организация внутри блока):

Слева снова все не очень хорошо: иконки отдельно от текста. Нет аккуратных отступов, мало воздуха слева.

Пример 3 (организация полей ввода и кнопок):

Критичных замечаний к блоку слева, можно сказать нет, тк форма все равно считывается. Но вот выглядит ли она аккуратно? Однозначно – нет.

Пример 4: организация шрифтовых пар:

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

Пример 4: проектирование хедера

Очень часто вижу работы с верхним хедером. Дизайнер не помогает пользователю разобраться со структурой сайта, а только усложняет взаимодействие.

Пример 5: отступы между смысловыми блоками

Что плохо слева: рандомные значения вертикальных отступов, не соблюдено правило внешнего и внутреннего (кнопка в верхнем блоке выпала) Что хорошо справа: выверенная система вертикальных отступов между блоками ускоряет разработку и систематизирует дизайн.

Итог

Надеюсь, после разбора типичных ошибок на примерах, появилось осознание важности отступов. При проектировании сложных компонентов советую идти от малого к большому, составляя смысловые пары – это увеличит шансы создать чистый, легковоспринимаемый дизайн.