АЛЬХААФ — Школа Дизайна

Менеджер — это тот, кто уменьшает неопределенность.

Что такое надпрофессиональное образование? — Это уменьшение лоховости во всем, что не касается непосредственно твоей профессии! Но и профессии тоже.

Буду делать хорошо и не буду лохом!

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

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

КРЫЛЬЯ НАДПРОФА

        #23
#22  #21
#20  #19
#18  #17
#16  #15
#14 #13
#12 #11
#10 #9
#8    #7
#6    #5
#4    #3
#2    #1

НАШИ ДРУЗЬЯ

ZenRu

Сообщество ZenRu в ЖЖ

Блог Клейна

Газета Пятое Измерение

Лента Новостей БодхиNet

Бодхисаттвическая сеть

Варга — акустические музыкальные инструменты

Сибирские узоры — сайт Игоря Шухова

Блог Романа Мандрика

Prezentation.ru — всё о мультимедийных презентациях

КСАН — Агентство интерактивного маркетинга

Ксан-презентации — разработка мультимедийных презентаций

neq4 — профессиональная разработка мультимедийных виртуальных туров

Литредактор.ру — корректорская правка и литературное редактирование текстов онлайн

Мультстудия «Анимуба»

Рекламное агентство Навигатор — елочные шары с логотипом

Магазинчик HandMade — авторские подарки ручной работы

«Рисоваська»: аська + рисовать

«Моносота» — дома будущего

Международный Фестиваль «User Generated Клип! 3.0»

Московский лицей №1550

ТопСкидка.ру — мобильный путеводитель по лучшим скидкам Москвы

Ремешки № 1 для iPod nano TikTok и LunaTik в России и СНГ

Интернет-магазин Настоящей Еды «И-Мне» — здоровые продукты и полезные обеды с доставкой.

Главная / ШКОЛА НАДПРОФ / АЛЬХААФ — Школа Дизайна / Глава 4.

Глава 4.

Композиция. Теория цвета. Уровни абстракции. Кубик Рубика и тупики. Об образах и ассоциациях. Смотрите много красивых работ

Композиция

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

Здесь две основные темы: «Композиция» и «Теория цвета». Пока про композицию, распределение «веса»:

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

Идеальная композиция — это один объект в визуальном центре. Но это скучно и не интересно, поэтому надо придумать, как разносить вес по картинке, не нарушая баланса. Чем более тонко вы владеете этим, чем менее очевидные приемы вы можете использовать — тем интереснее и разнообразнее будет ваша композиция.
Вес разносится по принципу рычага или центра масс в физике:
- если вы нарисовали что-то слева — добавьте что-то справа примерно равнозначное;
- более удаленные от центра объекты, сильнее оттягивают вес в свою сторону;
- более крупные объекты оттягивают вес сильнее мелких;
- более яркие объекты оттягивают вес сильнее бледных;
- один тяжелый объект может быть сбалансирован несколькими легкими, разнесенными в соответствующие точки;
- значение имеет общий баланс, средняя масса, а не вес каждого отдельного элемента.
Это надо научиться чувствовать на опыте.
Центр веса можно смещать относительно визуального центра. Это позволяет добиться разных эффектов. Например, если ваш центр веса ближе к нижнему краю — композиция будет более тяжелая, устойчивая в целом. К верхнему — более воздушная, летучая. Можно сдвигать и по горизонтали. Интересно получается, когда центр веса расположен в какой-нибудь неочевидной, не простейшей точке экрана и сбалансирован очень разнообразными по весу и расстоянию до центра объектами. Это высший пилотаж.
В качестве простейшего примера давайте возьмем мою версию Клейновского баннера Практикума Дизайна — того, что в японском стиле.

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

Клейн:
Уж, больно напоминает флаг микадо Ваш банер, Учитель...

Написал и напомнил себе камикадзе...
Не пойду сегодня в Школу -
Убьют...

Привет, Хааф!

Хааф:
Я не знаю, кто такие микадо, но, видимо, они были не дураки.

Клейн:
Микадо - это японский император. Привет! :)))

Валера:
Хочу немного добавить о композиции:

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

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

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

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

В качестве примера вот две открытки, которые я когда-то делал:

Теория цвета

Хааф:
Все сказанное про композицию (распределение веса) справедливо и для цвета. Способы балансировки и принципы точно такие же.

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

Красный — энергия, агрессия, грубое вторжение.
Фиолетовый — задумчивость, фантазии, меланхоличность.
Зеленый — спокойствие, расслабленность, жизнь.
Голубой — светлая радость, легкость, «полет».
Оранжевый — открытость, дружелюбие, мягкая энергия.

Цвета, расположенные на цветовом круге от красного до зеленого — теплые, «экстравертные». От фиолетового до голубого — холодные, «интравертные».
Параметрами рычага в балансировке цвета являются оттенок, насыщенность, яркость и площадь.
- Оттенки организуются в цветовой круг
  
  Противоположным, компенсирующим цветом для любого другого является цвет, расположенный на противоположном краю круга. Например: оранжевый — голубой, фиолетовый — желтый, красный — зеленый. Оттенок — аналог «геометрического направления» в композиции.
- Яркость — дополнительное измерение направления. Более темные цвета компенсируются более светлыми.
- Насыщенность — аналог расстояния до центра в композиции. Более насыщенные цвета сильнее оттягивают баланс.
- Площадь является аналогом «массы». Большие площади какого-то цвета имеют бОльший вес. Компенсировать это можно принципами композиции, разнося их по пространству картинки, либо яркостью, делая цвет, занимающий бОльшую площадь светлее, или занимающий меньшую — темнее.
Во многих случаях лучше не использовать очевидные цвета. Просто красный — понятен и знаком. Баланс «оранжевый-голубой» используется на каждом углу. Если вы немного сдвинете цвет в ту или иную сторону, он будет гораздо интереснее. Соответственно нужно сдвигать и компенсирующие цвета.

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

«Очевидных» цветов в природе не существует. Не бывает 100% зеленых деревьев. Кроме того, не бывает деревьев, у которых все листья одного сплошного цвета. Да еще у каждой породы дерева свой цвет. Вносите разнообразие.
Более светлые или более теплые цвета на картинке визуально выглядят ближе, чем темные и холодные. Это можно использовать для создания глубины. Глубину тоже надо компенсировать.
Цвета влияют друг на друга. Один и тот же цвет на темном и на светлом фоне будет восприниматься как два разных цвета. Также важен оттенок фона. Это одно из следствий принципа балансировки и, как ни удивительно, это надо компенсировать.
В качестве упражнения предлагаю поподбирать «вкусные» цветовые гаммы. Это позволит вам быстро почувствовать принцип. Также, ловите «вкусные» комбинации в окружающем вас мире, их там много.

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

Уровни абстракции

Хааф:
Название сегодняшней лекции: «Еще одно фундаментальное понимание об устройстве Вселенной и человеческого мышления, или Прикладной Аспект Проведения Границ (ПАПГ)».

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

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

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

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

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

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

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

Кубик Рубика и тупики

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

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

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

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

Смотрите много красивых работ

Хааф:
Как учиться дизайну, несколько ключевых моментов:

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

http://fcukstar.com
Дизайнируйте, дизайнируйте, дизайнируйте. Делайте много проектов.
Рассматривая любые картинки или сайты, отслеживайте ваше восприятие и мышление. Как движется ваш взгляд, за что он цепляется, через что он проскакивает, где он теряется. Где и как перестраивается фокус внимания. Что вам приятно, а что вызывает недоумение или отторжение. Что вы замечаете сразу, а что потом.

…

Сборник ссылок по флэш-анимации и программированию:
http://fla-links.narod.ru

Сайт аниматоров, большое количество учебного материала:
http://www.multikov.net

12 принципов анимации по Диснею (лучшее введение в анимацию!):
http://www.multikov.net/make/?page=school&subPage=young_2

Книга «Тайминг в анимации» — классическое руководство!:
http://www.multikov.net/make/?page=school&subPage=young_5

12 принципов Диснея и 8 принципов Аниме:
http://angel13ne.narod.ru/princip.htm

<<< предыдущая глава

следующая глава >>>

АЛЬХААФ — Школа Дизайна
главная страница НадПроф

Сутра помоста Шестого Патриарха
Практикум Шухова
Школа Делового Петрова