Конспект 18.10. Изобразительные средства дизайна предварительный перевод термина Webdesign
 Скачать 25.89 Kb.
|
|
Изобразительные средства дизайна предварительный перевод термина «Web-design» с английского языка на русский - "проектирование для Интернета". Изобразительными средствами дизайна являются: точка, линия, фактура, текстура, цвет, форма, пропорция и др. Текстура - характер поверхности какого-либо объекта, обусловленный его внутренним строением, структурой, объективными физическими свойствами (дерево, металл, стекло, ткань). Фактура - внешние свойства поверхности объекта (гладкая, шероховатая, зеркальная). Фактура характеризует качество обработки поверхности объекта. Форма - внешнее очертание, наружный вид, контур объекта. Цвет - свойство тел вызывать определенное зрительное ощущение в соответствии со спектральным составом и интенсивностью отражаемого или испускаемого ими видимого излучения. Основные параметры цвета - цветовой тон, насыщенность и светлота. Цветовой тон определяется спектральным составом света, насыщенность - количеством добавляемого серого цвета, а светлота - яркостью. Пропорция - связь составляющих внутри сложного целого. Различают следующие виды пропорций: арифметическую, геометрическую, гармоническую. Композиция - соединение различных частей (элементов) в единое целое произведение в соответствии с какой-либо идеей. Элементы художественного произведения должны находиться в гармоническом единстве. Композиция - показатель художественной культуры дизайнера, чувства меры и стиля. Симметрия - такое размещение изображаемых объектов, при котором они располагаются почти зеркально по отношению к центральной оси художественного произведения (Web-страницы). Симметричные композиции - статичные (устойчивые), левая и правая половины изображений уравновешены. Нарушение симметрии создает ощущение беспокойства, динамики, сложности. Асимметрия - произвольное расположение изображаемых объектов, при котором левая и правая половины художественного произведения становятся неуравновешенными. Равновесие - состояние, при котором все элементы сбалансированы между собой. Равновесие вызывает ощущение покоя и уверенности. Движение - иллюзия динамики, создаваемая на статических картинах специальными изобразительными приемами (использование диагональных линий и размытого фона, введение свободного пространства перед движущимся объектом, выбор характерных фаз движения объекта - моментов кульминации движения). В Web-дизайне эффект движения создается средствами анимации. Ритм - чередование различных элементов, которое придает композиции четкость, стройность, особую выразительность, динамичность (строение ветвей дерева, стоящие вдоль улицы дома, повороты голов людей, стоящих группой). Гармония - соразмерность всех частей целого. Контраст - резкое различие элементов композиции (противопоставление темного и светлого, высокого и низкого, легкого и тяжелого, тонкого и толстого, линий и пятен). Колорит - гармоничное сочетание, взаимосвязь, тональное объединение различных цветов. Перспектива - способ изображения трехмерного пространства на плоскости в соответствии с кажущимся изменением размеров и четкости объектов. Дизайнеры делают степень изменения размеров и четкости пропорциональными величине отдаленности объектов от точки их наблюдения. Благодаря художественной перспективе изображение становится объемным, стереоскопичным. Web-дизайнер (или несколько русифицированные термины: Web-мастер, Веб-мастер) - художник-программист, занимающийся Web-дизайном. В отличие от классических произведений изобразительных искусств, в Web-дизайне не используются карандаши, кисти, мольберты, краски. Здесь нужны иные инструментальные средства (HTML-редакторы, графические, видео и звуковые редакторы, аниматоры, редакторы скриптов, специальные утилиты, программы для создания фотоальбомов, разнообразные сетевые технологии, языки программирования, цифровые фотоаппараты, сканеры и др.). На Web-страницах присутствуют не только текст и статические изображения, но и анимация, видео- и аудиоклипы. При проектировании сайта дизайнеру приходится обращать внимание на правильный выбор цвета шрифта и цвета фона. Рекомендуется отдавать предпочтение синим буквам на белом фоне, черным на желтом, зеленым на белом, черным на белом, белым на синем. Данные психологических исследований говорят о том, что человеческий глаз воспринимает красный, оранжевый, желтый цвета (и их оттенки) как теплые. Синий, фиолетовый цвета и их оттенки воспринимаются человеком как холодные. Это связано, видимо, с тем, что солнце и огонь содержат красные и желтые цвета, а снег, лед - голубые и синие цвета. Как правило, теплые тона на рисунке обладают свойством "приближаться", а холодные - "удаляться". Другими словами, предметы, нарисованные теплыми тонами, будут казаться расположенными ближе предметов, изображенных холодными тонами. Белый, черный и серый цвета называются ахроматическими, все прочие - хроматическими. Особенности воздействия цвета на человека изучает наука колористика Рекомендации по созданию Web-сайта: Целесообразно не перегружать страницу большим числом деталей. Это связано с тем, что человек за короткое время способен воспринять и запомнить не более 7-8 объектов. Считается, что чем меньше размер объекта, тем больше должна быть его контрастность. Замечено, что четко выраженный фоновый рисунок на Web-странице повышает утомляемость глаз и снижает эффективность восприятия текста. Для исключения пестроты страницу рекомендуется создавать с использованием не более четырех основных цветов. На всех страницах одного сайта рекомендуется использовать одинаковые панели навигации, размещенные в одинаковых местах. Каждая Web-страница сайта должна иметь ссылку на главную страницу сайта. На последней стадии проектирования сайта целесообразно проверить работоспособность всех сделанных гиперссылок. Завершая проектирование сайта, желательно просмотреть его с помощью различных браузеров (MS Internet Explorer, Netscape Navigator, Opera). Текст на сайте телефона Если вы создаёте макет веб-сайта или приложения, которым можно будет пользоваться с телефона, тогда размер шрифта в не менее 16px. Для второстепенного текста, подписей для полей и картинок используйте размер на пару значений меньше: например, 13px или 14px. Текст на сайте с ПК Текстовые страницы На текстовых страницах нужно использовать более крупные размеры шрифта. 16px — абсолютный минимум для текстовых страниц 18px — лучше начинать с этого размера. Вы же не печатаете текст в ворде с одинарным межстрочником. Вы оформляете текст для людей, которые сидят в метре от своих допотопных мониторов. 20px+ — поначалу может показаться прям очень огромным, но попробовать его стоит в любом случае. Интерактивные страницы Для интерактивных страниц, подойдут и размеры поменьше. Важная мысль: на любой интерактивной странице размер шрифта в МЕНЬШЕЙ степени зависит от свода правил (скейлинг шрифтов), чем от определённых потребностей каждого участка текста и взаимодействия между ними. Цвет на сайте Выбор цвета для дизайна сайта — один из ключевых моментов в разработке, и лучше выбирать его, опираясь на аналитику и психологию маркетинга, чем на личные вкусы и понимание прекрасного. Цветовое кольцо — это круг, разделенный на сегменты. В базовой версии кольца первичной, есть сегменты только трех основных цветов: красного, зеленого и синего. Для получения спектра второстепенных цветов нужно смешать соседние цвета сегментов первичного кольца. Семь схем сочетания цветов для сайтов: Монохроматическая. Для оформления выбирается один основной цвет, а дополнительные формируются из его оттенков (регулируется насыщенность, светосила). Комплементарная. Подбор цвета для веб сайта начинается с выбора двух контрастных тонов, которые дополняются еще несколькими производными оттенками. Сплит. Схема похожа на комплементарную, но один из контрастных цветов заменен на два похожих из соседних сегментов круга. Аналоговая. Согласно этой схеме выбираются 3 цвета для сайта из идущих подряд соседних сегментов: один используется в качестве основного, а два других играют роль дополнительных. Триада. Дизайнер берет три цвета, одинаково удаленных друг от друга, и на их основе формирует цветовую палитру. Прямоугольник. Здесь в игру вступают четыре цвета, а каждая пара подбирается по принципу контраста. Квадрат. Схема напоминает предшествующую, но все цвета одинаково удалены друг от друга. Помимо схем сочетания цветов, при оформлении сайта учитываются цветовые модели: RGB, построена на трех основных цветах: красном, зеленом, синем. Все прочие оттенки образуются путем смешивания этих цветов. В HTML оттенки кодируются символами от 00 до FF, перед которыми вводится символ #. CMYK, основана на четырех основных цветах: голубом, пурпурном, желтом, черном, и включает оттенки, образованные их соединением. Помимо того, что дизайнер знает о целевой аудитории, на выбор оттенков влияет: - Фирменный стиль - Тематика. Например, бренды парфюмерии часто выбирают оттенки фиолетового, эко-бренды — зеленого, соцсети — синего, кофейни — коричневого. о это не значит, что вы не можете сделать фирменным цветом кофейни — белый, а соцсеть «покрасить» в красный, как сделал небезызвестный Pinterest. - Тренды Цвета и психологические особенности их восприятия Красный. Ассоциируется с агрессией, властью, страстью, любовью. Акцентирует внимание, вызывает чувство тревоги и опасности. Этот цвет идеально подходит для выделения триггеров, призывов к действию, функциональных элементов сайта. Но при оформлении нужно быть осторожным, такой насыщенный и экспрессивный цвет может сыграть не в вашу пользу. Оранжевый. Этот цвет для сайта ассоциируется с молодостью, дружелюбием, позитивом, яркими положительными эмоциями, энергией и драйвом. Пробуждает творческое начало. Его часто используют для молодежного стиля оформления, а также придания сайту динамичности. Оранжевый выгодно смотрится в оформлении акцентов: при правильно подобранных дополнительных оттенках он будет акцентировать внимание на важном. Желтый. Цвет радости, детства, счастья, прилива жизненных сил. Иногда ассоциируется с солидностью, статусом, авторитетностью. Нюансы восприятия зависят в большей степени от выбранного оттенка: температуры, насыщенности, присутствия света и тени. Можно уверенно использовать желтые цвета для бизнес сайта, а можно – для магазина детских товаров. Этот универсальный цвет подходит разным тематикам, усиливая каждый конкретный посыл. Зеленый. Ассоциации: здоровье, природа, развитие, экологичность, безопасность, финансы. Этот цвет открывает множество перспектив цветовых сочетаний: его можно миксовать с теплыми и холодными оттенками, в зависимости от тематики сайта. Насыщенные и темные оттенки зеленого лучше всего передают эмоции денег, финансовой стабильности. Синий. Такой выбор цвета для дизайна сайта будет оправдан, если вам необходимо завоевать доверие пользователя, внушить ему спокойствие и уверенность, создать ощущение надежности и убедить в своем профессионализме. Кроме того, глубокий синий смотрится роскошно и эстетично в оформлении сайта, что уместно в тематике дизайна, флористики, ювелирных украшений и т.д. Фиолетовый. Цвет роскоши, изысканности, избранности. Ассоциируется с романтикой, мистикой, таинственностью. Подходит сайтам мистической направленности, магазинам по продаже эксклюзивных товаров. Фиолетовый оправдан и в тех случаях, когда целевая аудитория – преимущественно женщины. Белый. Чистота, простор, свобода, добро. Этот цвет часто используется в качестве фонового. Такое решение оптимально для интернет-магазинов, поскольку позволяет сосредоточить внимание на самих товарах. При большом количестве контента белый фон позволяет визуально структурировать информацию и избавляться от ощущения перегруженности. Используется для создания трендового минималистичного дизайна. Черный. Изысканность, напряжение, доминирование, минимализм. С этим цветом стоит быть осторожным. Он может восхитить пользователя сочетанием минимализма и роскоши, а может вызвать негативную реакцию, раздражение. Впрочем, последнее случается всё реже. Больше того, наличие на сайте темной темы — один из основных трендов мира разботки корпоративных сайтов в 2020-х. Оптимальная рабочая палитра для дизайна сайта — это 3-4 цвета: Основной цвет — им выделены ключевые акценты на страницах; Дополнительный — используется для второстепенных блоков, выгодно сочетается с основным, но не отвлекает от него. Фоновый — спокойный оттенок, на котором не теряются основной и дополнительный цвета. Цепляющий — контрастный к основному цвет, который притягивает внимание посетителя к целевым точкам: кнопкам, формам, объявлениям. 6 основных принципов веб-дизайна и их использование на практике Принцип первый: балансировка Принцип второй: акцентирование Принцип третий: повторение Принцип четвертый: выравнивание Принцип пятый: контрастирование Принцип шестой: удобство восприятия |