При использовании данной презентации при объяснении новой темы появляется возможность применять методы личностно-ориентированного обучения: проблемный метод, метод эвристической беседы и элементы исследования. Постановка проблемы ставит учащихся в условия, которые побуждают его решать учебную проблему, проводить анализ материала и оперировать им. Такая деятельность позволяет учащимся получить новую информацию, освоит новые способы применения знаний
design.ppt
Презентация к уроку по теме «Основы Web-дизайна»
Основы Webдизайна
Презентация к уроку по теме «Основы Web-дизайна»
Дизайн (англ. design) – замысел,
проект, чертеж, рисунок, термин, обозначающий
различные виды проектировочной деятельности,
имеющей целью формирование эстетических и
функциональных качеств предметной среды.
Презентация к уроку по теме «Основы Web-дизайна»
• Webстраница – публикация.
• Любая публикация – информация + реклама.
Должна привлекать внимание
Большей информативностью;
необычным видом;
Презентация к уроку по теме «Основы Web-дизайна»
В отличии от живописи и полиграфии в webдизайне
придется смирится с экономными палитрами, минимумом
элементов и даже уменьшением размеров изображения.
Основная работа webдизайнера – максимально эффективно и
доходчиво подать информацию.
Презентация к уроку по теме «Основы Web-дизайна»
Элементы webдизайна
Webстраница, в отличии от журнальной или книжной, имеет
специфические элементы дизайна. Это обусловлено ее
интерактивными качествами и особенностями HTML, языка
описания страницы. Это:
• Фоновые текстуры (изображения);
• Баннеры;
• Анимация;
• Кнопки;
• Фреймы;
• Шрифты;
•
Гиперссылки;
• Изображения.
Презентация к уроку по теме «Основы Web-дизайна»
Фоновое изображение
• Однородный фон
• Обои
• Логотип
• Не рекомендуется увлекаться пестротой: отвлекает
внимание
Первое сентября
Презентация к уроку по теме «Основы Web-дизайна»
Основной рисунок переднего
плана или баннер
• Фотография, фотоколлаж, рисунок, логотип,
• Назначение: представить автора, назначение или
привлекающий внимание, но с чувством меры
концепцию сайта
• Рекомендуется
рисунок
броский,
необычный,
Презентация к уроку по теме «Основы Web-дизайна»
АНИМАЦИЯ
Данный элемент является дополнительным и подчиненным
к информационной составляющей. Должна привлекать
к себе внимание к чему либо важному или незаметно
продвигать какуюлибо идею, например, девиз фирмы.
Презентация к уроку по теме «Основы Web-дизайна»
Кнопки и команды переходов
• не только и не столько украшают страницы,
но обеспечивают ее гипертекстовую связь с
внешним миром.
• Не стоит увлекаться числом кнопок. Число
Мюллера 72
Презентация к уроку по теме «Основы Web-дизайна»
Фреймы
Фреймы позволяют разделить экран пользователя на две или
Более частей, каждая из которых будет содержать отдельную,
Независимо просматриваемую страницу. Цель фреймов –
сделать сайт более простым для просмотра и работы.
Презентация к уроку по теме «Основы Web-дизайна»
Выбор шрифта
• Проблемы:
Экраны, как правило, 72 dpi
Никогда нет уверенности в том, что
на
установлен
выбранный шрифт
компьютере посетителя.
Презентация к уроку по теме «Основы Web-дизайна»
Категории шрифтов
• Шрифты старого стиля
• Модерн
• Шрифты без засечек
• Рукописные
• Декоративные
• Символьные
Презентация к уроку по теме «Основы Web-дизайна»
Шрифты старого стиля
oldstyle
• хорошо читаются на бумаге, наклонные
засечки, умеренные переходы штрихов,
небольшой наклон влево
• Times Roman, Garamont
• Плохо читаются на мониторах
Презентация к уроку по теме «Основы Web-дизайна»
Модерн
modern
• используются очень большие переходы
штрихов, наклон – вертикальный, засечки
– горизонтальные.
• Выглядит более холодным и
механистическим
• Bodoni, Elephant, Georgia
Презентация к уроку по теме «Основы Web-дизайна»
Шрифты без засечек
Sans Serif
• нет засечек, переходов штрихов, наклона.
• Читаются хуже, чем с засечками
• Arial, Helvetica
Презентация к уроку по теме «Основы Web-дизайна»
Рукописные
Script
• читаются плохо, используются для
различных приглашений
• Zaph Chancery
Презентация к уроку по теме «Основы Web-дизайна»
Декоративные
Decorative
• привлекают внимание, но читаются плохо
• Matisse ITC
Презентация к уроку по теме «Основы Web-дизайна»
Символьные
• коллекция значков для бумажных
документов
• Symbol
Презентация к уроку по теме «Основы Web-дизайна»
Принципы:
• Все заголовки первого уровня должны
выглядеть одинаково
• Весь обычный текст должен выглядеть
одинаково
• Заголовки
первого
уровня
отличаться от обычного текста
• То же самое для всех элементов
должны
Информсвязь
Презентация к уроку по теме «Основы Web-дизайна»
Гиперссылки
В качестве гиперссылок могут использоваться:
• фрагменты текста;
• графические изображения (кнопки, рисунки,
карты и т.д.);
Презентация к уроку по теме «Основы Web-дизайна»
Пример:
• Для получения информации нажмите здесь
• Для получения информации нажмите здесь
• Для получения информации нажмите здесь
• Для получения информации нажмите здесь
Презентация к уроку по теме «Основы Web-дизайна»
Обработка изображений
• Добавление надписей в
изображение
• Значки для предпросмотра
изображения
• Точное позиционирование
• Поворот и вращение
изображения
• Изменение контраста и
яркости
• Изменение размера
• Настройка прозрачности
Презентация к уроку по теме «Основы Web-дизайна»
Выбор цветовой палитры
Чернобелые
«бедно»;
изображения
часто
выглядят
Копии экранов, использующие стандартные цвета
Windows, также иногда выглядят плохо
Презентация к уроку по теме «Основы Web-дизайна»
Контраст и дисгармония
• Белый медведь на северном полюсе и черная кошка в
темной комнате – это примеры предельно неудачного
выбора контраста
• При создании Webстраниц контраст служит для
выполнения двух важных задач:
Облегчает восприятие информации
(черный
текст на белом фоне или желтый текст на синем
фоне);
Разграничивает различные элементы страницы:
заголовки от основного текста
Презентация к уроку по теме «Основы Web-дизайна»
Презентация к уроку по теме «Основы Web-дизайна»
Для создания контраста можно
использовать:
Цвет;
Размер измеряется в пунктах = 1/72 дюйма;
Гарнитуру (typeface): засечки, наклон засечек,
толщина засечек, переходы штрихов, наклон,
толщина линий, направление,
пропорциональные.
Эффекты анимации.
Презентация к уроку по теме «Основы Web-дизайна»
Способы получения контраста:
• Полужирным выделяется часть текста,
которой придается особое значение
• Курсивом выделяются специальные термины,
особенно если они встречаются первый раз
• Полужирный курсив, как правило,
используется для заголовков
• Подчеркивание использовать не рекомендуется
Презентация к уроку по теме «Основы Web-дизайна»
• Контраст не должен выглядеть глупо, быть кричащим.
• В контрасте не должны смешиваться разные сигналы
для пользователя.
Презентация к уроку по теме «Основы Web-дизайна»
Советы для выбора цвета:
• Выбирайте сочетающиеся цвета. Как правило, цвета,
вместе встречающиеся в природе, сочетаются.
• Цвета Webстраниц должны сочетаться с цветами
изображений.
• Между текстом и фоном должен быть контраст
• Лучше темный цвет на светлом фоне, чем наоборот
• Цвета
контрастировать,
должны
дисгармонировать
но
не
• Изображения для фона должны быть очень светлые со
слабым контрастом
Презентация к уроку по теме «Основы Web-дизайна»
Презентация к уроку по теме «Основы Web-дизайна»
Композиция
(лат.: составление)
Презентация к уроку по теме «Основы Web-дизайна»
Выбор концепции
• Оформление должно дополнять содержание сайта
• Можно воспользоваться готовыми стилями
Презентация к уроку по теме «Основы Web-дизайна»
Симметрия и асимметрия
• симметричные композиции (реклама ОРТ);
• асимметричные (традиционная японская живопись)
• Схожие
(названия
элементы
глав, параграфов, пунктов,
гиперссылок, цветовые схемы, гарнитуры шрифтов, вид меню и
т.д.) должны иметь одинаковое оформление (симметрия), но при
этом следует избегать монотонности, размещая привлекательные
сигналы на страницах.
Презентация к уроку по теме «Основы Web-дизайна»
Основные элементы:
• Форма
• Цвет и колорит
• Объем
• Фактура (характер строения
поверхности)
• Свет и тень
• Перспектива
• Ракурс
• Формат изображения
• План. Для выделения
сюжетно важной части
Презентация к уроку по теме «Основы Web-дизайна»
• Из поставленной задачи принимается решение об
уравновешенности или о сознательном нарушении
равновесия
Презентация к уроку по теме «Основы Web-дизайна»
Надо учитывать:
• Количество элементов
• доминанта
• Значимость элементов
• Пропорции
• Размещение элементов
• Детали
• Перспектива
• Формат кадра
• Ритм
Презентация к уроку по теме «Основы Web-дизайна»
Количество элементов
• каждый 1/9 объема
• приблизительно должно быть
равно числу Мюллера 72.
• Больше – возникает ощущение
перегруженности, меньше –
скучно смотреть
Презентация к уроку по теме «Основы Web-дизайна»
доминанта композиционный
центр
Для выделения применяются следующие приемы:
Группирование элементов в одном месте;
Укрупнение плана;
Цветовой акцент;
Световой акцент;
Контраст;
Форма;
Жесткое кадрирование
Презентация к уроку по теме «Основы Web-дизайна»
Значимость элементов
• Главный. Назначение: выполняет
основную роль композиции
• Центральный. Связывает все
элементы в одну структуру.
• Второстепенные
Презентация к уроку по теме «Основы Web-дизайна»
Пропорции
Ведущая пропорция 2:3 – принцип “золотого сечения”.
Используется:
При выборе вертикальных и горизонтальных размеров;
При выборе отношения главного и центральных элементов;
При размещении элементов;
Презентация к уроку по теме «Основы Web-дизайна»
Детали композиции должны подчиняться
законам композиции в целом
Презентация к уроку по теме «Основы Web-дизайна»
Презентация к уроку по теме «Основы Web-дизайна»
Презентация к уроку по теме «Основы Web-дизайна»
Презентация к уроку по теме «Основы Web-дизайна»
Презентация к уроку по теме «Основы Web-дизайна»
Презентация к уроку по теме «Основы Web-дизайна»
Материалы на данной страницы взяты из открытых истончиков либо размещены пользователем в соответствии с договором-офертой сайта. Вы можете сообщить о нарушении.
11.05.2018
Посмотрите также:
© ООО «Знанио»
С вами с 2009 года.
О портале
