Презентация на тему Основы Web-дизайна

Презентация на тему Основы Web-дизайна, предмет презентации: Дизайн. Этот материал содержит 47 слайдов. Красочные слайды и илюстрации помогут Вам заинтересовать свою аудиторию. Для просмотра воспользуйтесь проигрывателем, если материал оказался полезным для Вас - поделитесь им с друзьями с помощью социальных кнопок и добавьте наш сайт презентаций ThePresentation.ru в закладки!

Слайды и текст этой презентации

Слайд 1
Текст слайда:

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


Слайд 2
Текст слайда:

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


Слайд 3
Текст слайда:

Web-страница – публикация.
Любая публикация – информация + реклама. Должна привлекать внимание
Большей информативностью;
необычным видом;


Слайд 4
Текст слайда:

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


Основная работа web-дизайнера – максимально эффективно и
доходчиво подать информацию.


Слайд 5
Текст слайда:

Элементы web-дизайна

Web-страница, в отличии от журнальной или книжной, имеет
специфические элементы дизайна. Это обусловлено ее
интерактивными качествами и особенностями HTML, языка
описания страницы. Это:
Фоновые текстуры (изображения);
Баннеры;
Анимация;
Кнопки;
Фреймы;
Шрифты;
Гиперссылки;
Изображения.


Слайд 6
Текст слайда:

Фоновое изображение

Однородный фон
Обои
Логотип
Не рекомендуется увлекаться пестротой: отвлекает внимание
Первое сентября



Слайд 7
Текст слайда:

Основной рисунок переднего плана или баннер

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


Слайд 8
Текст слайда:

АНИМАЦИЯ

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



Слайд 9
Текст слайда:

Кнопки и команды переходов

не только и не столько украшают страницы, но обеспечивают ее гипертекстовую связь с внешним миром.
Не стоит увлекаться числом кнопок. Число Мюллера 7±2


Слайд 10
Текст слайда:

Фреймы

Фреймы позволяют разделить экран пользователя на две или
Более частей, каждая из которых будет содержать отдельную,
Независимо просматриваемую страницу. Цель фреймов –
сделать сайт более простым для просмотра и работы.


Слайд 11
Текст слайда:

Выбор шрифта

Проблемы:
Экраны, как правило, 72 dpi
Никогда нет уверенности в том, что выбранный шрифт установлен на компьютере посетителя.


Слайд 12
Текст слайда:

Категории шрифтов

Шрифты старого стиля
Модерн
Шрифты без засечек
Рукописные
Декоративные
Символьные


Слайд 13
Текст слайда:

Шрифты старого стиля oldstyle

хорошо читаются на бумаге, наклонные засечки, умеренные переходы штрихов, небольшой наклон влево
Times Roman, Garamont
Плохо читаются на мониторах


Слайд 14
Текст слайда:

Модерн modern

используются очень большие переходы штрихов, наклон – вертикальный, засечки – горизонтальные.
Выглядит более холодным и механистическим
Bodoni, Elephant, Georgia


Слайд 15
Текст слайда:

Шрифты без засечек Sans Serif

нет засечек, переходов штрихов, наклона.
Читаются хуже, чем с засечками
Arial, Helvetica


Слайд 16
Текст слайда:

Рукописные Script

читаются плохо, используются для различных приглашений
Zaph Chancery


Слайд 17
Текст слайда:

Декоративные Decorative

привлекают внимание, но читаются плохо
Matisse ITC


Слайд 18
Текст слайда:

Символьные Σψμβολ∉€⎩〈◊⎠€⎝⎮∫◊

коллекция значков для бумажных документов
Symbol


Слайд 19
Текст слайда:

Принципы:

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

Информсвязь


Слайд 20
Текст слайда:

Гиперссылки

В качестве гиперссылок могут использоваться:
фрагменты текста;
графические изображения (кнопки, рисунки, карты и т.д.);


Слайд 21
Текст слайда:

Пример:

Для получения информации нажмите здесь
Для получения информации нажмите здесь
Для получения информации нажмите здесь
Для получения информации нажмите здесь


Слайд 22
Текст слайда:

Обработка изображений

Добавление надписей в изображение
Значки для предпросмотра изображения
Точное позиционирование
Поворот и вращение изображения
Изменение контраста и яркости
Изменение размера
Настройка прозрачности


Слайд 23
Текст слайда:

Выбор цветовой палитры

Черно-белые изображения часто выглядят «бедно»;
Копии экранов, использующие стандартные цвета Windows, также иногда выглядят плохо


Слайд 24
Текст слайда:

Контраст и дисгармония

Белый медведь на северном полюсе и черная кошка в темной комнате – это примеры предельно неудачного выбора контраста
При создании Web-страниц контраст служит для выполнения двух важных задач:
Облегчает восприятие информации (черный текст на белом фоне или желтый текст на синем фоне);
Разграничивает различные элементы страницы: заголовки от основного текста


Слайд 25

Слайд 26
Текст слайда:

Для создания контраста можно использовать:

Цвет;
Размер измеряется в пунктах = 1/72 дюйма;
Гарнитуру (typeface): засечки, наклон засечек, толщина засечек, переходы штрихов, наклон, толщина линий, направление, пропорциональные.
Эффекты анимации.


Слайд 27
Текст слайда:

Способы получения контраста:

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


Слайд 28
Текст слайда:

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


Слайд 29
Текст слайда:

Советы для выбора цвета:

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


Слайд 30

Слайд 31
Текст слайда:

Композиция (лат.: составление)


Слайд 32
Текст слайда:

Выбор концепции

Оформление должно дополнять содержание сайта
Можно воспользоваться готовыми стилями


Слайд 33
Текст слайда:

Симметрия и асимметрия

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


Слайд 34
Текст слайда:

Основные элементы:

Форма
Цвет и колорит
Объем
Фактура (характер строения поверхности)
Свет и тень
Перспектива
Ракурс
Формат изображения
План. Для выделения сюжетно важной части


Слайд 35
Текст слайда:

Из поставленной задачи принимается решение об уравновешенности или о сознательном нарушении равновесия


Слайд 36
Текст слайда:

Надо учитывать:

Количество элементов
доминанта
Значимость элементов
Пропорции
Размещение элементов
Детали
Перспектива
Формат кадра
Ритм


Слайд 37
Текст слайда:

Количество элементов

каждый 1/9 объема
приблизительно должно быть равно числу Мюллера 7±2.
Больше – возникает ощущение перегруженности, меньше – скучно смотреть


Слайд 38
Текст слайда:

доминанта - композиционный центр

Для выделения применяются следующие приемы:
Группирование элементов в одном месте;
Укрупнение плана;
Цветовой акцент;
Световой акцент;
Контраст;
Форма;
Жесткое кадрирование


Слайд 39
Текст слайда:

Значимость элементов

Главный. Назначение: выполняет основную роль композиции
Центральный. Связывает все элементы в одну структуру.
Второстепенные


Слайд 40
Текст слайда:

Пропорции

Ведущая пропорция 2:3 – принцип “золотого сечения”.

Используется:
При выборе вертикальных и горизонтальных размеров;
При выборе отношения главного и центральных элементов;
При размещении элементов;


Слайд 41
Текст слайда:

Детали композиции должны подчиняться законам композиции в целом


Слайд 42
Текст слайда:

Перспектива

Линейная
Тональная (удаленные - светлее)
Воздушная (резкость)


Слайд 43
Текст слайда:

Формат кадра

зависит от преобладания вертикальных или горизонтальных линий 3:2 или 2:3


Слайд 44
Текст слайда:

Ритм

Выполняет организационную или эстетическую роль. Задает форме движение через повторяемость. Устойчивое представление о существовании ритма возникает при числе периодов, равном числу Мюллера 7±2. Сама же закономерность улавливается при числе повторений равном 3.
Для динамического ритма характерно вертикальное чередование;
Для спокойного, плавного ритма характерно горизонтальное чередование.


Слайд 45

Слайд 46
Текст слайда:

Особенности Web-дизайна

Главный фактор - размер графических файлов. По мировым стандартам – 8 секунд ожидания. Для примера, 60 кб по модему 14 кбс приблизительно 1 минуту.
Размер экрана 800*600, 640*480 (14”)
Размер окна – панель InterNet Explorer.
При сканировании
Рекомендуется устанавливать разрешение 72 пиксель/дюйм, 100 dpi
На стадии разработки рекомендуется использовать формат файла TIF, который конвертируется и оптимизируется в последний момент времени.


Слайд 47
Текст слайда:

Горячая десятка ошибок:

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


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

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

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

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

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


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

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