Основы дизайна PDF

Основы дизайна Курс «Веб-дизайн» Визуальные отношения Различие в цвете подразумевает, что перед нами два различных объекта (или две различные части одно объекта) Различие в масштабах подразумевает, что один объект расположен дальше от нас, чем другой. 2 Визуальные отношения Несмотря на то, что фигур...

Основы дизайна Курс «Веб-дизайн» Визуальные отношения Различие в цвете подразумевает, что перед нами два различных объекта (или две различные части одно объекта) Различие в масштабах подразумевает, что один объект расположен дальше от нас, чем другой. 2 Визуальные отношения Несмотря на то, что фигуры накладываются друг на друга мы с легкостью можем различить, что здесь четыре круга и один квадрат. 3 Визуальные отношения Когда мы наблюдаем лист травы, окружающие объекты, имеющие такой же цвет, форму, размер и положение, группируются вместе, создавая общее понятие лужайки. При этом мы не сравниваем все травинки друг с другом. После того, как наш мозг проанализирует отношения между объектами, мы собираем все части образа воедино и понимаем, что мы видим. 4 Принципы восприятия Схожесть Близость Смежность (непрерывность) Замкнутость 5 Принципы восприятия: схожесть Мы склонны воспринимать похожие друг на друга объекты, как формирующие единую группу. 6 Принципы восприятия: близость Мы склонны воспринимать близкие друг с другом объекты, как формирующие единую группу. 7 Близость & схожесть Относительная близость объектов играет большую роль, нежели цвет и схожая форма. 8 Принципы восприятия: смежность Мы в большей степени склонны воспринимать в качестве единых объектов формы, у которых характеристики (цвет, фактура и т.п.) меняются плавно или непрерывны, чем формы с резкими переходами и разрывами. 9 Принципы восприятия: смежность Мы в большей степени склонны воспринимать в качестве единых объектов формы, у которых характеристики (цвет, фактура и т.п.) меняются плавно или непрерывны, чем формы с резкими переходами и разрывами. 10 Принципы восприятия: смежность Человеческий глаз, во время движения от объекта к объекту, объединяет в группу элементы расположенные на одной линии. Зритель воспринимает на рисунке прямую и кривую линию, а не изогнутую черную линию или изогнутую красную. 11 Принципы восприятия: замкнутость Мы склонны «замыкать» или заполнять объекты, которые не являются на самом деле замкнутыми и полными. 12 Принципы восприятия: замкнутость Мы склонны «замыкать» или заполнять объекты, которые не являются на самом деле замкнутыми и полными. 13 Группировка в веб-дизайне 14 Композиция Композиция (от лат. composito – составление, связывание) – связывание отдельных элементов в единое целое. 1. 2. 3. 4. Параметры элементов Размер Форма Цвет Текстура Законы (принципы) 1. 2. 3. 4. 5. Единство Равновесие Контраст Динамика Нюансировка 15 Размер и пропорции В дизайне размер относителен. Понятие размера элемента сводится к «заметности» элемента. Д. Кирсанов: Современный дизайнер выбирает пропорции почти исключительно «на глазок». Чем больше предмет, тем БОЛЬШЕ внимания он привлекает. 16 Размер и пропорции Пропорция – соотношение размеров элементов или составных частей одного элемента. Принцип ограничения «сверху»: соотношение размеров значимых элементов не должно превышать некоторой разумной величины. 17 Золотое сечение Формула золотого сечения Этот коэффициент часто встречается в природе, человеку с ним комфортно, и он автоматически вызывает чувство гармонии и равновесия. Использование золотого сечения гарантирует сбаласированность всех элементов дизайна. Деление отрезка по золотому сечению Соотношение сторон прямоугольника по золотому сечению: 18 Золотое сечение в веб-дизайне Ширина главного блока по отношению к блоку с рекламными объявлениями равна примерно 1.618 62% 38% 19 Золотое сечение в веб-дизайне Ссылка на магазин Shop (рядом с #2) расположена рядом с самой активной фокальной точкой, при этом выделена зеленым цветом, для большего привлечения внимания и мотивации к действию. 20 Числа Фибоначчи в веб-дизайне Числа Фибоначчи (каждое последующее число равно сумме двух предыдущих): 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144… Базовая ширина контейнера последовательно умножается на числа из ряда Фибоначчи. На основании этих вычислений строится сетка сайта. 21 Правило третей Это правило гласит, что изображение должно быть разделено на девять равных частей двумя горизонтальными и двумя вертикальными линиями. Все важные композиционные элементы должны быть расположены вдоль этих линий или на их пересечениях. 22 Правило третей в веб-дизайне На пересечениях линий собрана самая важная информация 23 Влияние на размер других параметров На восприятие зрителем размера влияют – форма – цвет – текстура 24 Влияние формы на размер Высота квадрата кажется больше 25 Влияние формы на размер Из-за такой иллюзии во всех шрифтах закругленные буквы увеличены на 2-3%. 26 Влияние формы на размер Вертикальные линии кажутся тоньше равных им горизонтальных, поэтому вертикальные элементы букв в шрифтах искусственно утолщают. 27 Влияние формы на размер Симметричные элементы воздействуют друг на друга и кажутся более мелкими 28 Влияние цвета на размер Теплые цвета визуально приближают объект, увеличивая его размеры 29 Влияние текстуры на размер Глазу требуется дополнительное время на то, чтобы распознать мельчайшие детали на поверхности и от этого предмет становится крупнее. 30 Форма Все объекты воспринимаются либо как форма, либо как фон. Количество «воздуха» (фона) может выгодно подчеркнуть окруженный им объект. 31 Законы дизайна Единство Равновесие Контраст Динамика Нюансировка 32 Единство Если вы не можете изъять из вашей готовой композиции ни одну ее часть, ни один ее элемент без ущерба для целого, если части композиции нельзя поменять местами, добавить какой-то новый элемент, то композиция едина. 33 Равновесие (баланс) Равновесие – это условие устойчивости зрительной композиции, это состояние, когда все элементы сбалансированы между собой Наиболее простой способ достичь в композиции равновесия – симметрия. Симметрия бывает зеркальная, инвертированная, осевая, радиальная, и т.д. 37 Симметрия в веб-дизайне 38 Равновесие (баланс) Асимметрия – когда повторяющиеся элементы отсутствуют или расположены так, что их нельзя совместить путем сдвига или поворота. Однако, асимметрия – не значит отсутствие равновесия. 39 Контраст, нюанс и тождество Контраст – резко выраженная противоположность, различия между однородными качествами (характеристиками) элементов с целью их усиления. Нюанс – это минимальная разница. Тождество – повторяет эти качества. 40 Степень контраста У контраста всегда есть верхняя и нижняя границы: за одной начинается "почти одинаковость", за другой контраст превращается в бессвязность почти одинаковость бессвязность контраст 41 Многомерный контраст Многомерный контраст – это контраст по нескольким параметрам Контраст по цвету очень резкий, примитивный контраст + по размеру восприятие контраста становится мягче и слабее + по расположению + по форме сложная, достаточно прочная связь между элементами у элементов практически не осталось сходства, контраст исчез Контраст цвета 43 Динамика Любой контраст и асимметрия вносят в композицию динамику. Всякое противопоставление двух элементов имеет своим результатом то, что один из них «подталкивает» взгляд зрителя в направлении другого. Статичное состояние Динамика 45 Ветер по Гауссу Интересно и современно смотрится размывка со смазыванием — имитация фотографий движущихся объектов 46 Нюансировка Тщательная проработка мелочей, повышенное внимание к деталям – одно из главных отличий профессиональной дизайнерской работы. 47 Нюансировка 48