Цифровое визуальное мышление: инструменты и практика

ЦИФРОВОЕ ВИЗУАЛЬНОЕ МЫШЛЕНИЕ:
ИНСТРУМЕНТЫ И ПРАКТИКА ДЛЯ ДИЗАЙНА

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

Автор: Чэнь Бяо
Научный руководитель: Гудилина Светлана Ивановна
доцент кафедры дизайна и медиатехнологий в
искусстве, кандидат педагогических наук, старший научный сотрудник
ФГБОУ ВО «Московский педагогический государственный университет»

РАЗДЕЛ 1.
Введение: для кого и зачем это пособие
РАЗДЕЛ 2.
Что такое визуальное мышление и почему оно нужно каждому дизайнеру
РАЗДЕЛ 3.
Информационная перегрузка и думскроллинг: как цифровая среда мешает думать
РАЗДЕЛ 4.
Цифровые инструменты дизайна: что, когда и зачем использовать
РАЗДЕЛ 5.
Проектная деятельность: от идеи до готового макета
РАЗДЕЛ 6.
Справочные материалы

Начать чтение

РАЗДЕЛ 1. ВВЕДЕНИЕ: ДЛЯ КОГО И ЗАЧЕМ ЭТО ПОСОБИЕ

1.1. Кому нужно это пособие

Это пособие написано для трёх типов читателей.

Вы уже умеете открывать Photoshop или
Figma, но ваши проекты часто выглядят «не так». Вы долго смотрите на пустой
лист, не зная, с чего начать. Вы собираете десятки референсов, но не можете
выбрать один. Это пособие поможет вам понять, почему один дизайн работает,
а другой — нет.

Студенты-дизайнеры.

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

Преподаватели

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

Самоучки

1.2. Главная мысль, которую нужно запомнить

Дизайн — это не про красоту.
Дизайн — это про решение задач.

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

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

Пример.

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

1.3. Как устроено это пособие

Пособие построено от простого к сложному.

1.4. Что нужно, чтобы работать с пособием

Компьютер с выходом в интернет
Бесплатные аккаунты в Figma и Canva
(можно зарегистрироваться за 5 минут)
Желание не просто читать, а пробовать

РАЗДЕЛ 2. ЧТО ТАКОЕ ВИЗУАЛЬНОЕ МЫШЛЕНИЕ И ПОЧЕМУ ОНО НУЖНО КАЖДОМУ ДИЗАЙНЕРУ

2.1. Определение: мышление образами, а не словами

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

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

Кто придумал этот термин?
Профессор Гарвардского университета Рудольф Арнхайм в 1960-х годах. Он доказал, что мышление может происходить через образы, и это не менее важно, чем логическое мышление.

Рудольф Арнхайм

1960

Почему это важно для дизайнера?

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

2.2. Почему визуальное мышление важнее, чем умение рисовать

Многие начинающие дизайнеры думают: «Я не умею рисовать, значит, я не смогу стать дизайнером». Это неправда.

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

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

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

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

2.3. Как работает глаз и мозг: теория когнитивной нагрузки

(Джон Свеллер, 1988)

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

Что такое когнитивная нагрузка?

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

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

Вы заходите на сайт, где одновременно мигают три баннера, бежит бегущая строка, играет видео, всплывает окно с подпиской на рассылку. Что вы сделаете? Закроете сайт. Потому что мозг говорит: «Слишком много! Я не могу обработать всё это!»
Что это значит для дизайнера?

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

Визуальный пример плохой когнитивной нагрузки:

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

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

2.4. Как работает глаз и мозг: мультимедийная теория
(Ричард Майер, 2014)

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

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

Что это значит для дизайнера?

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

Пример правильного использования:

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

Вы показываете слайд, где большая картинка и под ней крупный текст, который полностью описывает то, что на картинке. Зачем? Человек и так видит. Это перегрузка. Либо оставьте картинку без текста, либо уберите картинку и оставьте текст.

2.5. Визуальная иерархия:
что мы видим первым, вторым, третьим

Что такое визуальная иерархия?

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

Хорошая иерархия отвечает на три вопроса:

На что смотреть сначала?

Что здесь самое важное?

Что второстепенно?

Как это работает?
Когда человек смотрит на лист (или экран), его глаз не читает всё подряд. Глаз «сканирует» пространство в поисках самого заметного элемента. Самый заметный элемент — тот, который отличается от остальных.

Как проверить иерархию своего дизайна?
1. Прищурьте глаза и посмотрите на макет. Какие элементы остались видны? Это самые важные.
2. Закройте глаза на 5 секунд, откройте и отметьте, что вы увидели первым. Если это не главный элемент — плохо.
3. Покажите макет другу и спросите: «Что здесь самое важное?» Если он ответит правильно — иерархия хорошая.

Визуальный пример хорошей иерархии:

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

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

2.6. Композиция:
как расположить элементы, чтобы было понятно

Визуальный пример правила третей

Что такое композиция?
Композиция — это расположение элементов в пространстве вашего макета. Хорошая композиция помогает глазу двигаться плавно, от важного к второстепенному. Плохая композиция заставляет глаз блуждать и уставать.

Правило третей — самое простое правило композиции
Мысленно разделите ваш макет на 9 равных частей (3 по горизонтали, 3 по вертикали). Самые важные элементы располагайте на пересечениях линий. Это делает композицию интересной и сбалансированной.

2.7. Цвет и контраст: почему это важно и как не ошибиться

Почему цвет важен?
Цвет вызывает эмоции.

Красный —
опасность, страсть, внимание.
Синий —
спокойствие, доверие, профессионализм.
Зелёный —
природа, здоровье, рост.
Жёлтый —
радость, энергия, предупреждение.

Контраст

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

Что такое контраст?
Контраст — это разница между элементами. Самый важный контраст — между текстом и фоном. Если контраст слишком маленький, текст не читается.

Как проверить контраст?
Есть бесплатные онлайн-инструменты. Один из лучших — WebAIM Contrast Checker.

2.8. Типографика:
как выбрать шрифт и не испортить проект

Что такое типографика?
Типографика — это искусство оформления текста. Шрифт, размер, интерлиньяж (расстояние между строками), кернинг (расстояние между буквами) — всё это влияет на то, как читается ваш текст.

Главное правило типографики:
Текст должен читаться. Всё остальное — второстепенно.

Сколько шрифтов можно использовать в одном проекте?
Не больше трёх. А лучше два: один для заголовков, один для основного текста.
Если вы используете 5–6 разных шрифтов, ваш дизайн выглядит хаотичным и непрофессиональным.

Размер шрифта:
Заголовок: от 24 pt и выше
Подзаголовок: 18–24 pt
Основной текст: 12–16 pt (на экране), 10–12 pt
(в печати)
Мелкий текст (примечания, подписи): 8–10 pt

2.9. Принципы гештальта: как мозг достраивает картинку

Что такое гештальт?

Гештальт (от немецкого Gestalt — «форма», «образ») — это направление в психологии, которое изучает, как мозг организует разрозненные элементы в целостные образы.

Почему это важно для дизайнера?

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

Пять главных принципов гештальта для дизайнера:

Близость

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

Сходство

Похожие элементы (по цвету, форме, размеру) воспринимаются как связанные.

Замыкание

Мозг достраивает незавершённые формы.

Непрерывность

Элементы, выстроенные в линию, воспринимаются как единое целое.

Фигура-фон

Мы видим либо фигуру, либо фон, но не оба одновременно.

Визуальный пример принципов гештальта

Как использовать эти принципы в своём дизайне?

Группируйте связанные элементы близко друг к другу (близость)
Делайте похожие элементы визуально похожими (сходство)
Не бойтесь, если линия прерывается — мозг её достроит (замыкание)
Выстраивайте элементы в линии, чтобы глаз двигался плавно(непрерывность)

2.10. Визуальные примеры для изучения (со ссылками)

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

2.11. Практическое задание (для желающих)

Если вы хотите закрепить теорию на практике, выполните это задание.

Вопросы для самопроверки (7 вопросов)

1. Что такое визуальное мышление и чем оно отличается от словесного?

2. Почему визуальное мышление важнее умения рисовать от руки?

3. Как работает теория когнитивной нагрузки для дизайнера?

4. Что такое визуальная иерархия и зачем она нужна?

5. Назовите 5 принципов гештальта.

6. Почему контраст влияет на читаемость текста?

7. Сколько шрифтов рекомендуется использовать в одном проекте?

Практическое задание
Разделено на три части: Простое, Среднее и Сложное.

1. Простое (подходит для начинающих)

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

Пример

2. Среднее

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

Пример
Тема: Вечеринка

3. Сложное

Создайте минималистичный постер самостоятельно, соблюдая следующие требования:
1. Строго придерживайтесь визуальной иерархии.
2. Используйте только 2 шрифта.
3. Ограничьте цветовую схему не более чем 3 цветами.
4. Примените как минимум 2 принципа гештальта.
5. Обеспечьте достаточный контраст текста.

Пример

РАЗДЕЛ 3. ИНФОРМАЦИОННАЯ ПЕРЕГРУЗКА И ДУМСКРОЛЛИНГ: КАК ЦИФРОВАЯ СРЕДА МЕШАЕТ ДУМАТЬ

3.1. Что такое думскроллинг (doomscrolling)

Думскроллинг (от английского doom — «рок», «гибель» и scrolling — «прокрутка») — это неконтролируемое и продолжительное потребление информационного и визуального контента в цифровой среде.
Термин появился в начале 2020-х годов. Сначала он описывал привычку бесконечно прокручивать новостную ленту с тревожными новостями.
Сегодня，это понятие шире: думскроллинг — это любое бесцельное пролистывание соцсетей, лент Behance, Pinterest, YouTube, TikTok.

Как понять, что вы в думскроллинге?
Вы открываете Behance, чтобы найти 3–5 референсов для своего проекта. Через час вы закрываете вкладку и понимаете, что:

Посмотрели 50–100 проектов
Не запомнили ни одного
Не нашли то, что искали
Чувствуете усталость и раздражение

Это и есть думскроллинг.

3.2. Почему дизайнеры особенно уязвимы перед думскроллингом

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

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

Когда вы пролистываете ленту, мозг говорит вам: «Я работаю! Я ищу референсы!» Но на самом деле вы просто потребляете контент без цели.

Исследования подтверждают это. Buchanan с коллегами (2021) показали, что длительное пребывание в режиме думскроллинга усиливает когнитивную перегрузку и снижает концентрацию. Sharma (2022) и Ytre-Arne (2021) добавили, что дизайнеры, которые много времени проводят в соцсетях и дизайн-платформах, чаще испытывают творческий кризис и профессиональное выгорание.

3.3. Три психологических механизма:
дофамин, FOMO, когнитивная лень

Дофаминовая система мозга

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

Фомофобия (FOMO — Fear Of Missing Out)

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

Когнитивная лень

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

3.4. Как думскроллинг разрушает ваше визуальное мышление

Последствие и Как это выглядит

Фрагментация внимания

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

Снижение оригинальности

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

Тревожность при выборе

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

Визуальный шум

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

Потеря вкуса

Вам нужны всё более яркие и необычные образы, чтобы вызвать интерес.

3.5. Как отличить полезный поиск референсов от вредного думскроллинга

Полезный поиск референсов:
1. Сформулируйте четкую цель (например, «Найти примеры плакатов с высоким контрастом»).
2. Есть ограничение по времени. Вы выделили 20–30 минут, не больше.
3. Есть ограничение по количеству. Вы ищете 5–8 референсов, не 50.
4. Вы фиксируете результат. Вы сохраняете найденное в папку / доску Miro с комментариями.
Вредный думскроллинг:
1. Нет чёткой цели. Вы просто «смотрите, что есть».
2. Нет ограничения по времени. Вы теряете счёт времени, час пролетает незаметно.
3. Нет ограничения по количеству. Вы открываете вкладку за вкладкой без остановки.
4. Вы не фиксируете результат. Закрыв вкладку, вы не можете вспомнить, что видели

3.6. Принципы фильтрации информации:
релевантность, качество, ограниченность

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

Вот три принципа.

Релевантность

Перед тем как открыть референс, спросите себя: «Это решает мою задачу?» Не «нравится ли мне это?» Не «круто ли это сделано?» Не «много ли лайков у этого проекта?» А именно: «Это решает мою задачу?» Если ответ «нет» — закрывайте вкладку, даже если проект очень красивый.

Качество

Используйте профессиональные источники. Хорошие источники: Behance, Awwwards, Dribbble, Typewolf.
Плохие источники: случайные подборки в соцсетях, Pinterest без фильтрации, «Топ-100 идей» на сомнительных сайтах.

Ограниченность

Не более 8 референсов на одно направление. Если вы собрали больше — значит, вы не фильтруете, а копите. Избыток референсов парализует принятие решений.

3.7. Как организовать референсы, чтобы они работали на вас

Плохая организация референсов:

Папка на рабочем столе под названием «референсы».
Внутри 300 файлов с именами «1.jpg», «2.jpg», «3.jpg»...
Вы не помните, что там, и никогда не возвращаетесь к этим изображениям.

Хорошая организация референсов:
Используйте один из инструментов: Miro, Notion, Pinterest Boards, Figma, PureRef.

Структура папки/доски:
Проект_Плакаты по охране окружающей среды
Идеи композиции (5–8 изображений)
Цветовые схемы (5–8 изображений)
Ссылки на макеты (5–8 изображений)

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

3.8. Практическое задание (для желающих)

Если вы хотите закрепить теорию на практике, выполните это задание.

Вопросы для самопроверки (8 вопросов)

1. Что такое думскроллинг?

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

3. Назовите 3 психологических механизма думскроллинга.

4. Чем полезный поиск референсов отличается от думскроллинга?

5. Что такое FOMO и как он мешает работе?

6. Как организовать референсы, чтобы они были полезны?

7. Сколько референсов рекомендуется на одну задачу?

8. Почему перегрузка информации разрушает визуальное мышление?

Практическое задание
Разделено на три части: Простое, Среднее и Сложное.

1. Простое (подходит для начинающих)

Предположим, вам нужно создать постер для музыкального фестиваля. В этом случае вам понадобятся следующие справочные материалы:
1. На следующих изображениях представлены плакаты музыкального фестиваля. Вам нужно выбрать 5 лучших, задав себе вопрос: «Решит ли это мою проблему?».
2. Для каждого отобранного референса напишите 2–3 предложения: почему он подходит и что вы берёте в свой проект.
3. Создайте 3 новые папки: «Справочник по композиции» / «Справочник по цветовой схеме» / «Справочник по макету», чтобы создать базовую классификацию.

2. Среднее

1. На Behance или Pinterest в течение 30 минут тщательно отберите не более 8 качественных примеров постеров на определенную тему, избегая бесцельного поиска.

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

Пример（Правая картинка）

1. Четкая визуальная иерархия.

2. Четкая типография.

3. Контрастные цвета подчеркивают основной объект.

4. Схожие сочетания элементов.

3. Сложное

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

1. Разделена на разделы: композиция, цветовая схема, типографика и атмосфера.

2. Каждый раздел содержит 5-8 тщательно отобранных источников.

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

РАЗДЕЛ 4. ЦИФРОВЫЕ ИНСТРУМЕНТЫ ДИЗАЙНА: ЧТО, КОГДА И ЗАЧЕМ ИСПОЛЬЗОВАТЬ

4.1. Полная классификация цифровых технологий
(по типу и назначению)

Классификация по целям обучения:

Обучение: Освоение основных операций (шаблоны Canva, уроки Figma).
Проектная работа: Создание конечных продуктов (Figma, Illustrator, Photoshop).
Аналитическая работа: Организация информации (Tableau, Miro, Notion).
Совместная работа: Командное общение и обратная связь (комментарии Figma, артборды Miro).
Творческая работа: Генерация идей и концепций (Midjourney, Firefly).

4.2. Генеративный ИИ (Midjourney, Adobe Firefly):
как работает, когда помогает, чем опасен

Что такое генеративный ИИ простыми словами?

Это программа, которая умеет рисовать по вашему словесному описанию. Вы пишете: «красный кот в космосе» — и ИИ выдаёт несколько картинок с красными котами в космосе.

Как это работает (очень упрощённо)?

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

Популярные инструменты ИИ для дизайнера (2025–2026):

Midjourney: Высокое качество изображения, художественный стиль, платная версия, только на английском языке.
Adobe Firefly: Бесплатная версия, интегрирована с Photoshop, немного более низкое качество изображения.
Runway: Может создавать видео/анимации, сложнее в освоении.

Когда ИИ полезен?

Мгновенное создание креативного направления.
Быстрое создание цветовых схем.
Показ клиентам первоначального визуального направления.
Преодоление творческих застоев.

Когда ИИ опасен?

Зависимость от ИИ: Сначала придумайте свои идеи, затем используйте ИИ в качестве помощника.
Однородность: Вручную отредактируйте результаты ИИ и добавьте свой личный стиль.
Авторские права: Используется для первоначального лицензирования.
Фирменное наименование: Четко обозначьте контент, сгенерированный ИИ.

4.3. Как правильно писать промпты для ИИ:
пошаговое руководство с примерами

Промпт — это текстовый запрос к нейросети. Чем точнее промпт, тем лучше результат.

Структура хорошего промпта:
[Что изображено] + [Стиль] + [Цветовая гамма] + [Композиция] + [Освещение] + [Детализация] + [Технические параметры]

Плохой промпт:
«плакат экология»

Хороший промпт:
«Poster about plastic pollution in the ocean, a sea turtle surrounded by plastic bags, dramatic lighting, dark blue and white color palette, minimal composition, high detail, editorial style»

Практический совет:
Начните с короткого промпта. Посмотрите, что получилось. Добавьте детали. Уточните. Итерациями добивайтесь нужного результата.

4.4. Figma: почему это главный инструмент дизайнера сегодня

Что такое Figma?

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

Почему Figma, а не Photoshop или Illustrator?

Совместимость с браузерами, установка не требуется.
Многопользовательская совместная работа в режиме реального времени.
Бесплатно для студентов.
Встроенное прототипное взаимодействие.
Средний уровень сложности в освоении.

Основные функции Figma, которые нужно знать новичку:

Холст: Задайте размер холста.
Основные фигуры: Прямоугольник, Круг, Линия.
Текст: Добавьте заголовок и описание.
Заливка: Задайте цвет фона.
Обводка: Цвет и толщина границы.
Слои: Организуйте элементы и стандартизируйте соглашения об именовании.

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

4.5. Canva: простой инструмент для быстрых задач

Что такое Canva?

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

Выбор сцены:

Публикации в социальных сетях и презентации: Canva — эффективный инструмент.
Быстрое создание изображений даже для начинающих: Canva удобна в использовании.
Профессиональные постеры и интерфейсы приложений: Figma подходит лучше.

Вывод:
Canva подходит для быстрых и простых задач, а Figma — для профессионального дизайна.

4.6. VR/AR-технологии: что это и зачем дизайнеру

VR (Virtual Reality) — виртуальная реальность. Вы надеваете шлем и полностью погружаетесь в компьютерный мир.

AR (Augmented Reality) — дополненная реальность. Вы смотрите на реальный мир через экран телефона, и на него накладываются компьютерные объекты (как в Pokemon Go).

Зачем дизайнеру VR/AR?

Обучение пространственной композиции: рассмотрение произведений в трехмерном пространстве.
Моделирование пространственного дизайна: виртуальный предварительный просмотр реальных сцен.
Дизайн интерфейсов будущего: интерактивные интерфейсы на очках.
Развитие пространственного мышления: переход от 2D к 3D мышлению.

Инструменты для начала работы:

Adobe Aero — бесплатный, простой, позволяет создавать AR-сцены без программирования.
SketchUp VR — для архитектурной визуализации.
Unity — сложный профессиональный инструмент (требует обучения)

4.7. Инструменты визуализации данных:
Tableau, Flourish, Datawrapper

Что такое визуализация данных?

Это превращение цифр, фактов, статистики в понятные графики, диаграммы, схемы.

4.8. Как выбрать правильный инструмент под свою задачу (таблица-помощник)

4.9. Принципы осознанной работы с инструментами

Запомните эти четыре принципа. Они помогут вам не утонуть в многообразии инструментов.

Инструмент служит идее, а не наоборот.
Не начинайте проект с вопроса «Какую кнопку нажать в Figma?» Начинайте с вопроса «Какую задачу решает этот дизайн?» Инструмент — это средство, а не цель.
Приоритет эффективности.
Выбирайте инструмент, который быстрее решает задачу. Не используйте Figma для поста в Instagram, если Canva сделает это за 5 минут. Не используйте Photoshop для простого макета, если Figma сделает это за 10 минут.
Соблюдение авторских прав.
Если вы используете чужую картинку, шрифт, иконку — проверьте, можно ли это использовать бесплатно. Ресурсы с бесплатными изображениями: Unsplash, Pexels, Pixabay. Ресурсы с бесплатными иконками: Noun Project, Flaticon.
Легковесное» освоение.
Вам не нужно знать ВСЁ о Figma или Illustrator. Достаточно знать 20% функций, которые вы используете в 80% случаев. Остальное гуглите по мере необходимости.

4.10. Практическое задание (для желающих)

Если вы хотите закрепить теорию на практике, выполните это задание.

Вопросы для самопроверки (9 вопросов)

1. Что такое генеративный ИИ и где он применяется в дизайне?

2. Почему Figma считается основным инструментом дизайнера?

3. В чём разница между Figma и Canva?

4. Что такое промпт и из каких частей он состоит?

5. Когда нельзя использовать результаты ИИ без проверки?

6. Что такое визуализация данных?

7. Для чего нужны VR/AR-технологии дизайнеру?

8. Как выбрать инструмент под задачу?

9. Назовите 4 принципа осознанной работы с инструментами？

Практическое задание
Разделено на три части: Простое, Среднее и Сложное.

1. Простое (подходит для начинающих)

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

Пример

2. Среднее

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

Пример

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

Пример

（Тема: Цветы）

3. Сложное

Полная демонстрация инструментария:

1. Креативные элементы, созданные с помощью ИИ.

2. Профессиональная ретушь и верстка плакатов с использованием программного обеспечения для дизайна (например, Figma).

Пример

РАЗДЕЛ 5. ПРОЕКТНАЯ ДЕЯТЕЛЬНОСТЬ:
ОТ ИДЕИ ДО ГОТОВОГО МАКЕТА

5.1. Полный цикл проектирования: 6 этапов

Проектирование в дизайне —

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

Почему этапы идут именно в таком порядке?

Потому что каждый следующий этап опирается на предыдущий. Нельзя искать визуальные решения, если вы не знаете задачу (этап 1) и не сформулировали идею (этап 2). Нельзя делать макет, если у вас нет идеи и вы не посмотрели референсы.

Этап 1:

Анализ задачи

Этап 2:

Формулировка идеи

Этап 3:

Поиск визуальных решений (референсы, ИИ)

Этап 4:

Композиционная организация (макет в Figma/Canva)

Этап 5:

Проверка и доработка

Этап 6:

Рефлексия

5.2. Этап 1: Анализ задачи —
что на самом деле нужно сделать

Что такое анализ задачи?

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

Цели проекта: Каковы цели проекта? (Реклама, информационные кампании, распространение информации, развлечение)
Целевая аудитория: Кто является целевой аудиторией? (Подростки, пожилые люди, работающие специалисты, родители)
Сценарии применения: Наружная реклама/Социальные сети/Печатные СМИ
Ограничения: Бюджет, время, требования к цвету/размеру
Истории успеха: Эффективные решения в этой области

Пример анализа задачи:
Задача: Сделать плакат для экологической акции по раздельному сбору мусора.
Цель: Убедить жителей района начать сортировать отходы.
Аудитория: Семьи с детьми, 30–45 лет.
Место использования: Подъезды жилых домов (размер А3), соцсети.

5.3. Этап 2: Формулировка идеи —
как упаковать мысль в одно предложение

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

Как проверить, хорошая ли у вас идея:

1. Скажите идею соседу или другу. Он понял?
Если да — хорошо.

2. Можно ли проверить, выполнена идея или нет?
Если можно — хорошо.

3. Связана ли идея с задачей из этапа 1?
Если да — хорошо.

5.4. Этап 3: Поиск решений —
референсы и ИИ без копирования

Как искать референсы без думскроллинга:

1. Сформулируйте конкретный запрос (не «интерфейсы», а «интерфейс для доставки еды, тёмная тема»).
2. Выделите 20–30 минут, не больше.
3. Отберите не более 8 референсов.
4. Сохраните их с подписями, почему каждый здесь.

Как использовать ИИ на этом этапе:

1. Сформулируйте промпт, отталкиваясь от вашей идеи.
2. Сгенерируйте 3–5 вариантов.
3. Не берите результат ИИ как готовый дизайн — берите как идею, направление.
4. Задайте себе вопрос: «Что в этом варианте работает для моей задачи?».

Как не копировать референсы:

1. Не копируйте шрифты, копируйте иерархию макета.
2. Не копируйте цвета, копируйте логику контраста.
3. Не копируйте элементы, копируйте принципы группировки.
4. Не копируйте макет страницы, копируйте идеи композиции.

5.5. Этап 4: Композиционная организация — собираем макет

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

Что делать на этом этапе:

1. Откройте Figma (или Canva, если проект простой).
2. Создайте фрейм нужного размера.
3. Разместите главные элементы (заголовок, изображение, текст) в соответствии с визуальной иерархией.
4. Примените принципы гештальта: группируйте связанное, используйте сходство для одинаковых типов элементов.
5. Проверьте контраст и читаемость текста.
Что не нужно делать на этом этапе:

1. Не зацикливайтесь на идеальном шрифте (корректировки позже).
2. Не увязайте в деталях (сначала постройте структуру).
3. Не меняйте цвета постоянно (сначала определите 2-3 основных цвета).

5.6. Этап 5: Проверка и доработка —
как увидеть свои ошибки

Почему мы не видим свои ошибки?

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

Как проверить свой дизайн (3 простых способа):
1. Тест на прищуривание: определяет четкость иерархических уровней.
2. Тест на расстоянии двух метров: определяет читаемость текста и графики на расстоянии.
3. Другой тест: демонстрирует быстрое понимание за 5 секунд, не требующее объяснений.

Что делать после проверки:
1. Если что-то непонятно — упростите.
2. Если текст не читается — увеличьте контраст или размер.
3. Если глаз блуждает — усильте главный элемент (сделайте его крупнее, ярче, контрастнее).

5.7. Этап 6: Рефлексия — почему без неё вы не научитесь

Что такое рефлексия в дизайне?

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

Почему рефлексия важнее, чем сам проект?

Потому что проект вы сделаете один раз. А навык, который вы получите через рефлексию, останется с вами навсегда и пригодится в следующем проекте.

Структура рефлексии (300–500 слов):

1. Основные моменты:
Качественно выполненные части, которыми можно гордиться.

2. Недостатки:
Некачественно выполненные части и области для улучшения.

3. Причины:
Недостаток времени / Непонимание требований / Недостаточное знание инструментов?

4. Улучшения:
Конкретные корректировки для следующей итерации (шрифт, контраст, рабочий процесс).

5. Эффективные инструменты:
Figma/AI / Какие ссылки действительно полезны?

5.8. Типичные ошибки начинающих дизайнеров и как их избежать

5.9. Практическое задание (для желающих)

Если вы хотите закрепить теорию на практике, выполните это задание.

Вопросы для самопроверки (9 вопросов)

1. Из каких 6 этапов состоит полный цикл дизайн-проектирования?

2. Зачем нужен анализ задачи перед началом работы?

3. Как искать референсы, чтобы не копировать?

4. Что такое композиционная организация макета?

5. Как проверить свой дизайн на ошибки?

6. Зачем нужна рефлексия по окончанию проекта?

7. Назовите 3 типичные ошибки новичков？

8. Почему нельзя начинать работу с инструмента, а не с идеи?

9. Что означает «принцип, а не форма» при работе с референсами?

Практическое задание
Разделено на три части: Простое, Среднее и Сложное.

1. Простое (подходит для начинающих)

Создайте плакат:

1. Тема: Плакат музыкальной вечеринки.

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

3. Проверьте, понятны ли основные элементы и текст композиции.

Пример

2. Среднее

Создайте плакат:
1. Используйте программу для дизайна, чтобы объединить простые графические элементы в креативные формы.
2. Добавьте шрифты.
3. Проверьте, понятны ли основные элементы и текст композиции.
4. Объясните, почему используется эта структурная схема.

Пример

3. Сложное

Создайте плакат:
1. Тема: Плакат по охране окружающей среды.
2. Найдите справочные материалы. У вас 30 минут, и вы можете найти только 5-8 справочных изображений.
3. Найдите необходимые элементы и добавьте их на плакат.
4. Добавьте шрифты.
5. Убедитесь, что основные элементы и текст вашей работы хорошо видны.
6. Объясните, почему вы использовали именно эту структурную схему.
7. Структура рефлексии (300-500 слов).

Пример

РАЗДЕЛ 6. СПРАВОЧНЫЕ МАТЕРИАЛЫ

6.1. Глоссарий (короткие определения всех терминов)

1. Визуальное мышление：

Способность решать задачи с помощью зрительных образов.

2. Когнитивная нагрузка：

Количество умственных усилий, требуемых для обработки информации.

3. Визуальная иерархия：

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

4. Композиция：

Расположение элементов в пространстве макета.

5. Контраст：

Разница между элементами (например, между текстом и фоном).

6. Типографика：

Искусство оформления текста (шрифты, размеры, интервалы).

7. Гештальт：

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

8. Думскроллинг：

Неконтролируемое, бесцельное пролистывание контента.

9. FOMO：

Страх упустить что-то важное (Fear Of Missing Out).

10. Промпт：

Текстовый запрос к генеративному ИИ.

11. Генеративный ИИ：

Программа, создающая изображения по текстовому описанию.

12. Прототип：

Интерактивная модель дизайна. (можно кликать, переходить по страницам）

13. Рефлексия：

Анализ своей работы: что получилось, что нет, почему.

6.2. Список литературы

Книги по теории дизайна:

1. Tufte E. R. The Visual Display of Quantitative Information. — Cheshire: Graphics Press, 2015. URL.:

https://kyl.neocities.org/books/%5BTEC%20TUF%5D%20the%20visual%20display%20of%20quantitative%20information.pdf (дата обращения 03.05.2026)

2. Lidwell W. Holden K. Butler J. Universal Principles of Design. — New York: Rockefeller Center Press, 2016. URL.:

https://arc345ergofactors.wordpress.com/wp-content/uploads/2016/03/william-lidwell-kritina-holden-jill-butler-universal-principles-of-design-rockport-publishers-2003.pdf (дата обращения 03.05.2026)

3. Norman D. The Design of Everyday Things. — New York: Basic Books, 2013. URL.:

https://ia902800.us.archive.org/3/items/thedesignofeverydaythingsbydonnorman/The%20Design%20of%20Everyday%20Things%20by%20Don%20Norman.pdf (дата обращения 03.05.2026)

4. Ware C. Information Visualization: Perception for Design. — Waltham: Morgan Kaufmann, 2019. URL.:

https://www.researchgate.net/publication/224285723_Information_Visualization_Perception_for_Design_Second_Edition (дата обращения 03.05.2026)

5. Mayer R. E. Multimedia Learning. — New York: Cambridge University Press, 2014. URL.:

jsu.edu/o nline/faculty/MULTIMEDIA%20LEARNING%20by%20Richard%20E.%20Mayer.pdf (дата обращения 03.05.2026)

Статьи по думскроллингу и цифровой среде

(2021–2024):

1. Buchanan E. et al. Brief exposure to social media during COVID‑19: Doom‑scrolling has negative emotional consequences, 2021. URL.:

journals.plos.org/plosone/article?id=10.1371/journal.pone.0257728 (дата обращения 03.05.2026)

2. Sharma B. Lee S., Johnson B. K. The Dark at the End of the Tunnel: Doomscrolling on Social Media Newsfeeds, 2022. URL.:

https://www.researchgate.net/publication/357717677_The_dark_at_the_end_of_the_tunnel_Doomscrolling_on_social_media_newsfeeds (дата обращения 03.05.2026)

3. Ytre‑Arne B. Moe H. Doomscrolling, Monitoring and Avoiding: News Use in COVID-19 Pandemic Lockdown, 2021. URL.:

https://www.tandfonline.com/doi/full/10.1080/1461670X.2021.1952475#abstract (дата обращения 03.05.2026)

4. Bartlett K. A. Generative Artificial Intelligence in Product/Design Education, 2024. URL.:

https://reunir.unir.net/bitstream/handle/123456789/16205/Generative%20Artificial%20Intelligence%20in%20Product%20Design%20Education.pdf?sequence=1&isAllowed=y (дата обращения 03.05.2026)

5. Hooshyar D. et al. The effectiveness of personalized technology‑enhanced learning in Higher Education, 2024. URL.:

https://www.researchgate.net/profile/Xiaojing-Weng-2/publication/384368639_The_Effectiveness_of_Personalized_Technology-Enhanced_Learning_in_Higher_Education_A_Meta-Analysis_with_Association_Rule_Mining/links/66fa602c869f1104c6bcc9ad/The-Effectiveness-of-Personalized-Technology-Enhanced-Learning-in-Higher-Education-A-Meta-Analysis-with-Association-Rule-Mining.pdf (дата обращения 03.05.2026)

6. Al‑Ansi A. M. Analyzing augmented reality (AR) and virtual reality (VR) recent development in education, 2023. URL.:

https://www.sciencedirect.com/science/article/pii/S2590291123001377 (дата обращения 03.05.2026)

Российские издания:

1. Панкина М. В. ОСНОВЫ МЕТОДОЛОГИИ ДИЗАЙН-ПРОЕКТИРОВАНИЯ. — Москва : Издательство Московского государственного университета дизайна и технологии (МГУДТ), 2021. URL.:

https://elar.urfu.ru/handle/10995/93286 (дата обращения 03.05.2026)

2. Рогозина И. В. МОДЕЛИ ФОРМИРОВАНИЯ ВИЗУАЛЬНО-ВЕРБАЛЬНЫХ ТРОПОВ ПОЛИКОДОВОГО МЕДИАТЕКСТА — Москва: Инфра‑М, 2017. URL.:

https://cyberleninka.ru/article/n/modeli-formirovaniya-vizualno-verbalnyh-tropov-polikodovogo-mediateksta/viewer (дата обращения 03.05.2026)

3. Панкина М. В. Косыгина. КОНЦЕПЦИИ В СОВРЕМЕННОМ ДИЗАЙНЕ. — Москва : Издательство МГУДТ, 2022. URL.:

https://www.researchgate.net/profile/Sahnoz-Samieva/publication/387295180_Sbornik_2022/links/67667f46fb9aff6eaae63181/Sbornik-2022.pdf (дата обращения 03.05.2026)

4. Кудряшов, М. А. Перспективы интеграции генеративного искусственного интеллекта в профессиональную деятельность дизайнера. — Текст : непосредственный // Молодой ученый, 2025. URL.:

https://moluch.ru/archive/571/125338 (дата обращения 03.05.2026)

6.3. Ссылки на визуальные ресурсы и источники вдохновения

6.4. Чек-лист для самопроверки проекта

Перед тем как сдать проект, проверьте себя по этому списку.

Вопрос

1. Я проанализировал задачу (цель, аудитория, контекст)?
2. Я сформулировал идею в одном предложении?
3. Я потратил на поиск референсов не больше 30 минут?
4. Я отобрал не более 8 референсов?
5. Я использовал ИИ для генерации идей?
6. Я записал промпты, которые использовал?
7. В моём дизайне есть чёткая визуальная иерархия
(понятно, на что смотреть сначала)?
8. Текст хорошо читается (достаточный контраст, подходящий размер)?
9. Я использовал не больше 2–3 шрифтов?
10. Я проверил дизайн способом «прищурь глаза» и
«отойди на 2 метра»?
11. Я написал рефлексию (что получилось, что нет, почему)?
12. Я указал источники референсов (если они не мои)?
Если на все вопросы вы ответили «Да» — проект готов.

Большое спасибо за просмотр!