Теория Дизайна. 1 Введение

1. Заголовок Lorem Ipsum
«ТЕОРИЯ ДИЗАЙНА»
1.Введение

2. 1. Введение
Введение. Обзор литературы и сайтов. Общее
понятие «Теории дизайна».
Зрительное восприятие. Восприятие
изображений. Модели зрительного
восприятия и структура изображения.
Стереотипы.
Законы зрительного восприятия.
Закон соседства. Закон замкнутости.
Закон тождества. Закон непрерывности.
Закон первичной формы.
Двойственность восприятия или
оптические иллюзии. Меняющиеся или
скрытые изображения.
Художники и особенности зрительного
восприятия.
Стиль, среда. Элементы стиля, способы
отделения элемента от среды.

3. Введение. Обзор литературы и сайтов.
Общее понятие «Теории дизайна».
• (Иоханнес Иттен) «Искусство цвета»
• Кради как художник.
• 10 уроков творческого самовыражения (Клеон
Остин)
• Покажи свою работу (Клеон Остин)
• Л. Н. Миронова. «Цветоведение».
• 3. О. Л. Голубева. «Основы композиции»
• https://infogra.ru/books
• https://www.designspiration.com/save/18291173254
39/
• http://www.aisleone.net/
• http://window.edu.ru/resource/997/40997/files/dvgu
118.pdf
• https://mariaceciliavillegas.com/graphic-design-
t/jdhivl1h7inthmvo9cleoq8wt3wu40
• https://docs.google.com/viewer?a=v&pid=sites&srci
d=dGFtYWtpLmFjLm56fGdyYXBoaWNzfGd4OjE3
NTI2ODU4MzhmOGM4N2M
• https://www.slideshare.net/EngineeroBono/principl
es-of-design-graphic-design-theory
• https://docs.google.com/viewer?a=v&pid=sites&srci
d=dGFtYWtpLmFjLm56fGdyYXBoaWNzfGd4OjE3
NTI2ODU4MzhmOGM4N2M
• https://www.youtube.com/channel/UCupxTOgEXpw
U4GW4Irw9oeQ
• https://www.youtube.com/watch?v=QcuInap1lQ4
• https://www.youtube.com/watch?v=NH1TLyiJVHU
• https://www.youtube.com/watch?v=-jKiS01Zmgo

4. Теория дизайна - техническая эстетика. Предметом дизайнерской деятельности (тем, на
что она направлена) является создание гармоничной, содержательной и выразительной формы
объекта, в котором заключается целостное значение его потребительской ценности.
Цель курса:
 • Изучить основные законы дизайна;
 • Научиться ощущать правильное
композиции и предотвратить
типичные ошибки в построении
композиций при разработке макетов;
 • Ознакомиться с колористкой и
предотвратить типичные ошибки в
подборе цветов при разработке
макетов;
 • Изучить самые распространённые
стили дизайна;
 • Научиться анализировать
построение макетов и
идентифицировать приёмы,
использованные в построении.
Дизайн - от английского «design» - проект, план,
рисунок - термин, обозначающий разновидность
художественно-проектной деятельности, охватывающей
создание предметной среды (машин, вещей, интерьеров) и
основанной на принципах сочетания удобства,
экономичности и красоты.
Роль графического дизайна заключается в том что бы быть
катализатором, который подталкивает зрителя к новому
взгляду, восприятию и мышлению о мире.

7. Суть дизайна не в процессе а в результате!
Дизайнер должен четко понимать что он
делает и для кого он делает!
Объект дизайна – то что проектируется.
Субъект дизайна – для кого проектируется.

8. Зрительное восприятие. Восприятие изображений.
Зрительное восприятие — это совокупность сенсорных
и психических процессов построения образа окружающего мира.
Основная характеристика процесса восприятия – это
немедленное осознание формы, схватывание наиболее характерных ее черт
и закономерностей благодаря накопленному опыту, наличию в памяти
эталонов и познавательных карт. Время, требующееся на узнавание объекта,
очень мало (около 1/100 секунды) и зависит от того, насколько этот образ
знаком воспринимающему субъекту и что конкретно он ожидает увидеть. Мы
не пытаемся разглядеть мельчайшие детали воспринимаемых форм и
объектов, а выбираем для восприятия ровно столько, сколько нужно для
понимания того, что мы видим в целом. Степень обобщенности восприятия
зависит от того, насколько правдоподобно выглядит определенный объект
ЭТАПЫ
ВОСПРИЯТИЯ
1.Обнаружения объекта
2.Различие отдельных
признаков
3. Выделение
информативного
содержания
4.Формирование образа

9. ОСНОВЫ ВОСПРИЯТИЯ
Зрительное восприятие -
психический процесс, обеспечивающий
формирование у человека субъективной
картины мира.
Зрительное восприятие
включает в себя
следующие процессы:
1. Восприятие цвета
2. Восприятие формы
3. Восприятие пространства
4. Восприятие движения

10. ЧЕЛОВЕК ПРЕДМЕТ СВЕТ
Восприятие цвета
Цвет — это ощущение, которое рождается у человека при попадании на сетчатку
глаза световых волн определенной длины. Для существования цвета как такового
необходимо наличие и взаимодействие трех факторов:
Известен также эффект Пуркинье, когда в условиях яркого света мы воспринимаем цвета иначе,
чем в сумерках. Красные объекты в вечернее время будут казаться нам темнее зеленых, а синие,
напротив, более светлыми.

11. Полосы Маха (Mach Bands)
Ложная тень падает на поверхность, это иллюзия?
Размещение оттенков одного цвета, смежных друг с другом, было
общепринятой тенденцией в эпоху плоского дизайна. Присмотревшись,
вы можете заметить ложную тень, появляющуюся между краями каждого
контрастного оттенка. Эта иллюзия известна как полосы Маха. Никакие
тени не были добавлены к изображению, это просто особенность
восприятия наших глаз!

12. Решётка Геринга (1870)
На пересечениях всех белых полос, за исключением
того пересечения, на котором вы фиксируете взгляд в
данный момент, видны маленькие серые пятна.
Другой вариант решётки Геринга.
Видите на пересечении черных линий маленькие красные пятна?

13. Иллюзия одновременного контраста
(Simultaneous Contrast Illusion)
Оба обособленных квадрата отражают
одинаковое количество света? Хм …
Размещение двух объектов одного цвета на фонах с разным контрастом может привести
к тому, что оба объекта будут выглядеть так, как если бы они были разного цвета. Это
явление известно, как иллюзия одновременного контраста. Контраст — это король в мире
визуального дизайна, и некоторые люди могут по-разному ощущать этот эффект.
Цвет текста абсолютно одинаковый с обеих сторон, но вам так не кажется
К сожалению, нет единой теории, почему возникает эта иллюзия, но есть много
исследований, которые выдвигают предположение. Латеральное торможение,
ответственное за сетки Германа и полосы Маха, одна из причин возникновения этой
иллюзии.

14. ЗАКОНЫ
ЗРИТЕЛЬНОГО
ВОСПРИЯТИЯ
Закон соседства(Близости)
Закон замкнутости.
Закон тождества(Сходства)
Закон непрерывности
Закон первичной формы

15. ЗАКОН БЛИЗОСТИ /соседства
чем ближе объекты друг к другу в зрительном поле, тем с большей
вероятностью они организуются в единые, целостные
образы(фигуры).
Принцип близости подобен принципу общих областей. Если элементы расположены близко друг
к другу, то они рассматриваются как часть группы, а не в качестве отдельных элементов. Это
особенно верно, когда элементы в группе расположены ближе друг к другу, чем к любым
элементам вовне.
Объекты должны быть схожи по каким-либо признакам (предположим, цвет, размер, форма),
чтобы их можно было расположить в пространстве поблизости друг от друга и они
воспринимались как взаимосвязанные.
Принцип близости: объекты, расположенные рядом,
воспринимаются как единая логическая группа. Несмотря на
то что, букву U в логотипе Unilever, составляют разные
фигуры, человеческий глаз в первую очередь распознает
целостную фигуру буквы U.

16. Близость (Proximity)
«Объекты,
расположенные ближе
друг к другу,
воспринимаются как
взаимосвязанные в
отличие от тех, что
расположены дальше
друг от друга».
Мы видим, как
круги и
треугольники
образуют четыре
горизонтальных
ряда
(а не пять
вертикальных)
ЗАКОН СОСЕДСТВА

18. ЗАМКНУТОСТЬ (CLOSURE, ЗАВЕРШЕНИЕ)
«При взгляде на сложно расположенные элементы мы стремимся увидеть в них
простую узнаваемую форму».
При завершении мы объединяем части, чтобы увидеть простое целое. Наш мозг
дополняет недостающую информацию, чтобы сформировать законченную
фигуру.
Ключ к использованию принципа замкнутости — предоставить пользователю
достаточно информации, чтобы он мог «дорисовать» в своем восприятии
недостающие элементы. Если информации мало, то элементы будут
рассматриваться как отдельные объекты, а не части целого; если ее слишком
много, то нет никакой необходимости в том, чтобы в процессе восприятия
произошло завершение.
Мы видим
один круг, а
не десять
кружков
•Принцип замкнутости: форма
воспринимается целой, даже если не все
линии замкнуты. В логотипе формы и
пустое пространство образуют силуэты
девушек, при этом только некоторые
элементы изображения имеют полностью
замкнутую форму.

20. ЗАКОН СХОДСТВА/ ТОЖДЕСТВА
в фигуру объединяются элементы, сходные по форме, цвету, размеру, текстуре и пр. Тот факт, что
крест (принимается мгновенно (фигура) и продолжает видеться неизменно, иллюстрирует действие
того фактора, что крест состоит из качественно одинаковых элементов.
Сходство (Similarity)
«Элементы, имеющие сходные общие
характеристики, воспринимаются как
взаимосвязанные — в отличие от
элементов, не обладающих данными
характеристиками».
Любое количество характеристик
объектов может быть сходным: цвет,
форма, размер, текстуры и т. д. Когда
пользователь видит эти сходные характеристики, он
воспринимает элементы как взаимосвязанные в силу
их общих характеристик.

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

22. Принцип непрерывности:
зрительное восприятие
естественным образом движется от
одного объекта к другому. Логотип
Олимпийских игр – пример
визуала, в котором элементы
являются продолжением друг
друга.
ЗАКОН НЕПРЕРЫВНОСТИ. Элементы, расположенные на линии
или кривой, воспринимаются как более связанные, чем элементы, не расположенные на
линии или кривой. Люди найдут линии или контуры и продолжат их за пределами своих
конечных точек, если элементы шаблона устанавливают подразумеваемое направление.
Простой пример — фотография извилистой дороги, которая выходит за пределы рамок
изображения. Это инстинкт следования за рекой, тропой или забором ярко выражен в
дизайне сайтов и интерфейсов.

23. ЗАКОН ПЕРВИЧНОЙ ФОРМЫ
Иллюзии кажущихся, несуществующих фигур. Они связаны с тем,
что на фоне разных объектов и фигур создается впечатление
наличия несуществующих фигур. Классический пример -
треугольник Каниша. Равностороннего белого треугольника на
самом деле нет. Он только кажется.

25. ДВОЙСТВЕННОСТЬ ВОСПРИЯТИЯ ИЛИ ОПТИЧЕСКИЕ ИЛЛЮЗИИ.
Меняющиеся или скрытые изображения.
ОПТИЧЕСКИЕ ИЛЛЮЗИИ - это ошибки в
зрительном восприятии, неверная оценка длины отрезков,
величины углов или цвета изображенного объекта. Причины
таких ошибок кроются и в особенностях физиологии зрения, и в
психологии восприятия. Иллюзии часто приводят к совершенно
неверным количественным оценкам реальных геометрических
величин. Оказывается, что можно ошибиться на 25 % и больше,
если глазомерные оценки не проверить линейкой.
Искажения геометрии фигур.
Они связаны с тем, что
параллельные прямые кажутся
не параллельными, а ровные
геометрические фигуры
выглядят кривыми.

26. Иллюзия кинескопа. Какая из красных
линий длиннее? Кажется, что правая.
Нет, они одной длины
Иллюзия изогнутых квадратов. Узор как бы изгибается во
внутрь. На самом деле квадраты ровные.

27. Двойственные восприятия Иллюзия Ястрова

28. Японский график
Шигео Фукуда
Художники и особенности зрительного восприятия

29. ЗРИТЕЛЬНЫЕ ИЛЛЮЗИИ
(лат. illusere – обманывать) – искажение зрительного восприятия частных признаков тех
или иных предметов. Обусловлены, прежде всего, действием механизмов,
обеспечивающих константность видимых размеров и форм объектов.
Морис Эшер
Ангелы и демоны

30. Виктор Вазарелли
Силуэты

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

33. Иллюзия
пространства
на плоскости.
https://www.erikjo.com/

34. Иллюзия объёмности, созданная с
помощью трёхмерной графики, широко
используется в архитектуре и
строительстве - "живые" стены, полы,
"движущиеся" фасады существенно
разнообразят квартиры и экстерьеры
зданий.
https://www.erikjo.com/

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

36. СТИЛЬ,
СРЕДА.
ЭЛЕМЕНТЫ
СТИЛЯ,
Способы отделения элемента от среды.

37. 1. АКЦЕНТИРУЙТЕ ВНИМАНИЕ НА ГЛАВНОМ
Это дизайн Мэттью Метца для ритейлера «Nordstrom», поэтому самым
важным элементом здесь является модель и ее одежда. Так, модель поместили
в центр, а размещенный особым образом текст и отсутствие цветовой палитры
помогают сфокусироваться на ее лице и одежде. И затем указатели
привлекают внимание к информации, приведенной несколько ниже.
На постере Шоны Линн Панцужен в центре внимания
также находится сидящий мужчина. Фокус
осуществляется с помощью центрального расположения
фотографии, где вокруг человека используется графика,
привлекающая к нему внимание.
В первую очередь
привлекает цифра 5 (точка
фокуса выбрана
правильно, ведь она
информирует зрителя о
скидке): она большого
размера, написана самым
жирным шрифтом и она
единственная выделена
тонкой внутренней
линией.
Выбирая точку фокусировки, помните, что главная цель любого дизайна —
это коммуникация. Пытаетесь ли вы поделиться какой-то идеей,
информацией, или просто чувствами или эмоциями, ваш дизайн будет
передавать определенную историю, поэтому необходимо выбрать такой фокус,
который поможет сделать это максимально эффективно

38. 2. НАПРАВЛЯЙТЕ ВЗГЛЯД ЧИТАТЕЛЯ С ПОМОЩЬЮ УКАЗАТЕЛЕЙ
Paper and Parcel.
Дизайнер решил
использовать
схематичные
указатели для
передачи
информации
в интерактивном
и необычном виде.
Постер от Design By Day, где используются
четкие указательные линии, которые
сначала направляют вас к основному
элементу (названию), а затем к разным
сегментам текста.
На постере 1 Trick Pony, правая рука мужчины
используется для «переадресации» взгляда
от изображения к логотипу, и затем к нижней части
изображения. Таким образом, формы изображения могут
послужить указателями.
Точка фокуса—это стартовая точка взаимодействия с дизайном, а далее взгляд должен плавно переходить к изучению всех остальных элементов
дизайна. Это обычно называется иерархией: элементы дизайна организованы и расположены на странице таким образом, что поток внимания зрителя
направляется по определенному “пути” (от самого важного—точки фокуса—к менее важным элементам). Возможно поток внимания должен идти
сверху вниз? или по диагонали? или от одного раздела к другому?
На иллюстрации
повторяющиеся
элементы
ненавязчиво
направляют наш
взгляд и создают
композицию.
Горизонтальные
линии повторяются в
облаках, и в холмах
на заднем плане, и в
воде; а
вертикальные—в
пальмах, на доске
для серфинга и на
купальнике
девушки. Эти
повторяющиеся
паттерны создают
глубину, движение и
ощущение
согласованности.

39. 3. СОБЛЮДАЙТЕ БАЛАНС
МЕЖДУ ЭЛЕМЕНТАМИ
Симметрия—один из самых главных
помощников на пути создания
сбалансированного дизайна. Симметричный
дизайн—это дизайн, сбалансированный
относительно центральной оси
горизонтально, вертикально или радиально
(то есть по кругу от точки фокуса). Мы на
подсознательном уровне считаем симметрию
более привлекательной, но кроме внешнего
аспекта сбалансированный дизайн имеет и
практическое назначение: он помогает
создать иерархию и расставить приоритеты.
Пример симметричного баланса.
В приглашении на свадьбу
Дженнифер Уик использует
симметричную композицию, где текст
и графика размещены зеркально.
Благодаря симметрии приглашение
смотрится элегантным, аккуратным
и сбалансированным.
Вот пример удачного использования асимметричного баланса.
В своем постере Munchy Potato целенаправленно распределил
окружности разного размера по разным областям
пространства, добившись таким образом асимметрии.
На этом логотипе мы видим два типа
симметрии. Если провести вертикальную
линию по центру, становится очевидно, что
лейаут правой и левой частей практически
идентичен—они являются зеркальными
отражениями друг друга. Кроме того, лучи
солнца в центральном элементе создают
радиальную симметрию. В сочетании
получается идеально сбалансированный,
визуально привлекательных дизайн.

40. 4.УВЕЛИЧЬТЕ (ИЛИ УМЕНЬШИТЕ)
КОНТРАСТ
Контраст — это невероятно полезный помощник, как для
выделения каких-то элементов вашего дизайна, так и для
их скрытия. Усиливая контраст, или используя
высококонтрастную палитру, вы можете привлечь внимание
к определенному объекту. В то же время, уменьшив контраст,
вы можете добиться эффекта прозрачности для каких-то
элементов, сделав их менее заметными.
В дизайне упаковки контраст
использован несколькими
способами. Во-первых, здесь
контрастные цвета: черные акценты
выглядят более решительно в
сочетании с ярко-желтым и
оранжевым на белом фоне. Во-
вторых, форма: округлые,
органичные формы на картинке
отлично контрастируют с прямыми,
геометрическими формами букв (но
при этом поддерживают круглую
форму самой упаковки).
Мелани Скотт Винсент в своем постере
помещает желтую скрепку на желтый фон, тем
самым сводя контраст между задником
и объектом к минимуму. В обычном случае
вам бы посоветовали так не делать, но здесь
такой прием лишь усиливает эффект названия
мероприятия «Каждый день проходим мимо».
В приведенном примере Теболт
Джулиан использует
высококонтрастные цвета для
своеобразного обрамления
и выделения центральных
изображений, а также полужирный
шрифт для привлечения внимания
к ключевой информации. Однако
он также прибегает к более легкому
и тонкому шрифту, благодаря
которому другие элементы
становятся вторичными.

41. 5.НЕ ЗАБЫВАЙТЕ О БЕЛОМ ПРОСТРАНСТВЕ
Когда белое пространство используется целенаправленно, оно помогает
повысить четкость и ясность вашего дизайна: когда более нагруженные
и замысловатые части композиции сбалансированы белым
пространством, ваш дизайн начинает дышать.
Дизайн Cocorrina. Белое пространство помогает
достигнуть баланса между картинкой, текстурой
и текстом, что придает дизайну изысканность и чистоту.
Уменьшите масштаб графических
элементов. Благодаря этому,
вы сможете создать больше белого
пространства вокруг центральных
элементов, и при этом не выйдете
за рамки изначального дизайна.
Дизайн открытки с кулинарным
рецептом от Serafini Creative, где
основные элементы
целенаправленно уменьшены для
создания прекрасного обрамления
из белого пространства.
В качестве примера можно
привести дизайн веб-сайта
от Creative Web Themes, где для
презентации товара используется
одно изображение, заголовок
с полужирным начертанием, две
небольшие линии текста
и ссылка на дальнейшую
информацию. Благодаря такому
простому плану и большому
количеству белого пространства
каждый элемент имеет
собственную территорию и может
«дышать», что позволяет дизайну
выглядеть опрятно и оказывать
должный эффект на зрителя.

42. 6.ГАРМОНИЧНА ЛИ ЦВЕТОВАЯ СХЕМА?
Цвет оказывает на нас глубокое подсознательное влияние—
эмоциональное, психологическое, культурное—и играет огромную
роль в нашем восприятии того или иного дизайна. Конечно, важно
учитывать, какое настроение привносит в дизайн каждый цвет:
желтый, цвет морской волны и коралловый несут энергию лета, а
черный и золотой делают дизайн утонченным. Однако кроме
настроения каждого отдельного цвета необходимо также продумать
цветовую схему в целом.
В дизайне этого логотипа используется много цветов, но больше всех
выделяются оттенки оранжевого сверху, синий баннер посередине и
оттенки фиолетового снизу. Это схема из расщепленных дополняющих
цветов (split complementary colors): выберите основной цвет, а потом еще
два, которые находятся по бокам от дополняющего его цвета. В данном
случае это желто-оранжевый, синий и фиолетовый. У такой цветовой
схемы достаточно сильный визуальный контраст, но зато сочетания цветов
менее резкие, чем у дополняющих (представьте: красный и зеленый,
фиолетовый и желтый).

43. https://say-hi.me/specials/quiz/test-dlya-dizajnerov.html
Тест: Хорошо ли ты знаешь графический дизайн?
https://www.playbuzz.com/stogunoc10/a-11-24-2015-9-18-39-am