CC BY
5
THE CONCEPT OF AN INFORMATION LAYER IN DESIGN Tarasova N.A. (Russian Federation)
Tarasova Natalia Anatolyevna - Member of the Russia Designers Association, leading Аг1 Director,
PROSCOM, MOSCOW
Abstract: in this article, the analysis of information layers in design is carried out. Consideration of the designated term occurs through the study of hierarchical typography and the phenomenon of planning in painting. The main methods of creating a text hierarchy on the example of graphic techniques are noted. Petrov-Vodkin's painting is analyzed, conclusions are drawn about the influence of color on the planned image and its impact on the viewer. The definition of the concept of information layers is formulated. The author has developed recommendations for the creation and placement of the latter. The output shows the value of the information layer in the designer's activity. Keywords: painting, information layer, typography, hierarchy, design, fine art.
ПОНЯТИЕ ИНФОРМАЦИОННОГО СЛОЯ В ДИЗАЙНЕ Тарасова Н.А. (РоссийскаяФедерация)
Тарасова Наталья Анатольевна - член Союза Дизайнеров России, ведущий арт-директор,
компания Proscom, г. Москва
Аннотация: в настоящей статье осуществляется анализ информационных слоев в дизайне. Рассмотрение обозначенного термина происходит посредством исследования иерархической типографии и явления плановости в живописи. Отмечены основные методы создания текстовой иерархии на примере графических приемов. Проанализирована картина Петрова-Водкина, сделаны выводы о влиянии цвета на плановость изображения и его воздействии на зрителя. Сформулировано определение понятия информационных слоев. Автором разработаны рекомендации по созданию и размещению последних. В выводе представлено значение информационного слоя в деятельности дизайнера.
Ключевые слова: живопись, информационный слой, типографика, иерархия, дизайн, изобразительное искусство.
УДК 004.9
Введение
Мир сложен, динамичен и многомерен; бумага статичная, плоская. Основным вопросом в этой связи выступает возможность представления богатого визуального мира на плоскости. Представлять информацию и то, к чему могут привести яркие и великолепные видения, значит работать на стыке изображения, слова, числа и искусства. Это инструменты письма и типографии, управления большими наборами данных и статистического анализа, линий, макета и цвета. А стандарты качества — это те, которые основаны на визуальных принципах, которые подсказывают дизайнеру, как поставить правильный знак в нужном месте.
В настоящее время существуют методы организации информации, однако они рассмотрены в разрезе одного слоя — экрана интерфейса. Актуальность настоящего исследования в том, что метод создания информационных слоев позволяет рассматривать визуализацию информации в глубинном разрезе, что дает гибкость в ее распределении, а также системное руководство.
Научная новизна исследования состоит в том, что в работе впервые рассмотрено применение иерархических композиционных решений в несколько слоев, приведены методы распределения информации на слоях, размещенных в визуальном пространстве, введен термин «информационные слои».
Цель исследования
Рассмотреть метод организации информации на примере типографской иерархии. Изучить способы создания плановости в живописи и восприятие последней зрителем. Вывести преемственные методы организации плановости в цифровом дизайне.
Рассмотреть термин «информационный слой» в существующей практической деятельности и на основе указанного ввести исследуемое определение в научное пространство цифрового дизайна.
Исследование
Несмотря на то, что мы ежедневно перемещаемся по воспринимаемому миру трех пространственных измерений и иногда рассуждаем о пространствах более высоких измерений с математической легкостью, мир, отображаемый на наших информационных дисплеях, захвачен двумерностью конечных плоскостей бумаги и экрана. Вся коммуникация между читателями изображения и его создателями теперь должна происходить на двумерной поверхности.
В этой связи особую актуальность приобретает высокоэффективное представление информации, так как все миры (физические, биологические, воображаемые, человеческие), которые стремится понять человечество, многомерны по своей природе.
Глядя на то, как развивалось визуальное искусство, как приобретались знания, становится неизменным одно: все находится в слоях. Эта концепция слоев применима к любому изображению, включая дизайн
пользовательского интерфейса.
Рассуждая о последнем, возможно представить, что он состоит из слоев, что позволяет управлять, изменять и улучшать его. Рассматриваемые слои настраиваются для того, чтобы помочь дизайнерам организовать и спроектировать пользовательские элементы.
Одним из ключевых принципов визуальной иерархии в графическом дизайне является типографская иерархия. Она характеризуется в качестве фундаментального элемента для правильной организации информации, которую следует передать с помощью дизайна.
Типографская иерархия помогает упорядочить информацию с тем, чтобы читателю было легко найти нужные сведения и сосредоточиться на наиболее важных частях изображения.
Из обозначенного выше следует, что графический дизайн в интерфейсе — это визуальный способ донесения сообщения и расстановки приоритетов, а не просто визуальная эстетика макета дизайна.
В книге Эдварда Вассермана, именуемой «Всестороннее руководство по основам типографии» рассматривается понятие типографской иерархии, как конструкции, в которой значимые слова заметны пользователям в первую очередь. Пользователь бегло считывает заголовки и, таким образом, сканирует текст [1, с. 2].
Студенты профильных вузов рассматривают методы создания текстовой иерархии с помощью таких графических приемов как: размер, вес, ориентация и цвет.
Первый элемент для создания иерархии текста, который приходит на ум — это размер шрифта, и он состоит в том, чтобы увеличить наиболее важные части текста (заголовок и подзаголовок) по сравнению с менее важными (основной текст), используя более крупные элементы в качестве инструмента для привлечения внимания читателя (рассмотрим рисунки 1 и 2).
Глава 1
Разговор о дробинке. - Постройка пироги. - Охота. - На вершине каури. - Никаких признаков человека. • Добыча Наба и Харберта. - Перевернутая черепаха. • Черепаха исчезла - Объяснение Сайреса Смита
Исполнилось сень месяцев, день в день, с тех пор как пассажиры воздушного шара были выброшены на остров Линкольна Несмотря на все розыски, которые они производили, ни одно человеческое существо не показалось за это время, ни разу дым на выдал присутствия человека на поверхности острова. Никакое произведение рук человеческих не указывало на его пребывание здесь - ни в древнюю, ни в близкую им эпоху, Остров казался необитаемым и. по-видимому, никогда не был населен
Рис. 1. Без использования иерархии текст не вызывает интерес у читателя, представляя собой однообразный набор
символов
ГЛАВА 1
Разговор о дробинке. - Постройка пироги. • Охота. - На вершине каури. • Никаких признаков человека. - Добыча Наба и Харберта. - Перевернутая черепаха. - Черепаха исчезла. - Объяснение Сайреса Смита.
Исполнилось семь месяцев, день в день, с тех пор как пассажиры воздушного шара были выброшены на остров Линкольна Несмотря на все розыски, которые они производили ни одно человеческое существо не показалось за это время, ни разу дым на выдал присутствия человека на поверхности острова. Никакое произведение рук человеческих не указывало на его пребывание здесь - ни в древнюю, ни в близкую им эпоху. Остров казался необитаемым и. по-видимому, никогда не был населен.
Рис. 2. Выделив заголовок и подзаголовок, определив интервал между тремя уровнями, в тексте сразу видна иерархия, он
легче воспринимается и вызывает интерес
Вес шрифта — следующий инструмент для создания визуальной иерархии в тексте, поскольку, если шрифт сделать более жирным или тонким, зрителю будет легче упорядочить информацию. Лучше использовать жирный шрифт для заголовка и подзаголовка, поскольку они больше подходят для привлечения внимания зрителя, а для основного текста применять обычный или тонкий шрифт, чтобы повысить читаемость текста (Рисунок 2).
Цвет также является отличным методом графического дизайна для создания визуальной иерархии текста, поскольку при помощи него возможно использовать принципы цветового контраста и придавать высококонтрастный цвет для выделения части текста. Кроме этого, становится возможным использование различных оттенков определенного цвета для создания обозначенной иерархии (Рисунок 3).
Рис. 3. Применение ярких цветов делает акцент на определенной информации, в то время как серые, тусклые цвета
делают более далекими остальные детали
Положение (ориентация) также является принципом графического дизайна, который возможно применить к текстовой иерархии с тем, чтобы упорядочить информацию по макету дизайна в зависимости от ее важности: разместить наиболее важную информацию на видном месте, чтобы создать визуальное отделение от основного текста, что облегчает идентификацию для зрителя.
Стоит отметить, что слоистость имеет место не только в типографике и дизайне, но и в изобразительном искусстве. В этой связи представляется необходимым изучить способы создания плановости в живописи и восприятие последней зрителем.
Изобразительное искусство является неотъемлемой частью повседневной жизни, пронизывая все уровни человеческого творчества, самовыражения, общения и понимания. Они варьируются от традиционных форм, укоренившихся в местных и более широких сообществах и культурах, до разнообразных и расходящихся практик, связанных с новыми, появляющимися и современными формами визуального языка.
Общество прославляет изобразительное искусство не только в том, как создает образы и объекты, но и в том, как ценит, наслаждается, уважает и реагирует на практику создания произведений искусства другими людьми со всего мира. Теории и практики в изобразительном искусстве динамичны и постоянно меняются. Они соединяют многие области знаний и человеческого опыта посредством индивидуального и совместного исследования, творческого производства и критической интерпретации. Одним из методов воздействия на зрителя, применяемых в живописи, является плановость. Последняя может быть создана при помощи цветовых изменений.
Каким образом возможно извлечь выгоду из великого господства цвета в представлении и передаче информации? Человеческие глаза чрезвычайно чувствительны к цветовым вариациям: опытный колорист может различить по крайней мере 1 000 000 цветов при тестировании в искусственных условиях попарного сравнения. Многим зрителям доступно около 20 000 цветов, при этом ограничения для практического применения обусловлены ранними ограничениями зрительной памяти человека, а не способностью локально различать соседние оттенки [3, с. 18]. Однако для кодирования абстрактной информации более 20 или 30 цветов часто дают не уменьшающуюся, а отрицательную отдачу.
Привязка цвета к информации так же элементарна и проста, как цветовая техника в искусстве: «Хорошо рисовать — это просто: поместить правильный цвет в нужное место», - иронично заметил Пауль Клее [2, с. 44]. Зачастую скудные преимущества, получаемые от данных о окраске, указывают на то, что даже нанесение хорошего цвета в нужное место является сложным делом.
Петров-Водкин нашел свой собственный неповторимый стиль довольно поздно, когда ему пришла в голову идея рисовать, используя всего три цвета: красный, желтый и синий. Так родилась его фирменная трехцветная палитра. Именно в этой палитре он создал свою самую знаменитую работу «Купание красного коня» (Рисунок 4).
Рис. 4. Картина «Купание красного коня» Петрова-Водкина
Это потрясающая картина: тревожная, мощная, таинственная. Кажется, все очень просто: мальчик и лошадь. Но какую завораживающую интенсивность излучает произведение.
На первый взгляд все, что делают мальчики, — это купают лошадей. Но главный конь неожиданного цвета — насыщенно красного. Позади розовые и белые лошади. На их фоне краснота основной лошади проступает еще более отчетливо.
Картина при подобном подходе совсем не выглядит плоской: прослеживается несколько слоев, чувствуется плановость. Юноша на красном коне образует первый слой произведения, вода и другие мальчики — второй, земля и зелень — третий.
Имеет место двойная перспектива. Зритель смотрит на лошадь со стороны, а на озеро сверху. Поэтому не видно неба, горизонта. Водоем стоит перед зрителем практически вертикально.
Петров-Водкин любил красный цвет. Но в данном случае последний — не просто юбка крестьянки или шапочка рабочего, а целая лошадь. Цвет становится больше, чем просто доминирующим: он всепоглощающий.
Кроме того, лошадь намеренно увеличена, он просто не вписывается в общую картину: ноги, хвост и уши не были включены в кадр. Подобный выбор ориентации и цвета изображения создает первый план картины: конь очень близок к зрителю, он буквально опирается на него.
Результаты исследования
Таким образом, исходя из анализа типографических начал и основ изобразительного искусства в отношении восприятия информации, возможно вывести преемственные методы организации плановости в цифровом дизайне и определить термин «информационный слой».
Информационный слой — это умственное восприятие изображения, когда зритель имеет возможность визуально «разделить» его на несколько частей таким образом, чтобы первая из них была ближе, а остальные дальше. На каждом подобном слое зафиксированы определенные сведения: они четко разделены в зависимости от степени важности передаваемой информации.
Информационных слоев может быть несколько, например, три. Однако необходимо соблюдать принцип «не навреди»: следует применять не более трех. Большое количество слоев порождает дисбаланс, в изображении неясно, где основная информация. При использовании трех слоев важно, чтобы два из них были объединены, а третий был отличным от них.
Кроме обозначенного, следует обозначить способы создания информационных слоев в дизайне:
1) контрастность относительно фона (рисунок 5);
Рис. 5. Самый контрастный по отношению к фону прямоугольник попадает на первый информационный слой
2) теплота;
3) размер;
4) насыщенность;
5) прозрачность;
6) размер тени;
Таким образом, слой не просто существует, он несёт информацию первостепенной важности. Представляемые сведения не являются простыми заголовками: к последним приобщается основная смысловая информация. В содержание слоя могут попадать изображения в случае, если дизайнер находит это важным и картинки действительно несут смысл (информацию). В обозначенной ситуации их стоит поместить на первый план, а также добавить функциональные элементы первой важности. Например, товар на странице интернет-магазина — он, безусловно, важен, на него смотрят, его оценивают. В этой связи предмет (товар) расположен на первом слое, а также текст, повествующий о книге, и кнопка, представляющая собой функциональные возможности (Рисунок 6).
Рис. 6. Пример расположения информационных слоев
Информация на втором информационном слое имеет блеклый вид. Эффект достигнут с помощью применения правил плановости в живописи, расположенных на Рисунке 7:
Близь
Даль
Контрастно (Темный темнее, светлый светлее)
Сближенная светлотность (темныйсветпее, светлый темнее}
Телло Холодно
Насыщенно Бтжло
Большое Маленькое
Непрозрачное Прозрачное
Большая тень Маленькая темь
Рис. 7. Правила плановости в живописи
Рассмотрим более сложный пример, где используются два информационных слоя, каждый из которых имеет дополнительную визуальную иерархию объектов (Рисунок 8).
Рис. 8. Пример применения двух информационных слоев
Основная информация, которую хочет донести дизайнер — экран сайта для продажи \гЯ-очков. Для реализации презентации специалист поместил основной смысловой объект на первый инфослой, а на втором разместил текст, графику и 3д-модель очков, которые призваны дополнять эмоцию показа.
Таким образом наглядно видно два глобальных информационных слоя, каждый из которых имеет внутренние слои. Если представить пространственное расслоение двух глобальных информационных слоев и их внутренней слоистости, то получится следующее изображение (Рисунок 9).
Рис. 9. Расслоение информационных слоев
Знание принципов создания информационных слоев позволяет дизайнерам анализировать и сравнивать степень контрастности между двумя глобальными слоями, а также проверять каждый параметр графического объекта.
Размышляя о том, почему мышление системой инфослоев эффективнее, чем иерархией, стоит отметить, что последняя рассматривает не все характеристики графического пятна, а только светлотность и размер. Понимание системы образования информационных слоев дает возможность дизайнеру проследить верность графического решения. На рисунке 10 видно, как самый светлый участок второго информационного слоя не
становится таким светлым, как на первом информационном слое.
Рис. 10. Показатель светлости двух информационных слоев
Система создания инфослоев позволяет затрагивать такие характеристики пятна, как тень, насыщенность и плотность цвета, детализированность, прозрачность. На рисунке 11 наглядно показано, как изменяются обозначенные характеристики графического пятна в пространстве.
Рис. 11. Изменение характеристик в пространстве
Кроме этого, иерархия рассматривает объекты с визуальной точки зрения, присваивая им функцию пятна. Инфослой исследует каждый объект со смысловой точки зрения, то есть, какая информация внесена в объект, вне зависимости от того, текст это, графика или изображение. Глобальный инфослой — это не просто плановость, а разделение в зависимости от смысловой значимости. Именно в этом связи в названии имеет место слово «информационный».
Стоит отметить, что средние оттенки серых цветов могут дублироваться на глобальном переднем и заднем слоях. В этом случае необходимо минимизировать дублирующиеся цвета путем уменьшения их размера или частоты повторения. Для сохранения системы инфослоев действительной необходимо создать достаточно сильный контраст цветов на переднем плане и слабый на заднем. При этом важно следить, чтобы светлотный диапазон не выходил за рамки юзабилити решений.
Выводы
Шум и беспорядок — это недостатки дизайна, а не атрибуты информации. Суть состоит в том, чтобы найти стратегии проектирования, которые раскрывают детали и сложность, вместо того, что обвинять зрителей в непонимании. Одним из наиболее мощных устройств для уменьшения шума и обогащения содержимого дисплеев является технология наслоения и разделения, визуально разделяющая различные аспекты данных. Указанное возможно реализовать с помощью информационных слоев.
Последние следует применять для того, чтобы привлечь внимание пользователей. Человек считывает информацию, расположенную на слоях, обращая внимание, в первую очередь на ту, которая к нему ближе. Подобный подход позволяет представить продукт и информацию о нем в правильной последовательности, заставляя зрителя переходить от одной смысловой конструкции к другой.
Список литературы /References
1. Грушевская В.Ю. Изучение семантических возможностей визуализации на теоретических и практических занятиях // Педагогическое образование в России, 2019. № 6. С. 1-5.
2. Невская П.В. Визуальность в аспекте литературного портретирования: Три картины Пауля Клее // ИСОМ, 2020. № 2. С. 40-46.
3. Немыкин В.В. Цвет как символ в изобразительном искусстве и современные цветовые системы в компьютерном ахитектурно-художественном проектировани // Евразийский Союз Ученых, 2021. № 6-4 (15). С. 17-20.
