CC BY
610
УДК 7.012.23 + 004.942 + 303.732.4
КОРЗИНА Мария Игоревна, старший преподаватель кафедры компьютерного дизайна института математики, информационных и космических технологий Северного (Арктического) федерального университета имени М.В. Ломоносова, аспирант кафедры наноструктурных, волокнистых и композиционных материалов имени А.И. Меоса факультета прикладной химии и экологии Санкт-Петербургского государственного университета технологии и дизайна. Автор 35 научных публикаций и одного учебного пособия
КОСТЮЧЕНКО Ольга Адамовна, педагог детской студии мультимедиа «М-Агі» (г. Санкт-Петербург). Автор 7 научных публикаций
ЛЫСЕНКО Владимир Александрович, кандидат технических наук, доцент кафедры наноструктурных, волокнистых и композиционных материалов имени А.И. Меоса факультета прикладной химии и экологии Санкт-Петербургского государственного университета технологии и дизайна. Автор 165 научных публикаций и 14 учебных пособий
ЛЫСЕНКО Александр Александрович, доктор технических наук, профессор, заведующий кафедрой наноструктурных, волокнистых и композиционных материалов имени А.И. Меоса факультета прикладной химии и экологии Санкт-Петербургского государственного университета технологии и дизайна. Автор 231 научной публикации и 12 учебных пособий
МАЙОРОВ Илья Сергеевич, кандидат технических наук, доцент, заведующий кафедрой компьютерного дизайна института математики, информационных и космических технологий Северного (Арктического) федерального университета имени М.В. Ломоносова. Автор 19 научных публикаций и одного учебного пособия
ПОТАШОВА Мария Алексеевна, ассистент кафедры компьютерного дизайна института математики, информационных и космических технологий Северного (Арктического) федерального университета имени М.В. Ломоносова. Автор
4 научных публикаций
МОДЕЛИРОВАНИЕ ЭСТЕТИЧЕСКОГО ОФОРМЛЕНИЯ ВЕБ-САЙТА
Сегодня сложно найти гармоничное соотношение эстетической и технической составляющих при проектировании объектов дизайна, особенно в области искусства создания веб-сайтов. При создании вебсайта необходимо применять знания дизайн-композиции, психологии цвета, стилей, юзабилити. В статье выделены основные признаки эстетически-оформленного веб-сайта, а также приводится пример такого
© Корзина М.И., Костюченко О.А., Лысенко В.А., Лысенко А.А., Майоров И.С., Паташова М.А., 2013
веб-сайта - интернет-ресурса секции «Информационные технологии в дизайне» международной конференции «Региональная информатика».
Ключевые слова: дизайн, эстетика, композиция веб-сайта, композиционный центр, юзабилити.
Только развитому сознанию раскрываются глубины произведения, существо образной мысли художника. Воспитатель такого восприятия искусства - эстетика. Искусство доставляет одно из высших духовных переживаний -эстетическое наслаждение. Это о нем говорил Пушкин в стихотворении «Элегия» (1830 год): «Порой опять гармонией упьюсь, Над вымыслом слезами обольюсь...»
Эстетика - философская наука о сущности общечеловеческих ценностей, о наиболее общих принципах эстетического освоения мира в процессе любой деятельности человека, и прежде всего в искусстве, о сущности и законах творчества, о восприятии, функционировании и развитии искусства [6].
Сегодня, в век высоких технологий, когда жизнь человека невозможна без современных технических устройств и сверхскоростных коммуникативных и информационных систем, практически невозможно найти соответствие эстетической и технической составляющих при проектировании объектов дизайна, особенно в области искусства создания веб-сайтов. В период развития веб-дизайна созданием веб-сайтов занимались люди сугубо технических специальностей, проектируя веб-страницы без учета художественно-эстетической составляющей дизайна, в основном делая упор на доступность информации и функциональность. Как правило, веб-страницы представляли лишь текст. Чуть позже, с развитием сети Интернет и ростом ее популярности, появились первые попытки оформить веб-страницы не только в вербальных знаках - тексте, но и в изобразительных знаках - картинках. Отсутствие у разработчиков веб-страниц знаний и навыков в области композиции приводит к непрофессиональной подаче визуальной информации, усваивать которую бывает крайне затруднительно [11].
Со временем к проектированию сайтов подключились художники и дизайнеры. Появились четкие и строгие структуры интерфейсов веб-сайтов с ярко выраженной корпоративной дизайн-стилистикой. Этот новый подход в веб-разработках стал ступенью в развитии медиа-дизайна, создавая новую культуру виртуального пространства для нового, молодого поколения широкого круга пользователей [4].
При создании веб-сайта с современным, качественным дизайном прежде всего необходимо применять знания дизайн-композиции, психологии цвета, стилей, с учетом функциональных возможностей новых информационных технологий [2].
Композиция веб-сайта. Композиция является ключевой составляющей для всех видов искусств [2].
В процессе проектирования композиция оценивается с позиций выразительности, логической завершенности и эстетической целесообразности формы, с точки зрения ее существования в контексте культурной ситуации.
Средства и приемы композиции в дизайне складываются как следствия системы традиционных и современных методик и моделей проектирования. Классические средства композиции в дизайне - это следующие закономерности гармонизации формы: пропорционирование, симметрия и асимметрия, масштабность, ме-тро-ритмическая организация, тектоника, тождество, нюанс, контраст - сочетаются с сегодняшней трактовкой способов формирования дизайн-продукции - ассамбляж, комбинаторика, инсталляция, монтаж и др. Конечная цель применения этих средств - комплексная эстетическая организация материально-конструктивных визуальных слагаемых сайта, как результат системного проектирования.
В работе с формой в дизайне (особенно графическом) активно используются такие принципы как стилизация, трансформация и визуализация смысла. они позволяют через реально существующие, узнаваемые предметы (их формы) передать тот или иной образ [11].
организация композиционного центра -это одна из важнейших закономерностей, так как соподчинение происходит в основном между центром и прочими элементами. Именно композиционный центр является выразителем художественного образа и несет смысловую нагрузку. Существует и такой принцип композиционного построения, когда центром может оказаться «пауза».
При организации композиционного центра следует учитывать закономерности визуального восприятия плоскости. Как правило, он располагается в активной, центральной ее части. Смещение относительно геометрического центра придает порой произведению большую внутреннюю напряженность и пластическую выразительность в раскрытии художественного образа и темы [8].
Юзабилити старается объяснить поведение человека в сложных системах при весьма специфических обстоятельствах, и потому юзабилити-предсказания менее точны, чем предсказания таких полноценных наук, как физика, например. Поэтому юзабилити опирается в своих рекомендациях по большей части на прошлые эксперименты и опыт, чем на точные формулы [10].
Якоб Нильсен рассматривает процесс создания дизайна веб-сайта с точки зрения юзабилити. И приводит два этапа.
Первый - в начале процесса дизайна. На этом этапе используются такие методы юзабилити как исследования на месте, исследования конкурентов. они дают возможность дизайнеру определить направление, в котором движется реальный мир. Эти методы ближе к научному подходу «гипотеза-опыт»: вы выводите какие-то закономерности, а затем пытаетесь найти им подтверждение, наблюдая за реалиями, чтобы в дальнейшем пользоваться ими как путеводной
нитью при создании наилучшего из возможных дизайнов.
Второй - в конце процесса дизайна. Здесь используются уже другие методы дизайна, такие как тестирование, наблюдение. Специалисты по юзабилити, показывают альтернативные варианты дизайна пользователям и определяют, какой из них работает лучше всего. Главное преимущество лишь в том, что тестирование бумажного прототипа обойдется дешевле.
Таким образом, многие дизайнеры практикуют эмпирический подход при создании вебсайта и не имеют четко выверенных композиционных подходов для решения большинства задач.
Большинство дизайнеров при проектировании веб-страниц отдают предпочтение использованию модульных сеток в качестве композиционной основы веб-сайта, по аналогии с печатными изданиями.
Этого подхода в проектировании придерживается Д.В. Бородаев в своем исследовании. он считает, что модульная сетка играет важную роль в художественном анализе двухмерного пространства, к которому можно отнести и экран монитора. Во всех направлениях проектно-художественного творчества, связанного с конструированием печатных и электронных изданий, модульные сетки являются основным приемом, способом создания композиционной схемы и структурирования всех ее элементов [6, с. 158].
Сегодня существуют два вида верстки вебстраниц: табличный и блочный. Метод модульных сеток больше всего подходит для табличной верстки.
Более детально к проблеме композиции в веб-дизайне подходит Д.В. Кирсанов в вопросе
о связях в двумерных композициях с текстом и изображениями, указывая, что часть информации между элементами может передаваться не последовательностью их расположения или какими-либо видимыми стрелками или рамками, а менее очевидными визуальными средствами - выравниванием, цветовыми перекличками, контрастом. Также он подтверждает: если ком-
позиция создавалась изначально в графической среде, автор, возможно, просто не осознает некоторые из этих связей и, соответственно, не сможет «вербализовать» их при выделении структурной основы композиции. С другой стороны, некоторые фрагменты текста относятся не к содержательной основе, а к оформительской надстройке документа. Например, номер главы и само слово «Глава» в заголовке, постоянная часть перекрестных ссылок (т. е. сокращения типа «стр.» или «гл.»), любые повторяющиеся элементы, такие как колонтитулы на странице книги или панель навигации на веб-странице. Вынеся все это из текстовой основы документа в стилевые спецификации, можно не только упростить процедуру глобального изменения этих элементов во всем документе, но и приблизить к искомому идеалу ортогональности: ведь все, что при внимательном рассмотрении не принадлежит к уникальной информации документа, а лишь помогает воспринимать ее, правильнее отнести к аспекту представления, а не содержания [9].
Волшебного правила выбора пропорций на все случаи жизни не существует. При выборе размеров элементов нужно учитывать множество факторов: вклад элементов в информационное содержание композиции, их положение в контексте данной композиции (веб-страницы) и более крупной информационной единицы (сайта), контрастные отношения между ними, необходимость нюансировки и многое другое. Стиль композиции во многом определяется тем, насколько покорно дизайнер следует «натуральным» размерам элементов, соответствующим их относительной важности и традициям оформления, или же, наоборот, насколько свободно он варьирует пропорции, добиваясь необычного звучания страницы [10, с. 82-83].
Эстетика в дизайне веб-сайта секции «Информационные технологии в дизайне». Примером эстетически оформленного вебсайта может быть интернет-ресурс секции «Информационные технологии в дизайне» международной конференции «Региональная информатика».
Информационный ресурс «Информационные технологии в дизайне» отражает итоги проведения секции конференции «Региональная информатика», результаты взаимодействия ведущих ученых и специалистов в области информационных технологий в дизайне, представителей органов государственной власти субъектов Российской Федерации, руководителей и представителей академических учреждений, ведущих университетов, научно-исследовательских, научно-производственных и промышленных предприятий и общественных организаций России и зарубежных стран.
Целями информационного ресурса «Информационные технологии в дизайне» являются рассмотрение практических и теоретических вопросов дизайн-образования и внедрения ин-фокоммуникационных технологий в области дизайна, а также обмен опытом применения информационных технологий в дизайне.
Содержание сайта определяет его дизайн-стилистику. С учетом статуса, проводимого мероприятия, был выбран строгий графический стиль с простой двухколоночной структурой [1].
Секрет элегантного внешнего вида состоит в использовании нескольких хорошо сочетающихся цветов. Такая техника вместе со сдержанностью в оформлении обеспечивает сайту изысканный внешний вид [3]. Для нового дизайна сайта «Информационные технологии в дизайне» использовалась трехцветная гамма: были выбраны основные цвета: черный (#000000), ярко-синий (#0166FE), белый (для основного фона). В качестве дополнительного цвета используется сине-голубой (#0166fe).
Выбранные цвета имеют следующие психологические и семантические характеристики. Основополагающим свойством черного цвета, выбранного в качестве фона для статичного баннера в центре интерфейса главной страницы, является свойство композиционно собирать в единое пространство все графические элементы с большим количеством разнообразных цветовых пятен. На эмоциональном уровне восприятия черный цвет являет собой
созидательность, способность к предсказаниям и предвидениям, а также мотивированное оправданное применение сил. Светло-синий цвет, заложенный в основу анимированного баннера и отдельных навигационных элементов, устанавливает баланс между темными и светлыми графическими элементами дизайна, а также создает настроение покоя и гармонии, вызывает ощущение благополучия. Он ассоциируется с постоянством и задумчивостью, с верностью, надежностью и честью. Синий цвет воспринимают как положительный и мужчины, и женщины.
В качестве шрифтового оформления была выбрана гарнитура, которая создает сильный визуальный контраст и разработана специально для вывода текста на экран, - Verdana [7]. Элементы на веб-странице помогают посетителям сайта зрительно перемещаться с одного места на другое благодаря правильному размещению текста. выравнивание каждого фрагмента текста должно быть четким и визуально соответствовать другим текстовым блокам на странице. Текст был отформатирован в соответствии с данными требованиями.
Пользователи оценивают ресурс с точки зрения содержательности его текстов, но зрелищное и осмысленное графическое оформление усиливает воздействие контента, повышая его художественную привлекательность. Дизайн сайта на основе трехцветной гаммы создает стильное современное звучание и производит эстетичное, глубокое впечатление. Поэтому анимированный flash-баннер сайта сдержан по стилю и цвету, а также используемым графическим элементам. Основные цвета заставки - синий и черный. Заставка выполнена на двух языках, содержит подробную информацию о месте и датах проведения конференции. Следует отметить, что анимированный баннер в верхней части интерфейса главной страницы сайта сделан в стилистическом соответствии с имиджевым статичным баннером отражающим тему информационных технологий в дизайне.
Сочетание всех элементов сайта представляет собой гармоничный, привлекающий
взгляд дизайн. Единый размер элементов облегчает их комбинирование и реорганизацию при необходимости. Для дизайна сайта используется F-расположение элементов [12, 13], которое полагается на различные исследования траектории движения глаз пользователя. Эти научные исследования показывают, что веб-серферы читают экран в <^»-макете в следующем порядке: наблюдение вершины, левого верхнего угла и левых сторон экрана. Только иногда акцентируя взгляд на правой стороне экрана. Основные элементы расположены согласно <^»-макету: шапка сайта читается слева-направо по верхнему краю страницы, основное меню расположено по левому краю страницы. Используется прием контраста для ведения взгляда пользователя по странице. Такой визуальный дизайн можно назвать ориентированным на пользователя.
После окончания работ по проектированию сайта проводилось юзабилити-тестирование. Для оценки сайта использовался метод фиксации «мыслей вслух», пользователи отвечали на вопросы и давали собственную оценку удобства и понятности сайта, то есть тестирование проводилось в форме беседы. Все ответы и комментарии пользователей заносились в специальный протокол. Перед тестированием пользователи были ознакомлены с правилами. Выявленные недостатки оформлены в отчет. Также, для оценки сайта использовалась программа ЮGraph, чтобы выявить зоны наибольшего внимания пользователей на сайте. В ходе оценки сайта были определены пути его совершенствования.
Выводы.
1. Далеко не все веб-сайты в сети Интернет соответствуют эстетическим нормам. При создании качественного эстетического веб-сайта прежде всего необходимо использовать знания композиции.
2. Единых правил композиционного построения веб-сайтов не существует. В процессе дизайна веб-сайта рекомендуется учитывать множество факторов.
3. Следует уделять особое внимание таким основным признакам эстетически-оформлен-ного веб-сайта: соответствие стиля оформления целям и задачам веб-сайта, использование гармонично сочетающихся цветов и их особенно-
стей психологического восприятия человеком, четкий подбор шрифтов и содержательность текстов, гармоничное сочетание элементов сайта, использование принципов ориентированного на пользователя дизайна и юзабилити.
Список литературы
1. Агеенко Я.В. Какие бывают стили дизайна сайтов. URL: http://www.yanajy.com/sdelay-sam/stili-dizajna-sajtov.html (дата обращения: 01.03.2013).
2. Бандуристый Ф.Ф. Семиотические системы как средство образовательного и воспитательного процесса в изобразительном искусстве и дизайне / Современное искусство: проблемы, тенденции, перспективы (в рамках второго Международного фестиваля современного искусства «Увидеть невидимое»). Хабаровск, 2011. С. 23-33.
3. Бикнер К. Экономичный Web-дизайн / пер. с англ. Д.С. Ремизова. М., 2005.
4. Блудное Г.П. Веб-дизайн как средство специальной подготовки студентов художественно-графических факультетов: дисс. ... канд. пед. наук. М., 2004.
5. Борее Ю.Б. Эстетика. М., 2002.
6. Бородаев Д.В. Веб-сайт как объект графического дизайна. Харьков, 2006.
7. Гарретт Дж. Веб-дизайн. Элементы опыта взаимодействия. СПб., 2008.
8. Голубева О.Л. Основы композиции. М., 2004.
9. Кирсанов Д. Веб-дизайн. СПб., 2004.
10. Нильсен Якоб. Юзабилити: наука или идеология? URL: http://www.webmascon.com/topics/designgeneral/21a. asp. Дата обращения: 01.03.2013.
11. Филенко Р.Е. Композиция в Web / Современное искусство: проблемы, тенденции, перспективы, (в рамках второго Международного фестиваля современного искусства «Увидеть невидимое») / под ред. Л.В. Блинова. Хабаровск, 2011. С. 258-266.
12. Bradley Steven. 3 Design Layouts: Gutenberg Diagram, Z-Pattern, And F-Pattern. URL: http://www. vanseodesign.com/web-design/3-design-layouts/ Дата обращения: 01.03.2013.
13. Jones Brandon. Understanding the F-Layout in Web Design. URL: http://webdesign.tutsplus.com/articles/ design-theory/understanding-the-f-layout-in-web-design/ (дата обращения: 01.03.2013).
References
1. Ageenko Ya.V Kakie byvayut stili dizayna saytov [The Types of Web Design Styles]. Available at: http://www. yanajy.com/sdelay-sam/stili-dizajna-sajtov.html (assessed 1 March 2013).
2. Banduristyy F.F. Semioticheskie sistemy kak sredstvo obrazovatel’nogo i vospitatel’nogo protsessa v izobrazitel’nom iskusstve i dizayne [Semiotic System as a Means of Education and Training Process in Art and Design]. Sovremennoe iskusstvo: problemy, tendentsii, perspektivy [Proc. 2nd Int. Sci. Conf. “Modern Art: Problems, Trends and Prospects”]. Khabarovsk, 2011, pp. 23-33.
3. Bickner C. Web Design on a Shoestring. 1st ed., New Riders, 2003. 240 p. (Russ. transl. by Remizova D.S. Ekonomichnyy Web-dizayn. Moscow, 2005).
4. Bludnov G.P. Veb-dizayn kak sredstvo spetsial’noy podgotovki studentov khudozhestvenno-graficheskikh fakul ’tetov: diss. ... kand. ped. nauk [Web Design as a Means of Special Training of Art Students. Cand. ped. sci. diss.]. Moscow, 2004.
5. Borev Yu.B. Estetika: Uchebnik [Aesthetics: A Textbook]. Moscow, 2002.
6. Borodaev D.V Veb-sayt kak ob”ekt graficheskogo dizayna [Website as an Object of Graphic Design]. Kharkiv, 2006.
7. Garrett J. Veb-dizayn: kniga Dzhessa Garretta. Elementy opyta vzaimodeystviya [Web Design: A Book by Jesse Garrett. The Elements of User Experience] (Russ. transl.). St. Petersburg, 2008.
8. Golubeva O.L. Osnovy kompozitsii [Fundamentals of Composition]. Moscow, 2004.
9. Kirsanov D. Veb-dizayn: kniga Dmitriya Kirsanova [Web Design: A Book by Dmitry Kirsanov]. St. Petersburg, 2004.
10. Nielsen J. Usability: Empiricism or Ideology? (Russian translation). Available at: http://www.webmascon.com/ topics/designgeneral/21a.asp (accessed 1 March 2013).
11. Filenko R.E. Kompozitsiya v Web [Composition in Web]. Sovremennoe iskusstvo: problemy, tendentsii, perspektivy: sb. statey [Proc. 2nd Int. Sci. Conf. “Modern Art: Problems, Trends and Prospects”]. Khabarovsk, 2011. pp. 258-266.
12. Bradley Steven. 3 Design Layouts: Gutenberg Diagram, Z-Pattern, And F-Pattern. Available at: http://www. vanseodesign.com/web-design/3-design-layouts/ (accessed 1 March 2013).
13. Jones Brandon. Understanding the F-Layout in Web Design (2012). Available at: http://webdesign.tutsplus.com/ articles/design-theory/understanding-the-f-layout-in-web-design/ (accessed 1 March 2013).
Korzina Maria Igorevna
Institute of Mathematics, Information and Space Technologies, Northern (Arctic) Federal University named after M.V Lomonosov (Arkhangelsk, Russia);
Postgraduate Student, Faculty of Applied Chemistry and Ecology, Saint Petersburg State University of Technology and Design
Kostyuchenko Olga Adamovna
Children’s Multimedia Studio “M-Art” (St. Petersburg, Russia)
Lysenko Vladimir Aleksandrovich
Faculty of Applied Chemistry and Ecology, Saint Petersburg State University of Technology and Design (St. Petersburg, Russia)
Lysenko Aleksandr Aleksandrovich
Faculty of Applied Chemistry and Ecology, Saint Petersburg State University of Technology and Design (St. Petersburg, Russia)
Mayorov Ilya Sergeevich
Institute of Mathematics, Information and Space Technologies, Northern (Arctic) Federal University named after M.V. Lomonosov (Arkhangelsk, Russia)
Potashova Maria Alekseevna
Institute of Mathematics, Information and Space Technologies, Northern (Arctic) Federal University named after M.V. Lomonosov (Arkhangelsk, Russia)
MODELING THE AESTHETIC WEBSITE DESIGN
Nowadays it is difficult to achieve harmony between the aesthetic and technical components when developing design objects, especially in the art of website creation. When making a website one has to apply knowledge of design composition, psychology of colour, styles, and usability. The article points
out key characteristics of an aesthetic website. An example of such website is provided: the Internet resource of the section “Information Technologies in Design” of the international conference “Regional Informatics”.
Keywords: design, aesthetics, website composition, compositional centre, usability.
Контактная информация: Корзина Мария Игоревна e-mail: m.korzina@mail.ru, m.korzina@narfu.ru Костюченко Ольга Адамовна е-mail: mart.studio@inbox.ru Лысенко Владимир Александрович е-mail: valys@mail.ru Майоров Илья Сергеевич е-mail: i.mayorov@narfu.ru Поташова Мария Алексеевна е-mail: masha.potashova@gmail.com
Рецензент - Попов В.Н., доктор физико-математических наук, доцент, заведующий кафедрой математики института математики, информационных и космических технологий Северного (Арктического) федерального университета имени М.В. Ломоносова
