Технология создания сайта

Государственное общеобразовательное учреждение
Лицей № 590
Красносельского района
Реферат
Технология создания Web-сайта
Предметная область:
Информатика
Выполнила ученица 11а
Наумова Евгения.
Учитель информатики
Баранова Н.С.
Санкт- Петербург
2005г.
Содержание:
1. Введение…………………………………………………………………4
2. Web-сайт…………………………………………………………………4
3. Юзабилити………………………………………………………………4
1. Основной принцип юзабилити………………………………….4
2. Использование Интернета………………………………………6
4. Построение сайта……………………………………………………….6
1. Хронология создания сайта……………………………………..6
2. Схема сайта………………………………………………………7
 Построение структуры………………………………..8
 Преобразование структуры в диаграмму……………8
5. Визуальный интерфейс Web-страниц…………………………………9
1. Создание страниц для просмотра, а не для чтения……………….9
2. Цветовая политра, шрифты и графика……………………………13
3. Текст для Web………………………………………………………14
 Опустите лишние слова……………………………………..14
 Выбор размера шрифта……………………………………..15
 Текст на фоновом рисунке………………………………….15
 Графический и HTML-генерируемый текст………………16
6. Навигация………………………………………………………………16
1. Назначение навигации……………………………………………..16
2. Условности, применяемые для навигации……………………….17
3. Постоянная навигация……………………………………………..18
4. Названия страниц…………………………………………………..19
5. Вкладки……………………………………………………………..20
6. Пиктограммы……………………………………………………….21
7. Начальная страница……………………………………………………21
1. Содержание первой страницы…………………………………….21
2. Цели…………………………………………………………………22
3. Как передать основную идею?……………………………………23
2
4. Навигация начальной страницы………………………………….24
5. Всплывающие элементы………………………………………….25
6. Выпадающие меню………………………………………………..25
8. Заключение…………………………………………………………….26
3
I. Введение
Глобальная сеть Интернет постоянно развивается, появляются новые
Web-сайты, совершенствуются технологии. Эта индустрия новая, значит,
большая часть ее областей еще не освоена. Сейчас профессия Web-дизайнера
становится все более и более популярной.
Web-дизайн – не только создание привлекательных Web-страниц.
Нужно уметь создать множество замечательных страниц и связать их
воедино способом, понятным обычному пользователю. Современные Webузлы могут содержать сотни страниц. Задача состоит в том, чтобы с
помощью многочисленных технологий спроектировать общий дизайн,
систему навигации и таким образом построить эффективный Web-узел.
Разработка профессиональных Web-узлов – не просто создание
приятных глазу страниц, а сложный процесс, включающий планирование
узла, создание понятного пользователю интерфейса, работу в команде
дизайнеров, использование соответствующих технологий и общение с
клиентом. И на каждом этапе этого пути необходимо участие Web-дизайнера.
Для работы в данной области требуются немалые знания. Должна быть
как техническая база, так и профессиональные художественные навыки
(чувство цвета, основы композиции и др.).
В данном реферате я хочу представить информацию по основам Webдизайна и технологии создания сайта, которая поможет реализовать
творческие способности и создать сайт любой сложности.
II. Web-сайт
Слово сайт утвердилось в русской интернетовской терминологии
сравнительно недавно. Раньше, в 1995-1996 годах, в том же или примерно
том же значении применялись сочетания «страница WWW», «узел WWW»
или «WWW-сервер». На самом деле сайт как информационная единица –
нечто принципиально отличное от сервера WWW (т.е. программы) или узла
сети Интернет (т.е. компьютера).
Сайт – это набор из нескольких десятков, сотен или даже тысяч Webстраниц, связанных вместе единой темой, общим оформлением, взаимными
гипертекстовыми ссылками и, как правило, близким по интернетовским
меркам размещением.
Это значит, что иногда, в зависимости от контекста, один и тот же
набор страниц может рассматриваться либо как самостоятельный сайт, либо
как часть какого-то другого сайта.
4
III. Юзабилити
1. Основной принцип юзабилити
Первый закон юзабилити: «не заставляйте меня думать!» Этот
принцип является решающим при оценке того, что и как работает (или не
работает) в Web-дизайне. В той мере, насколько этого можно достичь, Webстраница должна быть максимально простой, понятной и «самоочевидной».
Другими словами, пользователь должен сразу «схватить» ее – понять, что на
ней и как ей пользоваться без затраты каких-либо усилий.
Что значит: простой, понятной и «самоочевидной»?
Когда смотришь на страницу, в голове должно возникать нечто вроде:
«Так, понятно, это вот это…а вот это вот то…а вот это то, что мне нужно».
Но когда смотришь на страницу, которая заставляет думать, все мысли
принимают форму вопросительных знаков.
Когда вы создаете сайт, ваша основная задача состоит в том, чтобы
избавиться от вопросительных знаков. Чем меньше вопросов, тем лучше.
Разные вещи на Web-странице могут заставить нас без надобности
останавливаться и задумываться. Например: вычурные и заумные названия,
торговые марки, фирменные знаки, незнакомые технические термины.
Название раздела лежит в неком диапазоне «Понятно каждому» и «Совсем
понятно». Возможны разные положения внутри этого диапазона.
Другой источник вопросительных знаков – ссылки и кнопки, вид
которых не всегда ясно показывает, что на них можно нажать. Пользователь
никогда не должен тратить и сотой доли секунды но то, чтобы разбираться,
можно или нельзя щелкнуть по объекту. Всякий лишний вопрос создает
нагрузку для нашего восприятия, когда мы находимся в сети, и отвлекает
внимание от текущей задачи. Если сами разработчики не задумываются о
том, чтобы сделать все очевидным, то это подрывает доверие к содержанию
сайта и его создателям.
Вопросы, о которых посетители сайтов не должны задумываться:
 Где я?
 Откуда следует начинать?
 Что самое главное на этой странице?
 Почему это называется так?
Ваша цель – каждую страницу сделать «самоочевидной», чтобы при
первом взгляде посетитель мог понять, что это и как этим пользоваться.
Однако в ряде случаев, когда требуется создать нечто оригинальное,
ошеломляющее или очень сложное, трудно достичь полной простоты и
ясности и приходится довольствоваться только понятностью. Понятная
страница не нуждается в пояснениях. Внешний вид элементов, хорошо
подобранные названия, общий вид страницы и небольшой объем тщательно
составленного текста – все это должно создавать почти мгновенное
5
понимание у пользователя. Если нет возможности сделать страницу
полностью самоочевидной, то, по крайней мере, сделайте ее понятной.
Ясность и простота для Web-страницы – как хорошее освещение для
витрины магазина – при них все кажется лучше. Легко использовать сайт,
который не принуждает задумываться о несущественном.
2. Использование Интернета
В действительности Интернет используется не так, как хотелось бы
разработчикам. Большинство людей тратят намного меньше времени на
просмотр Web-страниц, чем хотелось бы.
Создавая сайты, мы думаем, что пользователи будут скрупулезно
проходить по каждой странице, внимательно прочитывать все тексты,
разбираться в структуре сайта и тщательно взвешивать все плюсы и минусы
перед тем, как щелкнуть мышью по той или иной ссылке. В
действительности, большую часть времени пользователь только пробегает
глазами по каждой странице, проскакивает по какому-то участку текста и
щелкает по первой ссылке, которая заинтересовала его или хотя бы
отдаленно напомнила то, что он ищет. Большая часть страницы обычно
остается просто незамеченной. Если вы хотите создавать эффективные Webстраницы, следует учитывать три факта, определяющие реальное
использование Интернета:
1. Мы не читаем Web-страницы, мы их просматриваем.
Люди стараются меньше тратить время на чтение страниц. Вместо
чтения мы бегло просматриваем текст, как бы сканируя его, ища слова и
выражения, которые привлекли бы ваше внимание.
2. Наш выбор не всегда оптимален, но мы довольствуемся тем,
что есть.
При разработке Web-страниц мы исходим из того, что пользователи
просмотрят всю страницу, оценят все возможные опции и выберут наиболее
подходящую. В действительности мы выбираем не оптимальный вариант, а
тот, который первым показался нам подходящим.
3. Мы не задумываемся над тем, как оно работает, мы просто
делаем «как получится».
Сталкиваясь с какой-то техникой, очень немногие находят время для
чтения руководств и инструкций. Очень часто люди используют «что-то»,
совершенно не имея представления, как оно работает. Подход такой – «как
получится» (для нас не важно, каким образом что-то работает).
6
IV. Построение сайта. Структурирование информации
1.Хронология создания Web-сайтов:
1.Концепция. На этом этапе необходимо выяснить:
 Предполагаемую аудиторию,
 Назначение узла,
 Насколько большим должен быть сайт.
2.Архитектура. Далее необходимо спроектировать карту сайта на
бумаге. На этом этапе создается эскиз узла и определяется технология,
необходимая для его работоспособности.
3.Дизайн. Именно этот этап самый интересный. Вырабатываются
визуальные и навигационные идеи.
4.Исполнение. Можно приступать к непосредственному воплощению
варианта дизайна. Графические элементы, HTML, программный код,
элементы мультимедиа и содержание объединяются вместе – и таким
образом создается окончательный вариант узла.
5.Проверка качества и тестирование. Когда узел готов, прежде чем
запустить его в Интернет, неплохо провести окончательную доводку:
тщательно отладить программный код, ссылки, правописание и т.п. Нужно
проследить, чтобы сайт работал в различных обозревателях.
2.Схема Web-сайта
Многие сразу приступают к созданию сайта, не продумав даже
наброска его схемы. Но затратив немного времени на создание схемы, можно
сберечь массу времени и усилий при его непосредственной реализации.
Webстраница
Шаблон А
Шаблон В
Шаблон С
7
Сетевая база
данных
База данных и несколько шаблонов позволяют создать в краткие сроки
сотни страниц.
1)Построение структуры
1.
2.
3.
4.
Структуру можно построить следующим образом.
Составьте список содержимого сайта. Это делается на стадии
формирования концепции.
Сгруппируйте элементы списка. Разбейте содержимое списка на
логические группы.
Создайте категории. После разделения содержимого на группы
станет просматриваться некая схема. Отдельные группы будут
похожи, их следует объединить в категории. По возможности число
категорий должно быть минимальным.
Постройте структуру. Категории представляют собой первый
уровень, группы – второй, подгруппы – третий.
Примером может послужить содержание данного реферата:
I.Построение сайта________категория
1. Схема сайта___________группа
 Построение структуры
 Преобразование структуры в диаграмму _______содержимое
Структура, созданная на основе хорошо организованного списка
содержимого сайта.
Лучше иметь 5-7 основных категорий, в каждой из которых содержится
не более двух уровней подкатегорий.
2) Преобразование структуры в диаграмму
Структура – средство, необходимое для создания диаграммы Web-узла,
которая, в свою очередь, ляжет в основу его карты. Создать диаграмму
просто. Каждую страницу сайта нарисуйте в виде прямоугольника. В верхней
части поместите домашнюю страницу, под ней по горизонтали – основные
разделы сайта. Под каждом разделом нарисуйте прямоугольники,
соответствующие подразделам структуры. Построив диаграмму, можно
приступать к созданию схемы навигации. Можно разделить и содержимое
8
другой страницы. При добавлении такой детализации диаграмма увеличится
на один уровень.
Пример:
Домашня
я страница
Юзабилити
Построение
сайта
Визуальный
интерфейс
Навигация
Основной
принцип
юзабилити
Хронология
создания
Создание
страниц для
просмотра, а
не для чтения
Назначение
навигации
Использование
Интернета
Схема сайта
1. Построение
структуры
2.Диаграмма
Цвет,
шрифты и
графика
Постоянная
навигация
Текст для
Web
Начальная
страница
Диаграмма узла служит эскизом его карты
Созданная диаграмма – лишь основа карты узла. На следующем уровне
создания карты сайта необходимо добавить в диаграмму линии со стрелками,
обозначающие связи между страницами.
9
V. Визуальный интерфейс Web-страниц
1. Создание страниц для просмотра, а не для чтения
Чтобы добиться лучшего понимания сайта:
 Создайте ясную визуальную иерархию на каждой странице
 Используйте обычаи и условности
 Разбейте страницы на четко разделенные области
 Покажите ясно то, по чему можно щелкать мышью
 Уменьшите визуальный шум
1. Ясная визуальная иерархия
Нужно организовать внешний вид элементов страницы (визуальных
подсказок) таким образом, чтобы они ясно и четко подсказывали отношения
между этими элементами – какие элементы связаны между собой, какие
являются частями других.
 Чем более важный элемент, тем более он заметен на странице.
Очень важный элемент
Несколько менее важный
Наименее важный
При создании Web-страницы разделите ее на три части: большую – для
самой важной информации, среднюю – для менее значимой информации, и
малую – для наименее важной информации. Это стратегия «большой, малый,
средний». Она не позволяет находиться на странице двум элементам с
одинаковым приоритетом и таким образом облегчает ее чтение и
перемещение по сайту.
 Элементы, логически связанные между собой, должны быть
связаны и визуально.
Например, вы можете показать, что какие-то элементы равнозначны,
сгруппировав их под одним заголовком, либо применив к ним одинаковый
стиль, либо поместив их в одну четко отделенную область страницы.
Книги
Музыка
Спорт
Путешествия
Увлечения
10
 Элементы представляются в виде вложений, если они являются
частями друг друга.
Например, название раздела «Книги по программированию» будет
находиться над заголовком какой-то конкретной книги по этой теме, включая
в себя все содержимое части страницы (эта книга является частью данного
раздела). Под заголовком этой книги, в свою очередь, будет включено ее
описание.
Мы каждый день сталкиваемся с визуальными иерархиями – будь это
на бумаге или в Интернете. Но обычно мы воспринимаем их так быстро, что
не успеваем это осознать, и начинаем смутно догадываться об их
существовании, только когда нам не удается провести их быстрый анализ,
т.е. когда их визуальные подсказки (или их отсутствие вынуждают нас
задумываться.
Хорошая визуальная иерархия всегда экономит наши усилия по
начальному восприятию страницы и помогает организовать и
систематизировать содержание таким образом, чтобы мы могли почти
мгновенно понять его в целом.
2. Используйте обычаи и условности
Каждая газета или журнал имеют свои условности. Например, фраза,
набранная очень крупным шрифтом, - это обычно заголовок, который
обобщает содержание находящейся под ним статьи. Текст под фотографией –
это подпись, в которой дается описание или комментарий к ней, а если этот
текст набран очень мелким шрифтом, то это имя фотографа. В Интернете
также используются условности, большинство из которых были взяты из
газет и журналов.
 Они очень полезны
Как правило, условности становятся общепринятыми, только если они
работают. Когда они правильно и к месту применяются, то помогают
пользователям легко переходить от одного сайта к другому, не задумываясь о
том, как все работает.
 Дизайнеры зачастую с неохотой применяют условности
Вместо того, чтобы использовать их, они часто стремятся выдумать
колесо заново. Если вы не хотите использовать некую общепринятую Webусловность, то убедитесь сначала, что то, чем вы собираетесь ее заменить,
либо является достаточно ясным, понятным и не требующим усилий для
изучения, либо настолько полезным, что это компенсирует необходимость
некоторого усилия. Не игнорируйте обычаи и условности.
2. Разбейте страницы на четко разделенные области
Разделение страницы на области важно потому, что это позволяет
пользователям быстро понять, какие области их интересуют больше, а какие
они могут пропустить. Кроме того, нужно четко разделить области
навигации и содержание страницы.
11
3. Покажите ясно, по чему можно щелкать мышью
Большая часть времени у пользователей Интернета уходит на поиски
тех мест, по которым можно щелкнуть, поэтому очень важно ясно показать,
по чему именно можно щелкнуть мышью, а по чему нельзя. Кнопка должна
выглядеть, как кнопка, желательно, чтобы здесь же располагалась небольшая
треугольная стрелка, известная как условный указатель «Нажать здесь».
Кнопки надо сделать узнаваемыми. Этого можно достичь, используя
следующие методы:
 Элемент навигации должен выглядеть, как привычный предмет
(например, как закладки в блокноте)
 Элементы должны выделяться на странице (например, объемным
видом)
 Сгруппируйте подобные элементы в один графический блок.
Группировка подразумевает две функции:
1. Группировка подразумевает интерактивность. Сочетание
нескольких текстовых или графических элементов создает
впечатление единого целого и привлекает внимание.
2. Группировка элементов подразумевает подобные функции.
Внешне подобные элементы должны выполнять подобные
функции. Например, все основные кнопки навигации на
странице должны быть похожими и находиться в одной части
экрана. Если на странице есть дополнительные ссылки, их
также можно сделать подобными, но разместить в другой
части экрана.
Дизайнер должен сразу же выделить интерактивные элементы, сделать
их отличными от обычных графических элементов. Пусть они бросаются в
глаза, привлекают внимание. Для этого можно использовать следующие
приемы: наложение теней, размывание краев, придание объектам
выпуклости. Но необходимо убедиться, что оформление обычных
графических элементов не введет пользователя в заблуждение.
Непоследовательность в использовании эффектов собьет пользователя с
толку. Всего лишь наложите тени на обычное графическое изображение – и
пользователь будет в замешательстве. Подумав, что это кнопка, пользователь
попытается щелкнуть по картинке. А после неудачи будет игнорировать
настоящие кнопки на странице.
4. Уменьшите визуальный шум
Визуальный шум является одним из основных препятствий для
получения легко воспринимаемых Web-страниц. Можно выделить два типа
визуального шума:
 Перегруженность
Если на странице находится огромное количество всевозможных
призывов, приглашений, бесчисленное количество восклицательных знаков и
яркоцветных выделений, то все это вызывает эффект давления.
12
 Фоновый шум
Нет основного главного элемента, отвлекающего внимание, а есть
множество элементов визуального шума, которые в совокупности вызывают
ощутимое раздражение.
2.Цветовая палитра, шрифты и графика
Цвет, шрифт и графические элементы – основные детали Webдизайна. Если переусердствовать с одним из них, сайт будет выглядеть
неаккуратно. Ниже приведены основные правила эффективного
использования цветовой гаммы, шрифтов и графики:
1. Выбирайте цвета в соответствии с назначением Web-сайта. Если,
например, сайт предназначен для продажи высокоэффективной
домашней техники, лучше использовать пастельные, классические
тона, а не ярко-розовые и ядовито-зеленые.
2. Ограничьте палитру цветов. Используйте ограниченное число
сочетающихся друг с другом цветов по двум причинам:
 Ограниченная палитра цветов обедняет графику, вследствие чего
ускоряет передачу графических элементов по Интернет. Чем
меньше используемых цветов, тем меньше размер файла.
 Ограниченная палитра смотрится лучше, чем вся радуга.
Создайте палитру не больше, чем из семи цветов и
последовательно используйте ее для всех страниц сайта.
3. Для выделения элементов страницы используйте различные
шрифты. С помощью выбранного шрифта сайт может передавать
радость, досаду, профессионализм и др. Как и цветовая схема,
соответствующие шрифты определяют дизайн сайта.
Шрифты с засечками – маленькими черточками по краям букв –
создают впечатление стабильности, безопасности, профессионализма и
долговечности – лучший выбор для серьезного Web-узла. Такие шрифты
также хороши для больших фрагментов текста.
Шрифты без засечек создают впечатление передового мышления,
чистоты и стремительности – прекрасный выбор для сайта по продаже
новейшего оборудования. Эти шрифты подходят для заголовков и небольших
фрагментов текста.
4. Используйте шрифты умело. В пределах сайта не обязательно
пользоваться шрифтами только одного типа. Лучше всего использовать
несколько шрифтов в зависимости от назначения: один – для заголовка,
другой – для подзаголовков, и еще один – для основного текста. Но
применять
больше
трех-четырех
шрифтов
нецелесообразно.
Определите стиль для каждого из описанных выше элементов, и
последовательно используйте его для всех страниц узла. Например, для
заголовка страницы выбирайте всегда один и тот же шрифт одного и
того же размера. Например, книга выйдет удачной, если для заголовков
13
использовать шрифт без засечек, а для основного текста – шрифт с
засечками.
5. Эффективно используйте графические элементы. К графическим
элементам относятся и залитые одним цветом области, и линии, и
фотографии, и рисунки. В полиграфическом дизайне этими элементами
можно пользоваться достаточно свободно, но в Web-дизайне большие
фотографии и сложные рисунки, занимающие весь экран, выглядят
неуклюже. Кроме того, большие фотографии хранятся в больших
файлах, а значит будут долго загружаться. При разработке Webстраниц старайтесь использовать небольшие графические элементы.
6. Разбивайте страницу на части с помощью графических элементов.
HTML-средства и графические элементы – прекрасный способ
разделить страницу на части и привлечь внимание пользователя к
отдельным ее деталям.
3. Текст для Web
1)Опустите лишние слова
Избавьтесь от половины слов на каждой странице, затем уберите
еще половину из того, что осталось.
Удаление всех тех слов, которые все равно никто не будет читать,
имеет несколько полезных следствий:
1. Это снижает уровень шума на страницах
2. Это выделяет то содержание страниц, которое действительно
является ценным и полезным
3. Это позволяет укоротить страницы так, чтобы пользователи
могли видеть каждую из них одним взглядом, не прокручивая
экран
Есть два особых вида текстов: «общая болтология» и «инструкции».
Никакой «общей болтологии»
Мы сразу же узнаем «общую болтологию», как только видим ее, - это
вступительные статьи, служащие для того, чтобы приветствовать нас на
сайте и рассказать нам о том, какой он замечательный, или же сообщить нам
о содержании раздела, в который мы вошли.
«Общая болтология» - это своего рода самовосхвалительные речи. Она
не содержит полезной информации и главным образом сосредоточена на
написании того, как (а не почему) «у нас все прекрасно».
«Общая болтология» напоминает простой светский разговор – так же
бессодержательна и существует только ради разговора самого по себе. Но у
большинства Web-пользователей нет времени на такие разговоры: они хотят
сразу приступить к сути. Поэтому следует устранить как можно больше
«общей болтологии».
14
Никаких «инструкций»
Главное, что следует знать об «инструкциях», это то, что их никто не
собирается читать, по крайней мере до тех пор, пока несколько попыток
использовать сайт «как получится», в конце концов, не увенчаются успехом.
Но даже тогда, если инструкции слишком длинные, то редкие пользователи
начинают искать в них нужную информацию.
Вашей целью должно стать стремление всегда полностью устранять
«инструкции», делая все достаточно ясным без лишних объяснений. Если
«инструкции» все же действительно необходимы, то сократите их до
минимума.
2)Выбор размера шрифта
Избегайте использовать шрифты размером менее 12 пунктов.
Некоторые шрифты хорошо работают и при размере в 10 пунктов, но их
немного. С другой стороны, буквы не должны быть слишком большими,
чтобы Web-страница не смотрелась как таблица для проверки зрения. Всегда
используйте четный размер шрифта. Шрифты этих размеров великолепно
смотрятся на экране. При использовании нечетных размеров компьютер
будет их масштабировать, что непременно отразится на качестве.
3)Текст на фоновом рисунке
Для улучшения внешнего вида Web-страниц многие дизайнеры
используют повторяющийся фоновый рисунок. Элементы дизайна
располагаются поверх такого рисунка. Создайте графический объект любого
размера и заполните этим шаблоном все пространство Web-страницы. При
использовании фоновых рисунков возникает проблема перегрузки фона
цветами, что влияет на читаемость текста. Прежде чем использовать
фоновый рисунок, его необходимо как следует подготовить.
Ниже приведено несколько советов относительно фоновых рисунков.
1. Создайте фоновый рисунок, превосходящий Web-страницу по
размеру. Многие рассматривают фоновый рисунок как нечто
небольшое, размером примерно 1/1 дюйм, которым как плиткой,
выкладывается все пространство страницы. Это совершенно не
обязательно! При желании можно создать фоновый рисунок,
превышающий по размеру Web-страницу, который будет выходить за
пределы окна обозревателя и не будет повторяться по мере
пролистывания. Создав такой фон, можно разгрузить Web-страницу.
2. Создайте фоновый рисунок в виде полосы, превосходящей по длине
ширину Web-страницу. При этом шаблон повторяется рядами по всей
странице, но пользователь визуально не может этого определить до
пролистывания. Эффект, создаваемый такой техникой, в точности
совпадает с эффектом при создании фона целой страницы: можно
управлять размещением загруженных и незагруженных областей, не
15
пересекающихся с текстом. При использовании сложного фона
упростите другие элементы дизайна (воздержитесь от фотографий) и
применяйте как можно меньше цветов, тогда размер файла будет
небольшим.
3. Чтобы фон быстро загружался, используйте как можно меньше
цветов. Чем меньше используется цветов, тем меньше размер файла
(не выходите за пределы 15 Кбайт).
4. При использовании мелких рисунков позаботьтесь, чтобы
составленный из них фоновый рисунок был ненавязчивым. Если фон
состоит из повторяющихся мелких элементов, удостоверьтесь, что
используемые в них цвета не совпадают с цветом текста и другой
помещенной на страницу графики. Сначала создайте рисунок фона,
используя по возможности пастельные тона, а затем подберите цвет
шрифта, хорошо контрастирующий с фоном.
4)Графический и HTML-генерируемый текст
Обычно Web-страницы содержат тексты этих двух типов. HTMLгенерируемый текст считается живым, поскольку его можно редактировать в
обычном текстовом редакторе, применяя различные гарнитуры шрифтов.
Кроме того, этот текст легко обновлять. Чтобы изменить графический текст,
придется переделывать графический объект. Графический текст имеет
больший размер файла, чем его HTML-эквивалент, а стало быть, будет
дольше загружаться.
Поэтому на Web-узле лучше использовать в основном не графический,
а HTML-генерируемый текст, который значительно эффективнее. Возникает
вопрос: а зачем вообще использовать графический текст? Применение
текстов двух этих типов позволяют достичь гибкости дизайна. Поскольку
графический текст – изображение, возможности применения в нем шрифтов,
рисунков, текстуры, безграничны.
При использовании HTML-генерируемого текста выбор шрифта
ограничен, поскольку можно использовать только те шрифты, которые
гарантированно будут доступны в системе конечного пользователя. Для
заголовка лучше использовать шрифт Arial, а для основного текста – Verdana.
16
VI. Навигация
Люди не будут пользоваться вашим сайтом, если им не будет
понятно, как по нему перемещаться.
Если вы попадаете на сайт, на котором вы не можете найти то, что
ищете, или структура которого вам непонятна, то вы не станете пользоваться
им долго и, скорее всего, больше на него не зайдете. Каким же образом
можно создать «ясную, простую и последовательную» навигацию?
1.Назначения навигации:
1. Помочь пользователю найти то, что он ищет
2. Указать текущее местоположение. В Интернете это осуществляется
с помощью выделения текущей позиции во всех навигационных меню,
линейках и списках, используемых на странице (другими словами,
текущие ссылки должны быть выделены). Можно применять сразу
несколько способов выделения текущей позиции – например, изменить
цвет шрифта и применить жирное начертание. Можно использовать
цветовое обозначение разделов. Для каждого раздела применяется свой
цвет фона и кнопок, который будет напоминать пользователю о том,
где он сейчас находится (используется для больших сайтов, которые
содержат множество разделов с огромным количеством страниц в них).
3. Навигация дает почву для ног. Заблудиться где-либо – это, как
правило, не очень весело. Если навигация разработана правильно, то
она дает почву для ног пользователя, а также служит в качестве перил,
на которые можно опереться. Используйте «хлебные крошки». Это
набор
текстовых
ссылок,
отражающих
последовательность
перемещения пользователя от домашней страницы к другим страницам
Web-узла.
4. Навигация помогает понять, что здесь находится. Будучи
визуальным образом иерархии, навигация позволяет разобраться в
содержании сайта. Другими словами, навигация помогает обнаружить
содержание. И эта функция навигации даже более важна, чем функция
направления или определения местонахождения.
5. Навигация позволяет понять, как пользоваться сайтом. Если
навигация разработана правильно, то она самым явным образом
показывает пользователю, откуда следует начинать и какие он имеет
возможности. Хорошая навигация должна заменить собой все
«инструкции» вместе взятые (тем более, что большинство
пользователей все равно проигнорирует эти «инструкции»).
6. От навигации зависит степень доверия пользователей к
разработчикам сайта. Когда мы находимся на каком-то сайте, мы
постоянно про себя оцениваем работу дизайнеров. И наша оценка
17
является основным фактором, определяющим наше отношение к сайту.
От нее зависит, придем ли мы на этот сайт еще раз или нет.
2.Условности, применяемые для навигации:
Условности в той или иной степени определяют внешний вид и
расположение навигационных элементов так, чтобы нам было легко при
необходимости их находить и использовать.
Размещение этих элементов в стандартных местах позволяет быстро и
без усилий определять их положение, а их унифицированный вид дает
возможность быстро их различать на странице.
Например, мы привыкли видеть дорожные знаки на углах улиц, мы
знаем, что для того, чтобы их увидеть, нужно смотреть вверх, а не вниз, и мы
привыкли к тому, что они устанавливаются как обычно – горизонтально, а не
вертикально. Мы также принимаем как должное, что вывеска здания обычно
помещается над или рядом с главным входом в него. В журналах обычно гдето на первых страницах помещается содержание номера, а где-то на краю
каждой страницы указывается ее номер. Когда такие условности
нарушаются, это раздражает.
В Интернете тоже быстро появились свои условности для навигации.
Web-дизайнеры используют термин постоянная навигация для описания
навигационных элементов, которые появляются на каждой странице. Факт
того, что навигация появляется в одном и том же месте на каждой странице и
имеет при этом одинаковый вид, служит для пользователя мгновенным
подтверждением того, что он находится на том же сайте. А унификация
внешнего вида навигации дает возможность пользователю только один раз
узнать, как она работает, и затем уже использовать ее не задумываясь.
3.Постоянная навигация
Должна включать в себя следующие элементы:
Название сайта
 Ссылку на начальную страницу
 Ссылку на страницу поиска
 Сервис, поиск (для Интернет-магазинов)
 Разделы
1.Название сайта
Выполняет для сайта ту же роль, что и вывеска на входе в какое-либо
учреждение. В Интернете эту «вывеску» нужно видеть на каждой странице.
Логотип сайта находится в верхней части страницы, обычно в верхнем
правом углу. Это объясняется тем, что логотип представляет весь сайт в
целом, и, следовательно, он занимает самую верхнюю позицию в логической
иерархии сайта.
 Данный сайт
18
1. Разделы сайта
 Подразделы сайта
1. Субподразделы сайта
 Данная страница
1. Области страницы
 Элементы страницы
В визуальной иерархии каждой страницы можно сохранить эту
доминирующую позицию двумя способами: либо сделать логотип самым
заметным объектом на странице, либо поместить его так, чтобы он выполнял
роль «рамки» для содержания страницы. Конечно, нет смысла делать логотип
самым заметным элементом страницы (исключение может составлять только
начальная страница сайта). Поэтому лучшее место для него – это верхняя
часть страницы.
Кроме того, логотип должен выглядеть как логотип, т.е. иметь все
полагающиеся атрибуты: особый стиль шрифта и графики, узнаваемый при
любом размере изображения.
2.Ссылка на начальную страницу
Расположенная на видном месте, кнопка начальной страницы дает
пользователю уверенность, что даже заблудившись в недрах сайта, с ее
помощью он всегда сможет начать все сначала.
3.Ссылка на страницу поиска
Имеет смысл помещать само окно поиска или соответствующую ему
ссылку на каждой странице сайта. Если на вашем сайте действительно есть
что искать, то поместите на нем поисковое окно. Формула окна поиска
действительно проста: окно поиска, кнопка и слово «Поиск».
4.Разделы
Панель разделов иногда называют основной навигацией. Она содержит
ссылки на основные разделы сайта, представляющие верхний уровень
иерархии сайта. Всегда избегайте ставить одну текстовую ссылку с
подчеркиванием над другой – их тогда очень трудно прочитать.
Пример:
В большинстве случаев, постоянная навигация содержит и вторичную
навигацию, т.е. список подразделов текущего раздела.
5.Сервисы
Сервисами называются ссылки на довольно важные компоненты сайта,
не принадлежащие к иерархии смыслового содержания. Сюда входят либо
разделы, помогающие пользоваться сайтом, например «Помощь», «Карта
сайта», «Корзина», либо разделы, которые содержат информацию о создателе
19
сайта, например «О нас», «Как с нами связаться». Список сервисов должен
быть менее заметен, чем список разделов сайта.
4. Названия страниц
Названия Web-страниц можно сравнить с дорожными указателями:
когда все идет нормально, их можно совсем не замечать. Но если у вас
возникает ощущение, что вы двигаетесь не в том направлении, то нужно
посмотреть на название страницы, чтобы определить собственное
местонахождение.
Что нужно знать относительно названий страниц:
1. Каждая страница должна иметь название. Недостаточно всего
лишь выделить название страницы в навигации.
2. Название страницы должно находиться в правильном месте.
Название страницы должно занимать в ее визуальной иерархии такое
место, чтобы оно «обрамляло» расположенное на ней содержание.
3. Название страницы должно быть заметным. Позиция, размер, цвет
и шрифт названия должны ясно показывать, что это заглавие для всей
страницы в целом. Текст названия страницы будет иметь самый
большой размер.
4. Название страницы должно соответствовать названию ссылки, по
которой щелкнул. Если этого соответствия нет, то доверие к сайту, а
значит, к его издателям снижается. Конечно, в некоторых случаях
придется искать компромиссный вариант, так как пространство
страницы ограничено. Если слова, по которым вы щелкнули мышью,
по каким-то причинам не соответствует точно названию страницы, то
важно добиться того, чтобы, во-первых, они соответствовали друг
другу в максимально возможной степени и, во-вторых, чтобы при этом
причина несоответствия была ясна для пользователя.
В большинстве случаев левое или правое выравнивание более эффективно
для передачи визуальной иерархии, чем центральное выравнивание.
4.Вкладки
Один из наиболее популярных способов использования постоянной
навигации – представление ссылок на разделы в виде вкладок.
Вкладки являются превосходным навигационным устройством для
больших сайтов, потому что:
1. Вкладки «самоочевидны». Никто, взглянув на интерфейс со вкладками
не воскликнет: «Гм, интересно, а что это такое?»
2. Вкладки трудно не заметить. Они визуально очень выделяются, их
трудно просмотреть. Кроме того, их трудно принять за что-либо еще
20
кроме навигации, поэтому они создают заметное с одного взгляда
разделение.
3. Вкладки приятны для глаз. Web-дизайнеры всегда стремятся сделать
свои страницы визуально более привлекательными, но не в ущерб
скорости загрузки страниц. Грамотно разработанные вкладки делают
страницы красивее и интереснее и при этом не увеличивают общий
объем страниц.
4. Вкладки создают эффект физического пространства. Они создают
ощущение физического продвижения вперед. Вкладки вызывают
сильное ощущение того, что сайт состоит из разделов и вы находитесь
внутри одного из них.
1.
2.
3.
4.
Основные требования к вкладкам:
Вкладки должны быть четко прорисованы. Для того, чтобы вкладки
хорошо работали и создавали нужный эффект, их графика должна
создавать визуальную иллюзию того, что активная вкладка находится
впереди других вкладок. Именно это свойство вызывает ощущение
того, что это вкладка. Но никогда не придавайте графическим
элементам вид вкладок, если не планируется, чтобы они действовали
как вкладки. Активная вкладка должна иметь другой цвет или
контрастный оттенок. Она должна быть визуально связана с
пространством под ней.
Вкладки должны быстро загружаться.
Вкладки должны выделяться цветом. Назначать особый цвет
каждому разделу – это хорошая идея, но она не всегда работает
(например, если человек не различает цветов). Цветовое обозначение
полезно как дополнительное средство, на которое никогда не следует
полагаться полностью, считая единственным способом выделения.
Одна из вкладок должна быть выбрана. Если ни одна из вкладок не
оказывается уже выбранной, когда я захожу на сайт, то нужное
воздействие вкладок теряется в первые же секунды.
5. Пиктограммы
Многие дизайнеры вместо создания однообразных кнопок с текстом,
украшают свои страницы с помощью пиктограмм – небольших картинок,
которые служат ссылками на какой-либо раздел узла. Но при их
использовании возникает проблема: очень часто разные пользователи
совершенно по-разному интерпретируют смысл изображения. Придумать
оригинальные и понятные всем пиктограммы для обозначения разделов узла
– достаточно сложное дело. Поэтому пиктограммы нужно обязательно
снабжать подписями.
21
VII. Начальная страница
Начальная (или домашняя) страница определяет направление дизайна
всех страниц Web-сайта. Выбор макета каждой страницы, за исключением
домашней, ограничен, поскольку он должен согласовываться с
единообразным макетом страниц сайта.
1.Содержание первой страницы
1. Цель и назначение сайта. Начальная страница должна
исчерпывающим образом объяснить, что это за сайт и для чего он
создан. Желательно также, чтобы пользователю были даны
объяснения, почему ему следует быть именно здесь, на этом сайте, а не
на другом.
2. Иерархия сайта. Начальная страница должна давать обзор того, что на
сайте предлагается в плане содержания (что я могу найти здесь?) и
возможностей (что я могу делать здесь?), а также показывать, как все
это на сайте организовано. Обычно эти функции выполняет постоянная
навигация.
Для Интернет-магазинов:
3. Поиск. Начальная страница должна содержать хорошо различимое
окно поиска.
4. Анонсы содержания сайта. Так же как и обложка журнала, начальная
страница должна увлечь пользователя намеками на «очень интересное»
содержание сайта.
5. Обзор содержания. Рассказывает о новейших, лучших и самых
популярных элементах содержания (последние статьи или выгодные
предложения).
6. Обзор сервисов. Предлагает пользователю посетить дополнительные
разделы сайта и воспользоваться какими-нибудь услугами.
7. Периодически обновляемое содержание. Если успех сайта зависит от
количества повторных посещений пользователей, то лучше сделать так,
чтобы часть содержания на начальной странице периодически
обновлялась.
8. Реклама. Пространство начальной страницы резервируется также и для
всевозможной рекламы.
9. Ярлыки. Элементы содержания сайта, которые наиболее часто
запрашиваются посетителями заслуживают того, чтобы на начальной
странице находились ссылки для быстрого перехода к ним.
10. Регистрация. Если на сайте используется регистрация, то на
начальной странице должны размещаться специальные ссылки для
новых посетителей и для тех, кто уже зарегистрировался.
22
2.Цели начальной страницы:
1. Показывать пользователю то, что он ищет. Начальная страница
должна ясно показывать, как получить то, что мне нужно, - при
условии, что это вообще находится на сайте.
2. Показывать пользователю то, что он… не ищет. В то же время
начальная страница должна сообщать мне о том, что на данном сайте
есть некоторые другие вещи, которые также могут меня
заинтересовать, несмотря на то, что в данный момент я их не ищу.
3. Показывать пользователю место, откуда можно начинать. Нет
ничего хуже, чем натолкнуться на начальную страницу, на которой
невозможно понять, где начало.
4. Вызывать доверие к сайту. В некоторых случаях начальная страница
может оказаться единственным шансом произвести на посетителя
сайта благоприятное впечатление.
Если сайт большой и сложный, то даже самая совершенная начальная
страница не сможет выполнить всего, что для нее назначают. Главное, что ни
в коем случае нельзя забывать, - это основная идея сайта. Начальная
страница должна ясно показывать, чем является этот сайт.
Начальная страница должна как можно быстрее отвечать на
следующие вопросы:
 Чем является этот сайт?
 Что в нем содержится?
 Что на нем можно делать?
 Откуда можно начать?
 Почему я должна(ен) быть именно на этом сайте, а не на другом?
Начальная страница должна быть такой, чтобы пользователь смог
ответить на эти вопросы с одного взгляда правильно, однозначно и не
прилагая для этого особых усилий.
Когда вы занимаетесь разработкой сайта, вам все настолько ясно, что
вы просто забываете подумать, будет ли это очевидно для всех.
3.Как передать основную идею?
Все, что находится на начальной странице, может служить для
объяснения того, о чем этот сайт. Тем не менее есть две важные области
страницы, где мы ожидаем увидеть ясное изложение основной идеи сайта:
1. Слоган. Это емкая фраза, которая характеризует весь сайт в целом и
кратко объясняет суть и преимущества того, что предлагается. Слоганы
давно используются в рекламном, издательском и развлекательном
бизнесе. Слоган обычно помещается
в пространстве, которое
23
находится сразу рядом с логотипом сайта. Когда мы видим текст,
визуально примыкающий к логотипу, то мы знаем, что это слоган
сайта, который мы воспринимаем как описание всего сайта.
Свойства хороших солганов:
 Они информативны и по содержанию имеют ясную визуальную
форму.
 Они имеют достаточную длину. Шесть-восемь слов уже вполне
достаточно для слогана, чтобы он мог передать всю мысль и не
быть утомительным.
 Они сообщают об особенностях и преимуществах.
 Они привлекательны и имеют живое и иногда остроумное
звучание. Однако все эти качества хороши при условии, что они
помогают ясно передать сообщение о выгодном предложении.
Свойства плохих слоганов:
 Они неразборчивы
 Они имеют слишком общий смысл.
Слоганы отличаются от девизов («Мы заботимся о вас», «Вы в
хороших руках», «Мы делаем жизнь легче»). Девиз выражает какой-либо
принцип, или цель, или идеал. Тогда как слоган сообщает о ценном
предложении.
На некоторых сайтах можно обойтись вообще без слогана. Это сайты,
которые достигли статуса обиходных и повседневных, и те, названия
которых хорошо известны.
2. Текст приветствия. Здесь должно содержаться краткое описание
сайта, оформленного в виде заметного блока и размещенное на видном
месте (без прокручивания экрана).
Но не используйте описание назначение сайта в качестве
приветственного текста.
Речь идет не о том, что эти два элемента будут обязательно
рассматривать, их могут и не заметить на странице. Большинство
пользователей сначала попытаются догадаться, о чем тот или иной сайт, из
беглого обзора начальной страницы. Если же они не смогут в этом
разобраться, лучше, чтобы на странице было место, где они могли бы об этом
узнать.
4.Навигация начальной страницы
Навигация начальной страницы может быть другой. Но различия не
могут быть слишком большими. Учитывая особое назначение начальной
страницы, иногда имеет смысл не использовать на ней постоянную
навигацию.
Навигация на начальной странице имеет следующие отличия:
24
1. Описания разделов. Поскольку назначение начальной состоит в том,
чтобы раскрыть наиболее полно то, что находится за ней, то, возможно,
понадобится добавить к названиям разделов краткие описания, для
которых недостаточно места на каждой странице.
2. Другая ориентация. Очень часто для начальной страницы требуется
другой вид дизайна, отличающийся от дизайна остальных страниц.
Поэтому вместо вертикальной компоновки навигации может
понадобиться горизонтальная или наоборот.
3. Больше места для отличительных знаков. На начальной странице
логотип сайта обычно крупнее, чем на других. Кроме того, обычно на
начальной странице рядом с логотипом нужно отвести место для
слогана, который на других страницах может не использоваться.
Но важно, чтобы различия в навигации делались только по
необходимости. Постоянная навигация и навигация на начальной странице
должны быть довольно схожи, чтобы пользователи могли сразу видеть, что
это всего лишь варианты одного и того же. Самое важное – это соблюсти
точное соответствие в названиях разделов: порядок и формулировки должны
быть одинаковыми. Постарайтесь также сохранить одинаковыми как можно
больше визуальных особенностей: цвет и тип шрифта, использование
строчных и прописных букв.
5.Всплывающие элементы
Площадь начальной страницы очень ценна, поэтому разработчики
стараются использовать все возможности, чтобы расширить эту площадь.
Один из известных способов – это использование всплывающих элементов,
которые содержат пояснительный текст, «всплывающий» в момент, когда вы
наводите курсор на название раздела. Они позволяют дать дополнительную
информацию о содержании раздела, не загромождая основное пространство
страницы.
Недостатки всплывающих элементов:
 Необходимость поиска. Вы не можете увидеть такое описание, если
будете просто смотреть на страницу. Для того, чтобы оно появилось,
вам нужно приложить усилие и навести курсор на нужное место.
 Вы не можете видеть несколько элементов одновременно. Раз вы не
можете видеть сразу все описания, то у вас нет возможности
просматривать их и сравнивать.
 Неустойчивость восприятия. Трудно читать текст, который
появляется и потом быстро исчезает. Поэтому такие описания должны
быть максимально короткими.
 Всплывающие элементы неэффективны, если появляются далеко от
того места, куда вы навели курсор. В идеале эти элементы должны
появляться непосредственно рядом с кнопкой, на которую вы указали.
25
Иначе приходится постоянно переводить взгляд с того места, куда вы
указали, на то, где находится текст подсказки.
Однако все эти недостатки не относятся к наиболее распространенному
варианту использования всплывающих элементов – выделению кнопок, при
наведении на них курсора. Всплывающие элементы, которые применяются
для визуализации отклика на наведение курсора, могут очень оживить
страницу и, кроме того, позволяют сэкономить пространство страницы за
счет уменьшения размеров кнопок.
6.Выпадающие меню
Другой способ расширения начальной страницы – это использование
выпадающих меню.
Недостатки выпадающих меню:
 Необходимость полного просмотра. Для того, чтобы увидеть список
меню, вам нужно сначала по нему щелкнуть мышью. Таким образом,
вы не можете увидеть элементы списка, если будете просто
просматривать страницу. Естественно, это затрудняет показ
информации о содержании сайта.
 Затрудненность просмотра. Разработчики страницы не могут
регулировать шрифт, пробелы и другие параметры форматирования
списка меню в том случае, когда нужно сделать его более удобным для
чтения. Отсутствует хорошая возможность разделения списка на
подгруппы.
 Неустойчивость восприятия. Как и всплывающие элементы, списки
быстро появляются и исчезают, что также затрудняет их чтение.
Всплывающие меню больше подходят для алфавитных списков
известных названий (стран, областей, товаров), так как их чтение не требует
дополнительного размышления.
Списки менее удобны в тех случаях, когда я ищу что-то, название чего
мне неизвестно, особенно когда список не алфавитный или просто он
настолько длинный, что его нужно прокручивать. К сожалению,
разработчики, стремясь сэкономить место на странице, обычно делают
списки длинными.
В большинстве случаев недостатки таких меню перевешивают их
достоинства.
26
VIII. Заключение
Правильно созданный Web-сайт позволяет пользователю без проблем
путешествовать по его страницам, быстро находить нужную информацию и
при этом использовать минимальное количество времени. Все это в
совокупности вызывает доверие у пользователя, он обязательно запомнит
ваш сайт и захочет посетить его снова. Поэтому создание сайтов согласно
советам, использованным в этом реферате – это путь к успеху в сфере Webдизайна, которая сейчас очень активно развивается.
27
Список литературы:
1. Стив Круг «Web-дизайн» .
2. Лайза Лопак «Web-дизайн для чайников». «Диалектика», Москва, СанктПетербург, Киев, 2003г.
3. Дмитрий Кирсанов «Web-дизайн».
28