'

Теория web-дизайна

Понравилась презентация – покажи это...





Слайд 0

Теория web-дизайна


Слайд 1

Под Web-дизайном понимают: создание графических элементов для сайта проектирование структуры проектирование навигации интернет-программирование


Слайд 2

Рекомендуемые к использованию типы графических вставок в web-страницы Навигационные кнопки Логотип Маркеры списков Титульная графика Разделительные линии Фоновые рисунки Графический заголовок Фотографии


Слайд 3

Структура сайта должна содержать не более 7-ми пунктов быть не сложной использовать иерархическое меню: выделить основные разделы сайта второстепенные разделы доступны после выбора одного из основных Уровень вложения меню не более 3-го


Слайд 4

Пример общей структуры сайта компании Новости компании Информация о фирме Услуги фирмы Каталог товаров Контактная информация


Слайд 5

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


Слайд 6

Все графические изображения на сайте должны соответствовать выбранной цветовой гамме, используемым шрифтам и примененным эффектам Оптимальный суммарный размер web-страницы составляет 40-60 Кб Любая добавочная графика на странице должна служить функциям, связанным с тематикой и контентом сайта


Слайд 7

Стоимость работ по созданию дизайна для сайта может составлять от $300 до $30 000 и зависит от: объема сайта, количества графических элементов, уровня специалистов, которые над ним работают, необходимости программирования и др.


Слайд 8

Основы дизайна


Слайд 9

Основы построения композиции


Слайд 10

Compositio (лат.) – соединение, приведение в порядок Задача композиции – соединить в целое отдельные элементы изображения Рисунок состоит из множества частей, которые в зависимости от композиции по-разному привлекают внимание: сила цвета размер расположение


Слайд 11

Части рисунка уравновешены, если они имеют равноценную зрительную тяжесть (одинаково привлекают внимание) Равновесие достигается: 1. на основе симметрии (например, орнаменты)


Слайд 12

2.уравновешивание элементов вокруг центра окружности: ось симметрии – радиусы окружности, делящие ее на равные части 3. Равновесие на основе асимметрии – правильное соотношение зрительной тяжести всех частей рисунка


Слайд 13

Объекты, расположенные близко друг к другу, воспринимаются связанно Например, Заголовок всегда должен быть привязан к своему абзацу Правильное расположение заголовка


Слайд 14

Основные линейные схемы композиции вертикальная горизонтальная диагональная мелкое или крупное пятно и др. В основе линейной композиции лежит свойство глаза двигаться по воображаемым линиям (опорным точкам) сосредотачиваясь на объекте


Слайд 15

Линейная схема – обобщение до простейшей геометрической фигуры: треугольник, круг, прямоугольник… и построение соотношений между частями изображения.


Слайд 16

Восприятие вертикали -устойчивость: растущее дерево, скала и др. Композиция на основе пересечения горизонтали вертикалью под прямым углом –устойчива, статична Вертикальные направления в композиции используют для торжественности, величия, приподнятости и др.


Слайд 17

Треугольная композиция содержит вертикальную ось – устойчива Вертикальная композиция зрительно увеличивает верхнюю часть, поэтому зрительный (оптический) центр всегда ниже геометрического


Слайд 18

Диагональная композиция – является динамичной, создает эффект движения, за счет нарушения весового и ? оптического равновесия частей плоскости одна часть облегчена, другая – перегажена Композиция по 2-м диагоналям – концентрирует внимание на пересечении направлений – столкновение движений Крестообразная схема воспринимается как статичная


Слайд 19

Композиция по квадрату – устойчива Композиция по квадрату прямоугольникам применяется в титульных элементах (блочная схема) Схема построения разворота:


Слайд 20

Композиция по овалу – центральная ось воспринимается не так четко как у треугольника, объекты приобретают плавность, взгляд скользит по направлению линии овала Такая композиция более динамична при использовании части овала


Слайд 21

Композиция по кругу – круг сосредотачивает внимание на центре, зрительная ось не играет существенной роли Используется для концентрации внимания на центральной части изображения


Слайд 22

Тональная композиция – уравновешивание частей изображения за счет цветовых пятен различной тяжести: маленькое черное пятно по тяжести = большому серому Неуравновешенная композиция Уравнове- шенная композиция


Слайд 23

Гармоничным является сочетание отрезков, где каждый последующий отрезок больше или меньше предыдущего в определенное число раз: h1/h2=h2/h3=h3/h4 и т.д. Принцип Золотого сечения Длина отрезка =1 х – большая часть длины отрезка, образованная золотым сечением 1-х – оставшаяся часть отрезка Эти отрезки удовлетворяют условию: 1/x = x/(1-x)


Слайд 24

При определении отношений золотого сечения используют «золотой ряд» 2, 3, 5, 8, 13, 21, 34, … Каждое значение ряда получают сложением двух предыдущих: 5+8=13 8+13=21 … Основные соотношения в полиграфии: 3:8 3:13 Для трех величин 3:5:8 3:5:13 3:8:13 …


Слайд 25

Построение ассоциативного ряда композиции Восприятие текста (в большинстве языков) - слева направо и сверху вниз Используется часто в карикатурах, сюжетном тексте Текст вопроса выносится вверх изображения, ближе к левому углу, а текст ответа - вниз изображения или справа от вопроса


Слайд 26

Пространственное восприятия информации - Передний план воспринимается раньше - Эффект заднего плана можно создать сильной размывкой - Объект с нормальной резкостью будет выглядеть расположенным на переднем плане и восприниматься первым


Слайд 27

- Крупные и яркие (контрастирующие) элементы воспринимаются раньше мелких, детализированных Любой «выделенный» объект в композиции становится тематическим центром Следует использовать не более 3 тематических центров при 5-7 управляющих элементах (в рекламных материалах еще меньше)


Слайд 28

Позитивный угол направления движения в двумерном пространстве - сумма векторов вверх и вперед с направлением в сторону правого верхнего угла В противоположной стороне - негативный угол Стремление в левый верхний угол - движение наверх, но не позитивное, в правый нижний - стремление к провалу Объект, расположенный в середине - спокоен и поддерживает симметричность композиции


Слайд 29


Слайд 30

Существует представление: жирный шрифт передает надежность компании надпись, занимающая все пространство, заметнее надписи, вокруг которой есть воздух прописные буквы смотрятся солиднее строчных и т. д. 


Слайд 31

Использованы противоположные направления: белые диагонали стремятся в левый нижний угол если предположить, что диагонали направлены в позитивную сторону, то их давит доминирующий желтый треугольник, который через секунду скатится вниз острые углы трех составляющих пирамиду треугольников все направлены вниз прописные буквы, набранные жирным шрифтом, не в состоянии удержать такую рассыпающуюся конструкцию Матрица эмоций для логотипа компании ЮКОС «Знак явно продавали клиенту с легендой о самой устойчивой геометрической фигуре» А.Лебедев


Слайд 32

Логотип «BP»  симметричная, спокойная, экстравертная, солнечно-цветочная композиция два позитивных луча направлены в сторону двух строчных букв названия динамика поддерживает спокойствие


Слайд 33

«Загибание и процветание  запрограммированы в знаках» А.Лебедев


Слайд 34

Пример использования матрицы эмоций в рекламе


Слайд 35

«Когда у корпорации МиГ дела пойдут хорошо, они закажут себе новый логотип, изменят курс птицы и, самое главное, перестанут использовать наклоненные влево буквы (что вообще противоестественно)» А. Лебедев


Слайд 36

Примеры исключений и частных случаев несколько композиций на одном листе не все объекты являются частью композиции к статичным объектам данная матрица неприменима Логотип компании, размещенный в правом нижнем углу не обязательно будет передавать негатив, если он расположен среди, например 8 логотипов рекламных блоков из 10


Слайд 37

Статусная строка отражает направление ссылки и состояние загрузки страницы Многие разработчики сайтов размещают в статусной строке: время, бегущую строку новостей, произвольный текст, например, «Добро пожаловать» при наведении курсора на ссылку «Новости» выдают в статусной строке слово «Новости».


Слайд 38

Вывод нельзя вмешиваться в привычный стандартный интерфейс нельзя прятать элементы интерфейса в ситуациях, когда пользователь их ожидает


Слайд 39

Освещение - Любой источник света заставляет обращать на себя внимание: тень и затемнение некоторых деталей подразумевают существование источника света и затемненные детали оттесняются более яркими


Слайд 40

Пропорции и перспектива в реалистичных изображениях и коллажах Законы пространственной геометрии и естественных пропорций - это законы природы Нарушение которых создает зрительный дискомфорт в изображении, иногда это делается сознательно для привлечения внимания


Слайд 41

Психологическое восприятие цветов - цвет вызывает ассоциации - цвет может определять тематическую направленность Линии, стрелки или направленный градиент оказывают устойчивое направляющее воздействие


Слайд 42

Три вида воздействия цвета на человека: 1. Физическое 2. Эмоциональное 3. Оптическое


Слайд 43

1. физическое - воздействие цвета на физиологию человека, подтверждено экспериментальным путем и зависит от количества цвета, качества цвета, времени воздействия, особенностей нервной системы, возраста, пола и других факторов.


Слайд 44

Схемы предпочтения цветов у женщин и мужчин Мужчины: Зеленый Синий Красный Белый Желтый Черный Женщины: Синий Зеленый Белый Красный Желтый Черный 3. Белый 4. Белый


Слайд 45


Слайд 46


Слайд 47

2. Эмоциональное восприятие цвета


Слайд 48

Сине-черные цвета характерны для металла и более присущи машиностроительной отрасли и всем производствам, связанным с металлом


Слайд 49


Слайд 50


Слайд 51

Фиолетовый - цвет тревоги, беспокойства, неуверенности, меланхолии (люди выбирают в период неустойчивости) Совмещение красного цвета с фиолетовым без третьего разделяющего цвета всегда вызывает у наблюдателя раздражение Синий – гармоничный цвет, снимает стресс, его предпочитают на меланхолики


Слайд 52

Цвета на сайте несут декоративную и ассоциативную нагрузку Например, деятельность фирмы связана с морем логично использовать морские цвета: синий, голубой, лазурный или их сочетания


Слайд 53

Профессиональная гамма фармацевтов Зеленый цвет – болеутоляющий, снимает раздражение, понижает давление Голубой – антисептический Оранжевый – стимулятор, учащает пульс, влияет на повышение давления, создает чувство веселья, но быстро утомляет Желтый – стимулирует мозговую активность, эффективен при меланхолии, но легко вызывает раздражение


Слайд 54


Слайд 55


Слайд 56


Слайд 57


Слайд 58

Цветовые сочетания цветов текста в порядке снижения эффекта восприятия 9. Белый на синем 3.Зеленый на белом 1. Синий на белом 2. Черный на желтом 5.Желтый на черном 7.Зеленый на красном 8.Красный на желтом В числе последних: Красный на белом Белый на красном Желтый на красном 4.Черный на белом 6.Белый на черном


Слайд 59

Основные характеристики кажущегося воздействия цветов


Слайд 60

Цвет, расположенный по вертикали - легкость, диагональ - динамика, горизонталь - устойчивость Напряжение цвета внизу - устойчивая, вверху - неустойчивая композиция (неестественность положения, высокое давление, с какого-либо края)


Слайд 61

Концентрация активного цвета в правом верхнем углу активизирует композицию, зрительно увеличивает размер В левом нижнем - создает иллюзию пассивности и зрительного сжатия, движение назад


Слайд 62

Цвет, представленный кругом, увеличивает плоскость и создает движение вперед, впечатление усиливается, если это желтый, красный или оранжевый круг


Слайд 63

Квадрат, окрашенный в холодные тона, наоборот, создает впечатление вогнутости и сжатия


Слайд 64

Если на какой-либо поверхности внизу даны темные цвета, а наверху светлые - решение производит стабильное впечатление Наоборот - впечатление неустойчивости «Равновесие» - устойчивость, и достигается с помощью «соответствия»


Слайд 65

3. Оптическое - иллюзии или оптические явления, вызываемые цветом и изменяющие внешний вид предметов Условно выделяют две группы цветов: красные и синий –все остальные цвета по своим оптическим свойствам относят к одному из них Зеленый цвет - исключение


Слайд 66

Например, светлые цвета: белый или желтый, создают эффект иррадации - они как бы распространяются на расположенные рядом с более темные цвета и уменьшают окрашенные в эти цвета поверхности Пример: солнце светит сквозь ветви деревьев, ветви эти кажутся более тонкими, чем обычно


Слайд 67

Этот факт используется при конструировании шрифтов: буквы E и F сохраняют свою полную высоту, высота букв O и G, несколько уменьшается, буквы A и V имеют острые окончания - уменьшение еще больше Эти буквы кажутся ниже общей высоты строки. Для выравнивания при разметке их выносят несколько вверх или вниз за пределы строки.


Слайд 68

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


Слайд 69

Желтый цвет зрительно приподнимает поверхность, она кажется к тому же более обширной из за эффекта иррадации Красный цвет вызывает эффект приближения


Слайд 70

Голубой – наоборот- удаляет Плоскости темно-синего, фиолетовый и черный цвета, зрительно уменьшаются и устремляются книзу Зеленый цвет - наиболее спокойный из всех цветов


Слайд 71

Центробежное движение желтого цвета и центростремительное - синего.


Слайд 72

Примеры неустойчивых композиций http://www.ritsumei.ac.jp/~akitaoka/ - Япония


Слайд 73


Слайд 74

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


Слайд 75

Темная звездочка кажется дальше и визуально «тянет» свой угол вглубь Светлая кажется ближе, и тоже «тянет» свой угол вперед. ? иллюзия - пространственные и перспективные искажения. При этом оранжево-желтая сетка остается по прежнему равномерной и стабильной.


Слайд 76


Слайд 77


Слайд 78


Слайд 79

Фирменый стиль Фирменный стиль - совокупность художественных приемов, создающих единый характер подачи рекламных материалов, разработанных на базе оригинального графического дизайна. Внедрение единого фирменного стиля во все формы рекламной деятельности фирмы способствует узнаваемости продукции на рынке, вносит порядок в проводимую рекламную кампанию. Искажение фирменных цветов, пренебрежение модульной системой верстки, замена фирменных шрифтов разрушают образ фирмы.


Слайд 80


Слайд 81

Классические шрифты: 1. с засечками (например, Times) 2. рубленные (например, Pragmatica)


Слайд 82


Слайд 83

Как вариант заливки, например, логотипа (или его части) можно использовать спектр радуги или похожий сложный градиент


Слайд 84

Заливка сливается с фоном логотипа Для предотвращения сливания логотипа с фоном в тех местах, где их цвета совпадают выполняют контур


Слайд 85

Любую букву в слове сделать отличной от других размером и/или цветом и/или гарнитурой и т.п. Наиболее распространение приемы дизайнеров при разработке логотипов


Слайд 86

Использование Слияния Букв две и более соседних букв переходят одна в другую: окончание буквы совмещается с началом соседствующей путем горизонтального смещения последней Естественно соединенными выглядят, например, такие буквенные пары: VZ, ET, LM, AN


Слайд 87


Слайд 88

Переходить друг в друга буквы могут в одной точке и в плоскости. Как правило это буквы, образующие кернинговые пары, например, VAW, AY «-» редкий положительный эффект (исключение, например, CNN)


Слайд 89


Слайд 90

«!» соединение букв горизонтальным смещением Рекомендуется для наполненных (тяжелых) гарнитур, увеличивая таким образом общую площадь для заполнения


Слайд 91

«!» Использование заполнения Букв(ы) с помощью заливки: текстура, рисунок Для заливки подходят буквы, как правило плотных гарнитур - большая площадь закраса при удалении внутреннего контура: Q, O, D, I


Слайд 92

«!» Размещение текста внутри геометрической фигуры, как правило, правильной формы Самые популярные фигуры: 1. круг и эллипс 2. квадрат и прямоугольник с максимально скругленными на торцах углами Практически не используются n-угольники с n>6


Слайд 93

Фигура может нести и смысловую нагрузку: (круг/овал) + (параллели и меридианы) символизируют глобус и путешествия или международные отношения demos


Слайд 94

правильный шестиугольник может символизировать продукты пчеловодства или сотовую связь геометрическая фигура может служить для текста формой (фигура может отсутствовать, граница текста ее воспроизводит)


Слайд 95


Слайд 96


Слайд 97


Слайд 98


Слайд 99

joker joker


Слайд 100

«!» Использование аббревиатуры – наиболее распространенный способ в качестве знака, сопровождающего текст, выступает обыгранная первая буква названия организации (либо первые буквы, если слов в названии несколько)


Слайд 101

«!» Создание ассоциативного знака Логотип должен вызывать положительные ассоциации и/или не вызывать отрицательных


Слайд 102

Знак, сопровождающий текст, может: располагаться над текстом, быть его частью, доминировать в композиции, быть меньше самой маленькой буквы текста Главное – положительные эмоции Положительные эмоции вызывает то, что жизненно необходимо человеку, или приносит ему пользу: вода, еда, природа, объекты любви, традиции…


Слайд 103

Факторы, способствующие отрицательным эмоциям: 1. Социальная категория потенциальных потребителей логотипа: то что доступно богатому, не всегда доступно бедному Пример, фирма производит по индивидуальным заказам эксклюзивные дорогостоящие машины/ яхты/ дома, мнения несостоятельных людей этой фирме безразличны. И наоборот, использование аттрибутов эксклюзивности в продуктах первой необходимости, вызовет у низкодоходной части населения стойкое чувство неприязни ? потеря значительной части рынка сбыта товара


Слайд 104

2. Национальные обычаи Пример, Отношению к одному и тому же животному/растению в разных странах могут разительно отличаться: животное или растение, не вызывающе абсолютно никаких ассоциаций в Европе, может иметь значение жизни и смерти в Африке или на Ближнем Востоке. Поэтому, выходя с товаром на рынок, следует узнать, что вызывает негативную (позитивную) реакцию в данном регионе


Слайд 105

Влияние цвета на восприятие в разных странах также различны: Красный Россия – активность, агрессия Америка – любовь Китай – доброта, праздник, удача Индия – жизнь Желтый Россия – солнечность и разлука Америка – процветание Сирия – траур, смерть Индия – великолепие


Слайд 106

3. Религиозная символика использование привлекает сторонников конкретно этой религии и автоматически отталкивает сторонников всех остальных, кроме тех случаев, когда продукция нацелена представителей конкретной религии Например, причиной негативной ассоциации на религиозной основе может стать не только религиозная символика, но и изображение в логотипе, например, свиньи или собаки, которые считаются в Исламе нечистоплотными животными. В некоторых (рубленых, плотных) шрифтовых гарнитурах прописная буква "t" имеет вид креста и использование даже одной такой буквы в логотипе оттолкнет людей, не причисляющих себя к сторонникам христианства


Слайд 107

3. Политический фактор Например, использование в логотипе свастики, изображений, символизирующие войну (меч, воин и др.) в странах, недавно переживших войну


Слайд 108

4. Другие факторы: - узкая специализация фирмы, например, компьютерный или медицинский бизнес - возрастная принадлежность и т.п. Например, сделав акцент на местный рынок, рискуете попасть в не лучшую ситуацию , выйдя с имеющимся логотипом на мировой рынок


Слайд 109

Абстрактные знаки не конкретизирует объект (нейтральные знаки) и не вызывает у наблюдателя однозначной реакции, а для возникновения ассоциаций требует воображения


Слайд 110

Любой знак должен символизировать определенные понятия и/или идеи хотя бы для владельца логотипа для правильного выстраивания рекламной компании с использованием нового логотипа Популярность и известность логотипа с нейтральным знаком полностью зависят от рекламной политики фирмы и качества предостовляемых фирмой товаров/услуг


Слайд 111

Иногда знаки отображают конкретные объекты По способу ассоциативного воздействия выделяют группы: национальная символика, географические достопримечательности, сфера деятельности, животные прочее


Слайд 112

Национальной символикой в логотипе принято обозначать принадлежность той или иной компании государству (национальные компании) Пример, использование герба и флага Украины в логотипе национальной авиакомпании


Слайд 113

Коммерческая негосударственная фирма тоже может иметь в своем логотипе национальную символику: эмоциональное воздействие знака будет зависеть от географического и политического факторов


Слайд 114

- знак привлечет к себе патриотов страны на ее территории и за ее пределами - отношение к логотипу внутри страны зависит от общего уровня благосостояния, которое в свою очередь является следствием деятельности правительства и уровня развития экономики в данной стране


Слайд 115

Пример некоторое время украинском рынке компания по продаже компьютеров DiaWest Computers работала с логотипом и слоганом «Украинский компьютер» В продаваемых компьютерах нет украинских комплектующих ? логотип и слоган воспринимались как: 1. заведомая ложь 2. низкое качество компьютеров Выбранная рекламная политика не способствовала процветанию фирмы


Слайд 116

Использование в логотипе географических достопримечательностей (египетские пирамиды или же Эйфелева башня в Париже) конкретизирует место основной деятельности фирмы-владельца логотипа (туристические организации)


Слайд 117

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


Слайд 118

Географическое положение фирмы можно отобразить шрифтовой гарнитурой Например, кириллическая гарнитура - славяне (как правило, место определяется как Восточная Европа), готика соответствует Центральной Европе, арабская вязь - Ближний Восток и т.д.


Слайд 119

Изображение предмета, имеющего непосредственное отношение к деятельности фирмы, укажет потребителю на специализацию в данном секторе рынка Как правило такие логотипы вызывают нейтральную реакцию


Слайд 120

Образы животных в логотипе - используются для быстрого создания имиджа компании и может нести в себе разные смысловые нагрузки: 1. Схожесть свойств - фирме приписываются те качества, которые в присущи данному животному


Слайд 121

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


Слайд 122

География вида - конкретное место обитания некоторых видов животных или же они являются древними символами страны (геральдика средних веков и позже) Например, медведь во всем мире считается животным русской национальности все сумчатые живут исключительно в Австралии Логотип австралийской авиакомпания Qantas


Слайд 123

Существует категория знаков, которая и не является абстрактной, и не несет конкретного однозначного смысла Пример, Логотип LG Electronics


Слайд 124

Выводы: Использовать одну из классических гарнитур (с засечками или без), или же создать свою собственную гарнитуру 2. «центр тяжести» рисунка должен находиться в центре пересечения вертикальной и горизонтальной осей 3. Выполнить вариант логотипа с использование слитых вместе букв и раздельный вариант


Слайд 125

4. Использовать не более двух цветов (большое количество цветов в логотипе трудно согласовать друг с другом и с будущей рекламой) Любой логотип должен выглядеть качественно и в черно-белом исполнении 5. Использовать не более двух различных шрифтовых гарнитур в одном логотипе, один из шрифтов обязательно должен быть классическим


Слайд 126

6. Большая разница между максимальной и минимальной ширинами элементов логотипа приводит к потере качества при уменьшении (или просто при беглом взгляде на него) - мелкие/легкие детали пропадают, а при увеличении - крупные/тяжелые детали становятся слишком грубыми


Слайд 127

При выборе шрифтовой гарнитуры или при создании знака самая широкая часть логотипа (W max) не превышала самую узкую (W min) более, чем в три раза.


Слайд 128

Избыточное число различных толщин/ширин дисбалансирует логотип и действует на потребителя угнетающе Логотип имеет: два значения ширин A – макс. и B – мин., одно межстрочное расстояние С Расстояние между буквами L и O корректируется в соответствии с правилами кернинга


Слайд 129

Если число ширин три и более, общий вид логотипа непригляден


Слайд 130

7. Использование заглавной и прописной букв одинаковой высоты рядом делает логотип неестественным - ассоциации - чувство тревоги и раздражение пропорциональное увеличение прописной букв приводит к появлению проблемы ширин 8. Ассоциации вызываемые логотипом должны нести только положительные эмоции


Слайд 131

Основные ошибки при фотомонтаже Большое количество объектов на изображении. Исключение - коллажи, цель которых соединить в одном рисунке множество объектов. Объектов должно быть минимум - чтобы передать идею. Каждый лишний объект отвлекает зрителя от сути, в результате эффективность резко снижается.


Слайд 132

2. Несоответствие фотомонтажа тому, что он символизирует (рекламирует). Часто такие несоответствия встречаются на плакатах (реклама медикаментов - изображение цветов) 3. Неправильное использование тени. Если в работе есть освещение, то должна быть тень от всех объектов


Слайд 133

4. Жесткие края вставляемого объекта. Жесткие контуры получаются при вырезании предмета, в реальной жизни не бывает. Смягчить? Blur (Размытие) или Feather (Оперение) Сильно размытые края предметов создают впечатление плохого качества


Слайд 134

5. Неправильный фокус На фотографии человека в полный рост отображен только первый план - находится в фокусе, а задний как бы немного размыт - это свойство любой фотографии. При монтаже фигуры человека в другое изображение, например, лес, то так просто это не получится, т.к. на фотографии пейзажа в фокусе находится лес Прямой монтаж будет нереалистичен. Следует применить стандартные средства размытия PhotoShop или фильтр Blur.


Слайд 135

6. Чрезмерное применение средств имитации объема 7. Монтаж изображения лица одного человека на тело другого: - Несоблюдение пропорций и несовпадение цветов кожи разных частей тела - Общий стиль изображения, следует обращать внимание на детали (например, соответствие деталей одежды), - Разная перспектива у разных объектов


Слайд 136

8. Ошибки при работе со шрифтами: - Тень от текста не следует использовать его на мелких шрифтах, если за буквами расположены какие-либо объекты - Не должно быть очень много шрифтов разных стилей, лучше применить один-два вида шрифтов, но использовать буквы разных размеров либо цветов -Не следует часто использовать «пляшущие» буквы или разноуровневый текст


Слайд 137

Осторожно применять Flash в качестве оформления web-страницы Рассматривать Flash-технологию стоит с нескольких позиций: С точки зрения внешнего оформления и культуры сайта С функционально-технической стороны С практической стороны Оформление и культура сайта


Слайд 138

Сайт - это электронное издание, которым интересуется пользователь людей с точки зрения получения информации Время, когда изумленный прогрессом интернетчик приходил на сайт, чтобы посмотреть, как там что-то прыгает-летает-плавает прошло


Слайд 139

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


Слайд 140

Функционально-техническая сторона Flash использует plug-in модули, мультемидийные функции, на сегодняшний день не интегрированные в браузеры В силу присущих Flash-технологии свойств она имеет функциональные недостатки. Наличие этих недостатков совсем не означает, что надо отказаться от Flash Просто с одной стороны на весы нужно положить необходимость использования Flash-элемента, с другой стороны — его недостатки.


Слайд 141

Flash обесценивает функции браузера: Регулировка размера шрифта Кнопка «назад» перемещает не к началу сценария анимации, как ожидается, а на предыдущую страницу сайта, где Flash-элемент еще/уже отсутствует Поиск по странице - гиперссылки лишаются изменяемости цвета в зависимости от движения по сайту посетителя Вес страниц увеличивается Навигация во Flash-сайтах часто неудобна Сайты, построенные на Flash в большинстве случаев некорректно работают в офлайне У сайтов, полностью построенных на Flash, всегда низкая степень релевантности: невозможно индексирования текст во flash-элементах


Слайд 142

Flash обладает рядом весомых практических недостатков: Flash-элементы имеют большой размер Мультимедийные возможности Flash широки, поэтому дизайнер просто не удерживается, чтобы не поэксплуатировать их Flash-ролики создаются раз и навсегда Вместо этого можно уделить внимание более частому обновлению содержания сайта Скачанные на компьютер Flash-сайты отображаются некорректно Информация, находящаяся во Flash-формате недоступна (для закачки Flash-элементов требуется ПО, которое часто отсутствует у пользователя) Прежде, чем применять Flash на сайте, надо поставить себя на место пользователя: нужна информация; мало времени; модемная скорость; трафик заканчивается


Слайд 143

Выводы Flash противопоказан крупным информационным сайтам (главная цель которых — погоня за посетителями) Flash применим для малого сайта узкой специализации (например, для сайта, чей адрес узнается с визитки его представителя и только) Использование Flash хорошо подходит для рекламы и развлечений (баннеры, промо-сайты, игры) Если можно обойтись без Flash, лучше обойтись без Flash


Слайд 144

http://www.artlebedev.ru/kovodstvo/ http://www.artlebedev.ru/portfolio/clones/ http://designclub.com


×

HTML:





Ссылка: