Основы информационного дизайна

Размещено на http://www.allbest.ru/

ОДЕССКИЙ КОРПОРАТИВНЫЙ КОМПЬЮТЕРНЫЙ КОЛЛЕДЖ

Конспект лекций

по дисциплине «Основы информационного дизайна»

Одесса, 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. Понятие информационного дизайна

Психологические основы восприятия информации.

Количественные и качественные показатели информационного дизайна.

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

Эргономика - удобство пользования.

u Эргономика веб-сайтов в англоязычной литературе называется «usability» (юзабилити).

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

u Информационный дизайн использует изображения, символы, цвета и слова для передачи идей, иллюстрирования информации и визуального выражения сути ОБЪЕКТОВ.

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

Для информационного дизайна важны ответы на следующие вопросы:

- Каковы цели информации в данной культуре?

- Как они могут достигаться эффективнее?

- Каким новым целям может служить информация?

- Как информация должна быть представлена, чтобы достичь целей?

В своей статье Герлинде Шуллер приводит следующую формулу информационного дизайна:

Информационный дизайн = Сложность + Междисциплинарность + Эксперимент

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

Информационный дизайн строится на функциональных и эстетических принципах.

К функциональным принципам можно отнести:

· облегчение понимания и обучения;

· чёткая структура сообщения;

· ясность;

· простота;

· единство (англ. unity) элементов сообщения;

· обеспечение высокого качества сообщения;

· уменьшение стоимости.

К эстетическим принципам относятся:

· гармония

· пропорциональность.

Распространённые приёмы:

1. Акцентирование

Изменением различных параметров текста (размера и начертания шрифта, позиции, и т. п.) можно добиться контраста для части текста, на который необходимо обратить внимание читателя.

2. Параллельное изложение

Параллельные тексты -- помогают привлечь внимание к наиболее важным моментам.

3. Добавление «воздуха»

Значимые части материала можно выделить путём окружения его пустым пространством -- «воздухом». «Воздушный» документ и его части приятнее и легче читать, придаёт тексту изящество.

Излишняя усложнённость (англ. over-designed)

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

Пользователей информационного дизайна можно разделить на две группы:

u 1.Технические специалисты, имеющие достаточный уровень подготовки для работы с любыми пользовательскими интерфейсами.

u 2. Пользователи, для которых работа с незнакомыми средами затруднена, т.к. помимо основной задачи пользователь должен владеть интерфейсом системы.

Психологические особенности восприятия информации

Следует отметить, что:

· Человек начиная работать с новым программным продуктом, особенно обладая устоявшимся стереотипом поведения для выполнения какой либо задачи, начинает чувствовать себя некомфортно.

· Срок формирования нового рефлекса или привычки для человека составляет в среднем от 21 до 24 дней.

Общие правила создания текстов для эффективного восприятия:

1. Для доказательства определенных положений чаще всего достаточно 2-3 аргумента.

2. Заголовки должны содержать менее 2 и не более 7 слов, тогда они хорошо запоминаются.

3. Информация на цветном (оранжевый, желтый фон) более эффективно воздействует на зрителя.

4. Следует подобрать оптимальное цветовое сочетание фона и шрифта. Черные буквы на белом фоне - не лучший вариант. Хорошо смотрятся зеленые на белом, красные на белом.

5. Текст в эллипсе воспринимается лучше, чем в квадрате или круге.

6. Европейцы читают слева направо, поэтому правая сторона запоминается лучше (там останавливается взгляд). Верхняя часть страницы, в свою очередь, читается с большим вниманием.

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

8. Строка учебного модуля для лучшего восприятия должна быть не длиннее восьми сантиметров.

9. Начало и конец текста воспринимается лучше, чем середина.

10. Повторение - наиболее эффективное средство воздействия (четыре-семь повторов).

Основные психологические закономерности восприятия цвета

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

- для привлечения внимания предпочтение следует отдавать чистым основным цветам, а не смешанным;

- по силе, с какой цвета привлекают внимание, их можно расположить в следующей последовательности: оранжевый, красный, желтый, зеленый, синий, фиолетовый;

- при естественном освещении более выразительными оказываются теплые цвета (желтый, оранжевый, красный), чем холодные (зеленый, синий, фиолетовый);

- цвет обладает свойством оптически увеличивать или уменьшать предметы: светлые оттенки зрительно увеличивают предмет, темные уменьшают. Это свойство обусловлено яркостью цвета. Желтый цвет всегда

воздействует как наиболее яркий, затем следует белый, за ним красный, зеленый, синий и черный;

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

Красный цвет. Красный, из всех цветовых тонов, самый броский и привлекающий к себе внимание.

Желтый цвет. Способствует усвоению нового материала. Он привлекает внимание и улучшает восприятие новой информации. Одновременно, желтый действует утомительно на глаза, а при его длительном воздействием снижается способность к сосредоточению.

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

Зеленый цвет. Средний зеленый цвет действует спокойно и нейтрально, он успокаивает, хотя и не так сильно, как синий. Общая зеленая тональность помещения передает спокойствие и способствует концентрации, однако может вызывать ощущение монотонности.

Психологические ассоциации, вызываемые различными шрифтами.

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

Размер шрифта. Размер используемого шрифта играет очень важную роль в создании эффекта. Часто относительно мелкий шрифт (например 11 пунктов) создает ощущение большей доверительности и важности информации. Более сильное воздействие достигается при наличии значительного незаполненного пространства вокруг текста.

Гарнитуры Шрифты с большими круглыми буквами «О» и «хвостиками» воспринимаются как дружественные и «человечные», возможно, потому, что их начертание подражает образу человеческого лица. Прямолинейные и угловатые шрифты ассоциируются с непреклонностью,

жесткостью; они характеризуются холодностью, безликостью и

механистичностью. Антиквенные шрифты (с засечками) типа Times, Times New Roman и Palatino -- это компромисс между старым и новым. Четкие и достаточно простые, они обладают хорошо выраженной формой и округлостью, намекающей на неоклассическую традицию и преемственность. Они вызывают чувство доверия.

Шрифты Sans Serif (без засечек), такие как Arial, Modern и Univers, обладают малым эмоциональным зарядом и ассоциируются с практичностью и здравомыслием. Они несут в себе современное общее начало.

Шрифты рукописного стиля -- это попытка передать дружелюбие и близкие отношения.

Качественные и количественные признаки информационного дизайна

Качественные признаки информационного дизайна

u Юзабилити

u Полезность - описывает функциональность дизайна.

Количественные параметры

u Обучаемость: насколько легко пользователи могут выполнить основные задачи, впервые встретившись с незнакомым им интерфейсом?

u Эффективность: после того, как пользователи ознакомятся с дизайном, как быстро они могут выполнить то же задание?

u Запоминаемость: После того, как пользователь снова вернется к интерфейсу через определенный промежуток времени, насколько легко ему будет восстановить свои навыки работы с данным интерфейсом?

u Ошибки: сколько ошибок делает пользователь, насколько серьезны эти ошибки, насколько легко пользователь может исправить эти ошибки?

u Удовлетворенность: насколько пользователю приятно пользоваться данным интерфейсом?

Цветовая теория: основные принципы. Умение сочетать цвета

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

Немного истории: цветовой круг изобрел Исаак Ньютон. Обосновав теорию света и цветов в 1666г. Именно она легла в основу становления и развития современной оптики, малой и составной частью которой является web-дизайн. Ньютон при помощи трёхгранной стеклянной призмы разложил белый свет на семь цветов (в спектр), тем самым доказав его сложность (явление дисперсии), открыл хроматическую аберрацию.

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

Первичные (primary) цвета. Есть три первичных цвета: красный, желтый и синий. Их нельзя получить путем смешивания других цветов.

Вторичные (secondary) цвета. Есть также три основных: оранжевый, зеленый и лиловый. Получить их можно путем смешивания первичных цветов.

Третичные цвета. Чтобы получить один из третичных цветов, необходимо смешать один основной цвет и один вторичный цвет. Возможности для третичные цветов безграничны.

Подбор цветов с помощью цветового круга

Триадная схема подбора цветов

Самый простой способ подбора цветов в цветовом круге - представить себе над кругом равнобедренный треугольник. Цвета, которые окажутся под вершинами

- потенциальные кандидаты на использование. Этот тип подбора цветов называется "триадной схемой". Суть заключается в том, что эти цвета, работая вместе образуют гармоничную комбинацию цветов.

Комплиментарная схема подбора цветов

Комплиментарные (complementary) цвета, т.е. те цвета, которые расположены в круге прямо напротив друг друга .



Монохроматичный набор цветов, как свидетельствует его название, использует один цвет и все его оттенки и вариации. При правильном использовании, эта схема может придать Web-сайту аккуратный, чистый вид.

Сходственная схема цветов с другой стороны использует цвета, которые расположены по соседству друг с другом на цветовом круге.

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

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

Особенности

графические объекты, ассоциативно связанные с представляемой

информацией или являющиеся графическим выражением направлений изменения представляемых данных,

полезная информационная нагрузка,

красочное представление,

внятное и осмысленное представление темы.

Составляющие успеха инфографики

Практикующие дизайнеры выделяют несколько аспектов, учёт которых позволяет сделать инфографику успешной:

Своевременность

Привлекательная, понятная тема

Плавный, красивый, эффективный дизайн

Удобство распространения

Учёт целевой аудитории

Цифры могут говорить сами за себя

Внутренняя целостность

Эмоциональные цвета

Качественные диаграммы

Выбор масштаба

Создание истории

Выбор интересных фактов

Визуализация

Упрощение

Использование линии времени

Определение концепции и цели

Авторитетность и надёжность источников

Функции инфографики:

· Полезность (практическая ценность) -- насколько достигаются поставленные цели коммуникации.

· Пригодность -- наличие смысла для зрителей и читателей, насколько полно, достоверно, интересно содержание.

· Эстетика -- качество формы и дизайна преподнесения информации.

По способу отображения инфографика подразделяется на следующие виды:

· Статичная инфографика -- одиночные изображения без элементов анимации;

· Динамическая инфографика -- инфографика с анимированными элементами.



Лекция 2. Структурированная информация, необходимая для обеспечения деятельности, образует информационное поле

Составляющие информационного поля:

1. Дизайн и стилистика сайта. Весь сайт должен быть выдержан в едином стиле, страницы с приблизительно одинаковым видом. Должны быть выдержаны единые цвета, шрифты.

2. Удобную навигацию. На сайте должно быть расположенное меню с разделами, а на каждой странице должна быть возможность вернуться на главную страницу. Меню должно быть удобным, заметным, быть сверху страницы, или сбоку, чтобы пользователю не пришлось его искать. Если разделов сайта много, и они имеют еще и подразделения, нужно сделать выпадающее меню. Если структура сайта является достаточно сложной, хорошо сделать «Карту сайта» с объяснениями.

3. Размерность сайта. Из-за разницы в размерах мониторов, дизайны сайтов принято делить на «резиновые» и «фиксированные».

Резиновый дизайн сайта (ширина задаётся в процентах) - сайт принимает любые размеры экрана (при потребности - растягивается или уменьшается). Такой дизайн достаточно распространен теперь из-за этого удобства. Хотя есть

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

Фиксированный дизайн сайта (ширина задаётся в процентах) - с определенной постоянной шириной сайта. Преимущественно подгоняется под неширокий экран. Но на широком экране - будет выглядеть немного пусто. Хотя, конечно, такой дизайн выглядит аккуратнее «резинового», потому что имеет первичный вид, которым задумывался.

4. Оформление контента. Создание качественного дизайна сайта предусматривает определенное оформление контента (текстов, изображений, таблиц, схем и т.д.).

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

Первичный дизайн состоит из нескольких этапов

u Составить пользовательские требования (опрос пользователей или наблюдение)

u Составить функциональный набор

u Определить характеристики потенциальных пользователей

u Написать пользовательские сценарии

u Оптимизировать пользовательские сценарии

u Разработать структуру интерфейса

Рекомендации при использовании гиперссылок

u Не используйте в названиях ссылок рекомендации общего характера, такие как

"Щелкните здесь" ("Click Here")

u Ссылку, стоящую в конце списка элементов, не следует называть неопределенным именем вроде "Еще..." или "Больше..." ("More...")

u В названии ссылки или группы ссылок не потребляйте само слово "ссылка"

Навигация сайта - это набор гиперссылок, созданный для перехода по разделам сайта, для поиска конкретной информации. Навигация сайта выполняет две основные функции: переход и ориентирование.

Определяют 2 типа пользователей по их навигационным предпочтениям:

u пользователи с доминантным поиском (search-dominant);

u пользователи с доминантным выбором ссылок (link-dominant).

Проблемы сайтов

u Нет ощущения масштаба.

u Нет ощущения направления.

u Нет ощущения местоположения.

Рекомендации

u Главная панель навигации должна находиться в заметном месте страницы, предпочтительно рядом с ее основной частью.

u Сгруппируйте элементы области навигации так, чтобы подобные элементы находились рядом друг с другом.

u Не создавайте сразу несколько областей навигации, назначение которых повторяет друг друга.

u Не используйте в названиях элементов навигации самостоятельно придуманные искусственные слова.

u Если на сайте предусмотрена "корзина" для покупок, создайте ссылку на нее на главной странице.

u Пиктограммы для обозначения элементов навигации употребляйте только если они способны быстро привлечь внимание посетителей к определенному классу предметов.

Широта сайта - это видимые разделы навигации сайта.

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

Основные элементы дизайна сайта:

1. Логотип и название сайта

2. Навигация сайта - вертикальное и/или горизонтальное меню, состоящее из разделов, подразделов и т.д.

3. Сервисы

u Сервисами называются ссылки на важные компоненты сайта, не принадлежащие к иерархии смыслового содержания. Сюда входят либо разделы, которые помогают пользоваться сайтом, например, "Помощь", "Карта сайта", "Корзина", либо разделы, которые содержат информацию о создателе сайта, например, "О нас", "Контакты". Список сервисов должен быть менее заметен, чем список разделов сайта.

4. Указание местоположения

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

u Поставить напротив ссылки специальный указатель

u Изменить цвет текста

u Использовать жирный шрифт

u Применить инверсию цвета

u Ссылки-цепочки ("Хлебные крошки")

Ссылки-цепочки ("Хлебные крошки")

Обычно представляет собой полосу в верхней части программы примерно такого вида:

Имя диска: > Раздел > Подраздел

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

u В отличие от указателей "Вы находитесь здесь", по которым пользователи определяют свое местонахождение, "хлебные крошки" показывают путь к данной странице от главной страницы сайта. Естественно, все слова, которые в них используются, являются ссылками, т.е. можно подняться на один или несколько уровней вверх по иерархии сайта.

Рекомендации по использованию «Хлебных крошек»:

· Размещать вверху страницы

· Между уровнями использовать символ >

· Небольшой размер шрифта

Правило 7±2

«7 плюс-минус 2» - важное правило графического дизайна

Влияние типа информации на восприятие

В порядке воспринимаемости информации правильно расположить разные типы информации так:

Одним методов, на который стоит обратить пристальное внимание, является правило "семь плюс минус два (7±2)". Этот принцип очень часто применяется для того, чтобы определить количество видимых пунктов в меню навигации на веб-сайте.

Откуда же пришло это правило?

В 1956 году психолог Джорж Миллер опубликовал результаты своего исследования. По исследованиям, проведенным Джорджом Миллером человек может воспринимать число объектов 7 плюс-минус 2. С тех пор правило 7±2 стало сверхпопулярным среди дизайнеров интерфейсов.

Веб-дизайнеры применяют данное правило, используя количество видимых разделов навигации в интервале от 5 до 9.



Лекция 3. Структура сайта

Отличительной особенностью качественного веб-сайта является его правильно организованная структура. Если вы спланируете ее до создания проекта, тогда вы сможете избежать многих проблем и ошибок в будущем.

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

Разделяют внутреннюю и внешнюю структуры сайтов.

Внутренняя структура включает в себя междустраничные переходы, а так же ссылочную взаимосвязь страниц. Её называют логической структурой.

Линейная структура сайта

Это самая простая структура сайта. Web-страницы идут одна за другой, и пользователь должен просматривать их как слайд-шоу. В линейной структуре не существует разделения контента на уровни. Все страницы на таких сайтах равноправны, и их должен увидеть каждый посетитель. Несмотря на простоту реализации линейной структуры, недостатков у нее гораздо больше, нежели достоинств. Поэтому область ее применения четко ограничена. Она может использоваться на имиджевых сайтах, сайтах-презентациях и в онлайновых учебных пособиях.

Реализация линейной структуры не представляет собой абсолютно никакой сложности. Самый простой вариант сайта -- набор HTML-страниц, с каждой из которых есть ссылка на последующую предыдущую страницу. Но при этом на каждой страницы обязательно должно быть какое-то заглавие и ссылка на первую страницу. Иначе посетители, попавшие в середину сайта, например, с поисковой системы, ничего не поймут и почти наверняка покинут проект разочарованными. Кроме того, очень полезно бывает показывать общее число страниц и как-то выделять номер той из них, на которой человек находится в данный момент. Иначе просмотр проекта превратится для посетителей в путешествие в неизвестность.

Линейная структура сайта с альтернативами и вариантами

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

Линейная структура сайта с ответвлениями

Это тоже контролируемая структура, которая напоминает дорогу с ответвляющимися от нее время от времени тупиковыми тропинками. То есть посетитель последовательно переходит с одной страницы на другую. Если информация, размещенная на какой-то из них его заинтересовала, и он хочет узнать подробности, то может перейти на ответвление, а потом вернуться обратно на основную «дорожку».

Древовидная структура сайта

Древовидная структура -- самый универсальный способ размещения web-страниц. Она подходит для создания практически любых типов сайтов. Ее

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

Речь идет о том, что в древовидной структуре очень сложно соблюдать баланс между глубиной и шириной. Если «дерево» сайта будет расти только вглубь, то пользователям, чтобы дойти до какой-то информации, придется загрузить и просмотреть слишком много страниц. А если создать очень широкую древовидную структуру, то посетители будут вынуждены каждый раз тратить много времени для выбора нужной им ветки.

Решетчатая структура



Эта структура уже на порядок сложнее всех рассмотренных ранее. В ней все страницы также размещаются в различных ветках. Но у пользователя есть возможность перемещаться по ним не только вертикально (вверх-вниз), но и горизонтально (то есть между ветками на разных уровнях). Используется решетка в основном только в каталогах.

Файловая и гипертекстовая структуры

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

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

Каталог 1 (Раздел 1)

Подкаталог 1.1 (подраздел 1.1).

Подкаталог 1.1.1 (подраздел 1.1.1).

Подкаталог 1.1.2 (подраздел 1.1.2).

Подкаталог 1.2 (подраздел 1.2).

Подкаталог 1.3 (подраздел 1.3).

Каталог 2 (Раздел 2)

Подкаталог 2.1 (подраздел 2.1).

Подкаталог 2.2 (подраздел 2.2).

Подкаталог 2.3 (подраздел 2.3).

.....

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

Карта сайта

Карта сайта представляет собой список страниц сайта для поисковых систем или пользователей. Используется как элемент навигации, показывает взаимосвязь между страницами сайта. Это полный перечень разделов и/или всех страниц в иерархическом порядке.

Существуют два типа карт сайта:

u файлы Sitemaps.xml (в формате XML), известные также как Google sitemaps, и предназначенные для использования роботами поисковых систем;

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

Первый тип, файлы Sitemaps.xml служат для поисковой оптимизации (поисковые системы, в частности Google и Яндекс, используют их для индексации страниц сайта).

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

Внешняя структура включает в себя расположение видимых блоков на сайте.



Элементы структуры страницы, для которых требуется заранее спланировать выделение места. Это:

· HEADER ("шапка" сайта) - блок (часто графический), повторяющийся на каждой странице. Включает (или может включать) в себя:

логотип;

рекламный баннер;

форму поиска (иногда ее делают пунктом меню).

· MENU (Главное меню сайта)

· NAVIGATION (Навигационный блок)

· CONTENT (основное содержание страницы)

· FOOTER («подвал» сайта - обычно в этом блоке размещают графические части счетчиков, иконки, копирайт и так далее).

Веб-разработка -- процесс создания веб-сайта или веб-приложения.

Этапы разработки веб-сайта

На сегодняшний день существуют несколько этапов разработки веб-сайта:

• Проектирование сайта или веб-приложения (сбор и анализ требований, разработка технического задания, проектирование интерфейсов);

• Разработка креативной концепции сайта;

• Создание дизайн-концепции сайта;

• Создание макетов страниц;

• Создание мультимедиа и FLASH-элементов;

• Вёрстка страниц и шаблонов;

• Программирование (разработка функциональных инструментов) или интеграция в систему управления содержимым (CMS);

• Оптимизация и размещение[материалов сайта;

• Тестирование и внесение корректировок;

• Открытие проекта на публичной площадке;

• Обслуживание работающего сайта или его программной основы.

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

Создание технического задания

Составлением технического задания для специалистов занимается менеджер проекта. Работа с заказчиком начинается с заполнения брифа, в котором заказчик излагает свои пожелания относительно визуального представления и структуры сайта, указывает на ошибки в старой версии сайта, приводит примеры сайтов конкурентов. Исходя из брифа, менеджер составляет техническое задание, учитывая возможности программных и дизайнерских средств. Этап заканчивается после утверждения технического задания заказчиком. Важно сразу отметить, что этапы проектирования веб-сайтов зависят от многих факторов, таких как объём сайта, функциональность, задачи, которые должен выполнять будущий ресурс и многое другое. Однако, есть несколько этапов, которые в обязательном порядке присутствуют в планировании любого проекта.

Дизайн основной и типовых страниц сайта

Начинается работа с создания дизайна, обычно в графическом редакторе. Дизайнер создаёт один или несколько вариантов дизайна, в соответствии с техническим заданием. При этом отдельно создаётся дизайн главной страницы, и дизайны типовых страниц (например: статьи, новости, каталог продукции). Собственно «дизайн страницы» представляет собой графический файл, слоеный рисунок, состоящий из наиболее мелких картинок-слоев элементов общего рисунка.

При этом дизайнер должен учитывать ограничения стандартов HTML (не создавать дизайн, который затем не сможет быть реализован стандартными средствами HTML). Исключение составляет Flash-дизайн.

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

HTML-верстка

Утверждённый дизайн передаётся HTML-верстальщику, который «нарезает» графическую картинку на отдельные рисунки, из которых впоследствии складывает HTML-страницу. В результате создаётся код, который можно просматривать с помощью браузера. А типовые страницы впоследствии будут использоваться как шаблоны.

Программирование

Далее готовые HTML-файлы передают программисту. Программирование сайта может осуществляться как «с нуля», так и на основе CMS -- системы управления сайтом. Веб-разработчики часто называют CMS «движком».

В случае с CMS надо сказать, что сама «CMS» в некотором смысле это готовый сайт, состоящий из заменяемых частей. «Программист» -- в данном случае правильно будет назвать его просто специалистом по CMS -- должен заменить стандартный шаблон, поставлявшийся с CMS, на оригинальный шаблон. Этот оригинальный шаблон он и должен создать на основе исходного «веб-дизайна».

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

Обнаруженные ошибки отправляются на исправление до тех пор, пока не будут устранены. Сроки контролирует менеджер проекта. Также, на этом этапе привлекают к работе дизайнера, чтобы он провёл авторский надзор.

Размещение сайта в Интернет

Файлы сайта размещают на сервере провайдера и производят нужные настройки. На этом этапе сайт пока закрыт для посетителей.

Наполнение контентом и публикация

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

Внутренняя SEO-оптимизация

Связана с некоторыми изменениями самого сайта. SEO-оптимизация начинается с определения семантического ядра. Здесь определяются такие ключевые слова, которые привлекут наиболее заинтересованных посетителей, по которым выиграть конкуренцию проще. Затем эти слова вносятся на сайт. Тексты, ссылки, другие теги адаптируются так, чтобы поисковые системы могли их успешно находить по ключевым словам.

Внешняя SEO-оптимизация

Сводится, как правило, к построению структуры входящих ссылок. Это собственно и есть раскрутка сайта. К разработке сайта внешняя SEO-оптимизация не имеет отношения. SEO-оптимизация классифицируется на «белую» и «черную» (такую, после которой сайт за две недели попадает в топ, а потом в бан поисковиков). Настоящая, «белая» SEO-оптимизация, это трудоёмкий и долгий процесс, стоимость которого может в несколько раз превышать расходы на создание сайта.

Сдача проекта

Заказчик или его доверенное лицо просматривают готовый проект и в случае, если все устраивает, то подписывают документы о сдаче проекта.

Также, на этом этапе производится обучение представителя заказчика навыкам работы в администраторской зоне сайта.

Техническое задание на разработку сайта

Техническое задание (ТЗ, или техзадание) -- документ, описывающий процесс проектирования и разработки сайта. Обычно включает следующую информацию:

1. Название, цели, область применения

Начните с названия сайта и предпочитаемого доменного имени (убедитесь, что оно свободно). Вкратце опишите, с какой целью вы создаете сайт, что он будет предлагать и какой аудитории.

2. Определения, аббревиатуры, ссылки

Определите термины предметной области, знание которых необходимо разработчику для понимания техзадания. При необходимости снабжайте их ссылками на внешние источники информации.

3. Данные аудита

Детально опишите особенности и характеристики предлагаемого продукта или услуги. Предоставьте результаты анализа конкурентного сегмента рынка, если таковой проводился. Также сообщите подробные сведения о целевой аудитории: пол, возраст, регион проживания, образование, социальный статус, профессия и пр. Любая информация может оказаться полезной при разработке дизайна и подготовке информационного наполнения сайта.

4. Требования к возможностям, ограничения

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

Требования к возможностям описывают доступные пользователю операции и соответствующую реакцию системы. Чем подробнее -- тем лучше. При возможности используйте диаграммы (UML), рисунки и другую инфографику. Укажите, если по какой-либо причине требуется применение определенных стандартов, форматов, языков программирования и др.

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

5. Этапы разработки, контроль качества

Согласовав этапы реализации проекта и даты контрольных проверок, укажите их в этом разделе.

6. Приложения

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

Техническое задание является юридическим документом -- как приложение включается в договор между заказчиком и исполнителем на проведение проектных работ и является его основой: определяет порядок и условия работ, в том числе цель, задачи, принципы, ожидаемые результаты и сроки выполнения. То есть должны быть объективные критерии, по которым можно определить, сделан ли тот или иной пункт работ или нет.

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

Лекция 4. Графика для веб-сайтов

Описать подготовку графики для веб-страниц гораздо легче, чем сформулировать все требования к текстам. Это не значит, что сама подготовка является лёгкой: если графики много, основное время уйдёт на оптимизацию, т. е. поиск компромисса между качеством и размеров файлов, и нарезку, или фрагментацию картинок под шаблоны вёрстки.

ФО РМАТЫ ФАЙЛОВ

JPEG принято использовать для:

а) полноцветных фотографий,

б) изображений со сложными градиентными переходами.

Графические файлы формата JPEG могут быть сохранены с различной степенью компрессии. Чем выше компрессия, тем ниже качество получаемых изображений. Сжатие по алгоритму JPEG происходит с потерей информации, что приводит к появлению так называемых артефактов сжатия, специфических размытий на границах областей.

GIF применяется для:

а) изображений с малым количеством цветов;

б) скриншотов, схем, графиков, примитивов;

в) анимированных изображений;

г) изображений с областями прозрачности.

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

Если использовать Adobe Photoshop, наилучшей технологией сохранения графики для веб-страниц будет диалог: File | Save for Web. Используя его, можно не только выбрать графический формат, количество цветов для GIF и степень компрессии для JPEG, но и увидеть, как будет выглядеть изображение после сохранения. Ещё одним -- и очень важным -- преимуществом этого способа является то, что можно сохранять изображения без предварительного слияния всех слоёв, чего требует, например, диалог Save As.

PNG

К растровым форматам, которые можно использовать в интернете, относится и формат PNG.

Достоинства растрового формата

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

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

Недостатки растрового формата

При попытке слегка повернуть на небольшой угол изображение, например,

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

В графическом редакторе Photoshop для веб-графики чаще используются три цветовых режима: Grayscale, RGB Color и Indexed Color (Lab).

При сохранении цветных изображений для их использования на веб-страницах обычно следует выбирать режим RGB Color, поскольку он поддерживает 16,7 млн. цветов.

Векторные форматы

Эти графические форматы служат для хранения сведений об изображениях, представленных в векторном виде: как линии, овалы, прямоугольники, дуги и др. Одно из главных достоинств этого формата в том, что при любом изменении размера изображения размер файла почти не меняется.

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

Достоинства векторного формата

Экономичность. Требуется мало места на диске, необходимого для хранения изображений: это связано с тем, что сохраняется не само изображение, а только некоторые основные данные, используя которые программа всякий раз воссоздает изображение заново. Размер файла практически не зависит от размера изображения. Кроме того, описание цветовых характеристик также не сильно увеличивает размер файла.

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

Недостатки векторного формата

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

Сложность преобразования растрового изображения в векторное.

Векторная графика ограничена в чисто живописных средствах и не предназначена для создания реалистичных изображений.

Анимация в веб

Непременно, движущиеся картинки привлекают гораздо больше внимания, чем обычные, статические. Соответственно, пользователь хуже воспринимает все остальное содержание страницы, так как основное его внимание уделено именно движущимся картинкам.

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

Логотип

Одним из практически обязательных графических элементов сайта является логотип.

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

· Индивидуальность. Это требование основополагающее при разработке логотипа. Оригинальность логотипа позволяет сайту уже только за счёт логотипа выделиться на фоне бесконечного множества других сайтов.

· Лаконичность. При разработке логотипа не следует перегружать его многочисленными деталями и излишней детализацией. Лаконичность и простота (но не примитивность) логотипа обеспечивают лёгкость его восприятия, быструю запоминаемость и мгновенную узнаваемость.

· Функциональность. При создании логотипа важно учитывать способность знака к масштабированию и возможность его воспроизведения

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

· Ассоциативность. Логотип должен вызывать ассоциации с основной тематикой сайта, создавать его эмоциональный образ. Высший класс - создание логотипа, который вызывает не только прямые ассоциации,

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

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

Разработка логотипа основывается на перечисленных фундаментальных понятиях. И насколько верно удастся воплотить все эти требования, настолько успешным будет логотип. Через логотип происходит первый контакт посетителя с сайтом. Поэтому логотип должен создавать нужный образ и связи, не вызывать у посетителя никакого сомнения и чувства дискомфорта.

Основные правила и рекомендации для создания текстовой части веб-страниц

Структурирование веб-текста

Тексты для Интернета тем популярнее у поисковиков, чем «доброжелательнее» к читателю. Пишите свои материалы по определенному плану, который должен прослеживаться:

основная мысль;

уточнения;

дополнительная информация.

Избегайте длительных вступлений и приветствий: на первом месте всегда должна быть максимальная информативность. Текст сам прорекламирует себя, если постараться сконцентрировать основную идею в самом начале. Расшифровать отдельные многозначные или сложные моменты можно во второй части.

Длинные предложения - как и слишком большие абзацы - лучше не использовать. Во-первых, это реально плохо смотрится, а во-вторых, порядком затрудняет восприятие изложенных в веб-тексте идей. А вот если «украсить» контент списками и/или подзаголовками, это и упростит чтение, и корректнее отобразится в алгоритмах поисковых роботов.