Что такое визуальный вес
Что такое визуальный вес
Будьте как дома! Полное руководство по дизайну интерьера
Handbok i inredning och styling
© Frida Ramstedt, 2019
© Mia Olofsson, иллюстрации, 2019
© Антонова Ю., перевод на русский язык, 2020
© Издание на русском языке, оформление. ООО «Издательская Группа «Азбука-Аттикус», 2020
Переводить и редактировать книгу было непросто, но очень интересно. Отсутствие фотографий интерьера накладывало особую важность на выбор каждого слова. Важно было словом создать правильную «визуальную картинку». Мы с переводчиком Юлией Антоновой провели немало вечеров, обсуждая и выверяя перевод необходимых терминов.
Задачу усложняло и то, что в русском языке просто нет определенных слов и понятий, которые есть в шведском. Так, например, когда автор упоминает в тексте «лампу сапожника» (skomakarlampa) или «жидкое масляное мыло» (linoljesåpa), то не дает к термину пояснений – каждый швед с детства знает, о чем идет речь. Это как если бы нам пришлось переводить с русского на шведский понятие «хрущёвка».
Мне нравится сравнение автором своего руководства с книгой рецептов. Действительно, публиковать привлекательное фото аппетитного блюда и не давать тут же рецепт приготовления было бы довольно странно. Поэтому книгу можно было бы назвать «книгой интерьерных рецептов». Рекомендации автора не привязаны к какому-то конкретному стилю интерьера, скорее это универсальные советы для создания гармоничного и удобного современного жилья. А выбор стиля интерьера – уже наша задача.
В каком порядке читать книгу? Это не роман, поэтому последовательного чтения текст не предполагает. Откройте книгу с любой главы и начните читать тот раздел, который наиболее актуален для вашего дома. С чего бы начала читать я? Со сносок и пояснений редактора. Это поможет понять особенности и некоторые отличия устройства шведского жилища. Не всё из этого пока применимо в российской действительности, но мы ведь затем и читаем книги зарубежных авторов – чтобы посмотреть «а как там у них» и, возможно, воспользоваться их опытом и наработками.
Увлекательного вам чтения!
Катя Карлинг, научный редактор @katja_karling
Дом, в котором хорошо
Книгу, которую вы держите в руках, я много лет искала и никак не могла найти. Я прочитала сотни книг об интерьере, ходила в библиотеки, покупала букинистические издания, заказывала по интернету профильную литературу из-за рубежа, но в большинстве этих книг основной акцент был сделан на красивых картинках – эффектных снимках различных интерьеров. В них было не так уж много практических советов для обыкновенных квартир.
Что же я искала? Я ждала книгу, в которой бы объяснялись основные принципы оформления интерьера. Мне хотелось понять, какими правилами руководствоваться и на что обращать внимание при создании интерьера без привязки к определенному стилю или конкретной мебели. Я искала книгу, которая могла бы объяснить, как небольшие детали могут повлиять на общее восприятие помещения и как улучшить комнату, не покупая новые вещи и не затевая ремонт.
Существует огромное количество профессиональной литературы для дизайнеров интерьера и архитекторов. В ней представлены основные принципы возведения зданий и оформления пространств, но я так и не смогла найти книгу, обращенную к простому читателю. Книгу, благодаря которой свой дом можно сделать уютным и благодаря которой можно придумать собственные дизайнерские решения, а не просто вдохновляться, глядя на уже готовые интерьеры.
Когда несколько лет назад мы переехали из старой квартиры в только что построенный таунхаус, я столкнулась с очевидной проблемой: все помещения были обустроены очень практично, но абсолютно безлико. Здесь не было ни трехметровых потолков, ни очарования старинного дома, которые можно было бы обыграть. Я оказалась в тупике: мне никак не удавалось привнести в дом ощущение теплоты и уюта. Несмотря на то что моя работа была связана с дизайном интерьеров, а проекты я создавала в том числе и для очень известных компаний, сделать что-то для себя оказалось труднее, чем я предполагала. Меня охватили злость и разочарование. Было нелегко, но одновременно я начала смотреть на процесс создания интерьера по-новому. Причем не только дома, но и на работе. Откуда, собственно, берется то самое ощущение домашнего уюта, гармонии и продуманности?
Я стала записывать свои мысли и наблюдения – и появилась основа книги, которой мне так не хватало, – полного руководства по дизайну интерьера. Для самых обычных людей. Не для коллег по цеху или компетентных экспертов. Более того, им я принялась задавать вопросы, чтобы понять, чем они руководствуются в работе над проектами. Я попыталась расшифровать ту самую «интуицию», на которую зачастую ссылаются профессионалы, и превратить это знание в конкретные практические советы.
Конечно, в вопросе дизайна интерьера нет очевидных «правильностей и неправильностей». Нет и каких-либо научных фактов, ведь по большому счету речь идет о вкусе. И все же в этой области уже накоплен приличный опыт и, следовательно, существуют рекомендации и советы, которых при желании можно придерживаться и от которых можно отталкиваться, если при оформлении помещения возникают проблемы. Правда, предполагается, что об этих рекомендациях людям все-таки известно.
Моей целью было собрать все эти советы и обозначить то, что дизайнеры называют «внутренним чутьем», – иными словами, чтобы и вы, и я могли ощутить уверенность при принятии решения. Надеюсь, моя книга поможет вам по-новому взглянуть на дизайн интерьера и вы, воспользовавшись некоторыми предложенными в ней советами, будете чувствовать себя более комфортно в собственном доме.
Играть по нотам или иметь абсолютный слух?
Мне нравится сравнение дизайна с музыкой. Далеко не все обладают абсолютным слухом, но многие могут научиться играть по нотам. То же самое и с цветом, формой, дизайном. Не у всех есть врожденное чувство стиля, помогающее добиваться нужного результата, но многие могут улучшить свои навыки, если будут знать основы и постоянно тренироваться.
Сегодня о дизайне интерьера известно куда больше, чем раньше. Или так: мы прекрасно осведомлены о вещах, мебели и трендах. Даже если нас поднимут среди ночи, мы без труда назовем иконы дизайна, модные бренды и цвет сезона. В то же время, как мне кажется, мы очень мало знаем о базовых понятиях в дизайне и декорировании интерьера: я говорю о ключевых размерах, пропорциях, практичности. К тому же мы мало задумываемся о том, как на самом деле следует действовать, чтобы создать гармоничную обстановку, используя все те вещи, которые постоянно приобретаем или меняем. Несмотря на то что мы тратим огромные деньги на покупки и ремонт, на удивление лишь немногие из нас считают, что их квартиры имеют целостный образ.
В этой книге вы не найдете эффектных фотографий интерьеров, характерных для глянцевых журналов. На мой взгляд, подобных книг и так хватает. Вместо этого я попытаюсь дать полезные рекомендации и иллюстрации, которые помогут вам найти решения исходя из того, что уже есть именно в вашем доме. Считаю, настало время задуматься о том, как, а не чем мы оформляем наши дома. Именно поэтому я хочу поделиться идеями и предложить набор инструментов, которые помогли бы вам лучше понять свои предпочтения в интерьере и, если в этом есть необходимость, внести коррективы в образ вашего дома – примерно так, как работают модные стилисты. Не стоит рассматривать эту книгу как научно-исследовательский труд или справочник: скорее это нотная тетрадь, наполненная мелодиями и аккордами, которые вы можете расставлять в любом удобном вам порядке, чтобы в итоге дом стал более гармоничным и уютным.
Визуальный вес: Контраст, Глубина, Размер | Урок 12
Это первый из уроков, посвященных пяти визуальным принципам, которые помогут направить внимание пользователя в нужное русло.
Копирайтер, переводчик и редактор. Опыт работы над федеральными (USABILITYLAB/AIC) и международными проектами (iSpring). Преподаватель курса «Копирайтинг и контент-маркетинг» в Институте программных систем.
Сен 9, 2014 · 3 мин читать
(Это перевод базового курса UX, который включает 31 основной принцип UX-проектирования: UX Crash Course: 31 Fundamentals. Если вы здесь впервые, то лучше начните сначала)
Это первый из уроков, посвященных пяти визуальным принципам, которые помогут направить внимание пользователя в нужное русло. Какие-то части вашего дизайна важнее, чем другие, но бывает, что взгляд не падает на них автоматически. Поэтому нужно помочь пользователям заметить то, что действительно важно. Итак, наша тема на сегодня:
Визуальный вес: Контраст, Глубина, Размер
Чтобы понять суть “визуального веса” надо воспринимать вещи интуитивно. Какие-то элементы макета выглядят “тяжелее”, чем другие. Они проще привлекают внимание. И это очень ценное знание для UX-дизайнера.
Наша работа — помочь пользователям замечать то, что имеет значение. И столь же важно не отвлекать внимание пользователей от их собственных целей.
Увеличивая визуальный “вес” определенных элементов дизайна, вы добьетесь того, что пользователь их заметит и переключит на них свое внимание.
Помните: визуальный вес относителен. Все визуальные принципы построены на сравнении элемента дизайна и его окружения.
Поэтому, без лишних слов, позвольте представить вам звезд этого UX-курса: Старых добрых резиновых уточек!
*здесь звучат аплодисменты*
Центральная уточка “цепляет” взгляд. Контраст увеличивает ее визуальный вес.
Контраст:
Разница между светлыми и темными вещами называется контрастом. Чем сильнее отличается светлая вещь от темной, тем “выше” контраст.
В UX более важные вещи должны быть контрастнее — как уточка в центре. В нашем случае окружение уточки на картинке достаточно светлое, поэтому она выделяется. Если бы окружение было темным, выделялась бы светлая уточка.
Если заменить уточек на кнопки, то люди скорее нажали бы на темную кнопку среди светлых. А если бы все кнопки были бы одного цвета, количество нажатий было бы гораздо меньше.
Центральная уточка на переднем плане привлекает больше внимания. Глубина и размер изменяют визуальный
Глубина и размер:
В реальном мире, мы чаще замечаем вещи, расположенные вблизи, нежели те, что находятся далеко.
В цифровом мире, объекты большего размера воспринимаются как более близкие (как уточка в середине), а маленькие — как расположенные дальше (как размытая уточка сзади).
Если бы все уточки были одного размера, вы бы, вероятнее всего, переводили взгляд с одной на другую слева-направо (при условии, что вы читаете слева-направо).
Использование эффекта размытия и теней делает ощущение глубины еще более реалистичным. Но штука с размером работает даже при “плоском” дизайне.
Как правило, чем важнее элемент дизайна, тем он больше. Так создается визуальная “иерархия” на странице, что облегчает пользователям “сканирование” информации, а нам позволяет управлять их вниманием.
Именно поэтому неправильно “делать логотип побольше”. Если конечно вы не хотите, чтобы пользователи делились вашим логотипом вместо того, чтобы покупать ваш товар.
Завтра нас ждет второй из пяти принципов: Цвет →
И ещё, если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.
Визуальный вес в дизайне сайта
Что такое визуальный вес?
Основные факторы визуального веса, которые мы будем обсуждать:
Визуальный вес очень сильно связан с симметрией. Для симметричного и сбалансированного дизайна мы будем делать объекты равными по визуальному весу.
Для привлечения внимания к определенному объекту (или для вывода его из зоны внимания) мы будем намеренно смещать баланс и создавать иерархию таким образом, чтобы фокус смещался в нужные области.
Теперь рассмотрим основные факторы, которые влияют на визуальный вес.
Большинство информации, которую нам выдает интуиция в отношении веса цвета, является верной. Практически бессознательно мы осознаем, что один цвет тяжелее другого. Например, более насыщенный цвет будет собирать больше внимания, чем ненасыщенный вариант. Темные цвета также более тяжеловесны, чем светлые варианты на светлом фоне.
Оттенок является свойством цвета, который лишь недавно стал рассматриваться в психологии как характеристика визуального веса. Даже при одинаковой насыщенности и яркости два цвета (например, синий и красный, как на рисунке выше) могут иметь различный визуальный вес.
Ниже приводится список цветов, который ранжирован по весу:
Контраст
Контраст помогает выделить в дизайне один элемент на фоне остальных. Элементы с большим контрастом по отношению к фону привлекают больше внимания. Используя контраст можно выстраивать визуальную иерархию и удобство распознавания и чтения.
На примере, приведенном ниже, левое изображение привлекает больше внимания и обладает большим визуальным весом, чем правое изображение.
Чтобы установить визуальный баланс и сделать обе части равновесными в рамках понятия визуального веса, мы можем использовать другие факторы, такие как цвет, размер, сложность и так далее.
Яркость
Более темные цвета имеют больший визуальный вес, чем светлые. Яркость является мощным инструментом для балансирования дизайна.
Психология не дает четкого ответа на вопрос, почему для нас темные цвета являются более тяжелыми. Исследования показывают, что большинство людей считают изображения с темной тенью внизу более натуральными.Инстинктивное расположение более тяжелых объектов внизу очень похоже на действие закона гравитации.
Размер
Размер является очевидным фактором визуального веса, так как в физическом мире объект большего размера занимает больше места и, как правило, является более тяжелым.
Что можно сделать для балансирования визуальных весов в случае использования различных размеров? Можно противопоставить элементу с большим размером несколько маленьких элементов с более тяжелым цветом и/или контрастом, например. Если объект должен находиться в фокусе внимания в дизайне, то придание ему большого размера является хорошим решением. Поэтому мы часто видим огромные кнопки, призывающие к действию, которые являются просто великанами среди окружающих их элементов. Таким образом пытаются привлечь внимание пользователя, чтобы увеличить коэффициент конвертации.
Пропорции и плотность
В физическом мире высокая плотность (или более компактное расположение) объектов весит больше. Мы можем использовать данную концепцию в графическом представлении, оставляя меньше свободного места между элементами.
Обратите внимание, что дополнительное пространство в наборе элементов делает область более легкой в терминах визуального веса. Но в тоже время, такое расположение пустого пространства и элементов привлекает внимание, так как получается контрастная картина.
Сложность
Большая сложность объектов или форм выглядит более тяжелой по сравнению с простыми вариантами. Простой объект, как в правой части рисунка ниже, может быть воспринят и распознан практически мгновенно. В тоже время элемент из левой части рисунка требует больше времени на обработку. А так как элемент получает больше времени на обработку, то мы вынуждены смотреть на него дольше, и, следовательно, уделяем ему больше внимания.
В дизайне визуальная сложность создается за счет использования текстур поверхности, изображений и повторяющихся шаблонов.
Заключение
ОСНОВЫ КОМПОЗИЦИИ: Равновесие (часть I)
КОМПОЗИЦИОННОЕ РАВНОВЕСИЕ
Композиционное равновесие в работе – это такое состояние формы, при котором все включённые в неё элементы сбалансированы между собой.
Зрительное равновесие достигается соответствующим распределением предметов и фигур в рамке эскиза, распределением тональных пятен, а также смысловым взаимоотношением этих предметов и фигур.
Простейшим примером композиционного равновесия является симметрия, в которой одна половина изображения отражает другую половину. При этом, необходимо помнить, что визуальное равновесие по горизонтали гораздо важнее для восприятия, чем вертикальное. Другими словами, несмотря на то, что все основные объекты будут находиться в нижней или верхней части формата, изображение будет казаться сбалансированным, при условии, что справа и слева формат заполнен примерно одинаково.
Этот тип баланса художнику очень легко скомпоновать, а зрителю понять. Так что, он может быть использован для создания очень мощного эффекта. Тем не менее, существуют две основные проблемы, связанные с использованием симметрии в качестве композиционной стратегии:
ВИЗУАЛЬНЫЙ ВЕС
Чаще всего художники компонуют картины таким образом, чтобы элементы изображения были сбалансированы в соответствии с их «визуальным весом» или «воздействием«, а не в буквальном смысле. Что же такое “визуальный вес”?
Визуальный вес – это понятие, которое характеризует объём внимания, которое зритель уделяет тому или иному элементу изображения.
Рассмотрим упрощённое изображение ниже. Есть два основных элемента: крупные черные горы в левом верхнем углу и белый цветок в нижнем правом углу. Этот кадр хорошо сбалансирован, но как такое может быть? Ведь горы значительно больше, чем цветок, они не похожи по форме, нет никакой симметрии.
Ответ на этот вопрос в большей степени зависит от особенностей нашего восприятия, нежели от конкретных форм, фактического веса и размера. Наш глаз притягивается к областям и объектам на снимке, которые являются более яркими и красочными. По этой причине относительно небольшие цветы на этом изображении имеют гораздо больший «визуальный вес», чем большие тёмные горы. Если мы проведём вертикальную или горизонтальную линию по центру изображения, то каждая половинка снимка будет иметь одинаковый вес для общей картины.
Возможно, выше написанное будет проще понять, увидев на визуально неуравновешенной композиции. Предположим художник все предметы сместил в левую сторону.
Равновесие выражает представление об правильности, устойчивости. Равновесие в работе придаёт чувство целостности и завершённости.
Визуально же неуравновешенная композиция кажется неспокойной, напряжённой, нестабильной. В то же время, отсутствие равновесия оживляет композицию. Всё зависит от атмосферы, которую вы хотите передать на картине.
Визуально неуравновешенная композиция- не значит плохо! Плохо когда неуравновешенность не несёт в себе никакой смысловой нагрузки. Если же она используется для придания художественного эффекта (например, показать дискомфорт героя, вызвать напряжение и волнение у зрителя, создать некий дисбаланс и пр.), то она просто необходима!
Как видно, равновесное и неравновесное композиционное расположение объектов помогают нам играть чувствами и эмоциями зрителя. Поэтому практикуйтесь побольше, чтобы развить чувство визуальной весомости предметов и тональных пятен, а также, научиться распределять эту весомость по всей площади формата.
Баланс в дизайне: Что это такое и зачем он нужен
Размышляя на тему баланса в дизайне, я наткнулась на картинку, которая с помощью минималистичной иллюстрации прекрасно демонстрирует отсутствие…
Размышляя на тему баланса в дизайне, я наткнулась на картинку, которая с помощью минималистичной иллюстрации прекрасно демонстрирует отсутствие баланса, снимая с меня задачу писать длинное вступление:
Чувствуется, что с этим изображением что-то не так, что весы обязательно перевесят в одну сторону. И дело не только в размере квадратов, которые создают это ощущение — цвета тоже играют свою роль. Хотя этот пример достаточно очевиден, порой баланса очень сложно добиться, причем как в дизайне, так и в фотографии.
В этой статье мы подробно рассмотрим основы баланса в дизайне и, что более важно, поговорим о том, почему баланс играет такую важную роль в дизайне и фотографии. Как ни крути, а самой очевидной темой, с которой нужно начинать совершенствование своих композиций, является визуальный вес.
Что влияет на визуальный вес?
Этот список составлен на основе работ Рудольфа Арнхейма, автора принципов психологии искусства.
Размер объектов: большие объекты всегда будут перевешивать
Форма: объекты правильной и неправильной формы
Заполнение пространства: положительные формы весят больше, чем негативное пространство
Изолирование: изолирование в пространстве также влияет на баланс
Плотность: много маленьких объектов могут уравновесить один большой
Цвет: более теплые цвета «тяжелее» прохладных оттенков
Соотношение тонов: более темные объекты всегда будут обладать большим весом, чем светлые
Внутренний интерес: сложность придает больше визуального веса
Текстура: объекты с текстурой перетягивают на себя больше внимания
Глубина: большая глубина поля резкости означает больший визуальный вес
Восприятие физического веса: сравните автомобиль и перо
Расположение: визуальный вес тем больше, чем дальше объект от центра
Ориентация: вертикальная тяжелее горизонтальной. Кто бы знал?
3 типа баланса в дизайне
1. Симметричный баланс
Это, наверное, самый распространенный и легко трактуемый тип баланса: здесь визуальный вес композиции равномерно распределяется во всех направлениях. Можно провести через изображение или макет вертикальную или горизонтальную линию, и при этом визуальный баланс все равно останется идеально симметричным. Композиции такого типа очень хорошо сбалансированы, поэтому создают впечатление «безупречной» композиции.
Однако стоит отметить, что симметричный дизайн не всегда получается интересным. Хотя такая симметрия приковывает человеческий взгляд, она может казаться скучной из-за отсутствия конкретной фокусной точки. Еще один любопытный момент: всего лишь изменив цвета в композиции с симметричным балансом, можно полностью нарушить равновесие, сделав ее «тяжелее» с одной стороны.
2. Ассиметричный баланс
Ассиметричный баланс — это намеренный шаг к созданию в дизайне или на фотографии ощущения движения и напряженности. Обычно это выражается в том, что в отличие от симметрично сбалансированной композиции разные элементы или фокусные точки распределены на изображении неравномерно. И хотя одна часть будет перевешивать другую, у зрителя все равно возникает ощущение равновесия.
Такой тип баланса легче всего представить с помощью множества маленьких объектов, уравновешивающих один большой. Композиция не сбалансирована, но глаз воспринимает ее как сбалансированную. Такой тип композиции создает визуальный интерес и является более привлекательным для глаз, поскольку содержит элемент неожиданности.
3. Разбаланс
Такой тип баланса в дизайне и фотографии призван по-настоящему пошатнуть традиционные устои и правила. Он определенно приковывает взгляд и заставляет зрителя задуматься над увиденным. Тем не менее, именно этого типа баланса труднее всего добиться, ведь в одно мгновение все может выйти из-под контроля, и картинка просто смешается в кашу.
