Спасибо за приятный отзыв.

Следуя каноничной верстке по сетке 8px, колоночная сетка тоже должна подчинятся принципам кратности 8px. Раньше я использовал сетку 960px: 8px — боковые отступы, 944px — контентная зона, 16px — расстояние между колонками. Я проверил дизайн на разных устройствах: планшетах, компьютерах, телефонах, широкоформатных мониторах. На всех устройствах кроме мобильников таких отступов между организмами мало — глазу сложно переходить от одного островка к другому. Я поставил отступы в 24px и все стало только хуже — теперь отступы огромны.

Я решил между организмами поставить отступы в 20px. Использовал сетку 960px: 10px — боковые отступы, 940px — контентная зона, 20px — межколоночный отступ. По вертикали отступы между карточками тоже установил в 20px. Читать информацию стало удобнее. Особенно владельцам планшетов, например в транспорте — там постоянная тряска. Высокий контраст в интерфейсах помогает отличать элементы друг от друга.

В будущем я решил не нарушать сетку 8px без необходимости. В конце концов 90% проектов прекрасно проектируются по сетке 8px и проблем не возникает. Но если я вижу что сетка ухудшает восприятие интерфейса пользователем, я введу один дополнительный отступ или что-нибудь нарушу, логически обосную нарушение и введу в правило.

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

    Алексей Белицкий

    Written by

    Занимаюсь дизайном, интерфейсами. Увлекаюсь веб-технологиями и всем, что упрощает современную жизнь

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight.
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox.
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month.