ОДЕССКИЙ КОРПОРАТИВНЫЙ КОМПЬЮТЕРНЫЙ КОЛЛЕДЖ
КОНСПЕКТ ЛЕКЦИЙ ПО ДИСЦИПЛИНЕ «ОСНОВЫ ИНФОРМАЦИОННОГО ДИЗАЙНА»
Одесса
2017
Направление: «Веб-дизайн»
Предмет: «Основы информационного дизайна»
Преподаватель: Славкина Виктория Владимировна
Тематический план
“ОСНОВЫ ИНФОРМАЦИОНОГО ДИЗАЙНА”
|
№ |
Наименования тем |
Количество |
|
п/п |
часов |
|
|
1. |
Понятие информационного дизайна. Психологические основы |
4 |
|
восприятия информации. Количественные и качественные |
||
|
показатели информационного дизайна. |
||
|
2. |
Информационное поле. Структурирование информационного |
4 |
|
поля. Принципы и правила юзабилити. Дизайн сайта. Главные |
||
|
требования для веб-дизайна. Удобная навигация. Использование |
||
|
гипертекста. |
||
|
3. |
Структура сайта. Внутренняя и внешняя структура. Карта сайта. |
4 |
|
Веб-разработка. Этапы веб-разработки. Техническое задание на |
||
|
разработку сайта. |
||
|
4. |
Введение в технологию верстки HTML-страниц. Типы макетов. |
4 |
|
Виды вёрстки. Преимущества и недостатки. Кроссбраузерность, |
||
|
сематичность, валидность. |
||
|
5. |
Основы технологии разработки дизайна веб-страниц. Программы |
5 |
|
для разработки веб-страниц. Визуальные html-редакторы для |
||
|
создания веб-страниц. |
||
|
6. |
Оптимальный объем информации. Устаревшая и потерянная |
2 |
|
информация. Архивация. |
||
|
7. |
Основы поисковой оптимизации. «Продвижение» информации. |
4 |
|
Домены и хостинг. |
||
|
8. |
Видео-и аудиоконтент. |
2 |
|
9. |
Системы управлением содержимым сайта (CMS-системы). Обзор |
4 |
|
существующих и методы настройки и применения |
||
|
10. |
CMS WordPress |
4 |
|
Контрольная работа |
2 |
|
|
Итоговый тест |
1 |
|
|
ВСЬОГО: |
40 |
Лекция 1.
Понятие информационного дизайна. Принципы и приёмы информационного дизайна. Over-designed. Психологические основы восприятия информации. Основные психологические закономерности восприятия цвета Психологические ассоциации, вызываемые различными шрифтами. Количественные и качественные показатели информационного дизайна. Понятие эргономики, Usability, полезности.
Самостоятельная работа №1: Создать инфоргафику, отвечающую принципам и приёмам ИД.
Домашее задание №1: В текстовом или графическом редакторе составить информационное сообщение «Почему нужно изучать информационный дизайн», используя принципы и приёмы ИД, а также психологические основы восприятия информации.
Лекция 2.
Структурирование информационного поля (структурированная информация). Юзабилити – правила и принципы Правило 7+-2 (количество пунктов в навигации), применение на практике. Дизайн сайта. Стилистика сайта. Удобная навигация. Принцип составления навигации на сайте. Ссылки. Основные элементы дизайна.
Самостоятельная работа №2: Найти и распознать элементы дизайна на примерах. Домашнее задание №2: Определить все элементы дизайна сайта любого интернет-магазина в сети Интернет, определить достоинства и недостатки элементов дизайна выбранного сайта.
Лекция 3.
Структура сайта. Внутренняя и внешняя структура. Линейная, линейная с ответвлениями, древовидная структуры сайтов. Файловая и гипертектовая структуры. Внешняя структура – header, sitebar, content, footer. Карта сайта. Веб-разработка. Этапы веб-разработки. Техническое задание на разработку сайта.
Самостоятельная работа №3: Составить карту сайта по заданной тематике.
Домашнее задание №3: Реферат. Составить ТЗ на создание сайта по заданной тематике.
Лекция 4.
Графика в веб-дизайне. Форматы графики в веб-дизайне. Оптимизация изображений для веб-приложений. Использование анимации на страницах сайта – преимущества и недостатки. Разработка логотипа для сайта.
Самостоятельная работа №4: Создать логотип сайта по заданной тематике. Самостоятельная работа №5: Создать основные элементы «шапки» сайта по заданной тематике.
Домашнее задание №4: Создать прототип главной страницы сайта по заданной тематике в графическом редакторе.
Лекция 5.
Основы технологии разработки дизайна веб-страниц. Программы для разработки веб-страниц. Визуальные html-редакторы для создания веб-страниц.
Самостоятельная работа №6: Корректировка цветовой схемы сайта в графическом редакторе
Самостоятельная работа №7: Создание каркаса сайта.
Домашнее задание №5: Создание HEADER страницы.
Домашнее задание №6: Разработка навигационного меню сайта.
Лекция 6.
Оптимальный объем информации. Устаревшая и потерянная информация. Архивация. Способы архивации информации в сети Интернет. Изучение понятия оптимального объема информации. Смысловая ценность информации. Понятие целевой аудитории.
Самостоятельная работа №8: Определить целевую аудиторию для будущего сайта, корректировка цветовой схемы сайта в графическом редакторе. Домашнее задание №7: Оптимиизировать код сайта
Лекция 7.
Основы поисковой оптимизации. «Продвижение» информации. Методы поисковой оптимизации. Семантическое ядро. Описание и ключевые слова. Понятие релевантности. Изучили плотность ключевых слов в текстах на сайте и сервисы по проверке текста на плотность ключевых слов. Домены и хостинг.
Самостоятельная работа №9: Описание и ключевые слова сайта.
Домашнее задание №8: Изучение хостингов. Анализ услуг предоставляемых хостингами и выбор оптимального для размещения сайта. Загрузка сайта на бесплатный хостинг. Настройка его отображения.
Лекция 8.
Видео- и аудио-контент. Добавление медиа-контента на страницы сайта. Список поддерживаемых браузерами кодеков медиа-контента. HTML-синтаксис для внедрения аудио- и видеофайлов на страницы сайта. Кодировка для универсального воспроизведения медиа-файлов в разных браузерах.
Самостоятельная работа №10: Добавить откорректированную карту сайта и форму обратной связи.
Домашнее задание №9: Добавить медиа-контент на страницы сайта – изображения (с использованием увеличения), аудио- и видео-файлы (на выбор студента). Добавить Google-карту на страницу «Контакты». Создать и добавить favicon.
Домашнее задание №10: Добавить слайдер на одну из страниц сайта. Завершить создание сайта.
Лекции 9.
Лендинговая (посадочная страница). Цели создания. Структура страницы. Особенности создания и отличие от многостраничных сайтов.
Самостоятельная работа 11: Создать прототип лендинговой страницы на он-лайн платформе.
Домашнее задание 11: Создать лендинговую страницу по заданной теме.
Лекции 10.
Системы управлением содержимым сайта (CMS-системы). Обзор существующих и методы настройки и применения. Модели представления данных в CMS. Функционирование CMS. CMS WordPress. Изучение системы CMS WordPress. Работа в системе CMS WordPress. Преимущества данной системы. Настройка и применение на практике CMS WordPress. Добавление модулей.
Самостоятельная работа 12: Регистрация и выбор доменного имени в CMS WordPress.
Самостоятельная работа 13: Выбор темы для главной страницы в CMS WordPress. Домашнее задание 12: Создать главную страницу сайта по выбранной тематике. Добавить навигационное меню.
Домашнее задание 13: Создать сайт (не менее 3-х страниц) с навигацией и настроить их отображения. Завершить создание сайта с помощью визуального в CMS WordPress.
Лекция 1.
Понятие информационного дизайна.
Психологические основы восприятия информации.
Количественные и качественные показатели информационного дизайна.
Информационный дизайн — отрасль дизайна, практика художественно-технического оформления и представления различной информации с учётом эргономики, функциональных возможностей, психологических критериев восприятия информации человеком, эстетики визуальных форм представления информации и некоторых других факторов.
Эргономика - удобство пользования.
Эргономика веб-сайтов в англоязычной литературе называется «usability» (юзабилити).
информационном дизайне традиционные и новые принципы дизайна применяются к процессу преобразования сложных и неструктурированных данных в ценную, осмысленную информацию. С помощью картинок, символов, цвета, слов происходит передача идей, иллюстрация данных или визуализация информации.
Информационный дизайн использует изображения, символы, цвета и слова для передачи идей, иллюстрирования информации и визуального выражения сути ОБЪЕКТОВ.
Основной целью информационного дизайна является ясность коммуникации: информация должна и точно быть передана отправителем, и правильно понята получателем.
Для информационного дизайна важны ответы на следующие вопросы:
– Каковы цели информации в данной культуре?
– Как они могут достигаться эффективнее?
– Каким новым целям может служить информация?
– Как информация должна быть представлена, чтобы достичь целей?
своей статье Герлинде Шуллер приводит следующую формулу информационного дизайна:
Информационный дизайн = Сложность + Междисциплинарность + Эксперимент
Информационный дизайн делает сложные наборы фактов доступными восприятию, требует междисциплинарного подхода к коммуникации, например, сочетая умения графического дизайна, трёхмерного дизайна, цифровых технологий, теории информации, культурологи, следует развивать в направлении экспериментирования, расширяя репертуар средств и не исключая из рассмотрения сложные системы.