4 базовые концепции дизайна: структура, отступы, ритм, контраст

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

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

• Структура,
• Отступы,
• Ритм,
• Контраст.

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

Структура

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

Представьте, что вы проектируете страницу регистрации для вебинара. Она должна содержать:

• название мероприятия,
• краткое описание,
• стоимость участия,
• время и дату проведения,
• имя спикера,
• фотографию спикера,
• краткую биографию спикера,
• ссылки на соцсети спикера,
• кнопку регистрации,
• призыв к действию («Присоединяйтесь к нам в прямом эфире!»).

Как можно сгруппировать эти фрагменты информации? Как бы вы обозначили каждую группу? Например:

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

Сравните две версии дизайна. Определенно, версия справа более упорядоченна и облегчает восприятие контента.

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

Не пытайтесь сделать что-то красивое. Постарайтесь грамотно упорядочить информацию, и красота появится сама собой!

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

Анастасия Стефанюк, «Важная роль информационной архитектуры в UX-дизайне»

Отступы

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

Взгляните на эти формы. В левой все отступы одинаковые. Справа расстояния между элементами обусловлены структурой. Связанные элементы располагаются более «плотно» друг к другу и формируют визуальные группы.

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

«Белое или негативное пространство — это отступы между элементами дизайна. Это также пространство внутри отдельных элементов, в том числе между глифами (буквами). Несмотря на свое название, белое пространство не обязательно должно быть белым. Оно может быть любого цвета, иметь любую текстуру, узор или даже фоновое изображение. Это отличный инструмент, чтобы сбалансировать элементы дизайна и улучшить визуальную коммуникацию».

Мадс Согаард, «Сила негативного пространства в дизайне»

Как распределить негативное пространство правильно?

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

Центрирование в рамке

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

Вертикальное центрирование текста

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

«Почему этот параметр называется x-height? Потому что буква «х» — единственная буква в английском алфавите, все штрихи которой оканчиваются на базовой линии и верхней линии строчных букв. Буквы с изгибами, например, a, c, e, o, r или s, обычно немного выступают за пределы верхней линии».

Сирин Матта, «Высота прописных и строчных букв в типографике»

Текст внутри формы

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

Центрирование многоугольников

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

Вложенные прямоугольники со скругленными углами

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

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

Ритм

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

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

«Ритм в искусстве и дизайне — это отношения между элементами, которые создают ощущение гармонии. Его можно увидеть в узорах, сочетаниях цветов и форм, повторении линий и т.д. Он направляет взгляд зрителя от одного элемента к другому, не позволяя ему остановиться на какой-то конкретной точке».

«Ритм», часть серии «Принципы дизайна» от BBC

Повторение

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

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

Ниже собраны все элементы, использованные при подготовке иллюстраций для этой статьи. Мне пришлось выбрать ограниченное количество цветов, определиться со стилем стрелок и плашек, решить, какими должны быть размеры и начертания шрифтов. Фактически это мини-версия дизайн-системы, которая делает материал более последовательным и единообразным.

Ритм в типографике

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

Оптимальное решение для основного текста — 50–75 символов в строке. Конечно, это не строгое правило, при необходимости вы можете от него отступать.

Попробуйте прочитать текст ниже и вы сами убедитесь, насколько легче это сделать, когда строки не слишком длинные!

«В этом предложении пять слов. В этом — еще пять слов. Это нормальное количество. Но вместе они кажутся монотонными. Прислушайтесь! Ваш текст становится скучным. Он начинает напоминать заевшую пластинку. Ухо требует разнообразия. А теперь? Я меняю длину предложений и создаю музыку. Музыку. Мой текст поет. В нем есть приятный ритм, переливы, гармония. Я использую короткие предложения. Я использую предложения средней длины. А иногда, когда я уверен, что читатель достаточно отдохнул, я привлекаю его внимание с помощью длинного предложения, предложения, которое пылает энергией и нарастает со всей стремительностью крещендо, грохотом барабанов, треском тарелок — звуками, которые говорят: послушайте, это важно».

Гэри Провост, американский писатель и преподаватель писательского мастерства

Выравнивание по ширине

Когда мы растягиваем текст по ширине (в CSS — text-align: justify;) он выравнивается одновременно по правому и левому краю. К сожалению, дизайн-инструменты плохо справляются с этой задачей. В подобных случаях нам приходится настраивать интервалы между буквами вручную, расставлять переносы, а иногда даже переписывать текст. Главное — не допустить образования «проплешин», которые нарушают темп чтения.

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

Контраст

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

Коэффициент контрастности

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

Контраст размера

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

Отличное решение — типографическая шкала. Вы можете выбрать единое соотношение, например, золотое сечение (1,618), чтобы типографика выглядела максимально гармонично.

Контраст начертания

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

Избегайте контраста там, где он не нужен

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

«Мы не можем не заметить плохой дизайн, однако хороший дизайн обнаружить гораздо сложнее. Хороший дизайн незаметен. Возникает логичный вопрос: что же такое хороший дизайн? Когда форма следует за функцией? Размещение элементов строго по сетке? Заголовки размером 24pt и основной текст размером 8pt? Набор принципов, которым вы каждый раз следуете? Ответ может вас удивить: хороший дизайн — это все перечисленное. И ничего из этого».

Дэмиен Станьер, «Почему хороший дизайн незаметен?»

Заключение

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

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

Лиза Смит, «Обучение никогда не заканчивается»

Надеюсь, лучшие практики, которые мы изучили, помогут вам чувствовать себя немного увереннее. И помните: каждый может стать дизайнером, главное — постоянно учиться чему-то новому. Это процесс, который никогда не заканчивается.