БНТУ – Новости, наука, люди и факультеты - сайт собирает в себе самые интересные материалы Белорусского национального технического университета.

Зачем web-дизайнеры рисуют такие странные штуки? Часть 1

593 
0
09 сентября в 15:00
Зачем web-дизайнеры рисуют такие странные штуки? Часть 1

В Институте повышения квалификации и переподготовки кадров по новым направлениям развития техники, технологии и экономики Белорусского национального технического университета (ИПК и ПК БНТУ) при обучении web-дизайну по специальности переподготовки 1-40 01 74 «Web-дизайн и компьютерная графика» (квалификация «программист – web-дизайнер») предусмотрен раздел проектно-эстетической подготовки, предполагающий изучение основ композиции и цветоведения. В рамках одной из дисциплин («Основы визуального дизайна web-проектов») будущие дизайнеры и рисуют такие «странные штуки», как на заглавном фото и фото, которые представлены в статье.

Что это такое, зачем нужно и значит ли это, что поступающие на переподготовку должны иметь художественную подготовку?

Относительно какой-либо предварительной подготовки: специальность открыта для всех желающих войти в IT-сферу web-проектирования, сайтостроения. Ограничений по характеру первого базового высшего образования для этой специальности нет (в том числе и требований по художественной подготовке), главное здесь мотивация, упорство в достижении целей. Нашей задачей не является подготовка художников, ведь дизайнер и художник-график – разные понятия.

Зачем это нужно web-дизайнеру? Приобретенное знание основ композиции применяется при оформлении web-сайтов, для усиления степени зрительного воздействия на потребителя. Исследователи web-среды говорят, что, по статистике, визуальный дизайн сайта, его привлекательность оценивается пользователем за доли секунды. Таким образом, если мы желаем, чтобы пользователи задержались на ресурсе, то нужно постараться учесть все аспекты, формирующие положительный визуальный образ сайта. В том числе дизайнер (в большей степени чем художник) должен доступно объяснить, почему нужно делать именно так, как задумал дизайнер, а не так, как кажется красивым заказчику. А для этого необходимо понимать язык композиции, как работают ее средства и какие свойства в дальнейшем может приобрести задуманная компоновка сайта.

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

Какие получаются результаты, разберемся на примере защиты реальных работ слушателей группы переподготовки № 41933 (будущий выпуск в феврале 2021 г.), слушателей, которые не имели раньше отношения к графическому и web-дизайну в принципе.

Для начала о защите работ: маленький фоторепортаж с зачета по основам композиции и цветоведения. Для показа своих учебных работ места в аудитории не хватило, поэтому все вынесено в коридор. Масштабы (в метрах) оцените самостоятельно.

На фото показаны некоторые этапы защиты, обсуждение, выбор работ, размещение их на стендах и, конечно, фото на память!

Примечание. Следует отметить, что качество web-ресурса зависит и от других дисциплин. Это профессиональная работа в графических редакторах (Adobe Photoshop, CorelDRAW, 3ds Max, Flash), изучение и применение принципов UX, UI дизайна, юзабилити в проектировании web-ресурсов и многое другое.

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

Итоги изучения языка композиции, ее средств и свойств

Упражнение «Линия, пятно» направлено на раскрытие графических возможностей линии как способа передать любое состояние предметного мира и пятна, как универсального средства, в котором содержатся точка, линия, цвет, тон (рис. 1–3). Учебное задание «Фактура» позволяет научиться выражать характер поверхности изображения, который способен формировать требуемый образ и помогать его восприятию (рис. 4–5).

Упражнение «Ломанная плоскость» (рис. 6–8) служит для отработки навыков проектирования пространства с различными визуальными эффектами, приобретения способности создавать рельеф, объем в двумерном пространстве.

Упражнение «Масштаб (большое и малое)» предназначено для понимания взаимосвязи частей и целого, организации элементов композиции на основе различного отношения размеров, с которыми соотносятся видимые величины (т. е. масштаба). На рис. 9 кубический элемент – здание является «большим», а на рис. 10 тот же кубик – «малым».

Упражнение «Контраст, нюанс, тождество, ритм». На рис. 11 представлена композиция, в которой ярко выражено нарушение закономерностей по отношению к основным объектам композиции. Это и фоновые прямые линии в сравнении с массивными черными прямоугольниками на переднем плане и наполовину затемненный прямоугольник со слабовыраженной штриховкой. Это контрастная композиция.

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

Сходство элементов по размерам, форме, цвету позволяют охарактеризовать следующую композицию (рис. 13) как тождественную.

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

Упражнение «Снятие изобразительного образа». За основу берется готовое произведение (рис. 15 – Марк Шагал «День рождения», рис. 16 – В. А. Серов «Петр I») и производится декомпозиция оригинала. Композиционный анализ последовательно исключает из произведения цвета, тона, второстепенные детали и фактуры до получения предельно упрощенного, но читаемого образа. Дальнейшая трансформация полученного образа дает возможность построить формальную композицию (знак) непохожую на оригинал, но полностью соответствующую исходным формально-композиционным решениям автора произведения (в данном случае на рисунках конечный результат, созданный слушателями знак не приводится). По такой методике возможно создание логотипа, отражающего достаточно сложные, многообразные исходные установки.

Цвет также является мощным формообразующим фактором. Для понимания особенностей работы с цветом слушатели выполняют упражнения в различной технике. На рис. 17 приведена композиция, выполненная в технике разбеленного колорита с часто встречающейся в web-дизайне цветовой схемой, использующей два противоположных по цветовому кругу цвета (в данном случае синий и желтый). На рис. 18 изображена монохромная композиция «Осень», основанная на сочетании цветов одного цветового тона при наличии оттенков с различной светлотой и насыщенностью. На рис. 19 показана творческая работа на тему «Цветовая ассоциация – музыка».

Почему на учебных работах так мало различных цветов? Web-дизайнер не художник, на профессионально сделанных сайтах используются максимум три цвета: главный цвет, дополнительный (поддерживающий) и акцидентный, который служит для выделения нужных элементов интерфейса. Поэтому для подготовки web-дизайнера вполне достаточно сконцентрироваться на изучении ахроматических (сочетание оттенков белого, черного и нейтральных цветов, близких к белому или черному: бежевый, коричневый), монохроматических, двуадных (два цвета) и триадных (три цвета) цветовых схем.

Для тренировки креативности отрабатывается задание «Гротеск», в котором отражается образное преувеличение с целью усиления выразительности работы. На рис. 20–22 показаны учебные работы «Большой как кирпич», «Черствый как кирпич» и «Сумка тяжелая как кирпич».

Для композиции важными свойствами являются симметрия и асимметрия. На рис. 23 приведен пример симметрии как легко читаемого расположения частей формы относительно оси (плоскости), проходящей через центр фигур. Такого рода симметричная композиция придает ощущение порядка, явно выраженной закономерности. На рис. 24 автору удалось удачно выразить асимметрию – зрительное равновесие неравных элементов композиции, придающее динамику и активный ритм композиции. При оформлении сайтов больше используется симметрия, но в зависимости от идеи компоновки и асимметричное расположение вполне допустимо.

Упражнение «Статика и динамика». На рис. 25 показан пример композиции, в которой зрительно уравновешены различные по форме и размерам элементы, такая композиция статична. На следующей учебной работе (рис. 26) остроумно, простыми фигурами представлена динамичная композиция, способная выражать движение, имитирующая ход дальнейшего действия.

Упражнение «Главное пространство» (рис. 27–30) представляет собой варианты организации свободного поля композиции как главного, доминирующего элемента. Свободного пространства больше, значит оно главное. Практическое применение приема очень простое. Если в свободное поле органично вписать какой-либо текст, то он автоматически станет главным элементом композиции, все остальное будет всего лишь элементами оформления. Применительно к сайту: использование больших площадей свободного пространства позволяет снизить зрительное напряжение у пользователя, разделить графические и текстовые блоки.

На рис. 31 показано упражнение «Главное большое» (явно выделяющаяся трапеция среди треугольников). Такой прием часто применяется в стилях web-дизайна (например, стиль «Web 2.0»), кнопка большая, значит главная. И наоборот, главным может стать элемент, выделяющийся не формой и размером, а цветом (упражнение «Главное малое», рис. 32).

Перечисленные на примерах реальных работ ключевые средства и свойства композиции являются первичной визуальной азбукой для понимания принципов проектирования интерфейсов, создания иконок, информационных сообщений. Где-то нужен контраст, где-то нюанс, где-то необходимо простыми средствами выполнить основную задачу интерфейса – быстро и удобно направить пользователя туда, куда ему нужно. На этих основных понятиях композиции в конечном итоге базируются рекомендации по проектированию интерфейсов таких корпораций, как Microsoft (Metro), Google (Material design), Apple.

И наконец, что означает работа, представленная в виде заглавного фото?

На фото в заголовке статьи показаны результаты учебного эксперимента по отработке принципов гармонизации цвета, цветовых оттенков по теории Гёте (упражнение «Цветовой коврик»). Суть упражнения заключается в учете психологических постулатов Гёте по влиянию цветов на эмоциональное состояние человека и в использовании геометрических пропорций соотношений оттенков различной визуальной силы (по Гёте: желтый – самый сильный, фиолетовый – самый слабый цвет).

В статье приведены работы слушателей группы № 41933: Алтынтопрак А. А., Бондарков С. И., Жданович Е. Г., Качан Н. Н., Масюков А. Ю., Остроглазова С. И., Сеньков В. О., Шумко В. А. И, конечно, Демешко В. А. – руководителя.

После того как вы все прочитали, скажите, теперь понятны ли эти странные штуки?

Если вы все поняли, то смотрите следующую часть «Зачем web-дизайнеры рисуют такие странные штуки? Часть 2», где можете увидеть другие работы и потренироваться в угадывании названий учебных композиций наших слушателей.

А если решите изучить все на практике под руководством преподавателей нашей кафедры, попробовать силы в web-дизайне, то добро пожаловать на переподготовку!

Адрес кафедры «Инновационные процессы»: 220107, г. Минск, пр-т Партизанский, 77 (ст. м. «Партизанская»), 10-й корпус БНТУ, ауд. 402.
Контакты: +375 17 257-46-67;
+375 44 785-46-67 (А1);
+375 29 575-46-64 (МТС).
Сайт: ipk.bntu.by.


Контент доступен под лицензией Creative Commons Attribution 4.0 License.

С. С. Карпович, к.т.н., заведующий кафедрой «Инновационные процессы» филиала БНТУ «ИПК и ПК БНТУ»

Есть ошибка в тексте?
© times.bntu.by – 2017. Для использования материалов свяжитесь с нами через форму обратной связи
Нашли ошибку?
Ctrl/Cmd + Enter