Графический дизайн: от основ до портфолио

Роль дизайна и основы визуального мышления

Зачем вообще нужен графический дизайн

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

Типичные ситуации, где дизайн влияет на результат:

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

Читатель быстрее считывает структуру текста и не теряется

Бренд выглядит последовательно и узнаваемо

Сообщение воспринимается как более надёжное, если оно оформлено ясно

Важно: дизайн — это не только про красиво. Это про понятно и уместно.

Дизайн как решение задачи

В этом курсе дизайн будем рассматривать как процесс решения задачи, а не как набор украшений.

У любой дизайнерской задачи есть минимум три составляющие:

Цель: что должно измениться после контакта с дизайном (понял, купил, зарегистрировался, дошёл)

Аудитория: кто именно смотрит и в каком состоянии (спешит, сравнивает, сомневается, не знает терминов)

Контекст: где и как это будет использоваться (экран/печать, расстояние, освещение, формат, ограничения)

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

!Схема, показывающая, что решение рождается на пересечении цели, аудитории и контекста

Чем дизайн отличается от искусства

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

| Критерий | Дизайн | Искусство | |---|---|---| | Главный фокус | Польза и коммуникация | Самовыражение и интерпретация | | Ограничения | Обязательны (сроки, формат, бренд, аудитория) | Могут отсутствовать | | Проверка результата | Понятность, удобство, метрики, обратная связь | Культурная ценность, реакция, дискуссия | | Роль зрителя | Должен быстро понять и действовать | Может размышлять и трактовать |

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

Визуальное мышление: что это такое

Визуальное мышление — это навык превращать смысл в форму и обратно:

увидеть, что главное в сообщении

разложить информацию на части

собрать эти части в ясную структуру

выбрать визуальные средства так, чтобы структура считывалась без усилий

Практически это означает, что дизайнер работает не только руками (в редакторе), но и головой: анализирует, группирует, упрощает, расставляет акценты.

Ключевой принцип: зритель сканирует, а не читает

Большинство людей сначала сканируют страницу глазами:

замечают крупное и контрастное

цепляются за заголовки

ищут знакомые формы (кнопки, ссылки, карточки)

читают выборочно

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

Основа визуального мышления: иерархия

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

Инструменты иерархии:

Размер: крупное воспринимается как более важное

Контраст: отличающееся заметнее

Расположение: верх и центр чаще читаются раньше

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

Цвет: акцентный цвет может вести взгляд

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

Гештальт-принципы: как мозг группирует элементы

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

Основные принципы, которые постоянно использует дизайнер:

Близость: расположенное рядом воспринимается как одно целое

Сходство: одинаковые по виду элементы воспринимаются как группа

Замкнутость: мозг достраивает недостающие части формы

Непрерывность: взгляд предпочитает плавные линии и траектории

Фигура и фон: мы отделяем объект от окружения и ищем главный объект

!Наглядные примеры того, как мозг группирует элементы

Композиция: как управлять вниманием

Композиция — это организация элементов на плоскости, чтобы взгляд двигался предсказуемо, а смысл не терялся.

Что помогает композиции быть читаемой:

Выравнивание: элементы должны иметь понятные связи по линиям

Ритм: повтор и чередование создают порядок

Баланс: распределение визуального веса, чтобы макет не падал в сторону

Поля и отступы: пустое пространство — это инструмент, а не пустота

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

Контраст: способ сделать различия очевидными

Контраст нужен не для украшения, а чтобы зритель быстро отличал одно от другого.

Частые виды контраста:

контраст размера (заголовок и текст)

контраст толщины (тонкое и жирное)

контраст формы (круг и прямоугольник)

контраст цвета (акцент и нейтральный фон)

контраст насыщенности (яркое и приглушённое)

Правило практики: если вы делаете элементы разными, делайте их заметно разными. Слабые различия выглядят как ошибка.

Типографика как основа графического дизайна

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

Базовые понятия, которые будем использовать дальше:

Шрифт: конкретный набор знаков с характером (например, Helvetica)

Начертание: вариант внутри шрифта (обычное, жирное, курсив)

Кегль: размер текста

Межстрочный интервал: расстояние между строками

Первые правила хорошей типографики:

ограничьте количество шрифтов: обычно достаточно 1–2

стройте иерархию через размер и начертания, а не через хаотичные цвета

следите за длиной строки: слишком длинные строки трудно читать

Простая модель дизайнерского процесса

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

Уточнить задачу: цель, аудитория, контекст

Собрать референсы: как решают похожие задачи

Сделать черновые варианты: быстро и без саморедактуры

Выбрать направление и усилить иерархию

Проверить читабельность и логику

Подготовить к выдаче: размеры, форматы, аккуратность

!Цикл работы дизайнера: от задачи до подготовки результата

Как развивать визуальное мышление уже сейчас

Ниже — практики, которые не требуют сложных программ и дают быстрый прогресс.

Пересказывайте смысл: сформулируйте задачу в 1–2 предложениях

Тренируйте иерархию: сделайте 3 уровня важности в любом тексте

Ищите группировки: отметьте, что должно восприниматься как блоки

Упрощайте: уберите всё, что не помогает цели

Сравнивайте варианты: один смысл — три разных композиции

Что дальше по курсу

Эта статья задала основу: дизайн как коммуникация и визуальное мышление как инструмент. Дальше мы будем последовательно превращать эти принципы в практические навыки:

работа с формой, сеткой и модульностью

цвет и работа с ограниченной палитрой

типографика глубже: пары, ритм, набор

композиция в разных носителях

сборка проектов в портфолио и презентация решений

Композиция: сетки, баланс, иерархия, ритм

Как эта тема связана с предыдущей статьёй

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

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

Что такое композиция в графическом дизайне

Композиция — это организация элементов на плоскости (или в интерфейсе), которая отвечает на четыре практических вопроса:

Где начать смотреть

Что главное, что второстепенное

Как перейти от одного блока к другому

Когда можно остановиться, потому что смысл понятен

Композиция не равна “красивой раскладке”. Это контроль сценария чтения.

Сетка как скелет макета

Сетка — это система направляющих (колонки, строки, модули), которая помогает:

выравнивать элементы последовательно

держать одинаковые отступы и интервалы

создавать повторяемые блоки (карточки, секции)

быстрее собирать разные форматы (баннеры, посты, слайды) в одном стиле

!Сравнение макета без сетки и с разными видами сеток

Виды сеток и где они полезны

| Вид сетки | Как устроена | Где чаще всего используется | Что даёт | |---|---|---|---| | Колоночная | Вертикальные колонки, часто 4, 6, 8, 12 | Лендинги, презентации, постеры | Быстрое выравнивание и гибкость компоновки | | Модульная | Колонки + строки, получается “таблица” модулей | Каталоги, карточки товаров, дашборды | Сильная структурность и повторяемость блоков | | Строковая | Горизонтальные направляющие, ряды | Списки, таблицы, интерфейсы | Ровные ритмы по вертикали | | Базовая линия | Привязка текста к единому шагу строк | Многостраничные тексты, журналы | Чистая типографика и стабильный вертикальный ритм |

Как выбрать сетку под задачу

Опирайтесь на три вещи из прошлой статьи: цель, аудитория, контекст.

Чем больше контента и повторяющихся блоков, тем полезнее модульная сетка.

Чем важнее “воздух” и крупные смысловые акценты, тем проще может быть сетка.

Чем больше форматов у проекта (сторис, пост, баннер, слайд), тем сильнее сетка помогает держать систему.

Практическое правило про поля и “прилипание”

Частая ошибка — прижимать контент к краям.

Поля работают как рамка и повышают читабельность.

Равномерные отступы помогают мозгу быстрее группировать элементы (принцип близости из гештальта).

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

Когда можно нарушать сетку

Нарушение сетки работает только тогда, когда сетка чувствуется.

Один “вылет” (элемент выходит за колонку) создаёт акцент.

Постоянные случайные нарушения превращают макет в шум.

Хороший тест: если убрать ваш “вылет”, станет ли хуже по смыслу? Если нет — это, скорее всего, декоративная случайность.

Баланс: чтобы макет не “падал”

Баланс — это ощущение устойчивости композиции. Даже если зритель не формулирует это словами, он чувствует: “всё на месте” или “что-то перекошено”.

Визуальный вес: из чего он складывается

Элементы имеют разный “вес” для глаза. Вес обычно увеличивают:

крупный размер

высокая контрастность

насыщенный цвет

плотная текстура или детальность

близость к центру

необычная форма

Симметрия и асимметрия

| Подход | Как выглядит | Плюсы | Риски | |---|---|---|---| | Симметричный баланс | Зеркальность или строгая ось | Стабильность, “официальность”, быстрое восприятие | Может выглядеть скучно или “слишком правильно” | | Асимметричный баланс | Вес распределён неравномерно, но устойчиво | Динамика, современность, сильнее управляет вниманием | Легко “перегрузить” одну сторону |

!Пример симметричного и асимметричного баланса с пояснением визуального веса

Быстрая диагностика баланса

Прищурьте глаза: останутся только пятна тона и контраста. Макет должен выглядеть устойчиво.

Переверните макет в чёрно-белый: если баланс держится без цвета, он действительно есть.

Иерархия в композиции: сценарий чтения

Иерархия отвечает за порядок: что человек заметит первым, вторым, третьим. В прошлой статье мы перечислили инструменты иерархии; здесь — как собрать их в работающую схему.

Минимальная рабочая иерархия

В большинстве макетов достаточно 3 уровней:

Уровень 1: главный смысл (заголовок, ключевой тезис, оффер)

Уровень 2: уточнение (подзаголовок, пояснение, выгоды)

Уровень 3: детали (основной текст, подписи, дисклеймер)

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

Паттерны чтения: F и Z

Люди редко читают подряд. Они сканируют.

F-паттерн чаще встречается в текстовых страницах: взгляд цепляется за верхнюю строку, потом левую сторону и подзаголовки.

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

Если вы строите композицию “вопреки” этим паттернам, это возможно, но тогда нужны сильные направляющие: контраст, явные блоки, ведущая графика.

Надёжный источник о сканировании и F-паттерне: F-Shaped Pattern of Reading on the Web (Nielsen Norman Group).

Иерархия и выравнивание

Выравнивание — не “косметика”, а способ сделать связи понятными:

элементы, выровненные по одной линии, мозг воспринимает как связанные

случайные “плавающие” края создают ощущение неряшливости и усложняют чтение

Сильная привычка: выбрать 1–2 ключевые оси (например, левый край текста и край изображения) и держать их по всему макету.

Ритм: повторение, которое делает макет цельным

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

Ритм создают:

одинаковые отступы между однотипными блоками

повтор размеров заголовков и подзаголовков

единый стиль карточек, иконок, подписи

регулярная вертикальная структура (секция за секцией)

Ритм и “темп” чтения

Композиция может быть разной по темпу:

медленный темп: больше воздуха, крупнее элементы, меньше блоков на экране

быстрый темп: плотнее сетка, больше мелких единиц, больше повторов

Темп выбирают по контексту:

афиша или баннер часто требуют быстрого темпа: “схватить главное за секунды”

лонгрид и презентация обучения чаще выигрывают от медленного темпа: “понять и удержать внимание”

Повтор и вариация

Ритм не равен однообразию. Рабочая формула:

повтор создаёт порядок

вариация создаёт акцент

Например, одинаковые карточки товаров дают ритм, а выделенная карточка “хит” даёт акцент.

Типичные ошибки композиции и как их чинить

| Ошибка | Как выглядит | Как исправить | |---|---|---| | Нет сетки | Всё слегка “гуляет” | Ввести колонки и базовые отступы, привязать ключевые элементы | | Слишком много акцентов | Всё кричит одновременно | Оставить 1 главный акцент, остальное подчинить | | Слабые различия | Заголовок почти как текст | Увеличить контраст размера или начертания заметно | | Плохая группировка | Текст и подписи смешаны | Развести блоки отступами, усилить близость внутри блока | | Ломается вертикальный ритм | Отступы везде разные | Ввести “шаг” отступов и кратные интервалы между блоками |

Мини-процесс построения композиции

Чтобы меньше “украшать” и больше управлять смыслом, используйте короткий порядок действий:

Сформулировать основной смысл в одной фразе и выбрать 3 уровня иерархии

Прикинуть блоки контента и сгруппировать их (что должно восприниматься вместе)

Выбрать сетку и поля под формат

Расставить элементы по сетке и проверить сценарий взгляда

Настроить баланс (вес, воздух, контраст)

Выровнять ритмы: повтор размеров, отступов, модулей

Что дальше

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

Если хочется закрепить материал дополнительным чтением, классический источник про сетки: Josef Müller-Brockmann — Wikipedia.

Типографика: шрифты, набор, читабельность

Зачем типографика нужна в этом курсе

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

Если композиция отвечает за где что стоит, то типографика отвечает за как это читается и каким тоном говорит.

Что такое типографика в практическом смысле

Типографика — это набор решений, которые делают текст:

читаемым (глаза не устают)

структурным (понятно, что главное, а что второстепенное)

согласованным (один стиль на всех носителях)

уместным по характеру (деловой, дружелюбный, технологичный)

Важно: типографика — не про «красивый шрифт», а про систему набора.

Термины, без которых дальше будет сложно

Шрифт, начертание, гарнитура

Шрифт — конкретный дизайн букв (например, Inter или Georgia).

Начертание — вариант внутри шрифта (Regular, Medium, Bold, Italic).

Гарнитура — семья шрифта со всеми начертаниями.

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

Кегль, межстрочный интервал, длина строки

Кегль — размер текста.

Межстрочный интервал — расстояние между строками.

Длина строки — сколько знаков помещается в одной строке.

Эти три параметра вместе отвечают за комфорт чтения.

!Сравнение настроек набора и их влияния на читабельность

Трекинг и кернинг

Трекинг — равномерное изменение расстояния между всеми буквами в выделенном фрагменте.

Кернинг — точечная подстройка расстояния между конкретной парой букв.

Практически:

трекингом вы регулируете «плотность» строки

кернингом чините «дыры» в отдельных сочетаниях (например, АВ, To)

Анатомия букв: что вы на самом деле настраиваете

Даже если вы не рисуете шрифты, полезно понимать базовые элементы.

Базовая линия — линия, на которой «стоит» текст.

x-height — высота строчных букв (условная высота x), влияет на ощущение размера и читаемость.

Засечки — небольшие окончания штрихов у антиквенных шрифтов.

Контраст штрихов — разница между тонкими и толстыми частями буквы.

!Базовая анатомия букв и линий набора

Классы шрифтов и где они уместны

Антиква (serif) и гротеск (sans-serif)

Антиква (с засечками) часто хорошо работает в длинных печатных текстах и там, где нужен «классический», «редакционный» характер.

Гротеск (без засечек) часто воспринимается современно и нейтрально, широко используется в интерфейсах.

Но правило «антиква для печати, гротеск для экрана» давно не абсолютное. На экранах всё решает качество шрифта, его метрики и настройка набора.

Моноширинные и акцидентные

Моноширинные полезны для кода, таблиц, технических блоков, где важно выравнивание символов.

Акцидентные (декоративные) уместны точечно: в коротких заголовках или айдентике, но редко годятся для основного текста.

Читабельность: что делает текст «лёгким»

Читабельность — это не один параметр, а сумма решений.

Длина строки

Слишком длинная строка ломает темп: глаз теряет начало следующей строки. Слишком короткая делает чтение рубленым.

Практическая привычка:

держать длину строки умеренной для основного текста

на широких макетах ограничивать ширину текстового блока, а не растягивать абзац на весь экран

Если хотите опираться на исследования чтения с экрана, полезная точка входа: материалы Nielsen Norman Group, например How People Read Online: New and Old Findings.

Межстрочный интервал

Слишком маленький интервал «склеивает» строки, слишком большой разрывает абзац.

Практика:

для основного текста делать интервал больше, чем кажется «по умолчанию»

проверять на реальном объёме текста, а не на двух строках-заглушках

Контраст и фон

Низкий контраст ухудшает чтение даже при хорошем шрифте.

Яркий фон и тонкий шрифт — частая причина «вроде красиво, но читать тяжело».

Ориентир по доступности: WCAG 2.2 (W3C) описывает требования к контрастности текста.

Регистр, капслок и подчёркивания

Длинный текст в ВЕРХНЕМ РЕГИСТРЕ читается хуже, чем в обычном.

Подчёркивания в интерфейсах часто конфликтуют с ожиданием «это ссылка».

Курсив в больших объёмах снижает комфорт чтения, особенно на мелком кегле.

Иерархия средствами типографики

Из прошлых тем: иерархия — это сценарий чтения. В типографике она строится не «украшениями», а системными различиями.

Минимальная типографическая система

Во многих проектах достаточно:

H1: главный заголовок

H2: заголовки разделов

Лид: короткое вступление крупнее/свободнее основного текста

Body: основной текст

Caption: подписи и второстепенное

Главное правило: уровни должны отличаться заметно, иначе получается не система, а случайность.

Чем лучше строить иерархию

размером (самый сильный рычаг)

насыщенностью начертания (Regular vs Medium vs Bold)

интервалами (отступ до/после)

цветом (аккуратно: лучше 1 акцентный уровень)

Чего лучше избегать:

«пять разных шрифтов для пяти уровней»

декоративных эффектов вместо структуры

Набор: выравнивание, абзацы, ритм

Левый край, центр, ширина по формату

По левому краю — самый устойчивый вариант для длинного текста: глаз легко находит следующую строку.

По центру хорошо подходит для коротких блоков (афиша, приглашение), но в длинном тексте ухудшает сканирование.

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

Вертикальный ритм и «шаг» отступов

Связь с прошлой статьёй про ритм: типографика задаёт ритм по вертикали.

Практика:

выбрать базовый «шаг» отступов (например, 8 или 12 в интерфейсе)

делать отступы кратными этому шагу

следить, чтобы расстояние внутри блока было меньше, чем между блоками

Базовая линия и сетка

Когда в макете много текстовых блоков в колонках, помогает сетка базовой линии: строки разных блоков попадают на общий вертикальный ритм.

Это особенно заметно в многостраничных материалах и плотных интерфейсах.

!Как базовая линия выравнивает вертикальный ритм текста

Шрифтовая пара: как сочетать два шрифта и не сломать стиль

Частая рабочая ситуация: один шрифт для заголовков, второй для основного текста.

Принципы сочетания:

контраст по роли: заголовочный может быть характернее, текстовый — спокойнее

общий «темперамент»: если один шрифт очень технологичный, а второй «каллиграфичный», может возникнуть конфликт тона

проверка на кириллице: у многих гарнитур кириллица заметно слабее латиницы

Безопасный путь для учебных проектов:

взять одну качественную гарнитуру с хорошей кириллицей и построить иерархию начертаниями

если нужны два шрифта, ограничиться парой «нейтральный текстовый + более акцентный заголовочный»

Каталоги, где удобно подбирать и проверять начертания: Google Fonts.

Типографика для экрана и для печати: что учитывать

Экран

разные устройства и плотность пикселей

важнее контраст и интерлиньяж на малых размерах

полезно проверять макет в масштабе 100% и на типичном устройстве

Хорошая практическая база по интерфейсной типографике: Material Design Typography.

Печать

бумага и краска меняют ощущение контраста

мелкий текст может «забиваться» на грубой бумаге

важны поля, потому что физическое чтение сильнее зависит от «воздуха»

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

Частые ошибки новичка и как их исправлять

| Ошибка | Как выглядит | Как исправить | |---|---|---| | Слишком много шрифтов | «пёстро» и нет системы | Ограничить до 1–2 гарнитур, строить иерархию начертаниями | | Слабая иерархия | заголовок почти как текст | Увеличить контраст размера и интервалов | | Плохая длина строки | очень широко или очень узко | Ограничить ширину текстового блока, настроить колонки | | Сбитый вертикальный ритм | отступы «как получилось» | Ввести шаг отступов и повторять его | | Злоупотребление капслоком | выглядит «кричаще» и тяжело читается | Оставить капслок для коротких акцентов |

Мини-процесс работы с типографикой в проекте

Определить носитель и контекст: экран или печать, расстояние, условия чтения.

Выбрать гарнитуру с хорошей кириллицей и нужными начертаниями.

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

Построить 3–5 уровней иерархии (заголовки, подзаголовки, подписи).

Привязать типографику к композиции: сетка, отступы, ритм.

Проверить на реальном тексте и в реальном масштабе.

Полезный углублённый справочник по набору и типографическим решениям: Butterick’s Practical Typography.

Что дальше

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

Цвет и контраст: палитры и сочетания

Как эта тема связана с предыдущими

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

Цвет и контраст усиливают всё перечисленное:

Цвет помогает быстрее построить иерархию (что главное, что второстепенное).

Контраст делает прочтение надёжным (видно, различимо, доступно).

Палитра делает проект целостным (система вместо случайных решений).

Главная мысль: цвет в дизайне — не украшение, а инструмент структуры, смысла и доступности.

Что такое цвет в дизайне: простая модель из трёх параметров

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

Оттенок: какой это цвет (красный, синий, зелёный).

Насыщенность: насколько цвет яркий (приглушённый или «кислотный»).

Светлота: насколько цвет светлый или тёмный.

Эти параметры важны потому, что в макете мы обычно решаем задачи не «каким сделать синий», а:

сделать элемент заметнее или тише

отделить фон от текста

собрать элементы в группы

создать акцент и не перегрузить

!Схема трёх свойств цвета, которыми дизайнер управляет

Контраст: что именно может быть контрастным

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

Контраст светлоты

Это самый важный контраст для читабельности.

Тёмный текст на светлом фоне обычно читается стабильно.

Светлый текст на тёмном фоне требует аккуратности: мелкий текст и тонкие начертания часто теряются.

Практическое правило: если сомневаетесь, усиливайте контраст светлоты, а не добавляйте ещё один цвет.

Контраст насыщенности

Рабочий приём для иерархии:

Насыщенный цвет делает элемент активным.

Приглушённые цвета помогают увести второстепенное.

Частая ошибка: делать всё насыщенным — тогда акцент пропадает.

Контраст оттенка

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

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

Контраст температуры

Цвета часто воспринимаются как:

тёплые (красный, оранжевый, жёлтый)

холодные (синий, голубой, фиолетовый)

Температура помогает создавать «передний план» и «фон»: тёплое часто визуально приближается, холодное — уходит назад.

Цвет как инструмент иерархии

Связка с типографикой и композицией выглядит так:

Размер и начертание создают первичную иерархию текста.

Отступы и сетка создают структуру и ритм.

Цвет усиливает иерархию, но не должен её заменять.

Надёжная схема для большинства задач:

Основной текст — нейтральный цвет с высоким контрастом к фону.

Второстепенный текст — тот же оттенок, но светлее или менее насыщенный.

Акцент — 1 основной акцентный цвет для ключевых действий и важных маркеров.

Проверка на здравый смысл: если убрать цвет, макет должен оставаться понятным за счёт композиции и типографики. Цвет должен делать лучше, а не «держать конструкцию».

Палитра: что это такое и почему она спасает от хаоса

Палитра — это ограниченный набор цветов и правил их использования.

Палитра нужна, чтобы:

макеты выглядели единым проектом (особенно в портфолио)

акценты были управляемыми

решения повторялись и масштабировались на новые носители

Минимальная палитра для учебных проектов

Для большинства учебных задач достаточно 5–9 цветов в системе:

1 цвет фона (или 2: светлый и тёмный)

1 цвет основного текста

1–2 нейтральных цвета для второстепенного текста, линий, карточек

1 акцентный цвет

1 дополнительный акцент (опционально, если есть второй тип действий)

Важно: «цветов» в палитре может быть мало, но состояний много: тот же цвет может иметь светлые и тёмные варианты для фона, наведения, выделения.

Способы сочетаний: как выбирать цвета не наугад

Аналоговая схема

Цвета рядом на цветовом круге. Даёт мягкое, спокойное ощущение, хорошо подходит для «фоновой» гармонии.

Комплементарная схема

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

Раздельно-комплементарная

Один основной цвет и два рядом с его комплементарным. Часто проще в применении, чем «чистая» комплементарная.

Триада

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

!Шпаргалка по базовым схемам сочетаний

Полезный инструмент для подбора схем: Adobe Color.

Контраст и доступность: что проверять обязательно

Даже сильный визуально макет может провалиться, если текст плохо читается.

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

Ориентир: требования к контрастности описаны в стандарте доступности WCAG 2.2.

Практический подход:

проверяйте контраст для основного текста и мелких подписей

помните, что на реальных экранах яркость и цветопередача отличаются

Быстрый способ проверки: WebAIM Contrast Checker.

Не кодируйте смысл только цветом

Если в макете есть статусы (ошибка, успех, предупреждение), нельзя полагаться только на красный/зелёный.

Добавляйте второй признак:

иконку

подпись

форму (например, бейдж)

изменение толщины рамки

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

Практический процесс: как собрать палитру под задачу

Шаг 1: зафиксируйте роль цветов

До выбора оттенков ответьте на вопросы:

где фон, где поверхности (карточки)

где основной текст, где второстепенный

что будет акцентом и сколько акцентов допустимо

Шаг 2: начните с нейтралей

Самая частая ошибка — начинать с «красивого акцентного». Надёжнее сначала выбрать:

фон

цвет текста

1–2 нейтральных для второстепенного

Если нейтрали хорошие, весь макет уже начинает «держаться».

Шаг 3: выберите один акцент и сделайте варианты

Акцентный цвет должен иметь варианты по светлоте для разных задач:

обычное состояние

наведение/выделение

фон под плашку или бейдж

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

Шаг 4: проверьте палитру на реальном макете

Палитра не оценивается «в вакууме». Проверяйте в контексте:

заголовок + абзац + кнопка

карточка + подпись + иконка

светлая и тёмная подложки, если они есть

!Сравнение влияния палитры и контраста на читаемость

Цвет и тон бренда: как не противоречить смыслу

Цвет влияет на ощущение «характера», но не существует универсального словаря «синий всегда про доверие». Контекст меняет восприятие.

Более практичный способ:

определите 2–3 характеристики тона (например: спокойный, технологичный, дружелюбный)

посмотрите референсы в вашей сфере

выберите палитру, которая поддерживает эти характеристики через насыщенность и контраст

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

Частые ошибки и как их чинить

| Ошибка | Как выглядит | Как исправить | |---|---|---| | Слишком много акцентных цветов | внимание распадается | оставить 1 главный акцент, остальное сделать нейтральным | | Низкий контраст текста | «стильно, но не читается» | усилить контраст светлоты, затем проверить в контраст-чекере | | Цвет заменяет структуру | без цвета всё разваливается | вернуться к сетке, отступам и типографической иерархии | | Чистый чёрный на чистом белом в больших объёмах | режет глаз в интерфейсе | использовать тёмно-серый для текста и чуть смягчить белый фон | | «Кислотная» насыщенность везде | усталость и визуальный шум | приглушить большинство цветов, оставить насыщенность для акцента |

Что дальше по курсу

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

Если хочется ориентироваться на практики крупных систем, можно посмотреть, как описывается работа с цветом в Material Design.

Брендинг: логотип, фирменный стиль, гайдлайн

Как эта тема связана с предыдущими

В прошлых статьях мы разобрали три опоры качества макета:

композиция даёт структуру (сетка, баланс, иерархия, ритм)

типографика делает текст читаемым и управляет тоном

цвет и контраст собирают макет в систему и усиливают акценты

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

Что такое брендинг в рамках графического дизайна

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

узнавать компанию или продукт

быстро понимать характер и тон коммуникации

отличать от конкурентов

воспроизводить дизайн одинаково хорошо на разных носителях

Важно различать понятия:

Бренд — то, как вас воспринимают (ассоциации и доверие)

Айдентика (визуальная идентичность) — визуальная система бренда

Фирменный стиль — часть айдентики: правила и элементы оформления

Источник для базовых определений: Brand identity (Wikipedia).

Логотип: что это и что он не делает

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

Логотип не решает всё в одиночку:

логотип не делает дизайн «брендовым» без системы

логотип не заменяет типографику, цвет и композицию

логотип не обязан объяснять весь смысл продукта

Полезная точка входа по терминологии: Logo (Wikipedia).

Виды логотипов

| Вид | Как выглядит | Когда подходит | Риски | |---|---|---|---| | Словесный знак | название набрано шрифтом | когда имя уникально и важна читабельность | сложно использовать на очень малых размерах | | Символ (знак) | пиктограмма без текста | когда нужен быстрый узнаваемый маркер | знак трудно «раскрутить» без времени и охвата | | Комбинированный | знак + название | универсальный старт для большинства проектов | при плохой композиции становится «тяжёлым» | | Монограмма | инициалы | когда бренд строится вокруг имени или аббревиатуры | легко получить клише |

Критерии хорошего логотипа

Вместо «красиво/некрасиво» полезнее проверять логотип по рабочим критериям:

узнаваемость на малом размере

устойчивость в чёрно-белом варианте

воспроизводимость (экран, печать, вышивка)

уместность тону (деловой, дружелюбный, технологичный)

совместимость с типографикой и палитрой

!Чек-лист тестов логотипа в реальных сценариях

Частые ошибки новичков в логотипе

слишком много деталей, которые исчезают в маленьком размере

попытка «рассказать всю историю» в одном знаке

случайный шрифт без поддержки кириллицы или без нужных начертаний

декоративные эффекты вместо формы (тени, градиенты) без необходимости

отсутствие версии для тёмного фона и монохрома

Фирменный стиль: из чего состоит система

Фирменный стиль — это набор элементов и правил, которые делают коммуникацию узнаваемой.

Базовые элементы фирменного стиля

Минимальный набор для учебного (и часто реального) проекта:

логотип и его версии

цветовая палитра с ролями (фон, текст, акцент)

типографическая система (заголовки, текст, подписи)

модульные принципы композиции (сетка, поля, отступы)

графические элементы поддержки (паттерн, рамки, плашки, иконки)

правила для изображений (стиль фото или иллюстраций)

Связь с предыдущими темами курса прямая:

сетка и ритм превращают стиль в повторяемую структуру

типографика задаёт голос и иерархию

цвет задаёт акценты и доступность

Принцип ролей: чтобы стиль не развалился

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

Пример ролей:

один главный акцентный цвет для действий и ключевых маркеров

один нейтральный для основного текста

один нейтральный для второстепенного текста

один цвет фона и один для поверхностей (карточки)

То же относится к типографике:

один стиль для H1

один стиль для H2

один стиль для основного текста

один стиль для подписей

Как связать логотип, типографику и цвет в единую айдентику

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

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

Зафиксируйте тон в 2–3 словах (например: спокойный, точный, современный).

Подберите типографику, которая говорит этим тоном.

Подберите палитру с ограничением по акцентам.

Проверьте, что логотип не «выпадает» по характеру и контрасту.

Соберите 3–5 носителей и посмотрите на систему в повторении.

!Как решения айдентики связаны и переходят в макеты

Носители: почему стиль нельзя оценить по одному макету

Фирменный стиль — это не «картинка», а повторяемость в разных форматах. Минимальный набор носителей для проверки:

квадратный пост

сторис или вертикальный баннер

один слайд презентации

небольшой фрагмент лендинга (первый экран + один блок)

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

Гайдлайн: документ, который сохраняет качество

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

Гайдлайн обычно отвечает на два вопроса:

как делать правильно

как делать нельзя

Что обычно входит в гайдлайн

| Раздел | Что описывать | Зачем | |---|---|---| | Логотип | версии, охранное поле, минимальный размер, фоны | чтобы знак не искажали и не «душили» | | Цвет | палитра и роли, примеры сочетаний | чтобы акценты были управляемыми | | Типографика | стили текста и иерархия | чтобы сохранялся тон и читабельность | | Сетка и отступы | базовый модуль, поля, принципы компоновки | чтобы сохранялся ритм | | Графические элементы | паттерны, иконки, плашки, иллюстрации | чтобы появлялись «фирменные» детали | | Примеры носителей | шаблоны постов/слайдов/баннеров | чтобы можно было быстро масштабировать |

Охранное поле и минимальный размер

Два простых правила, которые чаще всего спасают логотип в реальности:

охранное поле — зона вокруг логотипа, куда нельзя ставить текст и графику

минимальный размер — предел, ниже которого логотип перестаёт читаться

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

Правовые основы: товарный знак и авторские права

Дизайнеру полезно понимать базовую рамку:

логотип и элементы айдентики могут быть объектами авторского права

логотип часто регистрируют как товарный знак, чтобы защищать использование

Общее объяснение без погружения в юриспруденцию: Trademarks (WIPO).

Мини-процесс создания айдентики для учебного проекта

Ниже — практичный порядок действий, который хорошо ложится на навыки из прошлых тем курса.

Уточнить задачу: продукт, аудитория, тон, носители.

Собрать референсы: 10–20 примеров из вашей сферы.

Определить каркас системы: сетка, базовые отступы, типографические уровни.

Собрать палитру: нейтрали, затем один акцент, проверить контраст.

Сделать логотип: 2–3 направления, выбрать одно, довести до чистовой формы.

Создать графические элементы поддержки: плашки, паттерн или стиль иконок.

Проверить систему на 3–5 носителях.

Оформить гайдлайн и подготовить файлы (вектор логотипа, палитра, стили текста).

Как показать брендинг в портфолио

В портфолио важно показывать не только «красивую картинку», но и логику решений.

Что обычно выглядит убедительно:

1 слайд с задачей и тоном (2–3 слова)

логотип и его версии (цвет/монохром/инверсия)

палитра с ролями и примерами контраста

типографическая шкала (H1, H2, текст, подписи)

3–5 носителей в одной системе

1 слайд с ключевыми правилами (охранное поле, минимальный размер)

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

Что дальше

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

Макеты для digital и печати: форматы и подготовка

Как эта тема связана с предыдущими

Раньше в курсе мы собрали фундамент качества макета:

композиция даёт структуру и управляет вниманием

типографика отвечает за читаемость и тон

цвет и контраст усиливают иерархию и доступность

брендинг делает решения повторяемыми на разных носителях

Эта статья про следующий шаг: как довести макет до состояния файла, который правильно работает в нужной среде.

В графическом дизайне «хорошо выглядит» не равно «готово». Готово — это когда макет:

в правильном размере и пропорциях

в правильной цветовой модели

с правильной подготовкой для печати или экрана

экспортирован в правильные форматы без потерь смысла и качества

Digital и печать: два разных контекста

Одно и то же визуальное решение может требовать разных технических настроек.

Digital

Особенности:

изображение светится (экран)

размер задаётся в пикселях

один и тот же дизайн смотрят на разных устройствах

файл часто должен быть лёгким по весу

Печать

Особенности:

изображение отражает свет (бумага)

размер задаётся в миллиметрах

цвет зависит от бумаги, краски и профиля

нужны технологические поля и вылеты

Главное практическое правило: сначала определите носитель, потом настраивайте документ.

!Схема показывает, почему в печати нужны вылеты и безопасные поля

Базовые термины, которые нужно понимать

Пиксели, миллиметры и физический размер

Пиксели используются для digital (например, 1080×1350).

Миллиметры используются для печати (например, 210×297 мм).

Ошибка новичка: делать печатный макет «как для экрана», а потом просто сохранить в PDF.

Растр и вектор

Растр состоит из пикселей (фото, скриншоты).

Вектор описывается геометрией (логотипы, иконки, простая графика).

Практические последствия:

растровое изображение ухудшается при сильном увеличении

вектор масштабируется без потери качества

PPI и DPI

В учебной практике достаточно такой модели:

PPI (pixels per inch) описывает плотность пикселей в изображении и макете

DPI (dots per inch) часто используют как «печать в точках», но в бытовой речи дизайнеры нередко называют DPI то, что по смыслу PPI

Важное прикладное правило: для печати обычно готовят растровые изображения достаточно детальными, чтобы они не выглядели «мыльными».

RGB и CMYK

RGB — цвет на экранах, смешение света

CMYK — цвет в печати, смешение красок

Практика:

макеты для соцсетей, интерфейсов и презентаций обычно готовят в RGB

печатные материалы чаще требуют CMYK, потому что типография печатает красками

Если печатный макет оставить в RGB, типография всё равно конвертирует его в CMYK, но результат может измениться по насыщенности и контрасту.

Базовая справка по моделям:

RGB color model (Wikipedia)

CMYK color model (Wikipedia)

Цветовой профиль ICC

ICC-профиль — это набор правил, который помогает устройствам понимать цвет одинаково.

Практический смысл:

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

типографии часто дают требования: какой профиль использовать и как сохранять PDF

Справка: ICC profile (Wikipedia)

Подготовка макетов для digital

Размеры и форматы: что фиксировать в начале

Сначала определите:

где будет размещение (лента, сторис, баннер, презентация)

какие размеры нужны в пикселях

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

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

Экспорт для digital: что выбирать

Основные форматы:

PNG для графики с резкими краями и когда нужна прозрачность

JPEG для фото и сложных градиентов, когда важен малый вес

SVG для векторных иконок и простых иллюстраций

PDF для передачи макета, где важна сохранность вёрстки (например, презентация или один лист)

Практические ориентиры:

Для интерфейсов и иконок избегайте экспорта в JPEG.

Для фото не делайте PNG без необходимости, потому что файл часто будет тяжелее.

Если в SVG много эффектов и масок, проверяйте, как он отображается в целевой среде.

Справка по SVG: SVG (Wikipedia)

Масштабы 1x, 2x, 3x

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

Практика для digital-ассетов:

подготовьте экспорт в нескольких масштабах, если макет идёт в разработку

проверьте, что тонкие линии и мелкий текст не «распадаются»

Если вы работаете в Figma, полезная точка входа по экспорту: Figma Help Center: Export

Контраст и читаемость на экране

Связка с типографикой и цветом:

мелкий текст требует более высокого контраста и аккуратных начертаний

цветовые акценты должны поддерживать иерархию, а не заменять её

Если делаете интерфейсные или web-макеты, ориентир по доступности контраста: Web Content Accessibility Guidelines (WCAG) 2.2

Подготовка макетов для печати

Форматы и размеры

Самая распространённая система стандартов бумаги — серия A.

Примеры:

A4 часто используют для документов и листовок

A3 часто используют для афиш и плакатов

Справка: ISO 216 (Wikipedia)

Практика:

задавайте размер документа в миллиметрах

заранее уточняйте у типографии точный формат и требования

Вылеты, линия реза и безопасные поля

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

вылеты (bleed) — запас фона/изображения за линией реза

линия реза (trim) — где изделие будет обрезано

безопасные поля (safe area) — зона, куда лучше не ставить важный текст и мелкие детали

Практический смысл:

Если фон или фото доходят до края, их нужно продлить в зону вылетов.

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

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

Разрешение растровых изображений для печати

Проверяйте качество именно того, что является растром:

фотографии

текстуры

растровые иллюстрации

Типичная ошибка: растянуть маленькую картинку на большой плакат.

Практическая проверка:

смотрите изображение в масштабе 100% относительно печатного размера

если фото уже выглядит мягким и «плывёт», в печати будет хуже

Цвет в печати: что учитывать

Практические правила:

уточняйте у типографии, нужна ли конвертация в CMYK и какой профиль использовать

не судите печатный цвет по экрану напрямую, особенно на непроверенном мониторе

аккуратно используйте очень тёмные фоны и мелкий светлый текст, потому что в печати это может быть менее читабельно

PDF для типографии и стандарты PDF/X

Часто типографии принимают печатные макеты в PDF.

PDF/X — семейство стандартов, которые помогают подготовить PDF более предсказуемо для печати.

Справка: PDF/X (Wikipedia)

Что важно в сдаче PDF на печать:

шрифты встроены или корректно обработаны по требованиям типографии

есть вылеты, если они требуются

правильный размер страницы и отсутствие случайных лишних объектов за пределами

Если типография просит «сделайте preflight», это означает проверку файла на типовые ошибки перед печатью.

Частые ошибки при подготовке и как их избежать

| Ошибка | Чем опасно | Как исправить | |---|---|---| | Нет вылетов | белые полосы по краю после реза | добавить вылеты и продлить фон/фото | | Важный текст слишком близко к краю | текст может «подрезать» или выглядит тесно | держать текст в безопасных полях | | Логотип только в растре | «мыло» на печати и при масштабировании | хранить логотип в векторе | | Путают RGB и CMYK | неожиданные изменения цвета | уточнить требования и конвертировать контролируемо | | Экспорт “как получилось” | разные версии, хаос в согласовании | ввести правила именования и форматы экспорта |

Мини-процесс подготовки макета к сдаче

Ниже — практичный порядок, который связывает навыки курса с технической выдачей.

Зафиксировать носитель и требования (digital: размеры, печать: формат, вылеты, профиль).

Проверить структуру: сетка, поля, иерархия, ритм.

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

Проверить графику: где вектор, где растр, достаточно ли качества фото.

Подготовить версии: для разных носителей и фонов, если это фирменная система.

Экспортировать в нужные форматы и проверить результат на просмотре.

Как это помогает портфолио

Техническая грамотность хорошо видна в кейсах.

Что обычно добавляет доверия в портфолио:

показ носителей в разных форматах (например, пост и сторис, плакат и листовка)

аккуратные детали печатной подготовки (вылеты, поля, PDF)

указание, какие форматы вы сдаёте и почему

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

Портфолио и презентация проектов: кейсы и процесс

Как эта тема связана с предыдущими

В прошлых статьях мы собрали фундамент качества макета:

композиция: сетка, баланс, иерархия, ритм

типографика: читабельность, набор, шрифтовая система

цвет и контраст: палитра, акценты, доступность

брендинг: повторяемость решений и гайдлайн

подготовка файлов: корректные форматы для digital и печати

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

понимаете задачу (цель, аудитория, контекст)

умеете строить систему (сетку, стили, палитру)

доводите до готового файла (форматы, версии, аккуратность)

Что такое портфолио в графическом дизайне

Портфолио — это не архив работ и не лента “всё, что сделал”. Это витрина компетенций: подбор проектов и их подача так, чтобы зритель быстро понял, можете ли вы решать задачи.

Зритель портфолио обычно сканирует, как мы обсуждали в теме про визуальное мышление:

смотрит обложки и первые экраны

открывает 1–3 кейса

ищет признаки уровня: типографика, сетка, системность, аккуратность

хочет понять, что именно сделали вы

Отсюда правило: портфолио должно быть собрано как дизайн-проект — с иерархией, ритмом, ясными акцентами.

Какие форматы портфолио бывают и когда что выбирать

Веб-портфолио

Плюсы:

легко смотреть и пересылать

можно быстро обновлять

хорошо работает для digital-направлений

Популярные платформы:

Behance

Dribbble (скорее витрина фрагментов, чем кейсов)

Adobe Portfolio

PDF-портфолио

Плюсы:

контролируемая верстка

удобно отправлять в отклик

хорошо для печатных проектов и презентаций

Риск:

тяжёлые файлы и “не открывается на телефоне”, если не подумать о размере и структуре

Практика: держать PDF-версию как короткую выжимку (например, 8–15 страниц), а подробные кейсы — в вебе.

Портфолио “под задачу”

Самый сильный подход: иметь базовое портфолио и делать версию под конкретную роль.

под брендинг: айдентика, гайдлайн, носители

под digital: баннеры, лендинги, UI-экраны, дизайн-система

под печать: плакаты, упаковка, верстка, подготовка к типографии

Что включать: количество проектов и принцип отбора

Хорошее портфолио почти всегда выигрывает от ограничения.

Рекомендованный диапазон для старта:

4–8 кейсов, если это подробные проекты

8–16 работ, если это витрина отдельных макетов, но лучше стремиться к кейсам

Критерии отбора:

понятная задача: что нужно было сообщить или изменить

системность: видно сетку, типографическую и цветовую систему

качество исполнения: выравнивания, отступы, читабельность, контраст

разные носители: хотя бы 2–4 формата внутри одного проекта

ваша роль: вы можете честно объяснить, что сделали сами

Если проект слабее по качеству, но важен по смыслу, его можно оставить как “черновик” вне портфолио и позже переработать.

Кейс vs “красивая картинка”: что ценится сильнее

Одна картинка показывает вкус. Кейс показывает умение решать задачу.

Кейс отвечает на вопросы:

что было нужно сделать и для кого

какие ограничения были

почему вы выбрали именно такие решения

как вы проверяли читабельность, контраст, масштабирование

что получилось на разных носителях

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

!Каркас, по которому удобно собирать любой кейс

Структура сильного кейса

Ниже — рабочая структура, которую можно повторять от проекта к проекту. Она помогает держать иерархию и не превращать кейс в хаос.

Входной экран кейса

На первом экране зритель должен за 5–10 секунд понять, что это.

название проекта

1 строка: что делали (например: айдентика для кофейни, серия постеров для фестиваля)

1–2 лучших визуала

ваша роль (если проект командный)

Бриф: цель, аудитория, контекст

Коротко, без лишней “воды”.

цель: что дизайн должен обеспечить

аудитория: кто смотрит и в каком состоянии

контекст: где используется (соцсети, печать, сайт, офлайн)

ограничения: сроки, форматы, бренд-рамки, технические требования

Концепция и логика решений

Покажите, что решения не случайны.

2–3 слова тона (например: спокойный, точный, современный)

1–2 направления поиска (референсы, мудборд)

почему вы выбрали финальное направление

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

Система: композиция, типографика, цвет

Это связка с ключевыми темами курса.

Что показать:

сетка: колонки, поля, модуль, примеры привязки

типографика: 3–5 уровней (заголовок, подзаголовок, текст, подписи)

цвет: палитра с ролями (фон, текст, акцент), проверка контраста

Можно оформить как таблицу.

| Слой системы | Что фиксируем | Как это видно в макетах | |---|---|---| | Сетка | колонки, поля, шаг отступов | одинаковые края, устойчивый ритм | | Типографика | стили, размеры, начертания | ясная иерархия, читабельность | | Цвет | нейтрали, 1 акцент, роли | акценты управляемые, контраст стабильный |

Носители: серия, а не один макет

Портфолио усиливается, когда видно масштабирование.

Примеры наборов:

пост + сторис + обложка хайлайта

афиша A3 + листовка A5 + пост в соцсети

первый экран лендинга + блок с преимуществами + баннер

логотип + визитка + шаблон презентации

Важно: не просто “накидать мокапов”, а показать повторяемость правил.

Подготовка файлов

Это часто выглядит как “мелочь”, но сильно добавляет доверия.

Что можно показать в 1 экране:

размеры и форматы

цветовая модель (RGB для digital, CMYK для печати, если применимо)

вылеты и безопасные поля (для печати)

экспорт: PDF, PNG, JPG, SVG — в зависимости от носителя

Если вы упоминаете доступность, уместно сослаться на стандарт: WCAG 2.2.

Итог и выводы

Даже в учебном проекте полезно завершать кейс:

что получилось

какие решения сработали лучше всего

что бы вы улучшили в следующей итерации

Это выглядит как профессиональная рефлексия, а не как “сдал и забыл”.

Как показывать процесс, чтобы он усиливал, а не засорял

Процесс ценен только тогда, когда он объясняет почему финал такой.

Показывайте:

2–6 ранних вариантов, которые реально отличаются

1–2 ключевых развилки: “вариант А vs вариант Б” и критерий выбора

примеры итераций типографики (кегль, межстрочный, ширина строки)

примеры проверки: ч/б, уменьшение, чтение на расстоянии, контраст

Не показывайте:

30 почти одинаковых скриншотов

случайные черновики без подписи, что именно вы проверяли

!Процесс превращения проекта в понятный кейс

Оформление кейса как дизайн-задача

Ваш кейс — это тоже макет, и к нему применимы все правила курса.

Композиция и сетка

держите единые поля и оси выравнивания

повторяйте одинаковые блоки (бриф, система, носители)

оставляйте воздух: перегруженный кейс тяжело смотреть

Типографика

1–2 шрифта, предсказуемая иерархия

короткие абзацы и ясные подзаголовки

подписи к изображениям: что зритель должен заметить

Цвет

не добавляйте “новую палитру для кейса”, если показываете брендинг

следите за контрастом: кейс должен читаться на телефоне

Макеты и мокапы: как использовать честно

Мокапы помогают увидеть дизайн в контексте, но легко превращают кейс в “обманку”.

Правила здравого смысла:

показывайте хотя бы 1–2 “чистых” макета без мокапа

не прячьте типографику и детали в перспективах

не используйте мокапы, которые меняют цвет и контраст

для печати показывайте разворот или лист в плоскости хотя бы один раз

Если мокап “спасает” дизайн, значит надо чинить сам макет.

Как описывать результаты, если нет реальных метрик

В учебных проектах часто нет цифр, но можно показать критерии качества.

Варианты честной формулировки:

“Система построена так, чтобы масштабироваться на 4 формата без изменений правил”

“Контраст текста проверен по требованиям доступности для основного текста”

“Логотип протестирован в монохроме и на малом размере”

Если у вас есть реальные результаты, пишите конкретно:

рост CTR, регистраций, продаж

снижение ошибок или обращений

улучшение понимания структуры (по тестам)

Но не выдумывайте метрики: отсутствие цифр лучше, чем недоверие.

Частые ошибки портфолио и как их исправить

| Ошибка | Почему плохо | Как исправить | |---|---|---| | Слишком много работ | зритель устаёт и не видит сильное | сократить до 4–8 кейсов | | Нет задачи и роли | непонятно, что вы решали и что сделали | добавить бриф и вашу ответственность | | Только мокапы | не видно качества верстки | добавить “плоские” макеты и детали | | Слабая типографика в описаниях | сам кейс выглядит непрофессионально | сверстать кейс по тем же правилам, что и проекты | | Разные стили оформления кейсов | портфолио не выглядит системой | сделать единый шаблон и повторять |

Мини-чеклист перед публикацией

обложка читается в маленьком размере

первые 2 экрана объясняют проект без прокрутки на полчаса

есть бриф: цель, аудитория, контекст

видно 3 слоя системы: сетка, типографика, цвет

показаны носители серией

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

кейс читается на телефоне: текст не мелкий, контраст нормальный

Что дальше после курса

Когда у вас есть несколько кейсов, следующий уровень — улучшать портфолио как продукт:

заменять слабые проекты на сильные

делать версии под конкретные вакансии и задачи

обновлять кейсы после обратной связи

Портфолио — это не “финальная папка”, а живая система, которая растёт вместе с вашими навыками.