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

Содержание

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

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

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


проектирование навигации
интернет-программирование

Слайд 3Рекомендуемые к использованию типы графических вставок в web-страницы

Навигационные кнопки
Логотип
Маркеры списков
Титульная графика
Разделительные

линии
Фоновые рисунки
Графический заголовок
Фотографии

Слайд 4 Структура сайта должна
содержать не более 7-ми пунктов
быть не

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

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

фирмы
Каталог товаров
Контактная информация


Слайд 6 Требования к дизайну web-страницы

интегрированность статической и динамической составляющих

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

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

шрифтам и примененным эффектам

Оптимальный суммарный размер web-страницы составляет 40-60 Кб

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

Слайд 8
Стоимость работ по созданию дизайна для сайта может составлять от $300

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

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

Слайд 10Основы построения композиции

Слайд 11Compositio (лат.) – соединение, приведение в порядок
Задача композиции – соединить в

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

Слайд 12Части рисунка уравновешены, если они имеют равноценную зрительную тяжесть (одинаково привлекают

внимание) Равновесие достигается: 1. на основе симметрии (например, орнаменты)

Слайд 132.уравновешивание элементов вокруг центра окружности: ось симметрии – радиусы окружности, делящие

ее на равные части
3. Равновесие на основе асимметрии – правильное соотношение зрительной тяжести всех частей рисунка



Слайд 14Объекты, расположенные близко друг к другу, воспринимаются связанно

Например,
Заголовок всегда должен быть

привязан к своему абзацу

Правильное расположение заголовка

Слайд 15Основные линейные схемы композиции
вертикальная
горизонтальная
диагональная
мелкое или крупное пятно

и др.

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

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


прямоугольник…
и построение соотношений между частями изображения.

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

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

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

Слайд 18Треугольная композиция содержит вертикальную ось – устойчива

Вертикальная композиция зрительно увеличивает верхнюю

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

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

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



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

элементах (блочная схема) Схема построения разворота:


Слайд 21Композиция по овалу – центральная ось воспринимается не так четко как

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


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

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

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

тяжести:
маленькое черное пятно по тяжести = большому серому








Неуравновешенная композиция

Уравнове- шенная композиция

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

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

Слайд 25При определении отношений золотого сечения используют «золотой ряд»
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 …

Слайд 26Построение ассоциативного ряда композиции

Восприятие текста (в большинстве языков) - слева

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

Слайд 27Пространственное восприятия информации
- Передний план воспринимается раньше
- Эффект заднего плана можно

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

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

объект в композиции становится тематическим центром

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

Слайд 29Позитивный угол направления движения в двумерном пространстве - сумма векторов вверх и вперед

с направлением в сторону правого верхнего угла

В противоположной стороне - негативный угол

Стремление в левый верхний угол - движение наверх, но не позитивное,
в правый нижний - стремление к провалу

Объект, расположенный в середине - спокоен и поддерживает симметричность композиции

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

надписи, вокруг которой есть воздух
прописные буквы смотрятся солиднее строчных и т. д. 

Слайд 32
Использованы противоположные направления:
белые диагонали стремятся в левый нижний угол

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

Матрица эмоций для логотипа компании ЮКОС

«Знак явно продавали клиенту с легендой о самой устойчивой геометрической фигуре»
А.Лебедев

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

в сторону двух строчных букв названия
динамика поддерживает спокойствие

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

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

Слайд 36«Когда у корпорации МиГ дела пойдут хорошо, они закажут себе новый логотип,

изменят курс птицы и, самое главное, перестанут использовать наклоненные влево буквы (что вообще противоестественно)»
А. Лебедев

Слайд 37Примеры исключений и частных случаев

несколько композиций на одном листе
не все объекты являются частью

композиции
к статичным объектам данная матрица неприменима

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

Слайд 38Статусная строка отражает направление ссылки и состояние загрузки страницы
Многие разработчики сайтов

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

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

их ожидает

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

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

Слайд 41Пропорции и перспектива в реалистичных изображениях и коллажах
Законы пространственной геометрии и

естественных пропорций - это законы природы

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

Слайд 42Психологическое восприятие цветов - цвет вызывает ассоциации
- цвет может определять

тематическую направленность

Линии, стрелки или направленный градиент оказывают устойчивое направляющее воздействие

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

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

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

Слайд 45Схемы предпочтения цветов у женщин и мужчин

Мужчины:
Зеленый
Синий
Красный
Белый
Желтый
Черный
Женщины:
Синий
Зеленый
Белый
Красный
Желтый
Черный
3. Белый
4. Белый

Слайд 48

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

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

всем производствам, связанным с металлом

Слайд 52




Фиолетовый - цвет тревоги, беспокойства, неуверенности, меланхолии (люди выбирают в период

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



Синий – гармоничный цвет, снимает стресс, его предпочитают на меланхолики

Слайд 53
Цвета на сайте несут декоративную и ассоциативную нагрузку

Например, деятельность фирмы связана

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

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

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

Слайд 59Цветовые сочетания цветов текста в порядке снижения эффекта восприятия
9. Белый на

синем

3.Зеленый на белом

1. Синий на белом

2. Черный на желтом

5.Желтый на черном

7.Зеленый на красном

8.Красный на желтом

В числе последних:

Красный на белом

Белый на красном

Желтый на красном

4.Черный на белом

6.Белый на черном

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

Слайд 61Цвет, расположенный по вертикали - легкость,
диагональ - динамика,
горизонталь -

устойчивость

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

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

размер
В левом нижнем - создает иллюзию пассивности и зрительного сжатия, движение назад


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

если это желтый, красный или оранжевый круг

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






Слайд 65Если на какой-либо поверхности внизу даны темные цвета, а наверху светлые

- решение производит стабильное впечатление

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

Слайд 663. Оптическое - иллюзии или оптические явления, вызываемые цветом и изменяющие

внешний вид предметов

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

Зеленый цвет - исключение

Слайд 67Например, светлые цвета:
белый или желтый, создают эффект иррадации - они

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

Слайд 68Этот факт используется при конструировании шрифтов:
буквы E и F сохраняют

свою полную
высоту, высота букв O и G, несколько уменьшается,
буквы A и V имеют острые окончания - уменьшение еще больше

Эти буквы кажутся ниже общей высоты строки. Для выравнивания при разметке их выносят несколько вверх или вниз за пределы строки.

Слайд 69Эффект иррадации создает различное впечатление от поверхностей, покрытых поперечными или продольными

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

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

обширной из за эффекта иррадации

Красный цвет вызывает эффект приближения





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

и устремляются книзу
Зеленый цвет - наиболее спокойный из всех цветов





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

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


Слайд 75При помощи таких же принципов можно изменить и форму объекта.

Нарушение устойчивости

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

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

Слайд 76Темная звездочка кажется дальше и визуально «тянет» свой угол вглубь
Светлая кажется

ближе, и тоже «тянет» свой угол вперед.
⇒
иллюзия - пространственные и перспективные искажения.

При этом оранжево-желтая сетка остается по прежнему равномерной и стабильной.

Слайд 80Фирменый стиль
Фирменный стиль - совокупность художественных приемов, создающих единый характер подачи

рекламных материалов, разработанных на базе оригинального графического дизайна.

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

Слайд 82Классические шрифты:
1. с засечками (например, Times)

2. рубленные (например, Pragmatica)

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

радуги или похожий сложный градиент






Слайд 85
Заливка сливается с фоном логотипа
Для предотвращения сливания логотипа с фоном в

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

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

и/или гарнитурой и т.п.

Наиболее распространение приемы дизайнеров при разработке логотипов

Слайд 87
Использование Слияния Букв
две и более соседних букв переходят одна в другую:
окончание

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

Естественно соединенными выглядят, например, такие буквенные пары:
VZ, ET, LM, AN

Слайд 89
Переходить друг в друга буквы могут в одной точке и в

плоскости.

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



Слайд 91
«!» соединение букв горизонтальным смещением

Рекомендуется для наполненных (тяжелых) гарнитур, увеличивая таким

образом общую площадь для заполнения




Слайд 92
«!» Использование заполнения Букв(ы)
с помощью заливки: текстура, рисунок

Для заливки подходят

буквы, как правило плотных гарнитур - большая площадь закраса при удалении внутреннего контура:
Q, O, D, I


Слайд 93
«!» Размещение текста внутри геометрической фигуры, как правило, правильной формы

Самые популярные

фигуры:

1. круг и эллипс
2. квадрат и прямоугольник с максимально скругленными на торцах углами

Практически не используются n-угольники с n>6

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

глобус и путешествия или международные отношения

demos

Слайд 95

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

геометрическая фигура может

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

Слайд 100
joker
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
Выводы:
Использовать одну из классических гарнитур (с засечками или без), или же

создать свою собственную гарнитуру

2. «центр тяжести» рисунка должен находиться в центре пересечения вертикальной и горизонтальной осей

3. Выполнить вариант логотипа с использование слитых вместе букв и раздельный вариант

Слайд 126
4. Использовать не более двух цветов (большое количество цветов в логотипе

трудно согласовать друг с другом и с будущей рекламой)
Любой логотип должен выглядеть качественно и в черно-белом исполнении

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

Слайд 127
6. Большая разница между максимальной и минимальной ширинами элементов логотипа приводит

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

Слайд 128
При выборе шрифтовой гарнитуры или при создании знака самая широкая часть

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


Слайд 129
Избыточное число различных толщин/ширин дисбалансирует логотип и действует на потребителя угнетающе




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

Слайд 130

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

Слайд 131
7. Использование заглавной и прописной букв одинаковой высоты рядом делает логотип

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


8. Ассоциации вызываемые логотипом должны нести только положительные эмоции

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

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

Слайд 1332. Несоответствие фотомонтажа тому, что он символизирует (рекламирует).

Часто такие несоответствия

встречаются на плакатах (реклама медикаментов - изображение цветов)

3. Неправильное использование тени.
Если в работе есть освещение, то должна быть тень от всех объектов

Слайд 1344. Жесткие края вставляемого объекта. Жесткие контуры получаются при вырезании предмета,

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

Слайд 1355. Неправильный фокус На фотографии человека в полный рост отображен только первый

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

Слайд 1366. Чрезмерное применение средств имитации объема
7. Монтаж изображения лица одного человека

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

Слайд 1378. Ошибки при работе со шрифтами:
- Тень от текста не

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

Слайд 138Осторожно применять Flash в качестве оформления web-страницы

Рассматривать Flash-технологию стоит с нескольких

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

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

зрения получения информации

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

Слайд 140Flash препятствует восприятию информации Сайт, построенный на Flash больше напоминает игру или

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

Слайд 141Функционально-техническая сторона
Flash использует plug-in модули, мультемидийные функции, на сегодняшний день не

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

Слайд 142Flash обесценивает функции браузера:
Регулировка размера шрифта
Кнопка «назад» перемещает не

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

Слайд 143Flash обладает рядом весомых практических недостатков:
Flash-элементы имеют большой размер
Мультимедийные возможности Flash

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

Слайд 144 Выводы
Flash противопоказан крупным информационным сайтам (главная цель которых — погоня за

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

Слайд 145http://www.artlebedev.ru/kovodstvo/

http://www.artlebedev.ru/portfolio/clones/

http://designclub.com


Похожие презентации

Моя школа 272
Требования к дизайн-эргономическим свойствам электронных учебно-методических материалов. 340
Образовательная программа Менеджмент 38.03.02 Академический бакалавр 307
Коллекция Malex design Московской обойной фабрики пополнилась новым, парным дизайном Деревья и Фон к Деревьям горячее тиснение на флизелиновой основе 1,06 х 10 м 243
Будущее за психологическим таргетингом? 276
Тема проекта по информатике 465

Обратная связь

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

Email: Нажмите что бы посмотреть 

Что такое ThePresentation.ru?

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

Для правообладателей

Яндекс.Метрика