Когда использовать сетку в интерфейсах
Эта статья — часть внутренних лекций студии.
Изначально вопрос звучал так:
Плюсы и минусы построения интерфейса по сетке.
Есть одно старое правило: сначала сделать красиво, а потом уже сделать из этого правило. Применяется оно вообще ко всему, где что-то создается: в архитектуре, в автомобильной промышленности, и, конечно, в IT индустрии.
Дом не начинается с кирпича, он начинается с эскиза. Потом эскиз формализуют, добавляют детали, применят подходящие правила, которые помогут придуманную картинку воплотить в жизнь.
В автомобильной промышленности тоже все начинается с эскиза. Только концепт не заканчивается эскизом — он становится полноценным автомобилем. Когда дело доходит до серийного производства, то всякие нюансы, удешевляющие производство сказываются на внешнем виде. Хотя концепт все еще узнается в серийном производстве.
В дизайне интерфейсов та же история: нельзя взять сетку и пытаться построить что-то на ее основе. Может получиться криво по нескольким причинам:
- Наличие сетки изначально будет сильно сковывать в идеях: она задает рамки, за которые сложно выпрыгнуть (например, продуктовые дизайнеры интерфейсов сталкиваются с ограничениями текущих компонентов).
- Не будет финального видения (концепта), к которому следует стремиться в реализации интерфейса.
Разрабатывая интерфейс, когда вы думаете о функционале, об эстетике, вы совсем не думаете о сетке. И не должны. Она будет только мешать думать о важном. Следует отбросить эти мысли и подумать над тем, как все это будет работать, кто будет пользоваться, в какое время, при каких условиях… Все эти вводные приведут и к эстетической составляющей.
Когда дизайн-концепция готова, тогда и стоит задумываться о «серийном производстве» макетов. Подогнать под сетку куда проще, чем изначально что-то на ней построить.
Скорее всего, изначально сетка была придумана разработчиками для облегчения себе работы. Потом уже к ней подвязали вертикальный ритм. У него есть свои плюсы, но по факту, всем на него насрать. Вы каждый день работаете с кучей интерфейсов в интерфейсах (даже этот текст в браузере), и все это вообще по разным правилам построено. Но работает же. И выглядит неплохо.
Сетка нужна для быстрого и удобного производства, но не для удобства пользователя.