Основы графического дизайна для начинающих: что надо знать

Хороший дизайн необязательно должен быть пестрым или сложным. Главное — чтобы в нём был понятный месседж и настроение. В этом помогают простые принципы: как расположить элементы, где и с помощью чего сделать акцент, сколько пустого пространства оставить. Этот гайд помогает разложить всё по полочкам — от композиции и иерархии до колористики и типографики. Примеры в статье можно адаптировать под разные задачи: от презентаций и баннеров в соцсетях до лендингов и рассылок.

Композиция: с чего начинается визуальный порядок

Композиция — это то, как элементы расположены на макете: где заголовок, где кнопка, как размещены картинки и текст. От неё зависит, насколько легко визуал воспринимается и куда сразу пойдёт взгляд пользователя.

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

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

Сетка бывает:

1. Колоночная — делит макет на вертикальные зоны. Помогает контролировать отступы между элементами по горизонтали (каждый занимает одну или несколько колонок в ширину). Часто используется для сайтов, но может быть полезна в любых макетах.
2. Модульная — состоит из колонок и строк, образует равномерную «сетку в клеточку». Используется, когда нужно расположить много однотипных блоков (например, в каталоге).
3. Асимметричная — сетка с неравными по ширине колонками. Помогает создать более живую, интересную композицию без ощущения хаоса.

На старте достаточно освоить колоночную сетку — например, поделить макет на три части и выравнивать элементы по направляющим.

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

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

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

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

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

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

Пустое пространство («воздух»). Свободные участки между элементами: отступы, поля, зазоры. Это не потерянное место, а важный приём, который помогает сгруппировать объекты, расставить приоритеты и дать глазу отдохнуть. «Воздух» делает макет понятнее: элементы не слипаются, структура читается лучше, внимание не рассеивается.

Это особенно важно в объемных дизайн-проектах, где нужно передать много информации. Например, в веб-дизайне. На сайте Dayos за счёт свободного пространства каждая микротема чётко отделена, а информация подаётся порционно — её легко воспринимать и запоминать. Это помогает сформировать цельное и ясное представление о продукте компании.

Источник

Баланс. В макете должно быть ощущение устойчивости. Это можно сравнить с весами: если с одной стороны большой тяжёлый элемент, его нужно уравновесить чем-то на другой — несколькими меньшими деталями или контрастом цвета.

Баланс бывает:

• симметричный — всё выстроено относительно центра и отражается зеркально;
• асимметричным — вес элементов разный, но в целом макет выглядит уравновешенным.

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

Например — в рекламном баннере новой линейки косметики необычно расположена надпись «new». Она асимметрично выстроена вокруг фокусной точки — фотографии с флаконом. Она смещена чуть влево, и это компенсирует отсутствие буквы слева внизу.

Композиционные схемы и принципы

Если вы не уверены, как расставить элементы в макете — можно опереться на готовые композиционные приёмы. Это проверенные визуальные решения, которые помогают выстроить структуру, направить взгляд и сделать макет гармоничным.

Золотое сечение. Это классическая пропорция, которую можно встретить и в природе, и в искусстве. Макет делится на неравные части примерно в соотношении 60/40, и ключевые элементы размещаются вдоль этой линии или в «золотой точке» пересечения. Такая композиция воспринимается особенно уравновешенной.

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

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

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

Центрирование. Самый очевидный, но не всегда уместный приём — разместить важный объект ровно по центру. Он подчёркивает значимость элемента, создаёт симметрию и делает композицию устойчивой. Часто используется на карточках товаров, постерах, главных баннерах сайтов.

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

Ведущая линия. Это визуальное направление, по которому движется взгляд. Иногда это настоящая линия: стрелка, дорожка, рамка, тень. А иногда — просто логика размещения элементов или порядок, в котором они расположены. Например, если все блоки выстроены по диагонали, глаз автоматически движется от одного угла макета к другому.

Повторение, ритм и визуальные паттерны

Когда в макете есть элементы, которые повторяются с определённой логикой, возникает визуальный ритм. Он делает структуру понятной, создаёт ощущение порядка и делает восприятие проще и комфортнее.

Ритм и повторение помогают глазу «читать» макет. Если заголовки одного размера, иконки одного стиля, отступы между блоками совпадают — внимание не рассеивается, а легко двигается по знакомой схеме. Ритм задаётся не только повторами самих объектов, но и интервалами между ними: строками текста, карточками, колонками. Повторяющиеся интервалы образуют визуальные паттерны — и мозгу не приходится заново разгадывать, что происходит на каждом экране.

У ритма есть несколько разновидностей:

• статический — всё повторяется равномерно, с одинаковыми отступами;
• динамический — элементы могут меняться по размеру, но по заданному правилу (например, карточки идут по нарастающей);
• прерывистый — когда стандартный ритм сбивается чем-то важным. Например, среди пяти одинаковых блоков — один выделен цветом или масштабом.

Хороший пример динамического ритма — сайт-портфолио студии фото- и видеопродакшена Visual Business. Здесь работы представлены в разном масштабе, с воздухом и лёгкой хаотичностью. При этом их объединяет крупный текстовый логотип, который наслаивается на изображения на главном экране. Здесь же заметна и модульная сетка: фотографии чётко выстроены по колонкам и строкам.

Главный баннер сайта Jitter — пример прерывистого ритма. В середине слов буквы заменены геометрическими персонажами, напоминающими их начертание. Акцентная буква «t» выделяется необычной формой, в слове «fast» у буквы «s» появляется след, а в слове «for» изменён межбуквенный интервал. Все эти приёмы сбивают привычный ритм, но создают выразительный визуальный образ.

Что можно повторять:

1. Цвета: один и тот же акцентный цвет в кнопках, заголовках, иконках.
2. Шрифты: те же гарнитуры, одинаковый размер и стиль заголовков по всей вёрстке.
3. Отступы: если между карточками в одной строке 20 пикселей — то и в другой строке должно быть столько же.
4. Формы и стили: если кнопки со скруглением 8 пикселей — не стоит в этом же макете делать другие — с острыми углами.

Как работает цвет: принципы, сочетания и акценты

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

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

• монохромная — один цвет и его оттенки. Подходит для спокойных, лаконичных макетов;
• аналоговая — два–три соседних цвета на круге. Создаёт мягкое, связное впечатление;
• дополнительная — цвета, стоящие напротив друг друга. Дают сильный контраст, подходят для акцентов;
• триада — три цвета, образуюшие треугольник на круге. Даёт сбалансированный и живой эффект.

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

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

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

• Coolors — генератор цветовых палитр, есть случайные подборки и редактор круга;
• Adobe Color — инструмент от Adobe с визуальным кругом и готовыми схемами;
• Khroma — нейросеть, которая подбирает палитры на основе ваших предпочтений;
• Color Hunt — подборка готовых современных палитр.

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

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

Распространённый способ создания контраста — использование монохрома и одного яркого, акцентного цвета. Вот несколько примеров:

Источник

А вот несколько примеров более сложного цветового контраста:

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

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

В дизайне важно учитывать, какие эмоции вызывает палитра. Цвет помогает усилить сообщение и подсказать пользователю, как реагировать. Например, если вы хотите подчеркнуть статус — подойдёт чёрный; если важна экологичность — зелёный; если нужно привлечь внимание — красный. Главное — использовать эти ассоциации осознанно и не перегружать макет разными сигналами.

Типографика: как сделать текст читаемым и выразительным

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

Шрифт ≠ гарнитура. То, что мы часто называем «шрифтом», на самом деле — гарнитура. Это шрифтовое семейство, которое включает разные начертания: обычное, жирное, курсив, капс и так далее. Пример: Montserrat — это гарнитура, а Montserrat Bold 16 pt — конкретный шрифт.

В одном макете лучше использовать одну-две гарнитуры. Чаще всего достаточно одной, у которой есть разные начертания — для заголовков, текста и акцентов.

Иерархия текста. Чтобы макет не выглядел как сплошная «стена» букв, нужно расставить уровни важности:

1. Заголовок.
2. Подзаголовок.
3. Основной текст.
4. Подписи и пояснения.

Выстраивать визуальную иерархию можно с помощью:

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

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

Размер и межстрочные интервалы. Оптимальный размер шрифта для основного текста на экране — 14–16 pt. Всё, что меньше, — начинает напрягать глаза.

Интерлиньяж (межстрочный интервал) влияет на читаемость не меньше, чем размер. Он должен быть примерно 120–140% от кегля. То есть если у вас текст 16 pt, то оптимальный межстрочный интервал — около 20–22 pt. Это создаёт «воздух» между строками.

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