CC BY
109
УДК 004.514
О ЦВЕТОВЫХ РЕШЕНИЯХ ПРИ ПРОЕКТИРОВАНИИ ГРАФИЧЕСКОГО ИНТЕРФЕЙСА САЙТА Лавренова Т. В., Филиппенко В. А., Неделько А. Е.
Донской государственный технический
университет, Ростов-на-Дону, Российская
Федерация
Ьу8 ka87@mail.ru
philippenko@inbox.ru
Nikolkov96@mail.ru
UDC 004.514
ON COLOUR SCHEME IN THE ENGINEERING OF GRAPHICAL USER INTERFACE OF A SITE
Lavrenova T. V., Filippenko V. A., Nedelko A. E.
Don State Technical University, Rostov-on-Don,
Russian Federation
bys_ka87@mail .ru
philippenko@inbox.ru
Nikolkov96@mail.ru
The positive perception of the site by the user depends on color scheme. The article is devoted to the analysis and justification of coloristics in the design of an open Internet resource.
Keywords: visual concept. webdesign, color rendering, color spectrum, color wheel, contrast, adaptive web design, media requests.
Положительное восприятие сайта пользователем во многом зависит от цветового решения. Представленная статья посвящена анализу и обоснованию колористики при оформлении открытого интернет-ресурса.
Ключевые слова: визуальная концепция, веб-дизайн, цветопередача, цветовая гамма, цветовой круг, контраст, адаптивный дизайн, меди-азапросы.
Введение. Исследования элементов интерфейса открытых интернет-ресурсов показали, что в большинстве случаев пользователи судят о веб-сайте по его дизайну, в частности, по таким элементам, как макет, типографика, цвет и стиль. Не менее важны качество контента, количество ошибок, частота обновлений, логичная навигация.
Для упрощения цветового конструирования в дизайнерскую практику был введен цветовой круг, состоящий из 12 частей (его так и называют — «двенадцатичастный»). Его основные цвета — желтый, красный и синий (рис. 1) [1-4]. Он представляет собой круг из двенадцати сегментов, расположенных в соответствии с естественным порядком цветов спектра.
Рис. 1. Цветовой круг из двенадцати сегментов
Исаак Ньютон, пропуская через призму луч солнечного (белого) света, выяснил, что он состоит из элементов — цветов спектра [1]. Открытую им систему Ньютон изобразил в форме цветового круга (см. рис. 1). Такая организация дает возможность мгновенно и точно представить себе двенадцать наиболее распространенных цветов и оттенков.
Цветовые сочетания и контраст в веб-дизайне. От оформления напрямую зависит, как скоро посетитель сайта привыкнет к интерфейсу, легко ли ему будет ориентироваться. Поэтому важно сразу отработать вопрос: как будут выделены наиболее значимые части. Второстепенные элементы должны быть обозначены таким образом, чтобы пользователю не пришлось тратить время на их поиск и идентификацию. Игнорирование этого правила делает страницу монотонной и непривлекательной.
В книге Йоханнеса Итена [1] изложено 7 типов цветовых контрастов.
1. Контраст по цвету.
2. Контраст светлого и темного.
3. Контраст холодного и теплого.
4. Контраст дополнительных цветов.
5. Симультанный контраст.
6. Контраст по насыщенности.
7. Контраст по площади цветовых пятен.
В общей цветовой композиции два, три цвета (и более) определенным образом сочетаются и контрастируют для реализации поставленных эстетических и практических задач [2].
Стартовой точкой теории цветовых впечатлений служат исследования цветовых сочетаний в природе. В частности, из природных пейзажей взят известный принцип колористики: плавный переход от более темного оттенка к светлому и наоборот (рис. 2, 3).
Рис. 2. Пример цветового сочетания (условное название «Пасмурный день»)
Рис. 3. Пример цветового сочетания (условное название «Осенний парк»)
Важно определиться также с градациями световых эффектов, то есть установить, в каких случаях будет использован наиболее яркий свет, средний, сблабый, понадобится ли использовать эффект тени.
Использование цветовых сочетаний и контраста при создании логотипа и адаптации дизайна сайта для мобильных устройств. Концепты были разработаны в синей гамме. Синий ассоциируется с серьезностью, высоким социальным статусом, стабильностью и достоинством,
внушает доверие. Один из элементов данного сочетания — голубой. Он должен быть визуально приятен пользователям, т. к. напоминает о небе и теплом море. Предполагается, что применение таких цветов в оформлении повысит лояльность посетителей к содержанию сайта.
При выборе дополнительных цветов также использовался цветовой круг (рис. 4).
Основной Цвет:
#1А305С1 #0а2534 #53ЭААВ *&9Э2А8
Рис. 4. Оттенки основного цвета
Для логотипа сайта выбрали схематичное изображение планеты, так как она ассоциируется с всемирной паутиной и связывает весь мир, что довольно близко к тематике нашего сайта. Логотип располагается в левом верхнем углу. Это непреложное правило для всех интернет-ресурсов, адресованных посетителям, читающим слева направо (в том числе, конечно, для русскоязычных). Готовый логотип представлен на рис. 5.
Рис. 5. Разработанный логотип
Основная цель дизайна сайта — сделать его уникальным, запоминающимся. Однако некоторые элементы должны быть привычны для пользователя. При оформлении ресурсов следует придерживаться универсальных, обоснованных практикой правил. В противном случае оказавшемуся на сайте пользователю придется сначала разбираться с «полетом» дизайнерской мысли, и
Iл
лишь затем переходить к работе с контентом. Выше мы уже упоминали одно из таких правил: логотип размещается в левом верхнем углу. Второе рекомендованное требование: наилучший цвет ссылок — ярко-синий. Он достаточно контрастный, привычный (а значит, удобный) для пользователей. Безусловно, учитывая, что основные цвета разработанного нами концепта относятся к синей гамме, необходимо было подобрать цвет шрифта таким образом, чтобы ссылки заметно от него отличались.
Консистентное цветовое решение требует уделить особое внимание разграничению элементов, членению текста. Имеет смысл активно использовать свободное пространство, членить текст, группировать его части. При этом расстояние между пунктами должно демонстрировать соотношение элементов, ориентировать пользователя: эта кнопка относится к этой группе элементов.
Все вышесказанное имеет еще большее значение при адаптации дизайна интернет-ресурса для таких гаджетов, как планшеты и мобильные телефоны. Их экраны существенно меньше. Кроме того, ими нередко приходится пользоваться в условиях, когда невозможно, например, улучшить освещение. В такой ситуации приобретают особую значимость вопросы четкости и контрастности элементов интерфейса, удобочитаемости шрифта.
Однако следует отметить, что в данном случае продуманного цветового решения недостаточно. Проблему решает так называемая «отзывчивая архитектура». Эта молодая дисциплина развивает набор инструментов, используя которые можно сделать сайт более «эластичным», то есть сам ресурс будет адаптироваться к разным устройствам.
Соответствующие инструменты описаны в книге Итана Маркотта «Отзывчивый веб-дизайн» [3]. Перечислим те из них, которые были использованы в нашей работе (рис. 6).
Рис. 6. Возможности адаптации
1. Гибкий макет на основе сетки. Типографская сетка — инструмент для размещения содержимого. Сетка пропорциональная размеру страницы, и благодаря этому страница масштабируется в соответствии с размерами устройств.
2. Гибкие изображения (/lexibleimages). Для отзывчивого веб-дизайна важны изображения, подстраивающиеся под размер устройства.
3. Медиазапросы анализируют физические характеристики устройства, использующегося для отображения страницы. Они решают проблемы, которые могут появиться при создании страницы на основе, например, маленькой сетки.
г(ш)}
Iл
Выводы. Разрабатывая визуальную концепцию интернет-ресурса, следует заранее определиться с элементами дизайна, которые непосредственно влияют на удобство навигации и восприятие контента пользователем. Важнейшую роль будет играть колористика. Основные цвета должны быть привлекательными и обеспечивать достаточный уровень контрастности. Некоторые компоненты дизайна оформляются традиционно, в соответствии со сложившейся практикой: например, логотип размещается в верхнем левом углу главной страницы, ссылки выделяются ярко-синим цветом.
На современном этапе развития веб-дизайна грамотно выстроенной цветовой концепции будет недостаточно. Следует учитывать принципы так называемой «отзывчивой архитектуры».
Кроме того, в дальнейшем при разработке цветовых решений необходимо провести предварительное анкетирование, чтобы собрать и проанализировать мнения разных групп пользователей.
Библиографический список
1. Иттен, И. Искусство цвета / И. Иттен. — Москва : Издатель Дмитрий Аронов, 2000. —
2. Уилан, Б. Гармония цвета. Новое руководство по созданию цветовых комбинаций / Б. Уилан ; пер. с англ. Г. Щелоковой. — Москва : Астрель ; АСТ, 2005. — 160 с.
3. Маркотт, И. Отзывчивый веб-дизайн» / И. Маркотт. — Манн, Иванов и Фербер, 2012. —
96 с.
176 с.
4. Нильсен, Я. Веб-дизайн / Я. Нильсен. — Санкт-Петербург : Символ-Плюс. — 512 с.
