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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

30

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

46 Цвета Возбуждающие Угнетающие Успокаивающие Красный+ Оранжевый+ Желтый+ Зеленый + Голубой + Фиолетовый + Темно-серый + Черный +

47

48 2. Эмоциональное восприятие цвета Цвет этого спектра имеют все продукты растительного происхождения, остальные цвета будут для пищи неестественного, искусственного цвета

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

50 Красный - всегда обращает на себя внимание и останавливает взгляд, цвет предупреждения об опасности Желтый цвет привлекает внимание и сохраняется в памяти дольше, чем другие цвета Золотистый – цвет власти и превосходства

51 Черный цвет – символизирует изящество Сочетание черного с красным или золотистым - специфика предметов роскоши и высококачественных товаров

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

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

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

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

56 Пример хроматического контраста Цвета расположены в различных областях спектра, но имеют одинаковую яркость/насыщенность H (hue – оттенок) - изменяется S (saturation – насыщенность) и B (brightness – яркость) постоянно

57 Пример ахроматического контраста Цвета расположены в одной области спектра, но имеют различную яркость/насыщенность В цветовой модели HSB значение H - постоянно, SB - изменяется

58 Белый и черный и все градации серого - нейтральные цвета Они не вступают в конфликт с другими цветами логотипа, а дополняют их

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

60 Основные характеристики кажущегося воздействия цветов Белыйлегкий Желтыйлегкийтеплыйсухой Оранжевый теплыйсухой кричащий, громкий Красныйтяжелыйтеплыйсухой кричащий, громкий Фиолетовыйтяжелый Синийтяжелыйхолодныйвлажныйтихий, спокойный Зеленый прохладныйвлажныйспокойный Голубойлегкий влажныйтихий, спокойный Коричневыйтяжелыйтеплыйвлажный Черныйтяжелый сухой

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

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

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

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

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

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

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

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

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

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

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

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

73 Примеры неустойчивых композиций - Япония

74

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

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

77

78

79

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

81 С точки зрения дизайна не рекомендуется использовать декоративные гарнитуры из стандартных шрифтовых наборов: Windows, MS Office, Corel и др.

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

83 Декоративные гарнитурами можно считать все остальные

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

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

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

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

88

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

90

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

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

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

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

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

96

97

98

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

100 - если уменьшенная буква имеет сложную форму (буква K), а увеличенная - простую (буквы O, J), получается дисбаланс: уменьшенная буква - плохо читабельна, увеличенная - кажется слишком грубой joker

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

145