'

Основы Web-дизайна Симонова Т.А. учитель информатики МОУ "Лицей №3 «г.Прохладный КБР

Понравилась презентация – покажи это...





Слайд 0

Симонова Т.А. МОУ "Лицей №3" e-mail: simonof@list.ru Основы Web-дизайна Симонова Т.А. учитель информатики МОУ "Лицей №3 «г.Прохладный КБР


Слайд 1

Симонова Т.А. МОУ "Лицей №3" e-mail: simonof@list.ru Web-страница – публикация. Любая публикация – информация + реклама. Должна привлекать внимание глубиной (более упорядочена, чем другие, или содержит больше информации); необычным видом (не обязательно много, “Черный квадрат” Малевича).


Слайд 2

Симонова Т.А. МОУ "Лицей №3" e-mail: simonof@list.ru Элементы Фоновое изображение Основной рисунок переднего плана или банер Текстовая информация Безопасные цвета Кнопки Первое сентября


Слайд 3

Симонова Т.А. МОУ "Лицей №3" e-mail: simonof@list.ru Фоновое изображение Однородный фон Обои Логотип (Clip2000 - Logotipes) Не рекомендуется увлекаться пестротой: отвлекает внимание


Слайд 4

Симонова Т.А. МОУ "Лицей №3" e-mail: simonof@list.ru Основной рисунок переднего плана или банер Фотография, фотоколлаж, рисунок, логотип, Назначение: представить автора, назначение или концепцию сайта Рекомендуется рисунок броский, необычный, привлекающий внимание, но с чувством меры


Слайд 5

Симонова Т.А. МОУ "Лицей №3" e-mail: simonof@list.ru Обработка изображений Добавление надписей в изображение Значки для предпросмотра изображения Точное позиционирование Поворот и вращение изображения Изменение контраста и яркости Изменение размера Настройка прозрачности Черно-белое изображение Высветление


Слайд 6

Симонова Т.А. МОУ "Лицей №3" e-mail: simonof@list.ru Выбор цветовой палитры Черно-белые изображения выглядят плохо, т.к. используется только 6 градаций серого цвета Копии экранов, использующие стандартные цвета Windows, также иногда выглядят плохо: из 20 стандартных цветов в палитре присутствуют только 8


Слайд 7

Симонова Т.А. МОУ "Лицей №3" e-mail: simonof@list.ru Управление временем загрузки. Время загрузки = объем/скорость пропускания Если изображение используется несколько раз, то его URL-адрес должен быть одинаков. Это позволяет сократить время за счет использования кэширования Не увлекаться числом маленьких изображений. Это приводит к увеличению числа соединений и, в конечном итоге, к увеличению времени. Формат GIF сжимает только по вертикали. Хорошо сжимаются однородные участки


Слайд 8

Симонова Т.А. МОУ "Лицей №3" e-mail: simonof@list.ru Текстовая информация Броский заголовок, дополняющий основной рисунок или поясняющий возможности и особенности страницы Заголовок должен быть кратким, понятным, этически и эстетически корректным


Слайд 9

Симонова Т.А. МОУ "Лицей №3" e-mail: simonof@list.ru Контраст и дисгармония Белый медведь на северном полюсе и черная кошка в темной комнате – это примеры предельно неудачного выбора контраста При создании Web-страниц контраст служит для выполнения двух важных задач: Облегчает восприятие информации (черный текст на белом фоне или желтый текст на синем фоне); Разграничивает различные элементы страницы: заголовки от основного текста


Слайд 10

Симонова Т.А. МОУ "Лицей №3" e-mail: simonof@list.ru Пример: Для получения информации нажмите здесь Для получения информации нажмите здесь Для получения информации нажмите здесь Для получения информации нажмите здесь


Слайд 11

Симонова Т.А. МОУ "Лицей №3" e-mail: simonof@list.ru Для создания контраста можно использовать: Цвет; Размер измеряется в пунктах = 1/72 дюйма; Гарнитуру (typeface): засечки, наклон засечек, толщина засечек, переходы штрихов, наклон, толщина линий, направление, пропорциональные. Эффекты анимации.


Слайд 12

Симонова Т.А. МОУ "Лицей №3" e-mail: simonof@list.ru Контраст не должен выглядеть глупо, быть кричащим. В контрасте не должны смешиваться разные сигналы для пользователя.


Слайд 13

Симонова Т.А. МОУ "Лицей №3" e-mail: simonof@list.ru Выбор шрифта Проблемы: Экраны, как правило, 72 dpi Никогда нет уверенности в том, что выбранный шрифт установлен на компьютере посетителя.


Слайд 14

Симонова Т.А. МОУ "Лицей №3" e-mail: simonof@list.ru Принципы: Все заголовки первого уровня должны выглядеть одинаково Весь обычный текст должен выглядеть одинаково Заголовки первого уровня должны отличаться от обычного текста То же самое для всех элементов


Слайд 15

Симонова Т.А. МОУ "Лицей №3" e-mail: simonof@list.ru Способы получения контраста: Полужирным выделяется часть текста, которой придается особое значение Курсивом выделяются специальные термины, особенно если они встречаются первый раз Полужирный курсив, как правило, используется для заголовков Подчеркивание использовать не рекомендуется


Слайд 16

Симонова Т.А. МОУ "Лицей №3" e-mail: simonof@list.ru Категории шрифтов Шрифты старого стиля Модерн Шрифты без засечек Рукописные Декоративные Символьные


Слайд 17

Симонова Т.А. МОУ "Лицей №3" e-mail: simonof@list.ru Шрифты без засечек Sans Serif нет засечек, переходов штрихов, наклона. Читаются хуже, чем с засечками Arial, Helvetica


Слайд 18

Симонова Т.А. МОУ "Лицей №3" e-mail: simonof@list.ru Рукописные Script читаются плохо, используются для различных приглашений Zaph Chancery


Слайд 19

Симонова Т.А. МОУ "Лицей №3" e-mail: simonof@list.ru Декоративные Decorative привлекают внимание, но читаются плохо Matisse ITC


Слайд 20

Симонова Т.А. МОУ "Лицей №3" e-mail: simonof@list.ru Символьные SymbolI?iaao?eooa коллекция значков для бумажных документов Symbol


Слайд 21

Симонова Т.А. МОУ "Лицей №3" e-mail: simonof@list.ru Безопасные цвета Используйте только 256 цветов Используйте только безопасные цвета.


Слайд 22

Симонова Т.А. МОУ "Лицей №3" e-mail: simonof@list.ru Советы для выбора цвета: Выбирайте сочетающиеся цвета. Как правило, цвета, вместе встречающиеся в природе, - сочетаются. Цвета Web-страниц должны сочетаться с цветами изображений. Между текстом и фоном должен быть контраст Лучше темный цвет на светлом фоне, чем наоборот Цвета должны контрастировать, но не дисгармонировать Изображения для фона должны быть очень светлые со слабым контрастом


Слайд 23

Симонова Т.А. МОУ "Лицей №3" e-mail: simonof@list.ru Кнопки и команды переходов не только и не столько украшают страницы, но обеспечивают ее гипертекстовую связь с внешним миром. Не стоит увлекаться числом кнопок. Число Мюллера 7?2


Слайд 24

Симонова Т.А. МОУ "Лицей №3" e-mail: simonof@list.ru URL закладка страницы Фрагмент текста --- 8 сек ? другая страница Изображение (часть) URL Изображение Аудио-, видеоресурсы


Слайд 25

Симонова Т.А. МОУ "Лицей №3" e-mail: simonof@list.ru Выбор концепции Оформление должно дополнять содержание сайта Можно воспользоваться готовыми стилями Очень часто используется черный текст на белом фоне. Это сочетание, как правило, требует поддержки с использованием кадров, рисунков и обрамления.


Слайд 26

Симонова Т.А. МОУ "Лицей №3" e-mail: simonof@list.ru Симметрия и асимметрия симметричные композиции (реклама ОРТ); асимметричные (традиционная японская живопись) Схожие элементы (названия глав, параграфов, пунктов, гиперссылок, цветовые схемы, гарнитуры шрифтов, вид меню и т.д.) должны иметь одинаковое оформление (симметрия), но при этом следует избегать монотонности, размещая привлекательные сигналы на страницах.


Слайд 27

Симонова Т.А. МОУ "Лицей №3" e-mail: simonof@list.ru Основные элементы: Форма Цвет и колорит Объем Фактура (характер строения поверхности) Свет и тень Перспектива Ракурс Формат изображения План. Для выделения сюжетно важной части


Слайд 28

Симонова Т.А. МОУ "Лицей №3" e-mail: simonof@list.ru Надо учитывать: Количество элементов доминанта Значимость элементов Пропорции Размещение элементов Детали Перспектива Формат кадра Ритм


Слайд 29

Симонова Т.А. МОУ "Лицей №3" e-mail: simonof@list.ru Количество элементов каждый 1/9 объема приблизительно должно быть равно числу Мюллера 7?2. Больше – возникает ощущение перегруженности, меньше – скучно смотреть


Слайд 30

Симонова Т.А. МОУ "Лицей №3" e-mail: simonof@list.ru доминанта - композиционный центр Для выделения применяются следующие приемы: Группирование элементов в одном месте; Укрупнение плана; Цветовой акцент; Световой акцент; Контраст; Форма; Жесткое кадрирование


Слайд 31

Симонова Т.А. МОУ "Лицей №3" e-mail: simonof@list.ru Значимость элементов Главный. Назначение: выполняет основную роль композиции Центральный. Связывает все элементы в одну структуру. Второстепенные


Слайд 32

Симонова Т.А. МОУ "Лицей №3" e-mail: simonof@list.ru Пропорции Ведущая пропорция 2:3 – принцип “золотого сечения”. Используется: При выборе вертикальных и горизонтальных размеров При выборе отношения главного и центральных элементов: При размещении элементов; При создании вертикальных связей по вертикали.


Слайд 33

Симонова Т.А. МОУ "Лицей №3" e-mail: simonof@list.ru Размещение элементов Композиция должна быть визуально устойчивой Должна находиться в состоянии статического (симметрия) и динамического (асимметрического) равновесия. Устойчивость характеризуется визуальным “весом” элемента, которая, в свою очередь, определяется площадью, конфигурацией, ориентацией в пространстве, тоном, цветом и фактурой элементов


Слайд 34

Симонова Т.А. МОУ "Лицей №3" e-mail: simonof@list.ru Детали композиции должны подчиняться законам композиции в целом


Слайд 35

Симонова Т.А. МОУ "Лицей №3" e-mail: simonof@list.ru Перспектива Линейная Тональная (удаленные - светлее) Воздушная (резкость)


Слайд 36

Симонова Т.А. МОУ "Лицей №3" e-mail: simonof@list.ru Формат кадра зависит от преобладания вертикальных или горизонтальных линий 3:2 или 2:3


Слайд 37

Симонова Т.А. МОУ "Лицей №3" e-mail: simonof@list.ru Ритм Выполняет организационную или эстетическую роль. Задает форме движение через повторяемость. Устойчивое представление о существовании ритма возникает при числе периодов, равном числу Мюллера 7?2. Сама же закономерность улавливается при числе повторений равном 3. Для динамического ритма характерно вертикальное чередование; Для спокойного, плавного ритма характерно горизонтальное чередование.


Слайд 38

Симонова Т.А. МОУ "Лицей №3" e-mail: simonof@list.ru


Слайд 39

Симонова Т.А. МОУ "Лицей №3" e-mail: simonof@list.ru Особенности Web-дизайна Главный фактор - размер графических файлов. По мировым стандартам – 8 секунд ожидания. Для примера, 60 кб по модему 14 кбс приблизительно 1 минуту. Размер экрана 800*600, 640*480 (14”) Размер окна – панель InterNet Explorer. При сканировании Рекомендуется устанавливать разрешение 72 пиксель/дюйм, 100 dpi Цветовая глубина 8 бит (256 цветов), но 24 бит (16.8 млн.); ч/б – 8 бит (256 оттенков серого цвета) На стадии разработки рекомендуется использовать формат файла TIF, который конвертируется и оптимизируется в последний момент времени.


×

HTML:





Ссылка: