Почему дизайнеры пользовательского интерфейса должны понимать Flexbox и Grid

Многим дизайнерам знаком адаптивный дизайн — подход к макету на основе столбцов с фиксированными точками останова, позволяющий охватить экраны всех размеров. 

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

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

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

Традиционный столбчатый дизайн с фреймворками

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

Понимание точек останова в классических макетах сетки

Суть этого подхода к адаптивному дизайну заключается в точках останова, которые определяются с помощью медиазапросов CSS, которые критически важны для адаптации макета под различные экраны. Структура веб-сайта гибко изменяется в этих заданных точках: элементы могут менять свои позиции, меню навигации может расширяться, а размер текста — корректироваться для лучшей читаемости. Такая гибкость позволяет дизайну оставаться функциональным и визуально привлекательным на любых устройствах.

Фреймворки

Фреймворки, такие как Bootstrap, Foundation или Tailwind, предлагают предварительно разработанные компоненты системы сеток, которые упрощают процесс создания адаптивных веб-макетов.

В прошлом эти фреймворки были неотъемлемой частью создания адаптивного дизайна, но сегодня их использование стало необязательным благодаря новейшим техникам CSS верстки.

Примечание. Современные фреймворки все чаще базируются на Flexbox и/или Grid, что делает их более гибкими по сравнению с первоначальными жесткими макетами на основе колонок.

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

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

Современный макет CSS

Современные CSS-макеты с Flexbox и CSS Grid могут использовать более ориентированный на внутренний мир подход, который иногда называют внутренним дизайном. Это означает, что макеты адаптируются не только к размеру окна просмотра, но и к самому содержимому и имеющемуся пространству.

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

Эта концепция может потребовать времени, чтобы стать интуитивно понятной для дизайнеров, поскольку она предполагает базовое понимание CSS. Так давайте же сделаем это!

Нашими основными инструментами CSS здесь являются Flexbox и Grid. Их можно использовать по отдельности или комбинировать. Мы можем использовать их для настройки компонентов, а также общих макетов.

Также не забывайте о контейнерных запросах, последнем дополнении к семейству CSS-макетов. 

Понимание Flexbox дизайнером

С помощью флексбоксов (официальное название CSS Flexible Box Layout) мы можем аккуратно складывать элементы в последовательности и контролировать их выравнивание, а также точно настраивать их поведение и размер в соответствии с доступным пространством и учитывать изменяющееся содержимое. Мы можем использовать флексбоксы для настройки наших компонентов и целых групп или страниц, все зависит от вложенности.

В CSS флексбокс работает с двумя основными элементами: родительским контейнером и его дочерними элементами.

Родительский контейнер (Flex-контейнер)

Это внешняя оболочка, к которой применяется display: flex;. Это выражение превращает контейнер в flex-контейнер, а его прямые дочерние элементы — в flex-элементы. Внутри flex-контейнера вы можете контролировать направление flex-элементов (строку или столбец), то, как они переносятся, а также выравнивание (по главной оси) или центрирование (по поперечной оси). Другими словами, родитель контролирует общие правила, поэтому для всех дочерних элементов устанавливаются одинаковые правила.

Дочерние элементы (flex-элементы):

Это элементы внутри flex-контейнера, являющиеся его прямыми дочерними элементами. Несмотря на то что они подчиняются общим закономерностям, установленным их родительским элементом, они обладают определенной степенью независимости. Мы можем контролировать их увеличение (способность расширяться для заполнения доступного пространства в контейнере), их сжатие (способность уменьшаться, когда свободного места не хватает) и их базовый размер (их размер по умолчанию перед увеличением или сжатием). Есть и более сложные настройки, например, выравнивание отдельных элементов по отношению к остальным.

Вложенный флексбокс

Итак, на примере этой карточки вы можете видеть, что это простой флексбокс. Карточка выступает в роли родителя, внутри которой располагаются три дочерних элемента: иллюстрация, заголовок и текст. Все они расположены в одном ряду, с одинаковыми интервалами между собой — все довольно просто и понятно.

Однако, когда дело доходит до создания более сложных дизайнов, например, таких как нижеприведенная навигационная панель с разнообразными элементами, сгруппированными по-разному, с различными интервалами, ориентацией и поведением, нам необходимо прибегать к использованию вложенных флексбоксов. Таким образом, каждый вложенный флексбокс является дочерним элементом своего прямого родителя, получая общее положение сверху (например, навигация на панели навигации), но также диктует новые правила своим дочерним элементам... как и в любой настоящей семье.

Одномерные и двухмерные макеты

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

Во многих случаях это абсолютно нормально, но это не дает вам контроля над макетом сетки со строками и столбцами. Если вам нужен контроль над дизайном, похожий на сетку, вам понадобится двухмерный подход к верстке, например CSS Grid.

Нет правильного или неправильного решения; все зависит от того, что вы хотите создать. Они прекрасно сочетаются друг с другом.

CSS Grid Layout

С помощью Grid-сетки вы можете создать все, что угодно. Да, действительно что угодно — наложение, выравнивание подсеток, или вообще без определения каких-либо параметров, он волшебным образом создаст все за вас. Это безумие. Однако это также может быть очень подавляющим, и в 90% случаев мы не создаем супер причудливые художественные макеты. Самое замечательное в Grid-сетке заключается в том, что мы можем создавать самые простые структуры макетов, такие как классическая сетка столбцов, и создавать макеты с большей гибкостью для структурирования композиции и размеров, вплоть до креативных дизайнов, которые выходят за рамки стандартного восприятия сетки. Grid-сетка будет рядом с вами.

Представим Flexbox как бусины на нитке, которые располагаются в горизонтальной или вертикальной линии. В таком случае Grid — это все равно, что взять бусины и поместить их в коробку для бенто, где мы можем свободно расположить их в любой строке или столбце. И это похоже на одну из тех крутых коробок, в которых можно перемещать перегородки и соединять отделения. Она даже автоматически расширяется.

Если Flexbox — это бусины на нитке, то Grid — это супергибкая коробка для бенто, в которую можно положить бусины.

Давайте понемногу разберемся в структуре Grid-сетки.

Думайте линиями сетки, а не столбцами

Как дизайнеры пользовательского интерфейса, мы обычно думаем о сетке макета как о контейнере с колонками, а затем размещаем элементы на этих колонках или между ними. Но с Grid-сеткой все немного по-другому. У нас по-прежнему есть контейнер, но сама сетка состоит из линий, которые создают ячейки сетки. По умолчанию элементы сетки располагаются последовательно, следуя их порядку в HTML. Однако мы можем контролировать их точное горизонтальное и вертикальное расположение с помощью линий, напоминающих координаты.

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

FR или дробные единицы

Наши столбцы и ячейки сетки не обязательно должны быть одинакового размера; мы можем настроить их по своему усмотрению. Это может быть фиксированный размер или использование «fr единиц» — дробных единиц, которые делят доступное пространство. Используя единицы fr, мы можем равномерно распределить оставшееся пространство или изменить пропорции — например, 2 fr для одной ячейки и 1 fr для другой.

При изменении размера все отлично подстраивается: фиксированные элементы сохраняют свой размер, а блоки fr соответствующим образом перераспределяют оставшееся пространство.

Явные и неявные сетки

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

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

Вложение

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

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

Мир — ваша устрица

Мы рассмотрели основы Grid-сетки, но еще больше возможностей в ее выравнивании, обосновании и способах объединения и вложения его элементов. Так что смело углубляйтесь в тонкости.

Но я хочу простую сетку!

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

Нужно ли выбирать между Grid и Flexbox?

Выбор между Flexbox и Grid не стоит рассматривать как дилемму: они являются элементами CSS и прекрасно сочетаются между собой. Часто Flexbox используется для настройки компонентов, а Grid — для управления общей структурой. Однако при необходимости можно использовать Flexbox для всей страницы. Вы можете комбинировать и сочетать оба подхода: иногда оба хорошо работают, а иногда один из них может быть более удачным решением. Вы даже можете обнаружить, что компоненты настраиваются с использованием и Grid, и Flexbox — современные тенденции открыты для экспериментов. Здесь нет однозначно правильного или неправильно подхода; они взаимно дополняют друг друга в зависимости от того, какой макет — одномерный или двумерный — лучше соответствует вашим потребностям.

Как специалист по дизайну интерфейсов, вы можете доверить все технические детали вашей команде фронтенд-разработчиков. Ваша задача — понимать причины принятых решений и создавать дизайн, учитывающий возможности и ограничения современного CSS. Важно осознавать, что задуманное в Figma или Penpot не всегда может быть реализовано в браузере. Это не ошибка, а часть креативного процесса. Взаимодействие между дизайнером и разработчиком — вот что действительно ведет к успеху!

Точки останова все еще необходимы? Пристальный взгляд

В традиционном дизайне на основе колонок

«Старый» способ, с нашей отзывчивой сеткой с определенными колонками, подразумевал фиксированные точки разрыва, когда наш дизайн переходил на новую версию. В этих точках разрыва может меняться сам макет сетки, начиная от разного количества колонок и заканчивая изменением границ или отступов. Мы также можем изменить расположение элементов в сетке или показать и скрыть определенные элементы. Кроме того, мы можем выбрать отображение различных вариантов, например, меню-гамбургер сменить на меню ссылок, а размер текста может меняться в этих точках разрыва.

Для более жесткой адаптивной верстки часто используется фреймворк, и обычно имеется сопроводительная документация, содержащая важную информацию. Например, при использовании такого фреймворка, как Bootstrap, документация будет содержать подробную информацию о количестве колонок, ширине отступов и точках разрыва. Таким образом, дизайнерам пользовательского интерфейса, становится очень просто создавать зеркала в таких инструментах, как Figma или Penpot.

Современный CSS и точки останова

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

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

Таким образом, вы, возможно, захотите добавить точки останова в современный CSS-макет для:

Изменение макета. Несмотря на то, что современный CSS и сам по себе отлично справляется с этой задачей, вы можете захотеть установить точки останова для более «радикальных» изменений макета, таких как изменение сетки, показ или скрытие элементов, или их распределение, отличающееся от естественного потока.

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

Совет: Эту проблему также можно очень элегантно решить с помощью контейнерного запроса.

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

Другие подходы с помощью CSS Clamp. Помимо точек останова, мы также можем использовать функцию clamp() в CSS, чтобы обеспечить плавное масштабирование типографики в заданном диапазоне, гарантируя ее отзывчивость. Этот метод позволяет регулировать размер текста между минимумом и максимумом, учитывая общую ширину области просмотра, независимо от точек останова.

Однако использование clamp() требует тесного сотрудничества с командой разработчиков, поскольку необходимо учитывать вопросы производительности и доступности, а также проводить дополнительные испытания. Таким образом, это отличный инструмент для работы, но он должен подходить для вашей конкретной ситуации и проекта.

Поиск баланса: между дизайнерской свободой и структурой

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

1) Индивидуальный дизайн для уникальных проектов или разделов

Собираетесь ли вы создать эксклюзивную и стильную страницу? Тогда вы, вероятно, захотите воспользоваться всеми возможностями, которые предлагают CSS-макеты. Вдохновляющие работы Джен Симмонс показывают, на что способны современные CSS-макеты. Вы можете полностью отказаться от традиционных точек разрыва, и позволить браузеру самому решать, как расположить элементы, или тщательно продумать каждую точку разрыва для каждого элемента.

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

В этом случае для графического представления создайте несколько фиксированных экранов в Figma или Penpot. Затем потребуется очень опытный front-end разработчик (и соответствующий бюджет!) для тесной совместной работы. Главное — как можно раньше перейти в браузер; слишком подробное планирование поведения в Figma или Penpot не будет иметь большого смысла.

2) Сочетание гибкости и структуры в масштабных проектах и системах дизайна

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

Статья Брэда Фроста о том, как работать с сеткой в дизайнерской системе, создавая компоненты сетки, просто фантастична. С этим можно прекрасно работать, поскольку такой подход к использованию заданных шаблонов верстки работает так же хорошо в Figma (с некоторыми ограничениями из-за отсутствия Grid) или Penpot, как и в CSS. Для упрощения работы также можно использовать фиксированные точки разрыва для общего макета и типографики. Важно то, что мы все равно можем легко отходить от этой системы, когда это необходимо.

Дело не в том, что дизайнеры должны принимать решения о кодировании

Давайте внесем ясность: эта статья не о том, что дизайнеры должны уметь программировать. Решение о том, как это будет реализовано в CSS, не принимается и не должно приниматься дизайнером; это задача для фронтенд-разработчика, профессионала своего дела! Так что здесь речь идет не о предоставлении готового кода разработчику. Но разрабатывая дизайн с учетом возможностей и ограничений CSS, мы можем более эффективно взаимодействовать и, что наиболее важно, вести конструктивный диалог с разработчиками… и это может быть очень увлекательным!