ВЕБ-ДИЗАЙН И РЕКЛАМА
3 КУРС (ЗФО)
ЗАЧЁТ 6 СЕМЕСТР
ЛЕКЦИЯ 1
ТЕХНОЛОГИИ ВЕБ-ДИЗАЙНА
Рассматриваемые вопросы:
1. Основы дизайна (пространственные отношения, форма,
текстуры, шрифты и тексты)
2. Основные средства и принципы композиции
3. Типология объектов рекламного дизайна
4. Рекламные возможности использования веб-дизайна в
организации
5. Дизайн веб-сайтов (типы сайтов, устройство сайта, формат
страницы)
6. Дизайн интерфейса
7. Маркетинговые задачи веб-сайтов
Цели и задачи веб-сайта как маркетингового
инструмента:
• оптимизация продаж за счет внедрения электронной
коммерции;
• расширение клиентской базы;
• поиск партнеров;
• информационная поддержка клиентов и партнеров;
• сокращение издержек на ведение бизнеса, за счет
перемещения информационной нагрузки на веб-сайт;
• создание благоприятного имиджа компании в сети
Интернет;
• возможность продвижения новых товаров и услуг;
• сбор информации о рынке, пополнение маркетинговых
БД.
2
3
4
Технологии веб-дизайна охватывают весьма
значительную
сферу
методик
обработки
информации:
работа с текстом,
изображениями,
анимацией, видео,
средствами
хранения
информационных
массивов (БД)
+
управление
содержанием
объектов.
7
8
9
10
11
12
13
14
15
16
Любой дизайн состоит из двух частей:
1. Материалы – размер, форма, цвет, текстура,
шрифт.
2. Принципы – единства, баланс, контраст,
динамика, нюансировка.
17
Основные средства и принципы композиции
дизайнерские элементы в композиции никогда не бывают
сами по себе
они находятся в определенном взаимодействии друг с
другом, подчинены некой единой идее
Чтобы композиция смотрелась гармонично и естественно, не
разваливалась на отдельные составляющие необходимо следовать
базовым
принципам
дизайна
18
Основные средства и принципы композиции
Интуитивно чувствовать
гармоничную композицию
Учиться
19
Основные принципы композиции
1. Баланс
(равновесие
взаимодействующих
противоположных сил в композиции)
Нет
или
Нет ощущения, что какая то часть композиции
доминирует над всем остальным
Типы баланса
(способы взаимодействия элементов композиции):
• горизонтальный
• вертикальный
• радиальный
• симметричный
• ассиметричный
20
Основные принципы композиции
Горизонтальный и вертикальный баланс сбалансировать элементы
относительно центральной оси (горизонтальной или вертикальной)
Горизонтальный баланс
достигается балансировкой
элементов, расположенных
справа и слева — как на
качелях-весах
Вертикальный баланс означает, что
сбалансированы элементы, стоящие
выше и ниже центральной оси
21
Основные принципы композиции
Радиальный баланс (отталкиваемся от центральной точки)
Размещение элементов вокруг центральной оси (словно они
вылетают из центра)
22
Основные принципы композиции
Симметричный и асимметричный баланс
Симметричный баланс = обе стороны композиции являются
зеркальными отражениями друг друга (словно бумагу сложили
пополам)
С ростом популярности
адаптивного дизайна,
растет и популярность
симметричного
баланса
(проще
воспроизвести
в
разных
размерах
экрана)
23
Основные принципы композиции
Ассиметричный баланс (элементы композиции
сбалансированы, но расположены не строго относительно друг
друга)
Ассиметрия гораздо интереснее симметрии, потому что в
асимметричных изображениях иерархия заметна сразу.
То, что композиция асимметрична, не означает, что в ней нет
баланса: просто элементы расположены не зеркально.
24
Характеристики баланса
каждый объект в композиции имеет свои собственные
характеристики и уникальные особенности взаимодействия с
другими объектами
Основные характеристики баланса:
 размер,
 цвет,
 форма,
 значимость,
 расположение.
Каждую из этих характеристик можно использовать по-отдельности,
если создается симметричный баланс.
Если
необходимо
сбалансировать
асимметричную
композицию, то нужно учитывать их все в совокупности
(изменение одной характеристики влечет изменение
остальных)
25
Характеристики баланса
Размер
Пустой объект большого размера можно визуально уравновесить
небольшим, но более плотным элементом.
Пример: текстовая область блога обычно больше, чем боковое меню.
Чтобы сбалансировать эти два элемента, можно добавить больше
белого пространства в текстовую часть, а область бокового меню
заполнить чем-то визуально более тяжелым.
Необходим симметричный
баланс в дизайне - нужно
делать элементы
равными по размеру, вне
зависимости от
визуального веса.
26
Основные принципы композиции
Цвет может сделать элемент композиции визуально тяжелее или
легче
более
насыщенные и
темные цвета
воспринимаютс
я как более
тяжелые, а
приглушенные и
светлые — как
более легкие
Пример: красный цвет тяжелее, чем желтый, потому что он привлекает больше
27
зрительного внимания.
Основные принципы композиции
Форма
элементов
композиции
решающее влияние на баланс
может
оказать
волнистая, неровная форма смотрится интереснее —
а значит “весит” больше — чем простая, прямая форма
не
стоит
пытаться
сбалансировать
одну
сложную форму другой
— это может смутить
пользователей.
Лучше сбалансировать
сложный
объект
простой,
но
более
рельефной формой.
28
Основные принципы композиции
Контраст может быть важным фактором сбалансированности дизайна.
Чем выше контрастность объекта, тем он тяжелее — и наоборот.
Существует несколько способов установления баланса между
объектами с разной степенью контрастности:
можно
компенсировать
низкую
контрастность
ярким
фоном
или
интересной текстурой;
если
нужно
снизить
контрастность элемента,
можно добавить простые
границы,
градиенты
и
тени.
29
Основные принципы композиции
Расположение
объекты, расположенные ближе к линии центра,
весят больше чем те, которые находятся на удалении
если рядом с
центральной
осью находится
большой
красный объект,
то можно либо
подвинуть его
ближе к краю,
либо
переместить
другие объекты
ближе к линии
центра
30
Основные принципы композиции
2. Контраст — это взаимодействие противоположных
элементов композиции, таких как цвет, размер, текстура и т.д.
Примеры контраста:
большой и маленький, шероховатый и гладкий, толстый и тонкий,
черный и белый.
31
Основные принципы композиции
3. Значимость и подчиненность
выделение, так называемого, центра интереса,
предполагается сосредоточить внимание зрителя.
на
котором
Объекты должны находиться в иерархии по значимости и подчиненности.
Если все объекты будут иметь одинаковую значимость, то внимание
пользователя рассеивается.
32
Основные принципы композиции
4. Направление внимания
управление движением взгляда зрителя во время его перемещения по сайту, чтобы
привлечь его внимание к значимым элементам
Паттерны сканирования:
что и где подсознательно ожидает увидеть пользователь
33
Основные принципы композиции
5. Пропорции
отношение отдельной части ко всему объекту, а также соотношение отдельных
частей друг с другом
34
Основные принципы композиции
6. Масштаб
это реальный, видимый размер объекта, рассматриваемый
отношении других предметов, людей, окружающей среды
в
Масштабная
композиция
35
Основные принципы композиции
7. Повторение и ритм
повторение элементов дизайна для достижения определенной цели,
например, чтобы задать направление взгляда или для непрерывности
внимания
36