прОект 2. веб-дизайн и планирОвание

Проект 2. Веб-дизайн
и планирование
Продолжительность 12–18 часов
Обзор проекта
В этом проекте учащиеся, разделенные на команды, участвуют в создании клиентского вебсайта. У каждой команды свой клиент, в зависимости от доступных ресурсов. Преподаватель
может играть роль клиента — гипотетической организации. Клиент выбирает тему и оговаривает, что будет включено в контент будущего сайта. Каждая команда учащихся по-своему
интерпретирует потребности клиента и отражает их в дизайне навигационного меню, впечатлениях и ощущениях, а также в потоке контента. Учащиеся создают проектную документацию, облегчающую им взаимодействие с клиентом.
Наибольшее внимание в данном проекте уделяется работе в команде и созданию дизайна на
заказ. Основное ударение делается на коллективной разработке дизайна для создания вебсайта, на взаимодействии команды и клиента для получения отзывов и внесения изменений
на протяжении всего периода разработки сайта, а также на взаимодействии команды и клиента
с помощью проектной документации и оценке веб-сайтов при подготовке к созданию дизайна.
В проекте 3 команды учащихся создадут и запустят клиентский веб-сайт, завершив все фазы
процесса разработки веб-сайта.
Результат проекта: План разработки проекта и проектная документация; прототип вебсайта, раскадровка, каркасы и композиции дизайна.
Примечание. Некоторые разделы данного проекта приведены в соответствии с программой экзамена «Сетевые коммуникации с использованием Adobe Dreamweaver CS6» Adobe Certified Associate.
После этапов проекта и технического руководства приведены цели данного экзамена.
Цели проекта
По завершении проекта, учащиеся разовьют следующие навыки:
Навыки управления проектом
xx Составление плана проекта
xx Разработка документа с дизайнерским решением
xx Анализ вариантов с последующим выбором наилучшего
xx Обработка контента на основе анализа и размышлений
Цифровой дизайн: основы веб-дизайна 205
xx Управление и организация работы над выполнением множественных задач связанных с
дизайном, в сравнении с разработкой сайта
xx Понимание ролей и обязанностей
xx Обсуждение выходных данных
Навыки дизайна
xx Передача идей и информации с помощью простых каркасов
xx Предоставление нескольких дизайнерских идей
xx Обработка информации, полученной при рецензировании дизайна
xx Создание каркасов
xx Создание композиций дизайна
xx Создание раскадровок
xx Создание прототипов
xx Применение принципов дизайна
xx Применение информационной архитектуры
xx Дизайн с учетом юзабилити и доступности
xx Дизайн согласованных веб-страниц
xx Понимание и применение аспектов дизайна, таких, как теория цвета, макет, контраст и
композиция
xx Дизайн для определенной аудитории и с определенной целью
xx Планирование графики и многофункционального интерактивного контента в зависимости от потребностей и аудитории
xx Дизайн в соответствии с требованиями клиента
Исследовательские и коммуникативные навыки
xx Оценка и анализ достоверности контента
xx Редактирование контента веб-сайта
xx Оценка и анализ навигации веб-сайта
xx Понимание и практика правового использования изображений
xx Знакомство с инструментами для создания анимации и интерактивного контента
xx Критика дизайна
xx Способность излагать цель и задачи работы
xx Способность сообщать и представлять дизайнерские решения
xx Предоставление отзывов по проекту
xx Умение задавать наводящие вопросы для уточнения и разъяснения задачи
xx Способность воспринимать и интерпретировать отзывы
xx Умение понимать и решать проблемы клиентского дизайна
Технические навыки
Программа Adobe Dreamweaver
xx Понимание проблемы доступности
206 Проект 2. Веб-дизайн и планирование
Программа Adobe Fireworks
xx Знакомство с рабочим пространством программы Fireworks
xx Создание каркасов
xx Создание композиций дизайна
xx Создание прототипа
xx Экспорт прототипа в программу Dreamweaver
Программное обеспечение и материалы для выполнения проекта
xx
xx
xx
xx
xx
xx
xx
xx
xx
xx
xx
xx
xx
xx
xx
xx
xx
xx
xx
xx
xx
xx
xx
xx
xx
На всех компьютерах должна быть установлена программа Adobe Fireworks CS6
На всех компьютерах должна быть установлена программа Adobe Dreamweaver CS6
Раздел: «Дизайн с учетом юзабилити»
Презентация: «Веб-дизайн для различных устройств»
Раздел по программе Adobe Dreamweaver: «Обеспечение доступности веб-сайтов»
Бланк: «Юзабилити и доступность»
Презентация: «Этапы разработки веб-проекта»
Презентация: «Копирайтинг для Всемирной паутины»
Бланк: «Интервью с клиентом»
Бланк: «Рецензирование дизайна»
Бланк: «План проекта»
Презентация: «Информационная архитектура»
Раздел: «Советы по построению информационной архитектуры»
Бланк: «Проектная документация»
Раздел: «Принципы и нормы авторского права»
Раздел по программе Adobe Fireworks: «Обзор рабочего пространства программы Adobe
Fireworks CS6»
Раздел по программе Adobe Fireworks: «Создание каркасов»
Файл: Russia_GRing_comp_1.fw.png
Файл: Russia_GRing_comp_2.fw.png
Файл: Russia_GRing_comp_3.fw.png
Раздел по программе Adobe Fireworks: «Создание композиций дизайна»
Презентация «Раскадровки»
Бланк «Производственная раскадровка»
Файл: prototype-export.zip
Раздел по программе Adobe Fireworks: «Создание прототипов»
Дополнительные ресурсы
xx Технические данные и контент
xx Ключевые термины
Цифровой дизайн: основы веб-дизайна 207
xx Стандарты для учащихся ISTE NETS*S
xx Программа Adobe Certified Associate, экзамен «Сетевые коммуникации с использованием Adobe Dreamweaver CS6»
Этапы проекта
1.
xx
xx
xx
xx
Познакомьте учащихся с целями проекта.
Анализ целей, аудитории, юзабилити и доступности веб-сайтов
Составление плана веб-проекта и работа с клиентом
Создание структуры информационной архитектуры и каркасов
Создание композиций дизайна, раскадровок и прототипов проекта
Анализ веб-сайтов
(Рекомендуемое время: 50–100 минут)
2. Вспомните с учащимся обсуждение принципов дизайна и анализ дизайна веб-сайтов из
Проекта 1. Объясните, что теперь они будут рассматривать веб-сайты, чтобы определить их
цели, юзабилити и доступность. Продемонстрируйте учащимся несколько различных вебсайтов и помогите определить, как каждый служит определенной цели и каковы его функции. Рассмотрите следующие вопросы:
xx Какова цель сайта?
xx Каковы его функции?
xx Кто представляет собой аудиторию?
xx Кто создал веб-сайт?
xx Как аудитория просматривает веб-сайт? На настольном компьютере или ноутбуке? На
мобильных устройствах (планшетных компьютерах или смартфонах)?
3. Продемонстрируйте учащимся веб-сайты, содержащие мультимедийные объекты и обсудите, как дизайнеры используют их для улучшения опыта взаимодействия пользователей
с сайтом. Обсудите, как устройство, на котором посетители просматривают сайт, будет влиять на использование мультимедийных объектов и какие элементы вы могли бы включить в
контент и дизайн сайта. Можно обсудить следующее:
xx Навигационные системы
xx Интегрированный интерфейс пользователя
xx Анимированные экранные элементы
xx Многофункциональная интерактивная реклама
xx Социальные медиа
Примечание. Многофункциональная интерактивная реклама представляет собой сочетание графики с видео, звуком или анимацией. В качестве примера можно привести баннерную рекламу.
4. Объясните, что следовать принципам дизайна важно, но в дополнение этому, удобные
для пользователей веб-сайты также используют соответствующую навигацию и придержи-
208 Проект 2. Веб-дизайн и планирование
ваются стандартов юзабилити. Продемонстрируйте учащимся несколько веб-сайтов и обсудите следующие вопросы:
xx Какие категории информации вы нашли на сайтах?
xx Где эти категории находятся?
xx Что можно сказать о количестве информации, содержащейся в отдельно взятом разделе?
На сайте в целом?
xx Какого типа навигация присутствует на страницах? Согласована ли она?
xx Какие варианты предоставляет пользователю навигация?
xx Как дизайн помогает добиться согласованности?
xx Выглядит ли сайт внешне согласованным?
xx Встречаются ли одни и те же элементы дизайна на всех страницах?
xx Какие элементы страницы указывают на специфику веб-сайта?
xx Назовите преимущества согласованности, такие как повышение юзабилити.
xx Выглядит ли сайт одинаково на различных устройствах и при разных разрешениях
экрана?
Раздел: «Дизайн с учетом юзабилити»
Презентация: «Веб-дизайн для различных устройств»
Примечание. Для обсуждения юзабилити вы можете использовать информацию со следующих вебсайтов: www.usability.gov и www.useit.com.
5. Обсудите проблему доступности и почему это одинаково важно и для посетителей, и
для спонсоров сайта. Рассмотрите вспомогательные технологии такие, как экранные дикторы, замещающий текст и субтитры, а также доступная навигация. Расскажите о руководстве
по обеспечению доступности веб-контента (WCAG 2.0) с помощью демонстраций консорциума W3C, показывающих, как был повышен уровень доступности веб-сайтов: www.w3.org/
WAI/demos/bad/.
Раздел по программе Adobe Dreamweaver: «Обеспечение доступности веб-сайтов»
Примечание. Вы можете также использовать информацию сервиса Adobe Accessibility Resource
Center и консорциума W3C, чтобы организовать обсуждение: www.adobe.com/accessibility/,
www.w3.org/WAI/eval/Overview.html, www.w3.org/TR/WCAG10/full-checklist.html, www.webaim.org/
articles/pour/ и http://www.w3.org/WAI/intro/aria.
6. Поделите учащихся на пары и предоставьте каждой паре два веб-сайта, посвященных
одной и той же теме и имеющих схожие цели, чтобы учащиеся могли сравнить степень простоты использования и доступности этих сайтов. Выберите темы, представляющие интерес
для учащихся, например:
xx Спорт: www.fifa.com, www.ussoccer.com и www.wnba.com
xx Безопасное вождение: www.nhtsa.gov/Driving+Safety и www.crashprevention.org
xx Рак кожи: www.melanoma.com и www.maui.net/~southsky/introto.html
Цифровой дизайн: основы веб-дизайна 209
7. Поделите учащихся на пары и предоставьте каждой паре два веб-сайта, посвященных
одной и той же теме и имеющих схожие цели, чтобы учащиеся могли сравнить степень простоты в использовании и доступности этих сайтов. Выберите темы, представляющие интерес
для учащихся, например:
xx Какие типы элементов навигации используются: меню, гиперссылки, изображения, чтото еще?
xx При перемещении по сайту, сколько щелчков мышью в среднем приходится сделать, чтобы найти нужную информацию?
xx При перемещении по веб-сайту вы находите ту информацию, которую ожидали?
xx Понятна ли структура сайта?
xx Сколько времени требуется для загрузки страниц? (Обычно посетители ждут три-пять
секунд и если страница не загружается, переходят на другую).
xx Отображается ли веб-сайт одинаково в разных браузерах, в разных операционных системах и на различных устройствах?
xx Легко ли читается текст? Отформатирован ли текст в одном стиле? Если так, то помогает ли стиль достичь общей цели веб-сайта?
xx Каким образом текст, навигация и структура упрощают или усложняют посетителям работу с веб-сайтом?
xx Присутствуют ли на веб-сайте четкие названия, заголовки или другие визуальные элементы, помогающие организовать информацию?
xx Присутствуют ли на веб-сайте мультимедийные элементы? Способствуют ли они достижению цели сайта или наоборот?
xx Является ли контраст цвета и яркость между передним и задним планом приемлемым
для пользователей с ослабленным зрением?
Бланк: «Юзабилити и доступность»
8. Попросите учащихся вернуться к их двум веб-сайтам и оценить степень их доступности
так же, как они оценивали юзабилити, от простого к сложному. Наводящие вопросы могут
быть следующими:
xx Предоставлен ли замещающий текст к изображениям, чтобы экранные дикторы могли
считывать текстовые описания?
x x Все ли ссылки (включая встроенные) выделены так, чтобы они были хорошо заметны?
xx Если на веб-сайте присутствуют таблицы, имеются ли к ним заголовки?
xx Содержатся ли на сайте четкие заголовки и названия, способные помочь организовать
информацию для тех, кто пользуется экранным диктором?
xx Удобно ли расположена схема навигации для тех, кто пользуется экранным диктором?
xx Может ли посетитель сайта использовать клавишу Tab для доступа ко всем элементам
на странице/веб-сайте?
xx Важные элементы выделяются только с помощью цвета?
Бланк: «Юзабилити и доступность»
210 Проект 2. Веб-дизайн и планирование
Определение веб-проекта
(Рекомендуемое время: 150–250 минут)
9.
xx
xx
xx
xx
xx
Познакомьте с проектом, указав информацию об организации-клиенте, например:
Название организации
Миссия и цели организации
Продукт или услуга, предоставляемая организацией и объяснение того, как она работает
Возникновение и история организации
Почему организация ищет команду веб-дизайнеров
10. Напомните учащимся об этапах создания веб-проекта, рассмотренных в Проекте 1 и
заново изучите каждый этап и задачу.
Этапы разработки веб-проекта
xx Определить:
xx Цели, целевую аудиторию, контент и требования к готовому проекту.
xx План проекта.
xx Создание контента
xx Структура:
xx Информационная архитектура и проектная документация.
xx Блок-схемы для отображения общей структуры веб-сайта.
xx Каркасы для закрепления основной структуры страниц веб-сайта.
xx Дизайн:
xx Дизайн композиций для создания подробных альтернативных вариантов дизайна.
xx Рецензирование композиций с клиентом для выяснения его предпочтений относительно дизайна.
xx Редизайн после получения отзывов от клиента.
xx Создание раскадровки.
xx Создание прототипа.
xx Сборка и тестирование:
xx Создание сайта на основе раскадровки.
xx Техническая проверка и тестирование юзабилити, ведение записи ошибок и требований по изменению дизайна.
xx Пересмотр с учетом результатов тестов.
xx Техническая проверка и тестирование юзабилити переделанного веб-сайта.
xx Финальная презентация для клиента и окончательная редакция
xx Запуск:
xx План запуска
Презентация: «Этапы разработки веб-проекта»
Цифровой дизайн: основы веб-дизайна 211
11. Сформируйте из учащихся команды дизайнеров, стараясь, по возможности составлять
команды так, чтобы навыки умения членов команды были взаимодополняющими, например, навыки визуального дизайна, технические способности и умение управлять проектом.
Обсудить концепцию работы в команде.
12. Познакомьте учащихся с концепцией создания текстов для Всемирной паутины. Объясните, что, в зависимости от проекта, иногда клиент предоставляет контент, а иногда ожидает,
что дизайнер сам подберет контент и сделает его пригодным для размещения во Всемирной
паутине. В любом случае, обзор общих правил написания текстов для Всемирной паутины
поможет дать совет клиенту и/или объяснить, как создается и представляется контент.
Презентация: «Копирайтинг для Всемирной паутины»
Примечание. Для этого проекта мы рекомендуем запросить у клиента контент веб-сайта. Учащиеся
будут практиковаться писать собственный веб-контент в Проекте 4. Если не требуется выполнять
Проект 4, пусть учащиеся выполнят инструкции по созданию текста в этом проекте.
13. Готовясь к интервью с клиентом, обсудите, какого рода информацию необходимо получить от него команде дизайнеров, относительно целей и целевой аудитории. Помогите
учащимся установить критерии для определения, имеет ли контент отношение к цели сайта
и подходит ли для целевой аудитории. Попросите учащихся провести интервью с клиентом.
Бланк: «Интервью с клиентом»
Примечание. Для этого проекта командам учащихся рекомендуется создавать веб-сайт с нуля.
Однако они также могут переделать существующий веб-сайт клиента. В этом случае вместо бланка
«Интервью с клиентом» используйте бланк «Рецензирование дизайна».
Бланк: «Рецензирование дизайна»
14. После интервью, команды должны просмотреть веб-сайты, рекомендованные клиентом. Поощряйте команды к сбору потенциальных активов и дизайнерских идей в процессе
изучения этих сайтов.
15. Попросите команды организовать и описать их контент. Пусть подумают, какие технические средства можно использовать для передачи контента клиента, например, веб-формы,
мини-приложения, ролловеры, всплывающие меню, анимации, мультимедийные объекты,
видеоролики или подготовка фотографий.
16. Познакомьте учащихся и обсудите с ними технологии Adobe Flash, JavaScript, CSS3 и
другие инструменты для создания многофункционального интерактивного контента и приемы работы с ними. Обсудите и проанализируйте с учащимися, какие виды многофункционального контента они могут действительно создать для клиентских веб-сайтов.
17. Еще раз обсудите этапы создания веб-сайта в контексте разработки клиентского вебсайта. Вопросы для обсуждения могут включать следующие:
xx Когда веб-сайт клиента будет полностью готов?
xx Разумные сроки для выполнения каждого этапа
xx Установка сроков
212 Проект 2. Веб-дизайн и планирование
xx Назначение исполнителей для каждой задачи из списка
xx Ответственность исполнителей, в частности, кто отвечает за выполнение задачи, независимо от того, кто фактически над ней работает.
18. Попросите учащихся составить план проекта для распределения задач по фазам проекта.
Бланк: «План проекта».
Структура веб-проекта
(Рекомендуемое время: 150–250 минут)
19.Познакомьте учащихся с информационной архитектурой. Некоторые основные моменты:
xx Изучите потребности аудитории и пользователей.
xx Определите, каковы цели и аудитория: кем являются посетители, почему они приходят
на сайт, каковы цели сайта, и так далее.
xx Определите, Организация контента путем определения информационной структуры
сайта (одна страница, плоская структура, классификационная страница, цепочка, строгая иерархия, сосуществующая иерархия).
xx Соберите контент для сайта и проведите его инвентаризацию.
xx Создайте блок-схему сайта.
xx Определите системы навигации (глобальная, локальная, полезные ссылки).
Презентация: «Информационная архитектура».
Раздел: «Советы по построению информационной архитектуры».
20. Обсудите, как блок-схема передает организацию информацию. Объясните структуру
блок-схемы. Обсудите определение главной страницы. Подчеркните, что главная страница – это страница по умолчанию, которая открывается в браузере, если посетитель явно не
указывает другую страницу. Упомяните о том, что главной иногда называют страницу меню,
поскольку она обычно содержит основные ссылки меню для первого набора страниц контента. Некоторые из этих первых страниц контента могут содержать подменю с навигацией на
другие страницы контента.
21. Попросите команды составить блок-схему клиентского веб-сайта.
Примечание. Учащимся предлагается несколько способов построения блок-схемы. Ее можно нарисовать от руки, применить программы для визуального дизайна, например, Inspiration (Inspiration
Software), или использовать инструментарий организационных диаграмм в программе Microsoft
PowerPoint или Microsoft Word.
22. Попросите учащихся подумать, какие элементы дизайна придадут согласованность их
веб-сайтам. Наводящие вопросы могут быть следующими:
xx Какой шрифт вы используете для названий или заголовков страниц контента?
xx Какие цвета вы используете для названий или заголовков страниц контента?
Цифровой дизайн: основы веб-дизайна 213
xx
xx
xx
xx
xx
xx
xx
Какой шрифт вы используете для описаний на страницах контента?
Какого цвета будет используемый шрифт описания?
Где на странице вы расположите панель навигации?
Какой контент будет содержать панель навигации?
Будет ли панель навигации расположена на каждой странице?
Будет ли на каждой странице расположена текстовая навигация?
Как панель навигации и текстовая навигация помогут посетителям узнать, на какой
странице они находятся?
xx Есть ли у клиента логотип или другие элементы дизайна, которые могли бы лечь в основу дизайна?
23. Познакомьте учащихся с концепцией проектной документации, обратив внимание на
разделы, которые учащимся необходимо будет включить, описав вкратце каждый раздел:
xx Обзор проекта: Перечислите проблемы, с которыми можно столкнуться при создании
сайта и возможные их решения. Учащиеся могут также добавить примеры других сайтов,
эффективно справляющихся с этими проблемами.
xx Цели, задачи и сообщения: Список целей, задач и сообщений веб-сайта.
xx Аудитория: Составьте краткое описание целевой аудитории для этого сайта.
xx Требования выпуска: Перечислите требования финальной версии сайта (какие браузеры
и устройства должны его поддерживать и какова минимальная скорость соединения). Не
забудьте включить любые ограничения, налагаемые на контент сайта при выпуске.
xx Контент сайта: Проведите инвентаризацию главной страницы и страницы контента,
включая стандартные структуры на страницах. Обязательно укажите, что необходимо
использовать таблицы, заголовки и отступы для поддержания согласованности структуры и иерархии страниц.
xx Структура сайта: Нарисуйте блок-схему сайта, чтобы проиллюстрировать информационную архитектуру.
xx Визуальный дизайн: Включите, по крайней мере, два примера цвета и шрифтов.
Бланк: «Проектная документация».
24. Команды должны составить проектную документацию, используя свои выводы, сделанные после интервью с клиентом и знания из области информационной архитектуры и
юзабилити.
Примечание. Убедитесь, что учащиеся знают, какие материалы из тех, что они планируют добавить
на сайт, защищены авторским правом. Попросите их в разделе контента в проектной документации
указать все материалы, защищенные авторским правом, которые они планируют включить, а также
стратегию приобретения разрешения на использование таких материалов.
Раздел: «Принципы и нормы авторского права».
25. Напомните учащимся о каркасе, который они создали в Проекте 1. Кратко рассмотрите принципы дизайна, применяемые при создании каркаса, и почему каркасы важны
при создании дизайна сайта. Обсудите, как будет меняться макет веб-страницы и дизайн в
214 Проект 2. Веб-дизайн и планирование
зависимости от того, поддержку каких устройств просмотра попросил обеспечить клиент.
Попросите учащихся завершить создание каркаса главной страницы их веб-сайта и любых
последующих главных страниц с помощью программы Adobe Fireworks. Им необходимо рассмотреть следующие вопросы:
xx Выбор графики и размещение
xx Выбор текста и размещение
xx Выбор навигации и размещение (для графической и текстовой панелей навигации)
xx Выбор цветовой гаммы
xx Четкая визуальная иерархия
xx Ограничения, накладываемые на дизайн требованиями выпуска
xx Несколько вариантов дизайна для различных устройств с экранами разных размеров.
Раздел по программе Adobe Fireworks: «Обзор рабочего пространства программы Adobe
Fireworks CS6».
Раздел по программе Adobe Fireworks: «Создание каркасов».
Примечание. Если вы не изучали Проект 1, вы можете вернуться к нему, так как в нем описаны более подробные шаги, объясняющие функции каркаса и как использовать программу Adobe Fireworks
для создания каркасов.
Примечание. Если клиент требует, чтобы макет и дизайн сайта поддерживались на нескольких
устройствах с экранами различных размеров, учащимся, возможно, придется создать отдельный
каркас для поддержки каждого из устройств. Они могут создать каркас веб-сайта для настольных и
портативных компьютеров, каркас для планшетов и каркас для смартфонов.
26. Попросите учащихся представить их проектную документацию (в том числе блоксхемы), каркасы и планы проекта клиенту. Попросите клиента оценить, насколько организация информации, визуальное размещение и график разработки проекта отвечают его целям
и удовлетворяют его целевую аудиторию. Убедитесь, что, по крайней мере, один из членов
каждой команды записывает комментарии клиента.
27. Команда должна пересмотреть свою проектную документацию, блок-схемы, каркасы и
планы проекта с учетом полученных отзывов клиента.
Разработка веб-проекта
(Рекомендуемое время: 200–300 минут)
28. Напомните учащимся о композиции дизайна, которую они создали для своего миниприложения в Проекте 1. Объясните, что теперь они будут создавать композицию дизайна
для клиентского веб-сайта, используя каркас. Продемонстрируйте несколько примеров композиций дизайна.
Файл: GG_Bridge-rough_comp_1.fw.png
Файл: GG_Bridge-rough_comp_2.fw.png
Файл: GG_Bridge-rough_comp_3.fw.png
Цифровой дизайн: основы веб-дизайна 215
Примечание. Если вы не изучали Проект 1, вы можете вернуться к нему, так как в нем описаны
более подробные шаги, объясняющие функции композиций дизайна и способы их создания.
29. Попросите каждую команду подготовить не менее двух композиций дизайна главной
страницы и примера страницы контента с помощью программы Adobe Fireworks. Поощряйте команды создавать композиции дизайна, демонстрирующие страницы с различных точек
зрения, но напомните им учитывать значение согласованности между главной страницей
и страницей контента. Если командой подготовлено несколько каркасов для различных
устройств просмотра, следует создать композицию дизайна для каждого каркаса.
Раздел по программе Adobe Fireworks: «Создание композиций дизайна»
Примечание. Учащимся рекомендуется создавать цветовые палитры с помощью ресурса Adobe
Kuler (kuler.adobe.com).
30. После того, как учащиеся завершат создание композиций дизайна, попросите каждую
команду выбрать по две своих лучших композиций дизайна главной страницы и страницы
контента для демонстрации клиенту.
31. Попросите учащихся, подготовить презентацию для клиента, содержащую некоторые
или все перечисленные ниже элементы:
xx Пояснение, как две их композиции дизайна реализуют цели клиента, его аудитории и
учитывают его требования к контенту.
xx Снимки образцов цветов, шрифтов и страниц с объяснением причин создания такого
дизайна, макета страницы и вариантов навигации.
xx Диалог, во время которого команда получает отзывы клиента.
32. Попросите клиентов предоставить отзывы каждой команде. На этом этапе каждая команда просит своих клиентов выбрать образцы цвета, шрифтов, а также предпочитаемые
визуальные макеты, указав изменения, которые, по их мнению, необходимо внести. (Если в
роли клиента выступает человек со стороны, преподаватель может быть посредником во время диалогов, чтобы помочь команде вести записи требуемых изменений.) Команды должны
активно воспринимать отзывы клиентов и выполнять следующие действия:
xx Делать заметки.
xx Обобщить то, что они услышали от клиента на основе своих заметок.
xx Задать уточняющие вопросы, например:
xx Можете ли вы назвать примеры веб-сайтов, которые решили эту проблему?
xx Как вы решаете эту проблему?
xx Станет ли это решением проблемы?
33. Попросите команды пересмотреть композиции дизайна с учетом отзывов клиента и
представить композиции клиенту повторно. Попросите учащихся добиться от клиента одобрения окончательного варианта образцов цвета и шрифта, макетов страниц и системы навигации. Учащиеся должны внести эти элементы в проектной документации перед тем, как
приступать к разработке. Команды могут начать добавлять окончательные варианты графики и контента по мере того, как будут одобрены части композиций.
216 Проект 2. Веб-дизайн и планирование
34. Введите понятие раскадровки следующим образом:
xx Обычно раскадровки используют при создании фильмов или мультфильмов, чтобы изобразить то, что происходит в сюжете. Раскадровка включает в себя рисунки последовательности действий по сценам, ракурсы камеры, фон и т.д. Как следует из названия,
предназначение раскадровки — визуальное повествование, достаточно подробное для
того, чтобы съемочная группа могла понять, что они будут снимать.
xx Графическая раскадровка демонстрирует все элементы графики, указывая размер, расположение, цвет и шрифт.
xx Раскадровка веб-сайта может пройти через несколько итераций перед тем, как будет запущен процесс разработки сайта.
xx Сначала создайте эскизы, чтобы передать общую картину и основную структуру сайта,
так что все члены команды могли понять масштабы проекта. Превратите эти грубые наброски в готовые композиции, которыми вы сможете использоваться совместно с другими отделами организации или клиентом со стороны.
Презентация «Раскадровки».
35. Помогите учащимся подготовиться к созданию собственной раскадровки. Продемонстрируйте им образцы раскадровок веб-сайтов и опишите требуемый уровень детализации.
Можно даже использовать композицию дизайна одной из команд для создания примера раскадровки страницы. Убедитесь, что учащиеся понимают, что их раскадровки — это то, как
они передают макет страницы, а также шрифты и цветовые решения, другим членам команды, поэтому у раскадровок должен быть высокий уровень детализации.
Бланк: «Производственная раскадровка».
36. Для создания раскадровок всех страниц своих веб-сайтов командам следует использовать бланк «Производственная раскадровка». Раскадровка должна включать в себя следующие элементы для каждой страницы сайта:
xx Название сайта
xx Заголовок страницы
xx Название документа
xx Каркас (макет)
xx Фон
xx Текст заголовков (спецификации шрифтов, размеры шрифтов, стили, границы, поля, выравнивание, отступы и цвета)
xx Текст абзаца (спецификации шрифтов, размеры шрифтов, стили, границы, поля, выравнивание, отступы и цвета)
xx Описание всех текстов, графики, Flash и видеороликов, в том числе порядок, в котором
эти элементы отображаются
xx Кнопки, ссылки, и их назначения
xx Графика, видео или Flash-ролики, необходимые для размещения на странице
37. Обсудите, как каркасы, композиции дизайна и раскадровки приводят к созданию прототипа. Кратко объясните следующее:
Цифровой дизайн: основы веб-дизайна 217
xx Прототип — это частично функциональная веб-страница, предоставляющая реалистичное изображение того, как будет выглядеть и, как будет работать сайт.
xx Учащиеся могут объединить каркасы с композициями дизайна в программе Adobe
Fireworks, чтобы сделать подробный и всеобъемлющий прототип для предварительной
демонстрации клиенту.
xx Прототипы, созданные в программе Adobe Fireworks, также можно экспортировать в
файлы HTML и CSS, которые можно открыть в программе Adobe Dreamweaver, чтобы
просмотреть сайт в веб-браузере.
38. Применив метод «я делаю, мы делаем, вы делаете» продемонстрируйте, как совместить
каркас с композицией дизайна сайта для создания прототипа. Продемонстрируйте, как экспортировать прототип в форматы HTML и CSS файлов.
Файл: prototype-export.zip
Раздел по программе Adobe Fireworks: «Создание прототипов»
39. Предоставьте командам время на то, чтобы разработать прототип главной страницы и
нескольких страниц контента на основе их раскадровок.
40. Команды должны представить прототип на утверждение клиенту при подготовке к технической разработке сайта. Предоставьте время для внесения необходимых изменений на
основе отзывов клиента.
Дополнительные задания
Проект можно дополнить следующими заданиями:
xx Создать карту существующего сайта: Чтобы помочь учащимся понять, что такое блоксхема, дайте им задание составить блок-схему простого веб-сайта, найденного во Всемирной паутине. Например, они нарисуют страницы, связанные ссылками с главной, а
потом страницы, связанные ссылками друг с другом. Переходя по ссылкам, учащиеся
начнут понимать, как блок-схема связана с готовым сайтом и им будет проще создавать
собственные блок-схемы.
xx Контрольные точки: Чтобы помочь учащимся правильно распределить время в ходе
длительных проектов, вы можете добавить контрольные точки, задающие промежуточные сроки выполнения в рамках более крупного проекта. Для этого вам, возможно, потребуется провести дискуссию в аудитории, чтобы определить сроки выполнения каждого раздела проектной документации. Разделы могут быть следующими:
xx Цели, задачи и сообщения сайта
xx Аудитория
xx Цели редизайна
xx Технические характеристики
xx Контент сайта
xx Структура сайта
xx Визуальный дизайн
218 Проект 2. Веб-дизайн и планирование
xx Профессиональный дизайнер: Можно попросить профессионального дизайнера рассказать учащимся о создании проектной документации, объяснить, как она помогает при
разработке и общении с клиентом.
xx Каскадные таблицы стилей: Чтобы предоставить учащимся больше сведений о каскадных таблицах стилей, организуйте их (учащихся) группы, которым нужно будет подробнее изучить данную тему и представить результаты аудитории.
Темы могут быть следующие:
xx Появление CSS
xx Действующие стандарты по CSS Консорциума W3C
xx Преимущества использования CSS
Оценка
xx По нескольким критериям, представленным далее в разделе «Критерии оценки».
Дополнительные ресурсы
xx Обзор пошаговых инструкций для учащихся, приведенных в этом проекте.
xx Видеоуроки, ориентированные на навыки, необходимые для выполнения этого проекта,
можно найти на сайте Adobe TV по адресу tv.adobe.com/show/digital-design-cs6/.
xx Дополнительные учебные ресурсы по веб-дизайну, планированию и другим темам этого
проекта можно найти по адресу edexchange.adobe.com.
xx Обзор интерфейса и дополнительную информацию по техническим аспектам Adobe
Fireworks можно найти в справочных материалах программы.
xx Обзор интерфейса и дополнительную информацию по техническим аспектам Adobe
Dreamweaver можно найти в справочных материалах программы.
xx Приемы управления веб-проектами (раздел «Define»): www.adobe.com/resources/techniques/.
xx Пособие по информационной архитектуре: www.webmonkey.com/2010/02/information_
architecture_tutorial/
Юзабилити и доступность
xx Сайт Accessibility Resource Center: www.adobe.com/accessibility/
xx Сайт Консорциума W3C: www.w3.org/WAI/eval/Overview.html
xx Контрольная таблица доступности Консорциума W3C: www.w3.org/TR/WCAG10/fullchecklist.html
xx Принципы W3C для создания доступного сайта: www.webaim.org/articles/pour/
xx Основной источник по теме юзабилити и ориентированного на пользователя дизайна:
www.usability.gov
xx Сайт Якоба Нильсена, посвященный юзабилити: www.useit.com
Цифровой дизайн: основы веб-дизайна 219
xx Таблица проверки юзабилити веб-сайтов: www.ddj.com/184412660
xx ГОСТ Р 52872-2007. Интернет-ресурсы. Требования доступности для инвалидов по зрению: www.ifap.ru/library/gost/528722007.pdf
Каркасы
xx Бесплатный набор шаблонов каркасов для программы Adobe Fireworks, содержащих
различные элементы пользовательского интерфейса: www.dragnet.se/webbdesign/
websitewireframes.html
xx Adobe Proto, сенсорное приложение для создания интерактивных каркасов, прототипов
веб-сайтов и мобильных приложений на планшете: www.adobe.com/products/proto.edu.
html
xx Sqetch, инструментарий программы Adobe Illustrator, содержащий ряд шаблонов и элементов: www.eleqtriq.com/2010/08/sqetch-wireframe-toolkit/
Клиенты
xx Ресурс, описывающий творческие подходы к проблеме поиска клиентов для учебных
проектов: edexchange.adobe.com/posts/b6fde4a10e
xx Опросник клиентов в формате Microsoft Word: www.adobe.com/resources/techniques/
resources/define/client_survey.rtf
Проектная документация
xx Иллюстрация процесса подготовки проектной документации: cat.xula.edu/tutorials/
planning/designdoc
Ключевые понятия
xx
xx
xx
xx
xx
xx
xx
xx
xx
xx
xx
xx
Аудитория
Блок-схема
Взаимодействие с клиентами
Информационная архитектура
Каркас
Композиция дизайна
Навигация
План проекта
Предназначение
Проектная документация
Производственная раскадровка
Рецензирование дизайна
220 Проект 2. Веб-дизайн и планирование
Стандарт ISTE NETS*S для учащихся
Этот проект соответствует технологическим стандартам ISTE NETS*S. В зависимости от
тематики и содержания, которые выбирает учащийся, вы можете изучить стандарты, принятые в вашем государстве.
1. Творчество и инновации.
Учащиеся демонстрируют творческое мышление, исследовательские подходы и разрабатывают инновационные продукты и процессы с использованием технологии. Учащиеся:
а. Применяют имеющиеся знания для получения новых идей, продуктов или процессов;
б. Создают оригинальные произведения как средство выражения личности или группы.
2. Коммуникации и сотрудничество.
Учащиеся используют цифровые средства и среды для общения и коллективной работы, в
том числе на расстоянии, поддержки индивидуального обучения и возможности обучения
других. Учащиеся:
а. Взаимодействуют, сотрудничают и работают со сверстниками, экспертами или другими
участниками, используя различные цифровые среды и средства.
б. Эффективно распространяют информацию и идеи для разных аудиторий с использованием различных средств и форматов.
г. Участвуют в проектных группах для создания оригинальных произведений или решения проблем
3. Исследования и информационная компетентность.
Учащиеся умеют применять цифровые инструменты для сбора, оценки и использования информации. Учащиеся:
б. Находят, организовывают, анализируют, оценивают, обобщают и используют информацию из различных источников и сред
в. Оценивают и отбирают источники информации и цифровые средства на основе целесообразности для конкретных задач.
4. Критическое мышление, решение проблем и принятие решений.
Учащиеся используют умение критически мыслить для планирования и проведения научных исследований, управления проектами, решения проблем и принятия обоснованных решений, используя соответствующие цифровые инструменты и ресурсы. Учащиеся:
б. Планируют и управляют деятельностью по разработке решения или выполнения проекта.
г. Используют различные процессы и перспективы для исследования альтернативных решений.
5. Цифровое гражданство.
Учащиеся понимают гуманитарные, культурные и социальные вопросы, связанные с информационными технологиями и практикой легального и этичного поведения. Учащиеся:
Цифровой дизайн: основы веб-дизайна 221
а. Заявляют и практикуют безопасное, правовое и ответственное использование информации и технологий.
б. Демонстрируют позитивное отношение к использованию технологий, которые поддерживают сотрудничество, обучение и производительность.
6. Применение технологии и технологические концепции.
Учащиеся демонстрируют четкое понимание технологических концепций и систем, и их
применения. Учащиеся:
а. Понимают и используют технологические системы;
б. Эффективно и продуктивно выбирают и используют приложения.
г. Используют имеющиеся знания для изучения новых технологий.
Программа сертификации Adobe Certified Associate,
экзамен «Сетевые коммуникации с использованием
Adobe Dreamweaver CS6»
1.1. Формулирование основных задач веб-сайта, определение целевой аудитории и ее потребностей.
1.2. Выбор веб-контента, соответствующего назначению веб-сайта и требованиям целевой
аудитории.
1.3. Демонстрация знания стандартных требований к защите авторских прав (связанные термины, получение разрешения и цитирование материала, охраняемого авторским правом).
1.5. Принятие решений о создании веб-сайта на основе собственного анализа и имеющихся
технических требований.
1.6. Осведомленность в принципах управления проектами.
2.1. Демонстрация знания рекомендаций, общих и относящихся к Dreamweaver, в отношении проектирования веб-сайтов, таких как поддержка согласованности, отделение содержимого от проекта, использование стандартных шрифтов и визуальной иерархии.
2.2. Создание проектов веб-сайтов, полностью совместимых с различными операционными
системами, версиями и конфигурациями веб-браузеров и устройствами.
2.3. Демонстрация знаний основных принципов разработки макетов страниц.
2.4. Определение ключевых принципов создания удобного, доступного веб-сайта, содержащего понятный и разборчивый текст.
2.5. Демонстрация знания блок-схем, раскадровок и каркасных методов изображения объектов для создания веб-страниц и карты сайта (индекса сайта), которые поддерживают запланированную иерархию веб-сайта.
2.6. Обмен информацией с другими специалистами (например, коллегами и клиентами) о
планах по проектированию.
222 Проект 2. Веб-дизайн и планирование
Критерии оценки
0 — Результат
не соответствует
ожиданиям
3 — Результат соответствует
ожиданиям
5 — Результат превосходит
ожидания
Интервью с
клиентом
Отсутствует
или не завершено
В ходе интервью выясняются цели клиента, целевая
аудитория и предполагаемое
предназначение веб-сайта.
В ходе интервью определяются контент и информация, имеющие решающее
значение для веб-сайта,
устанавливаются требования и пожелания клиента по
дизайну и задаются дополнительные важные вопросы.
В ходе интервью четко определяются цели клиента, целевая
аудитория и предполагаемое
предназначение веб-сайта. В
ходе интервью четко определяются контент (оригинальный
и повторно используемый) и
информация, имеющие решающее значение для веб-сайта,
устанавливаются требования и
пожелания клиента по дизайну и
записываются конкретные примеры. Также задаются дополнительные важные и тщательно
продуманные вопросы, нацеленные на получение или прояснение конкретной информации.
План проекта
Отсутствует
или не завершен
Учащиеся установили
контрольные точки, распределили задания, загружая в
равной степени всех членов
команды, и назначили
финальные сроки, чтобы
распланировать каждый
этап проекта.
Учащиеся установили контрольные точки, содержащие детальное описание заданий, распределили задания, загружая в равной
степени всех членов команды,
и назначили конечные сроки,
чтобы распланировать каждый
этап проекта.
Проектная
документация
Отсутствует
или не завершена
Проектная документация
содержит описание целей
сайта, задач и сообщений;
аудитории сайта; требования выпуска; обзор контента
сайта; блок-схему сайта; образцы шрифтов и цветов и
копии визуального дизайна
сайта.
Проектная документация содержит подробный анализ целей
сайта, задач и сообщений; аудитории сайта; требования выпуска; обзор контента сайта; блоксхему сайта; образцы шрифтов
и цветов и копии визуального
дизайна сайта.
Каркас сайта
Отсутствует
или не завершен
Каркасы созданы для
организации контента на
страницах на основе принципов дизайна и требований
к проекту
Каркасы созданы для организации контента на страницах
на основе принципов дизайна и
требований к проекту. Обосновано каждое решение, касающееся
элементов каркаса, приведены
данные и информация, собранная в ходе исследований и общения с клиентом.
Цифровой дизайн: основы веб-дизайна 0 — Результат
не соответствует
ожиданиям
223
3 — Результат соответствует
ожиданиям
5 — Результат превосходит
ожидания
Композиции
дизайна вебсайта
Отсутствует
или не завершены
Композиции дизайна точно
отражают аудиторию, цели,
выбор цвета, настроение,
изображения, текст и выбранный вариант навигации.
Отобранные композиции отражают различные подходы
к дизайну.
Композиции дизайна точно отражают аудиторию, цели, выбор цвета, настроение, изображения, текст
и выбранный вариант навигации.
Отобранные композиции отражают различные подходы к дизайну.
Учащиеся могут четко объяснить,
каким образом были применены
принципы дизайна для оказания
влияния на аудиторию.
Раскадровки
веб-сайта
Отсутствуют
или не завершены
Производственные раскадровки содержат информацию о дизайне и структуре
веб-сайта и его элементов.
Производственные раскадровки
содержат подробную информацию о дизайне и структуре вебсайта и его элементов.
Прототип
веб-сайта
Отсутствует
или не завершен
Созданы прототипы главной
страницы и 1-2 страниц
контента на основе каркасов, композиций дизайна
и раскадровок. Прототипы
частично функционируют в
программе Adobe Fireworks
и могут быть экспортированы в формате HTML и CSS
файлов для поддержки программы Adobe Dreamweaver.
Созданы прототипы главной
страницы и 2–4 страниц контента
на основе каркасов, композиций
дизайна и раскадровок. Прототипы реалистичны, частично функционируют в программе Adobe
Fireworks и используют одобренные клиентом цвета, шрифты,
макет страницы и навигацию.
Прототипы экспортированы в
формате HTML и CSS файлов
для поддержки программы Adobe
Dreamweaver.
Работа в
команде
Отсутствует
или недостаточна
Учащийся сотрудничает с
другими учащимся и предоставляет отзывы и помощь.
Выполняет выделенную
ему роль в команде, вносит
равный вклад в работу над
проектом. Иногда советуется
с другими членами команды,
принимая важные решения по
проекту, но прилагает лишь
минимальные усилия, чтобы
помочь другим в развитии
определенных навыков.
Учащийся сотрудничает с другими учащимся и предоставляет
отзывы и помощь. Выполняет
выделенную ему роль в команде,
вносит равный вклад в работу
над проектом. Советуется с другими членами команды, вынося
важные решения по проекту,
добровольно помогает другим в
развитии определенных навыков
для завершения проекта.
Управление
временем
Отсутствует
или недостаточно
Учащийся выделяет время
на все фазы процесса создания и разработки проекта.
Завершает большинство этапов согласно графику.
Учащийся вдумчиво и эффективно распределяет время на
все фазы процесса создания и
разработки проекта. Завершает
все этапы по графику.
224 Проект 2. Веб-дизайн и планирование
Дизайн с учетом юзабилити
Качество юзабилити во Всемирной паутине определяется как: простота использования, легкость обучения и создание в целом хорошего впечатления у пользователей. Сайт с хорошим
дизайном и удобный в использовании стремится улучшить опыт взаимодействия пользователей, повышая свою эффективность, становясь элегантнее и понятнее. Юзабилити — это сочетание факторов, к которым относятся дизайн, информационная архитектура, доступность
и поддержка на различных устройствах. Сайт Usability.gov (usability.gov/basics/index.html)
предоставляет список этих важных факторов:
xx Простота в обучении. Как быстро пользователь, который никогда раньше не видел пользовательского интерфейса, сможет освоить его достаточно хорошо, чтобы выполнить основные задачи?
xx Эффективность использования. Научившись пользоваться системой, как быстро опытный пользователь сможет выполнить задачи?
xx Запоминаемость. Если пользователь уже встречался с этой системой прежде, может он
или она вспомнить достаточно, чтобы эффективно использовать ее в следующий раз,
или же пользователю придется изучать все заново?
xx Частота и серьезность ошибок. Как часто пользователи делают ошибки при работе с
системой, насколько серьезны эти ошибки, и как пользователи исправляют их?
xx Субъективная удовлетворенность. Насколько пользователю понравилось использовать
систему?
Сравните два примера сайта учебного заведения, показанные на рис. 2.1. Снимки сайта «до» и
«после» демонстрируют разницу между плохим юзабилити, и последующим редизайном сайта, благодаря которому опыт взаимодействия пользователей от сайта значительно улучшился.
Планируя контент и навигацию вашего проекта веб-сайта, учитывайте аспекты, описанные
далее.
Рис. 2.1. Пример неудобного для пользователей сайта (слева)
и улучшенный вариант веб-сайта (справа)
Цифровой дизайн: основы веб-дизайна 225
Контент
То, как вы организуете контент страницы, подчеркивает важные особенности и элементы
вашего сайта. Важные элементы могут быть расположены в верхней части страницы, быть
более крупного размера или выделены более ярким цветом. Добавьте примерное описание
навигации, копию макета, расположение графики, ключевые заголовки и прочие элементы, появляющиеся на экране. Выявление общих структур страниц помогает посетителям
при переходе с одной страницы на другую понять, что они находятся на одном и том же
сайте.
xx Будет ли ваш баннер располагаться на каждой странице? Если да, то будет ли он размещен всегда в одном месте? Одного размера?
xx Какой шрифт вы используете для названий или заголовков на страницах контента?
xx Какие цвета вы используете для шрифта названий или заголовков на страницах контента?
xx Каким шрифтом будут набраны описания на страницах контента?
xx Какие цвета вы примените в описаниях?
Навигация
Чтобы посетители вашего сайта могли понять его контент, необходимо обеспечить им понятную навигацию. Посетители должны знать, где именно они находятся на сайте, куда им
нужно попасть и как вернуться туда, откуда они пришли. Наличие согласованного макета
помогает посетителям ориентироваться и не дает им потеряться. Использование единообразных кнопок, ссылок и графику на каждой странице позволяет всегда понять свое местоположение на сайте. При переходе посетителей с одной страницы на другую, предоставьте
им знакомые визуальные подсказки и помощь в навигации.
xx Где будет размещаться панель навигации на странице?
xx Каким будет контент панели навигации?
xx На каждой ли странице будет панель навигации?
xx Как ваша панель навигации поможет посетителям узнать, на какой странице они находятся?
Ресурсы
Узнайте больше о лучших способах обеспечения юзабилити во Всемирной паутине из этих
ресурсов:
xx usability.gov — основной источник информации о юзабилити и дизайне, ориентированных на пользователя.
xx www.useit.com — веб-сайт ведущего консультанта по веб-юзабилити Якоба Нильсен.
226 Проект 2. Веб-дизайн и планирование
Обеспечение доступности веб-сайтов
Создавать доступные веб-страницы сегодня важно как никогда. С принятием стандартов доступности в Соединенных Штатах, Канаде, Европейском Союзе, Австралии, Японии и других странах, дизайнеры и разработчики должны гарантировать, что люди с ограниченными
возможностями могут получить доступ к контенту веб-сайтов и веб-приложений, а также к
средствам разработки, используемым для их создания.
Доступность означает создание веб-сайтов и веб-продуктов, которыми смогут пользоваться
люди со зрительными, слуховыми, двигательными и иными нарушениями. К числу функций, повышающих доступность программных продуктов и веб-сайтов, относятся поддержка
экранных дикторов, текстовые эквиваленты изображений, горячие клавиши, изменение цветов на экране на более контрастные и так далее. Программа Adobe Dreamweaver содержит
инструменты, позволяющие создавать доступный контент.
Программа Adobe Dreamweaver позволяет дизайнерам и разработчикам создавать доступные страницы, которые содержат полезный контент для экранных дикторов и соответствуют
рекомендациям по доступности. Например, при вставке элементов страницы появляются
диалоговые окна, предлагающие вам ввести атрибуты доступности такие, как замещающий
текст для изображений. Затем, когда изображение появится на странице пользователям с
нарушениями зрения, экранный диктор озвучит его описание.
Ни одно средство верстки веб-сайтов не способно автоматизировать процесс разработки.
Для дизайна доступных веб-сайтов необходимо ознакомиться с требованиями к доступности и принимать текущие решения о том, как пользователи с ограниченными возможностями смогут взаимодействовать с веб-страницами. Лучший способ гарантировать, что сайт доступен — посредством преднамеренного планирования, разработки, тестирования и оценки.
Варианты настроек доступности
Для создания доступного веб-страниц, элементы страницы должны содержать информацию,
предназначенную для вспомогательных технологий, таких как экранный диктор. Например,
у каждого изображения на странице должен быть текстовый эквивалент, называемый замещающим текстом (или альтернативным), который экранный диктор озвучит пользователю
вместо изображения (рис. 2.2).
Рис. 2.2. Отображение
замещающего текста
Цифровой дизайн: основы веб-дизайна 227
При создании веб-сайтов, дизайнеры часто забывают о функциях, обеспечивающих доступность сайта для людей с ограниченными возможностями, таких как замещающий текст, но
программа Adobe Dreamweaver CS6 может быть настроена так, чтобы обеспечить доступность информации при создании страницы. Когда вы будете настраивать параметры в диалоговом окне Настройки (Preferences), вам будет предложено предоставить доступную информацию для веб-форм, фреймов, мультимедийных элементов, изображений и таблиц при
добавлении этих элементов на страницу.
Чтобы установить настройки доступности, выберите команду меню Правка ⇒ Настройки
(Edit ⇒ Preferences) (Windows) или Dreamweaver ⇒ Настройки (Dreamweaver ⇒ Preferences) (OS X) и выберите категорию Специальные возможности (Accessibility) в диалоговом окне Настройки (Preferences) (рис. 2.3).
Рис.2.3. Диалоговое окно Настройки в программе Adobe
Dreamweaver, категория Специальные возможности
Например, если вы установите флажок Изображения (Images), то в диалоговом окне Атрибуты специальных возможностей тега Image (Image Tag Accessibility Attributes) вам предложат (рис. 2.4) предоставить замещающий текст и описание для каждого вставляемого изображения.
Создавать доступные таблицы и формы сложнее, но программа Adobe Dreamweaver CS6
упрощает этот процесс. Например, когда вы добавляете данные в таблицу в программе Ado-
228 Проект 2. Веб-дизайн и планирование
Риc. 2.4. Диалоговое окно Атрибуты специальных возможностей тега Image
be Dreamweaver CS6, вам сразу же предлагается указать в таблице сводку, подпись, и положение ячеек заголовка (рис. 2.5). Кстати, обозначая ячейки заголовка (важный шаг дизайна,
о котором часто забывают), вы значительно упрощаете пользователям с ограниченными возможностями перемещение по таблицам.
В программе Adobe Dreamweaver CS6 также легко создавать доступные веб-формы. При выборе параметра Объекты формы (Form Objects) в диалоговом окне Настройки (Preferences)
вам будет предложено предоставить метку для каждого объекта формы, а также клавиши
доступа и порядок переключения клавишей Tab (рис. 2.6). Установка этих меток позволяет
посетителям, пользующимся вспомогательными технологиями понять назначение каждого
объекта формы при ее заполнении.
Рис. 2.5. Диалоговое окно Таблица
Рис. 2.6. Диалоговое окно Атрибуты специальных
возможностей тегов Input
Цифровой дизайн: основы веб-дизайна 229
Проверка доступности
Существует целый ряд веб-инструментов для оценки доступности, с помощью которых
можно протестировать готовый веб-сайт. Консорциум W3C предоставляет исчерпывающий
перечень этих инструментов на странице www.w3.org/ WAI/RC/tools/.
Доступные шаблоны
Программа Adobe Dreamweaver CS6 включает в себя несколько шаблонов, предназначенных
для обеспечения доступности. Эти шаблоны визуально сбалансированы и доступны для людей с ограниченными возможностями (рис. 2.7). Они предоставляют вам быстрый и простой
способ создания захватывающего, привлекательного и доступного контента.
Рис. 2.7. Образец HTML-шаблона программы Adobe Dreamweaver
Как удовлетворить требования доступности
В рамках инициативы по обеспечению доступности, Консорциум W3C составил краткий
список требований и техник «Руководство по обеспечению доступности Web-контента»
(Web Content Accessibility Guidelines, (WCAG) 2.0).
1. Текстовые альтернативы: Предоставьте текстовые альтернативы любого нетекстового
контента, чтобы его можно было заменить на другие формы, требующиеся посетителям, например, крупный шрифт или шрифт Брайля, речь, символы или более простые выражения.
230 Проект 2. Веб-дизайн и планирование
2. Видеоролики: Предоставьте альтернативы для видео элементов.
3. Адаптация: Создавайте контент, который можно будет представить по-разному (например, используя более простой макет) без потери информации или структуры.
4. Различаемый контент: Упростите пользователям процесс чтения и прослушивания контента, включая разделение переднего плана и фона.
5. Доступ с клавиатуры: Сделайте весь функционал доступным с клавиатуры.
6. Достаточно времени: Предоставьте пользователям достаточно времени для чтения и использования контента.
7. Эпилепсия: Не разрабатывайте контент, если известно, что он может вызвать эпилептический припадок.
8. Удобство навигации: Предоставьте помощь людям в использовании навигации, поиске
контента и ориентировании по сайту.
9. Удобочитаемость: Сделайте текстовый контент легко читаемым и понятным.
10. Предсказуемость: Веб-страницы должны появляться и функционировать предсказуемо.
11. Помощь при вводе информации: Помогите пользователям избежать ошибок и исправить
их.
12. Совместимость: Добейтесь максимальной совместимости с существующими и будущими программами (агентами) пользователей, в том числе вспомогательными технологиями.
Юзабилити и доступность
Имя учащегося: ______________________________________ Дата: ________________
URL-адрес: ______________________________________________________________
Название сайта: ___________________________________________________________
Юзабилити
Какие типы элементов навигации использованы: кнопки, гиперссылки, изображения или
что-либо другое? Элементы одного или нескольких типов? Опишите каждый тип элементов
навигации.
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Цифровой дизайн: основы веб-дизайна 231
При навигации по сайту, сколько щелчков мыши обычно требуется, чтобы перейти к нужной
информации?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
При навигации по сайту, получаете ли вы ту информацию, которую предполагали получить?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Является ли очевидной для вас структура сайта?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Сколько времени занимает загрузка страниц?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Выглядит ли веб-сайт одинаково в разных браузерах, в разных операционных системах или
устройствах?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Насколько читабелен текст? Уникален ли стиль текста? Если это так, способствует ли стиль
текста достижению цели сайта?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
232 Проект 2. Веб-дизайн и планирование
Какие элементы визуального контекста используются? Как эти элементы помогают или мешают посетителям сайта?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Используются ли понятные названия, заголовки или другие визуальные элементы, которые
особенно помогают организовать информацию?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Доступность
Снабжены ли изображения замещающим текстом, чтобы экранные дикторы могли прочитать описание?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Все ли ссылки, включая вложенные, помечены, чтобы их можно было легко заметить?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Снабжены ли таблицы заголовками строк или столбцов?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Присутствуют ли на сайте понятные названия и заголовки, помогающие организовать информацию для посетителей, использующих экранный диктор?
_______________________________________________________________________
_______________________________________________________________________
Цифровой дизайн: основы веб-дизайна 233
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Удобно ли для посетителей, использующих экранный диктор, расположение элементов навигации?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Является ли цвет единственным элементом используемым для визуального выделения?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Высока ли степень контрастности между элементами переднего плана и фоновыми, а цвета
достаточно яркие для людей с нарушениями зрения?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Интервью с клиентом
Название команды: _____________________________ Дата: ______________________
Имя ответственного: _______________________________________________________
Темы интервью
xx
xx
xx
xx
xx
Задачи и целевая аудитория
Характеристики аудитории
Контент
Требования к дизайну
Требования выпуска
234 Проект 2. Веб-дизайн и планирование
Задачи и целевая аудитория
Укажите три долгосрочных цели вашего веб-сайта.
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
На что должно вдохновить аудиторию посещение веб-сайта?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Укажите несколько ближайших целей веб-сайта.
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Укажите, какую ключевую информацию должны получить посетители сайта.
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Опишите ожидания вашей целевой аудитории в отношении контента.
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Другие вопросы:
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Цифровой дизайн: основы веб-дизайна 235
Характеристики аудитории
Опишите характеристики целевой аудитории вашего веб-сайта
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Каков возрастной диапазон вашей целевой аудитории?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Каков уровень начитанности вашей целевой аудитории?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Есть ли среди целевой аудитории лица с какими-либо особыми потребностями или ограниченными возможностями?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Как часто ваша целевая аудитория находится онлайн?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Опишите наиболее характерное использование ресурсов Всемирной паутины людьми данной целевой аудитории.
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
236 Проект 2. Веб-дизайн и планирование
При помощи нескольких прилагательных опишите, как бы вы хотели, чтобы целевая аудитория воспринимала ваш веб-сайт. (Например, престижный, дружелюбный, корпоративный,
веселый, передовой, инновационный, современный, серьезный, сумасбродный).
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Другие вопросы:
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Контент
Каким должно быть название вашего веб-сайта?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Какие темы должны обсуждаться на веб-сайте?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Другие вопросы:
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Цифровой дизайн: основы веб-дизайна 237
Требования к дизайну
Существуют ли какие-либо цвета, шрифты, графические элементы или логотипы, присущие
организации, которые следовало бы включить в дизайн веб-сайта?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Есть ли цвета и шрифты, которые вам не хотелось бы использовать в этом сайте?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Какие веб-сайты вам нравятся? Опишите элементы, которые вам нравятся в каждом из этих
веб-сайтов, например навигацию, цвета, макеты и другие конструктивные части дизайна.
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Другие вопросы:
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Требования выпуска
Какие браузеры (а также, какие версии браузеров) должны поддерживать этот веб-сайт?
xx Internet Explorer.
xx Mozilla Firefox
xx Safari
xx Google Chrome
xx Другие
Какие платформы должны поддерживать сайт?
xx Windows
xx OS X
xx Другие
238 Проект 2. Веб-дизайн и планирование
Какими устройствами должен поддерживаться сайт?
xx Смартфоны
xx Планшетные компьютеры
xx Другие
Рецензирование дизайна
Имя учащегося: ____________________________________ Дата: __________________
Название команды: ________________________________________________________
Имя клиента: ____________________________________________________________
URL-адрес сайта клиента: ___________________________________________________
Резюме
После исследования целей и аудитории клиента проведите рецензирование дизайна вебсайта:
xx Один из членов команды подытоживает аудиторию, цели и задачи сайта для общего понимания их группой.
xx Команда оценивает качество дизайна сайта, обращая внимание на следующие детали:
xx Согласованность;
xx Простота использования;
xx Цветовые решения;
xx Универсальная навигация;
xx Макет;
xx Ссылки;
xx Юзабилити;
xx Доступность;
xx Дизайн для мобильных устройств.
xx Команда обсуждает предложения по улучшению дизайна сайта.
xx Один из членов команды подводит итоги по качеству сайта.
Согласованность
Какие элементы повторяются на внутренних страницах для удобства идентификации сайта?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Цифровой дизайн: основы веб-дизайна 239
Каким образом эти повторения помогают или затрудняют реализацию основных задач сайта?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Посещая сайт, как пользователи узнают, где они находятся, куда они могут перейти, и остаются ли они том же сайте, переходя со страницы на страницу?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Насколько страницы соответствуют веб-стандартам (например, все ли ссылки выделены синим цветом и подчеркиванием)?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Универсальная навигация
Где находится основное навигационное меню сайта и насколько согласована навигация на
разных страницах?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Как посетители могут вернуться к главной странице с любой другой страницы сайта?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Как пользователи могут отследить свое перемещение по сайту (например, всегда ли есть возможность вернуться на предыдущую страницу)?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
240 Проект 2. Веб-дизайн и планирование
Макет
Достаточно ли логично выглядит размещение элементов дизайна на странице или их расположение кажется случайным?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Насколько взаимное расположение и размер изображений и текстовых блоков соответствуют их относительной важности?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Насколько часто приходится использовать полосу прокрутки, чтобы найти важные элементы?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Насколько ясно изображения передают информацию, если они есть?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Каким образом изображения придают весомости контенту сайта, или они используются
только для украшения и привлечения внимания?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Каким образом цветовая схема содействует цели и настроению сайта?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Цифровой дизайн: основы веб-дизайна 241
Юзабилити
Насколько понятно подписаны ссылки?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Стоит ли страница времени, потраченного на ожидание ее загрузки?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Как легко посетители находят нужную информацию?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Как легко посетители могут вернуться к основным разделам сайта (и могут ли вообще)?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Доступность
Всем ли изображениям создан замещающий текст?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Насколько легко читать и воспринимать текст и заголовки всем посетителям (цвет, размер
и т. д.)?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
242 Проект 2. Веб-дизайн и планирование
Сопровождаются ли ссылки и активные области (карты ссылок) замещающим текстом?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Дизайн для мобильных устройств
Отображается ли веб-сайт должным образом на экранах целевых мобильных устройств?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Оптимизирован ли контент веб-сайта для размера экрана целевых мобильных устройств?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Стоит ли веб-сайт времени, потраченного на ожидание его загрузки на целевых мобильных
устройствах?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
План проекта
Название команды: ____________________________________ Дата: _______________
Имя клиента: ____________________________________________________________
Обдумайте этапы проекта и определите необходимое время и конечные сроки выполнения
каждого задания. Для каждого из этапов назначьте исполнителя, который будет нести ответственность за выполнение задания.
Цифровой дизайн: основы веб-дизайна Этапы проекта
Необходимое время
Дата выполнения
243
Исполнитель
Определение
Цели и целевая аудитория
Подборка контента и активов
(материалов)
Информация о контенте
и стиле
Требования к выпуску
Структура
Информационная архитектура
Проектная документация
Блок-схема
Каркасы
Дизайн
Композиции дизайна
Рецензирование дизайна
Редизайн
Производственная раскадровка
Каркас прототипа
Сборка и тестирование
Разработка сайта
Технический тест и составление списка ошибок
Тестирование юзабилити
Внесение исправлений
Тестирование исправленного
сайта
Итоговая презентация
Окончательная проверка
Запуск
Поисковая оптимизация (СЕО)
План продвижения
Размещение сайта
во Всемирной паутине
Общее время:
= Конечный срок
исполнения
244 Проект 2. Веб-дизайн и планирование
Советы по построению информационной архитектуры
Информационная архитектура (ИА) — это способ организации и маркировки структуры сайта
для поддержки юзабилити. Тщательное рассмотрение контента и организации сайта – первый
шаг к обеспечению эффективного опыта взаимодействия пользователей. Цель структурирования, называемого также информационным дизайном — наладить связь пользователей с контентом
и разработать интуитивно понятную организацию информации. Кроме того, информационная
архитектура занимается планированием сайта с функциональной точки зрения для облегчения
взаимодействия клиента и команды. В конечном счете, общая цель заключается в понимании
того, что ищут пользователи и предоставлении легкого доступа к контенту и информации. Это
гарантирует, что пользователи могут получить искомую информацию. Хорошо продуманная информационная архитектура похожа на оглавление книги. Она помогает ускорить поиск, повысить эффективность, удовлетворенность посетителей, и в целом, юзабилити сайта.
[Информационная архитектура] ... это создание последовательных и функциональных систем для навигации, графики, макета страницы и языков заголовков, так чтобы пользователь знал, куда идти, что делать, и стремился вернуться на сайт.
— Веб-обзор, Питер Монвилль
При производстве веб-проекта этап создания информационной структуры обычно часть
процесса разработки и предшествует созданию каркасов, композиций дизайна и прототипов.
В ходе создания хорошо продуманной информационной архитектуры, учитывайте следующие рекомендации.
Изучите потребности аудитории и пользователей
Кто ваша целевая аудитория? Каких пользователей вы пытаетесь привлечь на сайт? Эти важные
для начала проекта вопросы сообщают, как именно вам следует структурировать контент и информацию. Разрабатывая информационную архитектуру веб-сайта, важно учитывать аудиторию.
Определите четкие цели сайта
Всегда помните о целях, занимаясь разработкой информационной архитектуры. У каждого
сайта должна быть четкая цель: обучать, информировать, развлекать, продавать или любое
их сочетание. Постановка четких целей поможет вам структурировать эффективную информационную архитектуру.
Проведите инвентаризацию и подбор контента сайта
Вы можете разрабатывать новый веб-сайт с нуля или реорганизовывать существующий
сайт. В любом случае, важно провести инвентаризацию уже имеющегося контента и описать
контент, который будет создаваться. Контент — это ядро сайта, поэтому вам необходимо
знать, подходит ли он для вашей аудитории и поддерживает ли общие цели сайта. Другая
проблема — отображение контента на различных экранах и устройствах. Вы должны струк-
Цифровой дизайн: основы веб-дизайна 245
турировать контент настолько тщательно, чтобы он качественно отображался на самых разных компьютерах, планшетах и смартфонах.
Поделите контент сайта на логические группы
Контент и структура взаимосвязаны. Разбивка контента на логические группы помогает создать четкую и согласованную организацию и облегчает задачу определения информационной архитектуры.
Создайте карту сайта
Структура вашего сайта состоит из категорий и только что созданных логических групп.
Карта помогает взглянуть на проект «с высоты птичьего полета» и позволяет увидеть, как
сайт организован и как пользователи будут просматривать контент и информацию на сайте.
Карта становится планом, формирующим структуру сайта в процессе разработки. На карте
сайта должны быть показаны основные области контента и представлены все страницы в
пределах каждого раздела (рис. 2.8).
Главная страница
Учеба
Деятельность
учащихся
О нас
Учебное
заведение
Сотрудники
Библиотека
Спортивные
секции
Миссия
Новости
Преподаватели
Аудитория
Клубы
Руководство
Календарь
Администрация
Подразделения
Права
и обязанности
Справочник
Персонал
Расписание
Контакты
Волонтерам
Карты
Ссылки
Рис. 2.8. Пример карты веб-сайта учебного заведения
246 Проект 2. Веб-дизайн и планирование
Разработайте дизайн систем навигации
Четкая навигация помогает пользователям взаимодействовать с контентом на вашем сайте. Кнопки, ссылки и изображения можно использовать на всех страницах для ориентации
пользователя на сайте. Пользователи должны всегда быть способны сориентироваться, где
они находятся на сайте, куда им следует перейти и как вернуться на страницу, с которой они
пришли. Наличие последовательной навигации помогает пользователям ориентироваться и
не дает им потеряться. Когда пользователи перемещаются от страницы к странице, убедитесь, что они находят знакомые визуальные подсказки и средства навигации.
Резюме
Информационная архитектура, компонент этапа структурирования, готова. Вы создали
карту контента сайта и разработали набор элементов навигации. Не стоит недооценивать
значимость этапа структурирования, поскольку он крайне важен для успешной реализации
следующего этапа: проектирования и создания прототипа.
Проектная документация (руководство)
Сайт учебного заведения необходимо срочно модернизировать (рис. 2.9). Используйте этот
образец документации, чтобы разобраться, что представляет собой этап структурирования в
процессе веб-дизайна. Эту проектную документацию можно использовать как для создания новых
веб-сайтов, так и для переработки
уже существующего. В ходе этого
процесса, вам нужно будет выполнить следующие шаги: анализ потребностей, анализ требований и
творческий (креативный) дизайн.
При анализе потребностей основное внимание уделяется опыту
взаимодействия
пользователей
с веб-сайтом, определяются проблемы, цели, аудитория и предлагается подходящее решение.
В ходе анализа требований выявляются технические аспекты и
масштаб веб-сайта. На этапе креативного дизайна клиенту предлагается не менее двух вариантов
дизайна для рассмотрения, отбора
Рис. 2.9. Веб-сайт учебного заведения
и утверждения.
Цифровой дизайн: основы веб-дизайна 247
Цель данной документации по дизайну — обобщение шагов, необходимые для повышения
функциональности, юзабилити и доступности веб-сайта учебного заведения.
Обзор проекта
Проблемы на веб-сайте
xx Контент и навигация: Единственная страница сайта учебного заведения слишком длинная, и посетителям приходится неоднократно прокручивать колесико мыши, чтобы ее
просмотреть. В небольшом количестве тем содержится слишком много информации.
Например, раздел О нас можно разбить на подразделы Спортивные достижения, Деятельность и Волонтерам.
xx Юзабилити и доступность: На странице использованы старомодные HTML-таблицы и
якорные ссылки, в результате чего контент веб-страницы неверно отображается в целом
ряду веб-браузеров и на экранах мобильных устройств. К изображениям не добавлен
замещающий текст, необходимый для экранного диктора, чтобы можно было перевести
визуальное содержание изображения в подходящий формат для посетителей, использующих вспомогательные устройства.
xx Внешний вид: Сайт кажется скучным, цвета плохо сочетаются между собой, а изображения визуально не привлекательны.
Предлагаемое решение
xx Контент и навигация: Разделить существующую единственную страницу сайта учебного
заведения на несколько страниц, организованных по темам, имеющих четкую и единообразную структуру навигации.
xx Юзабилити и доступность: Разработать сайт с учетом требований веб-браузеров, портативных устройств и вспомогательных технологий. Процесс должен включать в себя поддержку изображений, мультимедийных элементов и динамической графики в современных веб-браузерах, а также на различных мобильных и вспомогательных устройствах.
xx Внешний вид: Изменить дизайн логотипа учебного заведения и выбрать два или три основных цвета для создания визуальной согласованности веб-сайта.
Задачи веб-сайта
Посетители придут на сайт в поиске информации об учебном заведении, его сотрудниках
и событиях, а также, чтобы узнать как можно принять участие в жизни данного заведения.
Сообщения веб-сайта
Учебное заведение заботится о своих учащихся, их родителях, сотрудниках, преподавателях
и сообществе.
Аудитория
Целевая аудитория сайта — родители, члены сообщества, администрация учебного заведения, преподаватели и учащиеся.
248 Проект 2. Веб-дизайн и планирование
Цели веб-сайта
Редизайн должен включать в себя следующие действия:
xx Упростить процесс обновления сайта, предоставления информации о новых учебных мероприятиях, а также изменениях в штате преподавателей и сотрудников.
xx Внедрить новый логотип учебного заведения.
xx Предоставить более подробную информацию о мероприятиях, спортивных секциях, организациях и отделениях, т.к. эти группы будут создавать собственные сайты.
xx Информировать общественность о событиях в учебном заведении с помощью календаря.
xx Облегчить доступ к категориям информации.
xx Привлечь аудиторию к более активному участию сообщества и родителей в жизни учебного заведения.
Требования к выпуску
Технические требования
Посетители, как правило, попадают на сайт, используя коммутируемое, проводное или беспроводное подключение к Интернету. Возможно, они пользуются такими распространенными браузерами, как Internet Explorer, Mozilla Firefox, Safari или пр. Посетители также,
возможно заходят на сайт с самых разных мобильных устройств, включая смартфоны или
планшетные компьютеры. Пользователи-инвалиды, вероятно, используют вспомогательные устройства, помогающие сделать сайт доступным. Для удовлетворения технических
требований и требований, связанных с обеспечением доступности, будут применены вебтехнологии, включая шаблонный дизайн, HTML5, и CCS3.
Контент сайта
Главная страница:
xx Логотип учебного заведения
xx Название учебного заведения
xx Ссылки на следующие области:
xx Учеба: подразделения, расписание, аудитории, библиотека
xx Деятельность учащихся: спортивные секции, клубы и организации
xx Учебное заведение: новости, календарь, справочник, волонтеры
xx Сотрудники: преподаватели, администрация, персонал
xx О нас: миссия, руководство, права и обязанности, контакты, карты, ссылки
Образец страницы контента:
xx Новый логотип учебного заведения
xx Навигация по сайту
xx Универсальная навигация для каждого из следующих разделов:
xx Учеба
xx Деятельность учащихся
Цифровой дизайн: основы веб-дизайна 249
xx О нас
xx Учебное заведение
xx Сотрудники
Структура сайта
Предлагаемая карта сайта показана на рис. 2.10.
Главная страница
Учеба
Деятельность
учащихся
О нас
Учебное
заведение
Сотрудники
Библиотека
Спортивные
секции
Миссия
Новости
Преподаватели
Аудитории
Клубы
Руководство
Календарь
Администрация
Подразделения
Права
и обязанности
Справочник
Персонал
Расписание
Контакты
Волонтерам
Карты
Ссылки
Рис. 2.10. Предлагаемая структура сайта
Креативный дизайн
На этапе креативного дизайна задается четкое направление дизайна, и оно может быть представлено в виде каркасов, вариантов цветов и шрифтов, а также композиций дизайна. Дизайнеры представляют планы творческого дизайна клиенту, а затем вносят изменения на основе его отзывов.
Варианты шрифтов и цветов
Вы можете создать вариант с собственными шрифтами и цветами.
Дизайн А
Шрифт и цветовая палитра в первой версии дизайна (рис. 2.11) обладают следующими качествами:
250 Проект 2. Веб-дизайн и планирование
Рис. 2.11. Дизайн А, варианты шрифтов и цветов
xx Основной синий цвет используется для области навигации и как часть логотипа.
xx Розовым цветом набран обычный текст на странице.
xx Черный и белый цвета используются в логотипе.
Дизайн Б
Шрифт и цветовая палитра во второй версии дизайна (рис. 2.12) обладают следующими
качествами:
Рис. 2.12. Дизайн Б, варианты шрифтов и цветов
Цифровой дизайн: основы веб-дизайна 251
xx Основной желто-оранжевый используется для логотипа и выделения текста.
xx Сине-черный градиент применяется в качестве фона для области навигации на всех
страницах.
xx Черным и белым будет текст на странице: белый текст на сине-черном фоне и черный
текст на белом фоне.
Образцы композиций дизайна
Два примера композиции дизайна были созданы на основе шрифтов и цветовой палитры,
представленных ранее в этом разделе.
Дизайн А
Вариант А дизайна главной страницы веб-сайта учебного заведения (рис. 2.13) содержит
всплывающие меню для управления всем контентом и ссылки в области основной навигации. Синий цвет в нем используется в области навигации, а сочетание синего и розового — в
логотипе. Основной текст на странице такого же розового цвета, как и логотип — для привлечения внимания посетителя. Страница контента будет выглядеть так же, как главная,
с такой же панелью навигации в верхней части. Для этого дизайна, команде потребуется
создать один шаблон и использовать его по всему сайту. Этот проект приводит сайт к единообразию, но посетителям становится труднее понять, когда они находятся на странице
контента, а когда на главной странице.
Рис. 2.13. Композиция дизайна, вариант А
252 Проект 2. Веб-дизайн и планирование
При рецензировании этого дизайна необходимо обратить внимание на следующее:
xx Согласованность: Сайт согласованный, так как для его дизайна использованы только три
цвета и на каждой странице присутствуют логотип и нижний колонтитул.
xx Простота в использовании: всплывающие меню упрощают использование сайта, поскольку посетители могут легко и быстро перейти к конкретной информации.
xx Универсальная навигация: Универсальная схема навигации повторяется на каждой странице.
xx Макет: В макете добавлены пробелы между логотипом и нижним колонтитулом, чтобы
сосредоточить внимание посетителей на контенте в середине страницы.
В этой композиции дизайна логотип и цветовая палитра использованы для создания простого сайта, который мог бы привлечь несколько различных аудиторий.
Дизайн Б
В варианте Б дизайна главной страницы веб-сайта учебного заведения (рис. 2.14) вместо
всплывающего меню используется крупное меню навигации. Кроме того, добавлен опросник, чтобы побудить посетителей узнать больше об учебном заведении. Основные цвета и
логотип используются по назначению.
Рис. 2.14. Композиция дизайна главной страницы, вариант Б
Цифровой дизайн: основы веб-дизайна 253
Этот пример страницы контента (рис. 2.15) похож на домашнюю страницу с логотипом, но
содержит свернутую основную панель навигации. Кроме того, текстовые ссылки в нижней
части делают страницу более доступной. Согласованность сайту придает логотип вверху и в
области нижнего колонтитула страницы.
Рис. 2.15. Композиция дизайна страницы контента, вариант Б
При рецензировании этого дизайна необходимо обратить внимание на следующее:
xx Согласованность: Цвета на этом сайте применяются согласованно, а логотип присутствует на каждой странице.
xx Универсальная навигация: Схема навигации представляет собой большое меню на главной странице и повторяется в более простой форме на всех страницах контента.
xx Простота в использовании: Имеется основная схема навигации по сайту, а также текстовая навигация в нижней части страницы для посетителей, которые отключили просмотр
изображений.
xx Макет: Макет привлекает внимание посетителей к белой области между логотипом и
нижним колонтитулом.
В этом варианте дизайна шрифты и цвета используются, чтобы сделать сайт более увлекательным, в духе учащихся учебного заведения.
254 Проект 2. Веб-дизайн и планирование
Проектная документация (бланк)
Имя учащегося: ____________________________________ Дата: __________________
URL-адрес: ______________________________________________________________
Название веб-сайта: _______________________________________________________
Обзор проекта
Перечислите проблемы, существующие на веб-сайте и предлагаемые пути их решения. Если
возможно, приведите примеры других веб-сайтов, которые эффективно справляются с перечисленными проблемами.
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Перечислите цели веб-сайта:
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Укажите задачи веб-сайта:
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Перечислите сообщения сайта:
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Приведите краткое описание целевой аудитории этого сайта:
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Цифровой дизайн: основы веб-дизайна 255
Требования к выпуску
Перечислите требования к выпуску финальной версии этого сайта (поддержка браузеров,
поддержка устройств, минимальная скорость соединения с Интернетом). Обязательно укажите ограничения, налагаемые на контент сайта требованиями к выпуску.
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Контент веб-сайта
Приведите подробное описание главной страницы и страницы контента, в том числе стандартных структур на страницах. Обязательно укажите использование таблиц, заголовков и
отступов для поддержания согласованности структуры и иерархии страниц.
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Структура веб-сайта
Нарисуйте карту сайта.
256 Проект 2. Веб-дизайн и планирование
Креативный дизайн
Используйте пространство ниже для записи полученных в результате «мозгового штурма»
идей, относительно использования шрифтов и цветовой палитры, а также для набросков
композиций дизайна. Возьмите эти исходные визуальные идеи за основу цифровых каркасов и композиций дизайна веб-сайта.
Цифровой дизайн: основы веб-дизайна 257
Принципы и нормы авторского права
Авторское право — это защита интеллектуальной собственности.
Интеллектуальная собственность представляет собой что-либо, написанное или созданное
человеком. Это может быть музыка, текст, картины, фотографии, звуки и т.д.
Положение о законном использовании входит в состав закона об авторском праве. В нем утверждается, что ограниченные части материала могут быть использованы без письменного
разрешения для определенных целей, таких как новостное сообщение или учебная работа.
Однако в нем не раскрывается понятие «ограниченных частей», так что удостоверьтесь, что
вы не злоупотребляете материалом. Данное положение требует ссылаться на автора или
правообладателя любого используемого вами материала.
Creative Commons — некоммерческая организация, которая создала бесплатные для использования публичные лицензии, с помощью которых авторы и правообладатели могут распространять свои произведения более широко и свободно, а потребители контента легально и
более просто пользоваться этими произведениями.
Спектр лицензий четырех условий предоставляют набор «базовых прав», которые позволяют распространять работы, защищенные авторским правом, по всему миру, без обмена и на
безвозмездной основе. Четыре условия включают в себя: атрибуцию (требование указывать
автора произведения), некоммерческое использование (запрет на использование произведения в целях получения прибыли), запрет на создание производных произведений и сохранение условий (требование распространять производные произведения только на условиях лицензии исходного произведения). Лицензии компании Creative Commons разрешают
сочетать данные условия. Для получения дополнительной информации посетите веб-сайт
creativecommons.org.
Производные произведения — материалы, защищенные авторским правом, которые были
переработаны или изменены. Такой материал защищен законом об авторском праве. Если
вы измените фотографию, защищенную авторским правом с помощью компьютерных программ, данная фотография все равно будет считаться защищенной и ее запрещено использовать без письменного разрешения.
Академические стандарты для материалов, защищенных авторским правом, выше, чем для
других. Так как ученые и исследователи реализуют множество различных замыслов и ответственны за сообщение этих идей миру, эти сообщения должны удовлетворять более высоким
стандартам достоверности. Они должны ссылаться на автора не только при цитировании
точного высказывания другого человека, но и при цитировании идей, которые выражены
этими словами. Как исследователь, вы не можете перефразировать сказанное другим и не
указать ссылку на автора.
Библиографии — это списки источников, которые были использованы в научных исследованиях. При использовании источников во Всемирной паутине для научных исследований
или для проектирования, вы должны ссылаться на автора, где это необходимо. Зачастую
люди, которые используют изображения из Всемирной паутины для публикации на собственной веб-странице, создают список авторов изображений вместо библиографии.
258 Проект 2. Веб-дизайн и планирование
Нормы авторского права
1. Материалы, защищенные авторским правом, не могут быть использованы без письменного разрешения автора материала (или его правообладателя).
2. Материал может быть защищен, даже если на нем не отображается символ ©. Даже если
нет упоминания об авторских правах, следует считать, что все материалы из другого источника защищены.
3. Наказание за нарушение законов об авторских правах может варьироваться от легкого
до серьезного. При нарушении закона об авторском праве вы можете просто получить сообщение от автора по электронной почте с просьбой прекратить использование материала.
Если материал опубликован на веб-сайте, веб-мастер может закрыть ваш сайт. Также вы можете навлечь на себя судебное разбирательство.
4. Чтобы убедиться, что вами не нарушен какой-либо закон об авторских правах, важно
сделать следующее:
xx Написать и отправить электронное письмо автору или правообладателю и попросить
разрешение на использование материала. Не использовать его, пока не получено разрешение;
xx Следовать инструкциям на сайте, касающимся использования материала. Вас могут попросить создать ссылку на вашей странице или предупредить автора или правообладателя;
xx Самое главное: не использовать материал без письменного разрешения.
5. Чтобы заявить авторские права на ваш собственный материал, уведомление об авторском праве на визуально воспринимаемый материал должно содержать один или несколько
из следующих элементов:
xx Символ © (буква С в круге), или слово «Copyright» или «Авторские права»;
xx Год первой публикации;
xx Имя правообладателя; (Пример: © 2012 Adobe Systems, Inc);
6. Уведомление об авторском праве для грампластинок и звукозаписей должно содержать
три элемента:
xx Символ (буква Р в круге)
xx Год первой публикации;
xx Имя правообладателя;
7. Уведомление об авторских правах должно быть размещено таким образом, чтобы «дать
разумное уведомление о претензии на авторское право».
Для более подробной информации об авторских правах посетите веб-сайт www.copyright.
gov.
Цифровой дизайн: основы веб-дизайна 259
Обзор рабочего пространства программы
Adobe Fireworks CS6
В этом руководстве вы узнаете, как:
xx Работать с рабочим пространством Adobe Fireworks CS6: инструментами, окнами документа, меню, палитрами и панелями.
xx Настроить рабочее пространство.
xx Изменить масштаб документа.
xx Перемещаться по документу с помощью инструментов и палитр.
Изучение рабочего пространства
Когда вы запускаете программу Adobe Fireworks в первый раз и открываете документ, рабочее пространство включает в себя панель приложения, панель инструментов, инспектор
свойств, меню и другие палитры (рис. 2.16). В центре рабочего пространства расположено
окно документа. Панель инструментов, расположенная в левой части рабочего пространства, разделена на поименованные категории, содержащие группы инструментов такие, как
Растр. (Bitmap), Вектор (Vector) и Web.
Переключатель рабочих пространств
Панель
приложения
Панель
инструментов
Инспектор
свойств
Рис. 2.16. Рабочее пространство программы Adobe Fireworks CS6
Палитры
Окно документа
260 Проект 2. Веб-дизайн и планирование
Инспектор свойств отображается под окном документа и первоначально отображает свойства документа Содержимое данной панели обновляется по мере того, как вы работаете с документом. При выборе инструмента, в инспекторе свойств отображаются свойства и параметры этого инструмента, при выборе объекта в документе, на панели отображаются свойства
и параметры объекта.
Палитры изначально сгруппированы с правой стороны рабочего пространства.
Для создания и управления документами и файлами в программе Adobe Fireworks, используются различные элементы рабочего пространства такие, как палитры, панели и окна. Любое расположение этих элементов называется рабочим пространством. Рабочие пространства программ пакета Adobe Creative Suite 6 выглядят одинаково, чтобы вам было проще
переходить из одного приложения в другое. Вы также можете адаптировать каждое приложение, к тому, как вам привычно работать, выбрав одно из множества заданных рабочих
пространств или создав собственные настройки.
xx Панель приложения в верхней части о содержит переключатель рабочих пространств,
меню (только для Windows) и прочие средства управления приложениями. В операционной системе OS X, в некоторых программах, вы можете отобразить или скрыть эту панель, выбрав команду меню Окно ⇒ Панель приложения (Window ⇒ Application Bar).
xx Окно документа отображает файл, с которым вы работаете. Окна документов могут располагаться как вкладки, а в некоторых случаях, сгруппированы и закреплены.
xx Панель инструментов содержит инструменты для создания и редактирования изображений, иллюстраций, элементов страницы, и так далее. Инструменты со схожими функциями сгруппированы.
xx Инспектор свойств отображает параметры и свойства выбранного элемента.
xx Палитры помогают контролировать и изменять проекты. В качестве примера палитр
можно привести Слои (Layers), Выровнять (Align) и Библиотека документов (Document
Library). Палитры могут быть сгруппированными, плавающими или закрепленными.
Настройка рабочего пространства
Пользовательское рабочее пространство можно создать, перемещая окна документа и палитры. Кроме того, рабочие пространства можно сохранять и переключаться между ними.
Сохранение пользовательского рабочего пространства
1. Переместите элементы интерфейса программы Adobe Fireworks и манипулируйте ими
в соответствии с вашими потребностями (рис. 2.17).
2. В меню переключателя рабочих пространств, выберите вариант Сохранить текущие
(Save Current) (рис. 2.18). Откроется диалоговое окно, в котором необходимо ввести название нового рабочего пространства (рис. 2.19).
3. Введите название рабочего пространства.
4. Нажмите кнопку OK, чтобы закрыть диалоговое окно.
Цифровой дизайн: основы веб-дизайна 261
Рис. 2.17. Макет пользовательского рабочего пространства
5. Щелкните мышью по переключателю рабочих пространств. Обратите внимание, что
название нового рабочего пространства доступно в меню переключателя среди предустановленных рабочих пространств. Даже если вы вносите изменения, можно вернуться к сохраненному рабочему пространству, выбрав его в меню или с помощью переключателя рабочих
пространств (рис. 2.20).
Рис. 2.18. Переключатель рабочих
пространств
Рис. 2.19. Диалоговое окно нового рабочего
пространства
262 Проект 2. Веб-дизайн и планирование
Рис. 2.20. Выбор сохраненного рабочего пространства
с помощью переключателя рабочих пространств
Работа с файлами в программе Adobe Fireworks
В общих чертах, в программе Adobe Fireworks вы открываете документы и графические файлы точно так же, как и в других приложениях. Новые документы в Adobe Fireworks сохраняются в формате Portable Network Graphic (PNG). PNG — собственный формат файлов
программы Adobe Fireworks.
Изображения, созданные в программе Adobe Fireworks можно экспортировать или сохранять в различных веб и графических форматах. Независимо от оптимизации и выбранных
настроек экспорта, исходный файл Adobe Fireworks в формате PNG файл сохраняется, что
позволяет с легкостью редактировать его впоследствии.
Создание нового документа
1. Выберите команду меню Файл ⇒ Создать (File ⇒ New). Откроется диалоговое окно
Новый документ (New Document) (рис. 2.21).
2. По желанию измените любые из заданных значений:
xx Размер документа.
xx Разрешение документа.
xx Цвет холста:
Белый цвет (White) устанавливает белый цвет фона холста.
Прозрачный (Transparent) создает невидимый фон.
Пользовательский (Custom) задействует
палитру цветов, чтобы установить пользовательский цвет фона.
3. Нажмите кнопку OK.
Рис. 2.21. Диалоговое окно Новый документ
Цифровой дизайн: основы веб-дизайна 263
Обзор панели инструментов
Панель инструментов в программе Adobe Fireworks состоит из шести категорий: Выделить (Select), Растр (Bitmap), Вектор (Vector), Web, Цвета (Colors) и Просмотр (View)
(рис. 2.22).
При выборе инструмента, в инспекторе свойств отображаются его параметры и настройки.
Вы можете открепить панель инструментов и разместить в соответствии с предпочитаемым
расположением окон, палитр и панелей.
Инструмент Указатель
Инструмент Масштабирование
Инструмент Выделение в группе
Инструмент Кадрирование
Инструмент Область
Инструмент Лассо
Инструмент Волшебная палочка
Инструмент Кисть
Инструмент Карандаш
Инструмент Ластик
Инструмент Размытие
Инструмент Штамп
Инструмент Линия
Инструмент Перо
Инструмент Прямоугольник
Инструмент Текст
Инструмент Свободное перо
Инструмент Нож
Инструмент Прямоугольная
активная область
Кнопка Скрыть фрагменты
и активные области
Фрагмент
Кнопка Показать фрагменты и активные
области
Инструмент Пипетка
Индикатор Цвет обводки
Индикатор Цвет заливки
Кнопки Задать цвета обводки/
заливки по умолчанию,
Нет обводки или заливки и
Поменять цвета обводки/заливки
Кнопка Стандартный режим
Инструмент Рука
Кнопка Полноэкранный режим с меню
Кнопка Полноэкранный режим
Инструмент Масштаб
Рис. 2.22 Панель инструментов
264 Проект 2. Веб-дизайн и планирование
Чтобы выбрать инструмент, щелкните по нему мышью на панели инструментов. Панель
инструментов также содержит скрытые инструменты. На наличие скрытых инструментов
указывает треугольник справа от значка инструмента. Нажав и удерживая кнопку мыши на
значке инструмента, раскройте меню скрытых инструментов.
При установке указателя мыши на инструмент, появится его название и соответствующее
сочетание клавиш (для быстрого выбора данного инструмента) — это называется подсказка.
Использование инструмента Масштаб для навигации по документу
Инструмент Масштаб (Zoom) можно использовать для увеличения или уменьшения документа.
Изменение масштаба документа
1. Откройте документ и обратите внимание на уровень масштаба в нижней части окна документа (рис. 2.23). Здесь указано текущее увеличение вида изображения или уровень масштабирования.
2. Выберите инструмент Масштаб (Zoom), щелкнув мышью по его значку на панели инструментов (рис. 2.24) или нажав клавишу Z (клавиша для выбора данного инструмента).
3. Щелкните мышью в любой позиции окна документа. Масштаб изображения изменится
в соответствие с предустановленной процентной величиной. Позиция, в которой вы щелкнули мышью, станет центром увеличенного вида.
Инструмент
Масштаб
Рис. 2.23. Уровень масштабирования
Рис. 2.24. Панель инструментов
Цифровой дизайн: основы веб-дизайна 265
4. С помощью инструмента Масштаб (Zoom), создайте рамку выделения, чтобы охватить
область документа (рис. 2.25). Выделенная область увеличится и заполнит все окно документа.
5. Чтобы уменьшить масштаб, щелкните мышью, удерживая клавишу Alt (Windows) или
Option (OS X) (рис. 2.26).
Рис. 2.25. Выделение прямоугольной
области
Рис. 2.26. Уменьшение масштаба
документа
Навигация по документу с помощью
инструмента Рука
Инструмент Рука (Hand) перемещает изображение в окне документа. Это полезно,
если вы хотите увидеть часть изображения, находящуюся в данный момент вне
поля зрения.
Использование инструмента Рука
1. Увеличивайте область документа,
пока часть изображения не окажется вне
поля зрения (рис. 2.27). Когда часть документа перестанет быть видимой в окне документа, появятся полосы прокрутки.
2. Выберите инструмент Рука (Hand)
на панели инструментов (рис. 2.28).
3. С помощью инструмента Рука (Hand)
перетащите документ, чтобы просмотреть
различные его части (рис. 2.29).
Рис. 2.27. Окно документа с полосами прокрутки
266 Проект 2. Веб-дизайн и планирование
Инструмент Рука
Рис. 2.28. Панель
инструментов
Рис. 2.29. Использование инструмента Рука
для перемещения по документу
Использование инспектора свойств
Инспектор свойств контекстно-зависим. Эта панель отображает свойства и параметры выбранного в данный момент объекта, инструмента или документа. По умолчанию, инспектор
свойств закреплен в нижней части рабочего пространства.
Инспектор свойств может быть открыт на половину своей высоты и показывать две строки
свойств, или полностью и отображать четыре строки. Кроме того, можно полностью свернуть инспектор свойств, оставив его в рабочем пространстве. Для переключения между этими тремя состояниями дважды щелкните мышью по вкладке инспектора (панели) или один
раз — по стрелке в левом верхнем углу.
Различные объекты и инспектор свойств
1. Открыв документ, выберите инструмент Указатель (Pointer) на панели инструментов,
а затем выделите объект в документе. Обратите внимание, что информация в инспекторе
свойств содержит тип изображения, размер и положение объекта (рис. 2.30).
2. Затем выберите инструмент Текст (Type) (и выделите область текста, если таковая имеется). Содержимое инспектора свойств изменится, и отобразятся элементы управления, позволяющие форматировать текст (рис. 2.31).
Цифровой дизайн: основы веб-дизайна 267
Рис. 2.30. Инспектор свойств отображает характеристики растрового изображения
Рис. 2.31. Инспектор свойств отображает характеристики текста
Работа со слоями
Слои разделяют документ Adobe Fireworks на отдельные плоскости, как если бы элементы
иллюстрации были нарисованы на отдельных листах прозрачной пленки. Каждый объект в
документ находится на слое (рис. 2.32). Вы можете создать слой перед тем, как начнете рисовать или добавлять их по мере необходимости. Холст находится под всеми слоями и сам
по себе слоем не является.
Рис. 2.32. Модель слоев в программе Adobe Fireworks
Палитра Слои (Layers) отображает текущее состояние всех слоев на странице документа
(рис. 2.33). Активный слой выделен. Порядок наложения — это порядок, в котором объекты
отображаются в документе. Он определяет, как объекты одного слоя перекрываются объектами другого слоя. В программе Adobe Fireworks недавно созданные слои располагаются
сверху стопки слоев. Вы можете изменить порядок слоев и объектов в слоях, а также создать
вложенные слои и переместить объекты на них.
На палитре Слои (Layers) также отображаются маски и элементы управления непрозрачностью и режимами наложения.
268 Проект 2. Веб-дизайн и планирование
Развернуть/
Свернуть слой
Показать/
Скрыть слой
Активны слой
Заблокировать/
разблокировать слой
Удалить выделение
Создать или дублировать
слой
Создать
вложенный слой
Новое растровое
изображение
Рис. 2.33. Палитра Слои
Создание каркасов
Каркас — это визуальное руководство, представляющее основные элементы веб-сайта. Каркасы используются для описания концептуальной структуры или информационной архитектуры сайта или приложения. Хорошо продуманный каркас включает в себя три ключевых
элемента: дизайн интерфейса, систему навигации, и основные области контента (рис. 2.34).
Функциональные отношения между этими элемента выделяются, в то время как подробные
рисунки, типографические стили и цвета обычно не обозначаются.
Программа Adobe Fireworks — идеальный инструмент для верстки каркасов. Используйте следующие рекомендации, которые помогут вам создать каркас мини-приложения или веб-сайта.
Процесс создания каркасов
В описании процесса ниже изложены общие шаги по разработке каркаса с нуля. В результате
получается полностью функциональный интерактивный прототип.
1. Создание эскиза на бумаге
От руки на бумаге набросайте эскиз главной страницы или экрана. Включите в него все
основные элементы дизайна макета, которые вы хотели бы видеть на нескольких страницах
или экранах, к примеру, навигацию, области контента, заголовки и логотипы. Рассмотрим
эти вопросы:
xx Графика. Какие изображения вы включите? Где будут размещаться графические элементы на странице или экране?
Цифровой дизайн: основы веб-дизайна 269
Рис. 2.34. Вариант каркаса
xx Текст. Какой текст вы добавите? Где будет располагаться текст на странице или экране?
xx Навигация. Согласно блок-схеме, с какими страницами или экранами будет напрямую
связана ваша главная страница (какие пункты меню)? Где вы расположите эти ссылки
на главной странице или экране?
2. Сканирование и импорт проектов
С помощью сканнера создайте цифровую копию эскиза каркаса. Импортируйте ее в программу Adobe Fireworks.
3. Планирование общих элементов дизайна
Опираясь на эскиз, набросайте основные области дизайна каркаса с помощью основных инструментов рисования и направляющих в программе Adobe Fireworks.
4. Создание нескольких каркасов страницы или экрана
На палитре Страницы (Pages) создайте нужное количество страниц или экранов для исходного дизайна. По мере развития вы можете добавлять или удалять страницы или экраны по
необходимости.
5. Уникальные элементы на отдельных страницах или экранах
На каждую страницу добавьте уникальный дизайн, средства навигации или элементы вебформы. На палитре Общая библиотека (Common Library) вы сможете найти множество
кнопок, текстовых полей и раскрывающихся меню, которые ускорят процесс дизайна.
270 Проект 2. Веб-дизайн и планирование
6. Имитация навигации с помощью ссылок
С помощью таких веб-объектов, как фрагменты, активные области или кнопки навигации,
свяжите ссылками различные страницы или экраны ваших прототипов.
7. Экспорт готового интерактивного каркаса
Программа Adobe Fireworks предлагает несколько форматов вывода вашего прототипа, каждый из которых сохраняет гипертекстовые ссылки для навигации по прототипу.
Создание каркасов с помощью программы
Adobe Fireworks CS6
С помощью программы Adobe Fireworks вы создадите базовый двухстраничный интерактивный каркас.
Инструкция, шаги с 1 по 3
В этом разделе вы набросаете каркас, отсканируете и импортируете его в программу Adobe
Fireworks, а затем распланируете общие элементы дизайна.
Создание каркаса из эскиза
1. Нарисуйте эскиз каркаса на бумаге. Включите в него все основные компоненты такие,
как навигация, области контента, заголовки и логотипы.
2. Отсканируйте эскиз в графический файл на компьютере.
3. Запустите программу Adobe Fireworks и создайте новый документ шириной 1024 пиксела и высотой 700 пикселов.
Примечание. Эти стандартные размеры веб-страницы. Размеры могут отличаться, если вы разрабатываете мини-приложение.
4. Откройте палитру Слои (Layers) и создайте
или переименуйте два слоя:
xx Каркас
xx Эскиз каркаса
Убедитесь, что слой Эскиз каркаса расположен
под слоем Каркас (рис. 2.35).
5. Выделив слой Эскиз каркаса, выберите команду меню Файл ⇒ Импорт (File ⇒ Import). Откроется диалоговое окно Импорт (Import).
6. Выберите файл, который вы сканировали в
шаге 2, и нажмите кнопку Открыть (Open).
Рис. 2.35. На палитре Слои расположены
слои Каркас и Эскиз каркаса
Цифровой дизайн: основы веб-дизайна 271
7. Щелкните мышью по левому верхнему углу холста, чтобы поместить туда импортированный эскиз. Необходимо масштабировать рисунок в соответствии с размером холста.
Щелкните мышью по импортированному эскизу, чтобы его выделить.
8. Эскиз может выходить за пределы холста или быть меньше размера холста.
9. В инспекторе свойств щелкните мышью по кнопке Сохранить пропорции (Constrain
Proportions) (рис. 2.36).
Текстовое поле Ширина
выделенной области
Кнопка Сохранить
пропорции
Положение
по осям X и Y
Рис. 2.36. Инспектор свойств
10. В текстовом поле Ширина выделенной области (Width Pixel Dimension) укажите значение 1024 и убедитесь, что значения координат X и Y установлены равными 0.
11. Нажмите клавишу Tab. Изображение изменится, чтобы соответствовать ширине холста.
12. На палитре Слои (Layers) заблокируйте слой Эскиз каркаса. Он станет фоном, на который вы будете накладывать элементы каркаса.
13. Выделите слой Каркас.
14. Убедитесь, что отображаются линейки и направляющие. Если нет, выберите команды
меню Просмотр ⇒ Линейки (View ⇒ Rulers) и Просмотр ⇒ Направляющие ⇒ Показать
направляющие (View ⇒ Guides ⇒ Show Guides).
15. Для создания горизонтальной или вертикальной направляющей, перетащите указатель
мыши, удерживая нажатой кнопку мыши, от соответствующей точки на линейке к краю области логотипа, области основного контента и первой кнопки навигации (рис. 2.37).
Примечание. Цвет направляющей можно изменить, чтобы сделать его более заметным на различных фонах. Для изменения цвета направляющей, выберите команду меню Редактирование ⇒
Установки (Edit ⇒ Preferences) (Windows) или Fireworks ⇒ Установки (Fireworks ⇒ Preferences) (OS
X) и категорию Направляющие и сетки (Guides And Grids).
16. Выберите команду меню Просмотр ⇒ Направляющие ⇒ Заблокировать направляющие (View ⇒ Guides ⇒ Lock Guides). Блокировка направляющих не позволит случайно
переместить их.
17. Выберите команду меню Просмотр ⇒ Направляющие ⇒ Привязка к направляющим
(View ⇒ Guides ⇒ Snap To Guides). Функция привязки позволяет выравнивать объекты
272 Проект 2. Веб-дизайн и планирование
Рис. 2.37. Импортированный эскиз с добавленными направляющими
точно по направляющим, если объекты находятся недалеко от них. В категории Направляющие и сетки (Guides And Grids) диалогового окна Установки (Preferences) направляющих
и сеток можно указать, насколько близким должно быть расстояние привязки.
18. На панели инструментов выберите инструмент Прямоугольник (Rectangle).
19. В инспекторе свойств внесите следующие изменения (рис. 2.38):
а. В раскрывающемся списке индикатора Заливка (Fill) выберите вариант Без заливки
(None).
б. В раскрывающемся списке индикатора Обводка (Stroke) выберите вариант Стандартный ⇒ Мягкая линия (Basic ⇒ Soft Line).
в. Установите темно-серый цвет обводки.
г. Установите ширину обводки 10 пикселов.
Параметр
Без заливки
Рис. 2.38. Параметры инструмента Прямоугольник в инспекторе свойств
20. Используя направляющие, создайте прямоугольник вокруг области основного контента и области логотипа эскиза (рис. 2.39). Когда вы будете рисовать, прямоугольники привяжутся к направляющим.
Цифровой дизайн: основы веб-дизайна 273
Рис. 2.39. Прямоугольники, созданные
вокруг элементов страницы
Рис. 2.40. Вокруг кнопки навигации создан
прямоугольник со скругленными углами
21. Выберите инструмент Прямоугольник со скругленными углами (Rounded Rectangle)
на панели инструментов.
22. Создайте прямоугольник вокруг первой кнопки навигации каркаса (рис. 2.40).
23. С помощью инструмента Указатель (Pointer) выделите прямоугольник со скругленными
углами. Перетащите его влево, удерживая клавишу Alt (Windows) или Option (OS X), чтобы
создать копию прямоугольника, и установите ее над второй кнопкой навигации каркаса.
Примечание. Может появиться диалоговое окно с предупреждением, что изменение вложенных
элементов автофигур может привести к непредсказуемым результатам. Установите флажок Больше
не показывать (Don’t Show Again) и закройте окно, нажав кнопку OK.
24. Выберите команду меню Редактирование ⇒ Создать дубликат (Edit ⇒ Repeat Duplicate).
Это действие создает вторую копию, оставляя одинаковое расстояние между копиями.
25. Продолжайте создавать дубликаты, пока не получите необходимое количество кнопок
навигации согласно эскизу (рис. 2.41).
Теперь пришло время добавить текстовые метки.
26. Выберите команду меню Выделение ⇒ Отменить выделение (Select ⇒ Deselect).
27. На панели инструментов выберите инструмент Текст (Type).
28. В инспекторе свойств щелкните мышью по индикатору заливки и выберите темный
оттенок. Нажмите кнопку Выравнивание по центру (Center Alignment) и присвойте параметру Размер (Text Size) значение 30.
Рис. 2.41. Три копии скругленных кнопок
274 Проект 2. Веб-дизайн и планирование
29. Однократно щелкните мышью по области логотипа и введите текст Логотип.
30. Убедитесь в том, что «Быстрые» направляющие (Smart Guides) отображаются. Если
нет, выберите команду меню Просмотр ⇒ «Быстрые» направляющие ( View ⇒ Smart
Guides), а затем активируйте параметры Показать «быстрые» направляющие (Show Smart
Guides) и Привязка к «быстрым» направляющим (Snap To Smart Guides).
31. Перетащите текстовый блок в центр прямоугольника и добавьте текстовые метки к
остальным кнопкам навигации и в области основного контента. ««Быстрые» направляющие (Smart Guides) помогут вам создать, выровнять, редактировать и преобразовывать объекты с учетом их положения относительно других элементов.
32. Сбросьте флажок напротив пункта меню Просмотр ⇒ Направляющие ⇒ Показать направляющие (View ⇒ Guides ⇒ Show Guides).
33. Как только вас устроит положение текста и прямоугольных элементов, скройте слой
Эскиз каркаса. Когда слой с эскизом скрыт, ваше изображение должно выглядеть так, как
показано на рис. 2.42.
Рис. 2.42. Готовый эскиз каркаса
34. Выберите команду меню Файл ⇒ Сохранить как (File ⇒ Save As) и сохраните файл в
формате PNG.
Инструкция, шаги 4 и 5
Теперь, когда вы создали простой каркас страницы или экрана, следующий шаг — создать
несколько страниц или экранов с различным контентом. Программа Adobe Fireworks CS6
Цифровой дизайн: основы веб-дизайна 275
позволяет создать столько страниц или экранов, сколько необходимо, содержащих общие и
уникальные для каждой страницы элементы.
Создание нескольких страниц или экранов на основе каркаса
1. Откройте палитру Страницы (Pages) (команда меню Окно ⇒ Страницы (Window ⇒
Pages)), если она не отображается в правой части рабочего пространства (рис. 2.43).
Меню параметров
страницы
Кнопка Создать/
дублировать слой
Рис. 2.43. Палитра Страницы
2. Щелкните правой кнопкой мыши (Windows) или щелкните мышью, удерживая клавишу Control (OS X), по текущей странице на палитре Страницы (Pages) и выберите команду
Задать в качестве главной страницы (Set As Master Page) из контекстного меню.
3. В нижней части палитры Страницы (Pages) дважды щелкните мышью по значку Создать/дублировать слой (Add Page), чтобы добавить две пустые страницы. На новых страницах в качестве фона отображается главная страница.
4. Дважды щелкните мышью по названиям новых страниц, чтобы их переименовать, присвоив, соответственно, имена Домашняя и Магазин (или любое другое имя, которое вы будете использовать для второй страницы каркаса).
5. Перейдите на страницу Домашняя, выбрав ее на
палитре Страницы (Pages) (рис. 2.44).
6. Выбрав инструмент Текст (Type), добавьте заголовок страницы в верхней части области основного
контента.
7. Перейдите на страницу магазина, выбрав ее на
палитре Страницы (Pages) и также с помощью инструмента Текст (Type), добавьте заголовок страницы в верхней части области основного контента, как
и на странице Домашняя.
8. Выберите
инструмент
Прямоугольник
(Rectangle) на панели инструментов.
Рис. 2.44. Палитра Страницы
с выбранной страницей Домашняя
276 Проект 2. Веб-дизайн и планирование
9. В инспекторе свойств выберите нейтральные цвета заливки и обводки.
10. Нарисуйте прямоугольник в области основного контента второй страницы, рядом с заголовком страницы. Этот прямоугольник служит заполнителем для изображения на странице магазина или контента текстовой страницы (рис. 2.45).
Рис. 2.45. Добавление заполнителя для контента на уровне страницы
11. Выберите команду меню Файл ⇒ Сохранить (File ⇒ Save).
Инструкция, шаг 6
В этом разделе вы добавите активные области для создания кнопок навигации или ссылок
между двумя страницами вашего прототипа.
Добавление навигации к каркасу
1. Перейдите на главную страницу, выбрав ее на палитре Страницы (Pages).
2. На панели инструментов выберите инструмент Прямоугольная активная область
(Rectangle Hotspot) (рис. 2.46).
3. Создайте активную область поверх прямоугольника Логотип.
Цифровой дизайн: основы веб-дизайна 277
Инструмент
Прямоугольная
активная
область
Рис. 2.46. Панель инструментов
Рис. 2.47. Создание активных областей
4. Создайте активную область поверх второго прямоугольника, со скругленными углами
(рис. 2.47).
5. Используя инструмент Указатель (Pointer), выберите первую активную область.
6. В инспекторе свойств в раскрывающемся списке Ссылка (Link) укажите значение
home.htm (рис. 2.48).
Раскрывающийся
список Ссылка
Рис. 2.48. Инспектор свойств
7. Выделите вторую активную область и укажите в раскрывающемся списке Ссылка
(Link) инспектора свойств значение shop.htm (или имя файла вашей второй страницы).
Так как активные области находятся на главной странице, при экспорте файла из программы
Adobe Fireworks в интерактивный PDF-файл, каждая страница будет связана с другими.
8. Выберите команду меню Файл ⇒ Сохранить (File ⇒ Save).
Инструкция, шаг 7
Экспортируйте интерактивный прототип вашего каркаса в формат PDF и в функциональный HTML-файл (рис. 2.49).
Интерактивный PDF-файл идеально подходит для просмотра клиентом потому, что можно
просмотреть весь веб-сайт или мини-приложение и вносить замечания по мере необходимости с помощью инструментов, доступных в программе Adobe Acrobat.
Программа Adobe Fireworks создает чистый HTML-файл, который может быть открыт
в большинстве веб-браузеров и HTML-редакторов. Вы можете проверить интерактивные возможности каркаса и отредактировать его, при необходимости, в программе Adobe
Dreamweaver.
278 Проект 2. Веб-дизайн и планирование
Рис. 2.49. Экспорт каркасов из программы Adobe Fireworks
Экспорт каркаса в интерактивный файл формата PDF
1. Выберите команду меню Файл ⇒ Экспорт (File ⇒ Export). Откроется диалоговое окно
Экспорт (Export) (рис. 2.50).
2. В раскрывающемся списке Экспорт (Export) выберите вариант Adobe PDF.
3. Убедитесь, что установлен флажок Показать PDF-файл после экспорта (View PDF
After Export).
4. Укажите имя и местоположение файла, а затем нажмите кнопку Сохранить (Save)
(Windows) или Экспорт (Export) (OS X).
Каркас будет экспортирован в формат PDF и открыт в программе Acrobat.
5. Проверьте, что ссылки каркаса работают верно (рис. 2.51).
Цифровой дизайн: основы веб-дизайна Рис. 2.50. Диалоговое окно Экспорт
279
Параметр Показать
PDF-файл после экспорта
Рис. 2.51. Тестирование ссылок
в программе Acrobat
280 Проект 2. Веб-дизайн и планирование
Экспорт каркаса в файл формата HTML
1. Выберите команду меню Файл ⇒ Экспорт (File ⇒ Export). Откроется диалоговое окно
Экспорт (Export).
2. Перейдите к папке на жестком диске, в которую следует экспортировать каркас.
3. В раскрывающемся списке Экспорт (Export) выберите вариант HTML и изображения
(HTML and Images).
4. В раскрывающемся списке Страницы (Pages) выберите вариант Все страницы (All
Pages).
5. Чтобы сохранить изображения в отдельную папку, установите флажок Изображения
в подпапку (Put Images In Subfolder). Вы можете выбрать конкретную папку или использовать созданную программой Adobe Fireworks по умолчанию подпапку изображений.
6. Укажите имя файла, а затем нажмите кнопку Сохранить (Save) (Windows) или Экспорт (Export) (OS X).
После экспорта, вы увидите, что изображения и HTML-файл будут сохранены в папке, которую вы указали в диалоговом окне Экспорт (Export).
7. Перейдите к сохраненному файлу, откройте страницу home.htm в браузере, и проверьте, работают ли ссылки каркаса так, как должны (рис. 2.52).
Рис. 1.39. Тестирование HTML-файла в браузере
Цифровой дизайн: основы веб-дизайна 281
Создание композиций дизайна страницы
Композиция дизайна — это вариант дизайна, представляемый дизайнером клиенту на утверждение.
Композиции веб-дизайна демонстрируют в общих чертах, как будет выглядеть пользовательский интерфейс (включая графику, элементы дизайна интерфейса, систему навигации
и основные области контента) еще до размещения конкретного контента (рис. 2.53).
Рис. 2.53. Пример композиции дизайна
Программа Adobe Fireworks предоставляет идеальную среду работы с прототипами, преобразовывая композиции дизайна в настоящие мини-приложения, веб-сайты и программы.
Процесс веб-дизайна
Обычно процесс веб-дизайна может состоять из нескольких этапов, включающих любые из
перечисленных ниже:
1. Брифинг — утверждение технических, дизайнерских целей и идей веб-проекта.
282 Проект 2. Веб-дизайн и планирование
2. Исследование включает в себя целый ряд исследовательских мероприятий, включая обзор
подобных вариантов веб-дизайна, анализ сайтов конкурентов, действий пользователей, их
личностей, анализ рынка, вариантов использования и многое другое.
3. Мозговой штурм — этап создания концепции, опирающийся на этапы брифинга и исследования, когда в короткий промежуток времени генерируется множество идей.
4. Творческое решение следует за этапом мозгового штурма. Здесь результаты брифинга, исследования, а также идеи, объединяются для создания четкого направления дизайна. Этот
этап может включать в себя разработку технических спецификаций, составление блок-схем
информационной архитектуры, функционирующих каркасов и композиций дизайна. Этот
этап часто представляет собой итеративный, повторяющийся процесс, в котором решаются проблемы, композиции представляются на рецензирование клиентом, разрабатывается
функциональность и вносятся изменения.
5. Производство — реализация веб-проекта в полной мере. Композиции дизайна окончательно дорабатываются и включаются в прототип каркаса, а веб-проект разворачивается в
полноценное производство.
Как вы могли заметить, композиции дизайна — важная частью процесса веб-дизайна с момента принятия творческого решения до этапа производства.
Рассмотрим следующие вопросы, пока вы будете планировать и создавать собственную композицию дизайна для веб-проекта.
Организация контента
Посредством организации контента страницы вы можете выделить важные функции и
элементы вашего сайта. Важные элементы могут располагаться на странице выше других
элементов, обладать большим размером или более насыщенными цветами. Добавьте предварительное описание навигации, компоновки текста, размещения графики, основных заголовков и других элементов, которые будут отображаться на экране. При навигации между
страницами узнаваемые общие структуры страниц позволяют посетителям понять, что они
находятся на том же сайте.
xx Будет ли ваш баннер располагаться на каждой странице? Если да, будет ли он располагаться на одном и том же месте? Будет ли он всегда одного размера?
xx Какой шрифт вы будете использовать для названий или заголовков на ваших внутренних страницах?
xx Какой цвет шрифта вы будете использовать для названий или заголовков на ваших внутренних страницах?
xx Какой шрифт вы будете использовать для описаний на ваших страницах с контентом?
xx Какой цвет шрифта вы будете использовать для описаний?
Навигация
Чтобы посетители вашего сайта могли понять его контент, вам необходимо обеспечить ясную навигацию. Посетители должны знать, в каком месте сайта они находятся, куда им не-
Цифровой дизайн: основы веб-дизайна 283
обходимо перейти, и как они могут вернуться туда, откуда пришли. Применение согласованного макета страницы помогает в ориентации пользователей и не дает им ощутить себя
потерянными. Использование согласующихся кнопок, ссылок и графики на каждой странице поддерживает ясность местонахождения. При переходе посетителей от страницы к странице, обеспечивайте визуальные подсказки и средства навигации.
Ответьте на следующие вопросы:
xx В каком месте страницы вы расположите область навигации?
xx Какие элементы будет содержать область навигации?
xx Будет ли область навигации располагаться на каждой странице?
xx Каким образом ваша область навигации поможет посетителям понять, на какой странице они находятся?
Создание композиций дизайна с помощью Adobe Fireworks CS6
Следующие шаги описывают типичные действия, которые необходимо выполнить, чтобы
создать композицию дизайна с помощью программы Adobe Fireworks. В описанном ниже
примере, используются ранее подготовленные файлы, в том числе фоновый рисунок, логотип, текст и фотография.
Создание холста и импорт файлов
1. Запустите программу Adobe Fireworks и создайте новый документ, указав в нем размеры своего веб-проекта.
2. Выделите Слой 1 и выберите команду меню Файл ⇒ Импорт (File ⇒ Import). Откроется диалоговое окно Импорт (Import) (Windows) или Импорт файла (Import File) (OS X).
3. Перейдите к изображению, которое хотите использовать в качестве фонового и нажмите кнопку Открыть (Open).
4. Щелкните мышью в левом верхнем углу холста, чтобы поместить туда импортированный фон. Фоновое изображение появится на холсте.
5. Убедитесь, что в инспекторе свойств значения координат X и Y равны 0 (рис. 2.54).
6. Выберите команду меню Файл ⇒ Импорт (File ⇒ Import). Откроется диалоговое
окно Импорт (Import) (Windows) или Импорт файла (Import File) (OS X).
7. Перейдите к файлу логотипа и нажмите кнопку Открыть (Open). Откроется
диалоговое окно Импорт страницы (Import
Page) (рис. 2.55).
Каждый файл PNG программы Adobe
Fireworks может содержать несколько стра-
Координаты
XиY
Рис. 2.54. Инспектор свойств
284 Проект 2. Веб-дизайн и планирование
ниц. Когда вы вставляете файл PNG или страницы, содержащие объекты основного слоя, главная страница
превращается в обычный слой и импортируется.
8. Нажмите кнопку Импорт (Import) (Windows) или
Открыть (Open) (OS X) в диалоговом окне Импорт
страницы (Import Page).
9. Щелкните мышью по холсту рядом с верхним краем
и чуть правее левого верхнего угла, чтобы добавить импортированный логотип. Логотип размещен на холсте.
10. Выберите команду меню Файл ⇒ Импорт (File ⇒
Import). Откроется диалоговое окно Импорт (Import)
(Windows) или Импорт файла (Import File) (OS X).
11. Перейдите к файлу фотографии и нажмите кнопку
нажмите кнопку Открыть (Open).
Рис. 2.55. Диалоговое окно
Импорт страницы
12. Щелкните в области основного контента на холсте и добавьте импортированную фотографию. Фотография размещена на холсте.
13. Выберите команду меню Файл ⇒ Сохранить Как (File ⇒ Save As) и сохраните файл в
формате PNG.
Применение инструментов фигур, заливок и выравнивания
1. На панели инструментов выберите инструмент Прямоугольник (Rectangle).
2. В инспекторе свойств нажмите кнопку Градиентная заливка (Gradient Fill). Появится
всплывающая панель градиента (рис. 2.56).
Тип градиента
Сплошная
заливка
Градиентная
заливка
Цветовые узлы
Рис. 2.56. Панель градиента в инспекторе свойств
Цифровой дизайн: основы веб-дизайна 285
3. Укажите Линейный (Linear) тип градиента,
если он еще не выбран.
4. Щелкните по цветовому узлу слева и выберите темно-серый оттенок, например значение
#222222 в шестнадцатеричной системе (рис. 2.57).
Нажмите клавишу Enter.
5. Щелкните по цветовому узлу справа и выберите более светлый оттенок, например, значение
#333333.
6. Нажмите клавишу Enter, чтобы закрыть панель градиента.
7. Перетащите указатель мыши, чтобы нарисовать прямоугольник в нижней части холста.
Этот прямоугольник станет колонтитулом вебстраницы.
8. Выберите команду меню Выделение ⇒ Отменить выделение (Select ⇒ Deselect).
Рис. 2.57. Панель палитры цветов
9. Выберите инструмент Прямоугольник со скругленными углами (Rounded Rectangle
Tool) на панели инструментов.
10. В инспекторе свойств нажмите кнопку Сплошная заливка (Solid Fill) и выберите светло-серый оттенок, например, значение #CCCCCC.
Примечание. К прямоугольнику со скругленными углами также можно применить и градиентную
заливку.
11. Нажмите клавишу Enter, чтобы закрыть панель
градиента.
Цвет
обводки
Ширина
обводки
Тип
обводки
12. В инспекторе свойств установите белый цвет
обводки (значение #FFFFFF), укажите величину в 1
пиксел в поле размера кончика и тип обводки Мягкий
(1 пиксел) (1-Pixel Soft) (рис. 2.58).
13. Убедитесь, что «быстрые» направляющие отображаются. Если нет, выберите команду меню Просмотр
⇒ «Быстрые» направляющие (View ⇒ Smart Guides),
а затем установите флажки Показать «Быстрые» направляющие (Show Smart Guides) и Привязка к «быстрым» направляющим (Snap To Smart Guides).
Рис. 2.58. Инспектор свойств
14. Перетащите указатель мыши, чтобы нарисовать на холсте прямоугольник с закругленными углами подходящий для использования в качестве кнопки.
15. Выделите прямоугольник со скругленными углами.
286 Проект 2. Веб-дизайн и планирование
16. Выберите команду меню Редактирование ⇒ Создать дубликат (Edit ⇒ Duplicate)
трижды, чтобы создать в общей сложности четыре кнопки. При повторении команды дубликаты выбранного объекта будут появляться каскадом вниз от оригинала. Новый дубликат
появляется на 10 пикселов ниже и на 10 пикселов правее предыдущего. Самый последний
дубликат оказывается выделенным.
17. Выберите
инструмент
Указатель
(Pointer) и перетаскивайте прямоугольник
со скругленными углами вправо, пока рядом
с правым верхним углом объекта не появятся «быстрые» направляющие (рис. 2.59).
18. Расположите остальные фигуры в ряд
между первым и последним прямоугольником со скругленными углами. Не беспокойтесь о расстоянии, вы скорректируете
его в следующих шагах.
Рис. 2.59. Выравнивание объектов с помощью
«быстрых» направляющих
19. Выберите команду меню Окно ⇒ Выровнять (Window ⇒ Align). Откроется палитра Выровнять (Align) (рис. 2.60).
20. Щелкните мышью по четырем фигурам прямоугольников, удерживая клавишу Shift, на
холсте или на палитре Слои (Layers).
21. На палитре Выровнять (Align) нажмите кнопки Выравнивание центра по вертикали (Align Vertical Center) и Расположить равномерно по горизонтали (Space Evenly
Horizontally). Фигуры прямоугольников со скругленными углами будут выровнены и вертикали и распределены на холсте на равном расстоянии друг от друга.
22. Выберите команду меню Файл ⇒ Сохранить (File ⇒ Save).
Выравнивание центра по вертикали
Расположить равномерно по горизонтали
Рис. 2.60. Палитра Выровнять
Цифровой дизайн: основы веб-дизайна 287
Применение инструментов для работы с текстом
1. Выберите инструмент Текст (Type) на панели инструментов. Текст в документе Adobe
Fireworks появляется в текстовом блоке (прямоугольник с маркерами).
2.
xx
xx
xx
xx
Установите следующие параметры текста в инспекторе свойств (рис. 2.61):
Гарнитура: Georgia
Стиль шрифта: Regular
Размер шрифта: 46
Цвет шрифта: #ECECEC
Гарнитура
Стиль шрифта
Размер шрифта
Цвет
шрифта
Выравнивание
Рис. 2.61. Инспектор свойств
3. Щелкните мышью по холсту ниже логотипа. Появится блок текста автоматически установленного размера.
Блок текста автоматически установленного размера расширяется по горизонтали при вводе текста и уменьшается при удалении текста. Блоки текста автоматически установленного
размера создаются по умолчанию, когда вы щелкаете мышью по холсту при выбранном инструменте Текст (Type) и начинаете ввод текста.
4. Введите слово Магазин.
5. Выберите команду меню Выделение ⇒ Отменить выделение (Select ⇒ Deselect).
6. Все еще с активным инструментом Текст (Type) смените гарнитуру на Verdana, и размер текста на 16 и убедитесь, что текст выровнен по левому краю.
7. Перетащите указатель мыши по холсту между заголовком Магазин и фотографией,
чтобы создать блок текста фиксированной ширины (рис. 2.62).
Блок текста фиксированной ширины позволяет регулировать ширину текста в них. Блоки текста фиксированной ширины создаются по умолчанию, когда вы перетаскиваете
указатель мыши, чтобы нарисовать блок текста при активном инструменте Текст (Type).
8. Добавьте текст-заполнитель для имитации двух или трех абзацев текста.
Рис. 2.62. Для создания блока текста
фиксированной ширины, перетащите указатель
мыши при активном инструменте Текст
288 Проект 2. Веб-дизайн и планирование
9. Чтобы переместить текстовый блок, перетащите его с помощью инструмента Указатель
(Pointer). Для изменения его размера, перетащите один из маркеров.
10. Выберите команду меню Выделение ⇒ Отменить выделение (Select ⇒ Deselect).
11. Выберите инструмент Текст (Type) и смените гарнитуру на Georgia, установите размер
шрифта 21, и темно-серый цвет текста (значение #222222).
12. Щелкните мышью по первому прямоугольнику со скругленными углами, чтобы создать блок текста автоматически установленного размера.
13. Введите слово Магазин.
14. Выберите инструмент Указатель (Pointer) и перемещайте блок текста, пока не появятся горизонтальная
и вертикальная «быстрые» направляющие. Так текст
будет выровнен по центру прямоугольника со скругленными углами (рис. 2.63).
15. Щелкните мышью по блоку текста и прямоугольнику со скругленными углами и, удерживая клавишу
Shift, выберите команду меню Изменение ⇒ Сгруппировать (Modify ⇒ Group).
Рис. 2.63. Используйте «быстрые»
направляющие для выравнивания
текста и объектов
16. Повторите шаги 12—15 и создайте еще три кнопки навигации: Дизайнер, Наш магазин
и Блог.
17. Создайте текстовый блок в нижней части страницы поверх темно-серого прямоугольника колонтитула и добавьте текст нижнего колонтитула.
18. Выберите команду меню Файл ⇒ Сохранить (File ⇒ Save).
Производственная раскадровка (пример)
Имя: Иван Иванов
Дата: 24.12.2012
Название сайта: Золотое кольцо России
Имя файла: index.html
Заголовок страницы: Золотое кольцо России — туризм
Каркас (все, что касается данной страницы; элементы навигации по желанию).
Цифровой дизайн: основы веб-дизайна 289
Цвет фона (название и/или шестнадцатеричное значение): кремовый (#FFFCCC)
Тексты заголовков (шрифты, стили, границы, поля, выравнивание, отступы и цвета): Arial,
18 пунктов, полужирный, выравнивание по левому краю, отступ 6 пикселов сверху и снизу,
черный текст
Основной текст (шрифты, стили, границы, поля, выравнивание, отступы и цвета): основной — Times New Roman, 11 пунктов, выравнивание по левому краю, черный текст; ссылки — Times New Roman, 10 пунктов, выравнивание по левому краю, темно-коричневый текст,
подчеркнутый
Описание (всего, что происходит на экране, например порядок отображения, текст и шаги
анимации): Все навигационные кнопки становятся на тон светлее, когда посетитель наводит указатель мыши на одну из кнопок. Когда указатель мыши не находится ни над одной из
кнопок навигации, все кнопки отображаются в одном и том же более темном цвете.
Навигация (названия кнопок или ссылок, а также их назначение):
Главная: переходит к файлу index.html, История: переходит к файлу history.html, Информация для туристов: переходит к файлу tourist.html
Расписание/направления: переходит к файлу hours.html
Ссылки: каждая ссылка ведет на один из следующих файлов:
xx Сергиев Посад (www.sergiev-posad.net)
xx Переславль-Залесский (adm.pereslavl.ru)
xx Суздаль (www.gorodsuzdal.ru)
Графические файлы (все графические элементы, относящиеся к данной странице): gring_
logo.png и gring_logo.gif
Производственная раскадровка (бланк)
Имя: __________________________________________ Дата: _____________________
Название сайта: ___________________________________________________________
Заголовок страницы: _______________________________________________________
Имя файла: ______________________________________________________________
Каркас (все, что касается данной страницы; элементы навигации по желанию).
290 Проект 2. Веб-дизайн и планирование
Цвет фона (название и/или шестнадцатеричное значение) ___________________________
Тексты заголовков (шрифты, стили, границы, поля, выравнивание, отступы и цвета)
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Основной текст (шрифты, стили, границы, поля, выравнивание, отступы и цвета)
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Описание (всего, что происходит на экране, например порядок отображения, текст и шаги
анимации)
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Навигация (названия кнопок или ссылок, а также их назначения)
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Графические файлы (все графические элементы, относящиеся к данной странице)
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Создание прототипов
В этом разделе вы узнаете, как с помощью программы Adobe Fireworks CS6 объединить композицию дизайна с каркасом для создания интерактивного прототипа мини-приложения.
Прототип представляет собой полу-функциональную интерактивную модель, которая
обеспечивает предварительный просмотр внешнего вида и функциональности вашего про-
Цифровой дизайн: основы веб-дизайна 291
екта (рис. 2.65). Прототипы, созданные в программе Adobe Fireworks, также могут быть
экспортированы в форматы, которые можно открыть в программе Adobe Dreamweaver и
просмотреть в веб-браузере.
Рис. 2.65. Прототип в программе Adobe Fireworks (слева) и в браузере (справа)
Процесс создания прототипа
Используя палитру Страницы (Pages) и другие мощные функции программы Adobe
Fireworks, можно быстро создавать интерактивные веб и программные прототипы. Готовый
прототип можно преобразовать в функционирующий веб-сайт, экспортировав его в виде
HTML и CSS файлов для использования в программе Adobe Dreamweaver и в веб-браузере.
Далее описанным способом вы сможете превратить вашу ранее созданную композицию дизайна в полнофункциональный интерактивный прототип.
1. Создание страниц
На палитре Страницы (Pages) создайте необходимое количество страниц или экранов исходного дизайна. Позднее, при необходимости, можно добавить или удалить страницы.
292 Проект 2. Веб-дизайн и планирование
2. Создание макета общих элементов дизайна
В рабочей области создайте макет элементов дизайна, которые хотите сделать общими для
нескольких страниц, таких как панель навигации и фоновые изображения.
3. Размещение общих элементов на нескольких страницах
Когда вы размещаете общие элементы, при каждом изменении автоматически обновляются
все страницы, на которых присутствует данный элемент. Распределить общие элементы можно с помощью главной страницы или, создав общие слои, скопировать наборы элементов.
4. Добавление на отдельные страницы уникальных элементов
На каждую страницу добавьте уникальные элементы дизайна, навигации или формы. На
палитре Общая библиотека (Common Library) вы найдете множество кнопок, текстовых полей и раскрывающихся меню, которые ускорят процесс проектирования.
5. Имитация навигации пользователя с помощью ссылок
Создайте ссылки между различными страницами вашего прототипа, с помощью веб-объектов
таких, как фрагменты, активные области и кнопки навигации.
6. Экспорт готовых интерактивных прототипов
Программа Adobe Fireworks предлагает несколько форматов вывода прототипа, каждый из
которых сохраняет гипертекстовые ссылки для навигации по страницам.
Рабочий процесс, шаги 1-3
В этом разделе вы открываете свою оригинальную композицию дизайна, создаете необходимое для прототипа количество страниц и выравниваете элементы страницы с помощью
направляющих.
В одном файле формата PNG программы Adobe Fireworks может содержаться несколько
страниц, что обеспечивает идеальный способ создания прототипов веб-сайтов и интерфейсов приложений. Каждая страница содержит уникальные настройки размера холста и цветов, разрешения изображения, и направляющих. Вы можете установить эти параметры для
каждой страницы или глобально для всех страниц в документе. Помимо Web-слоя, каждая
страница также содержит уникальный набор слоев. Для общих элементов, однако, можно
использовать главные страницы или сделать слои общими для нескольких страниц.
Создание элементов дизайна, общих для нескольких страниц
1. Запустите программу Adobe Fireworks и откройте ранее созданную композицию дизайна, сохраненную в файле с расширением PNG.
Цифровой дизайн: основы веб-дизайна 293
2. Откройте палитру Слои (Layers) (команда меню Окно ⇒ Слои (Window ⇒ Layers)).
Палитра появится в правой части рабочего пространства.
3. Щелкните мышью по индикатору Видимость (Visibility), чтобы скрыть слои, которые
не будут общими для нескольких страниц. Например, логотипы, навигация и элементы нижнего колонтитула останутся на всех страницах прототипа и должны оставаться видимыми
(рис. 2.66).
Индикатор Видимость
Кнопка Создать/
Дублировать слой
Рис. 2.66. Палитра Слои
Меню палитры
Рис. 2.67. Палитра Страницы
4. Щелкните мышью по вкладке Страницы (Pages) для отображения палитры Страницы
(Pages) (команда меню Окно ⇒ Страницы (Window ⇒ Pages) (рис. 2.67).
5. На палитре Страницы (Pages) выделите текущую страницу и выберите в меню палитры
команду Задать в качестве главной страницы (Set As Master Page).
6. В нижней части палитры Страницы (Pages) нажмите кнопку Создать/Дублировать
слой (Add Page). Появится пустая страница. Добавляйте новые страницы, пока не достигнете числа страниц, необходимых в вашей композиции дизайна.
В качестве фона на новых страницах отображается главная страница.
7. Дважды щелкните мышью по названиям новых страниц и задайте им более подходящие
имена, описывающие их функции.
8. Убедитесь, что линейки и направляющие отображаются. Если это не так, выберите команды меню Просмотр ⇒ Линейки (View ⇒ Rulers) и Просмотр ⇒ направляющие ⇒ Показать направляющие (View ⇒ Guides ⇒ Show Guides).
294 Проект 2. Веб-дизайн и планирование
9. Выберите главную страницу на палитре Страницы (Pages) (рис. 2.68).
10. Создайте сетку направляющих, которые делят композицию дизайна на логические разделы, такие как заголовок страницы, область логотипа, навигация, область основного контента и нижний колонтитул (рис. 2.69).
Рис. 2.68. Палитра Страницы
с выделенной активной страницей
Рис. 2.69. Создание сетки
направляющих на главной странице
Размещение направляющих на главной странице гарантирует, что они будут отображаться
на всех общих страницах макета.
Чтобы создать горизонтальную или вертикальную направляющую, перетащите указатель
мыши от соответствующей линейки к краю элемента в области контента.
Примечание. Можно изменить цвет направляющих, сделав ее более заметной на различных фонах.
Для изменения цвета направляющих, выберите команду меню Редактирование ⇒ Установки (Edit
⇒ Preferences) (Windows) или Fireworks ⇒ Установки (Fireworks ⇒ Preferences) (OS X) и перейдите к категории Направляющие и сетки (Guides And Grids).
11. Убедитесь, что «Быстрые» направляющие (Smart Guides) видимы и активны, выбрав
команду меню Просмотр ⇒ «Быстрые» направляющие (View ⇒ Smart Guides), а затем выберите команды Показать «быстрые» направляющие (Show Smart Guides) и Привязка к
«быстрым» направляющим (Snap To Smart Guides).
Примечание. «Быстрые» направляющие — это временные направляющие с привязкой, помогающие
вам создавать, выравнивать, редактировать и трансформировать одни объекты относительно других.
12. Выберите команду меню Файл ⇒ Сохранить (File ⇒ Save).
Цифровой дизайн: основы веб-дизайна 295
Рабочий процесс, шаг 4
За следующие несколько шагов вы добавите уникальные элементы дизайна на отдельные
страницы. Для этого можно использовать HTML-элементы, доступные в папке HTML на
палитре Общая библиотека (Common Library). Папка HTML содержит такие элементы, как
кнопки, раскрывающиеся меню и текстовые поля. Свойства этих элементов можно изменить
на палитре Свойства символа (Symbol Properties). HTML-компоненты включают в себя заголовки 1 — 6 уровней и элементы ссылки.
Добавление HTML-элементов на отдельные страницы
1. На палитре Страницы (Pages) выберите страницу (не главную), на которую вы хотите
добавить уникальные элементы.
2. Откройте палитру Общая библиотека (Common Library) (команда меню Окно ⇒ Общая Библиотека (Window ⇒ Common Library)) (рис. 2.70).
3. Дважды щелкните по папке HTML (Windows) или по треугольнику напротив названия
папки HTML (OS X), чтобы отобразить список доступных компонентов.
4. Чтобы добавить элемент, перетащите его из палитры Общая библиотека (Common
Library) на холст программы Adobe Fireworks.
Например, вы можете перетащить компонент Заголовок 1 (Heading 1) из палитры Общая
библиотека (Common Library) и поместить его в область заголовка, которую вы определили
с помощью направляющих в предыдущем разделе (рис. 2.71).
Рис. 2.70. Палитра Общая библиотека
Рис. 2.71. Перетащите компонент из палитры
Общая Библиотека
296 Проект 2. Веб-дизайн и планирование
5. На холсте выделите компонент.
6. На палитре Свойства символа (Symbol
Properties) (команда меню Окно ⇒ Свойства
символа (Window ⇒ Symbol Properties), настройте параметры, такие как текст, цвет, шрифт, кегль
и другие (рис. 2.72).
Например, вы можете отформатировать компонент
Заголовок 1 (Heading 1), используя параметры, заданные в оригинальной композиции дизайна.
7. Продолжайте добавлять элементы HTML,
текстовые блоки, графику и изображения на отдельные страницы по мере необходимости. Используйте палитру Страницы (Pages) для навигации
между страницами. Вы также можете копировать и
вставлять элементы с одной страницы на другую.
Рис. 2.72. Палитра Свойства символа
Цель — создать все отдельные страницы, чтобы имитировать контент вашего полностью
функционирующего веб-сайта.
8. Закончив размещать контент на уровне страниц, выберите команду меню Файл ⇒ Сохранить (File ⇒ Save).
Рабочий процесс, шаги 5 и 6
В документе Adobe Fireworks вы можете создать макеты на основе CSS, а затем преобразовать их в HTML-страницы с правилами CSS, форматирующие ваши макеты. Макеты на основе CSS представляют собой стандартизированный подход и обеспечивают исходный код,
поддерживаемый различными браузерами. Напоследок, вы экспортируете готовой интерактивный прототип в формате HTML-файлов с правилами CSS и изображений, предварительно разделив документ на фрагменты.
Фрагменты — это основные кирпичики для внесения интерактивности в проекты Adobe
Fireworks. Фрагменты представляют собой веб-объекты, которые, в конечном счете, существуют в виде HTML-кода. Вы можете просматривать, выбирать и переименовывать их посредством Web-слоя на палитре Слои (Layers). При создании фрагментов, документ Adobe
Fireworks разрезается на несколько частей и каждая часть экспортируется в виде отдельного
файла (рис. 2.73). Если вы выбираете при экспорте вариант CSS и изображения (CSS and
Images), программа Adobe Fireworks конвертирует макет в HTML и CSS код с помощью
механизма экспорта, анализирующего размещение объектов.
У фрагментации изображений есть три основных преимущества:
xx Изображения оптимизируются для быстрой загрузки.
xx Добавляется интерактивность — изображения могут реагировать на события мыши.
xx Упрощается процесс обновления частей веб-страниц, которые часто меняются (например, фотографии и имена на странице лучших работников месяца).
Цифровой дизайн: основы веб-дизайна 297
Рис. 2.73. При создании фрагментов, документ разрезается на несколько
частей и каждая из них экспортируется в виде отдельного файла
Чтобы добиться желаемых результатов, при создании фрагментов макетов на основе CSS,
придерживайтесь простых правил:
Правило 1: Экспортируйте текст с помощью прямоугольников, а изображения — с помощью
фрагментов. Механизм экспортирует текст, помещенный в прямоугольники. Поскольку
экспортировать можно только изображения в прямоугольных фрагментах, фрагментируйте
изображения, которые хотите экспортировать. Эти фрагменты указывают механизму экспорта расположение изображений.
Правило 2: Избегайте наложения объектов. Механизм экспорта воспринимает текст, изображения, и прямоугольники как прямоугольные блоки. Механизм изучает размер и положение этих объектов, чтобы определить логические строки и столбцы и разместить их
в макете.
Аккуратно разместите объекты так, чтобы их границы не пересекались.
Правило 3: Распланируйте компоновку строк и столбцов. Механизм экспорта выделяет логические разделы, в которых можно четко провести грань между объектами или группами
объектов. Заключите колонки макета в прямоугольники, чтобы не получилось так, что механизм вставит логическую строку, которая испортит макет.
Правило 4: Воспринимайте документ как двумерный. При создании страницы, заключите
в прямоугольники объекты, которые система должна воспринимать как дочерние объекты
прямоугольника. При экспорте такая взаимосвязь выявляется. Дочерние элементы сканируются на наличие логических строк и столбцов, как описано в правиле 3.
Помимо указанных правил, обращайте внимание на следующее:
xx Экспортируются только примитивные прямоугольники. Чтобы экспортировать прямоугольники со скругленными углами, установите поверх них обычные прямоугольники.
298 Проект 2. Веб-дизайн и планирование
xx Для экспорта обводки прямоугольников, установите прямоугольные фрагменты поверх
прямоугольников с обводкой.
xx Чтобы экспортировать символы, наложите поверх них прямоугольный фрагмент.
xx Для экспорта фильтров, примененных к тексту или прямоугольникам, установите поверх них прямоугольный фрагмент.
Добавление навигационных ссылок и экспорт проекта
1. На палитре Страницы (Pages) выберите главную страницу
2. Выберите инструмент Фрагмент (Slice) и убедитесь, что выбран параметр Показать
фрагменты и активные области (Show Slices And Hotspots) (рис. 2.74).
Инструмент
Фрагмент
Показать фрагменты
и активные области
Рис. 2.74. Панель инструментов
Рис. 2.75. Нарисуйте фрагмент
3. Ориентируясь по направляющим, нарисуйте фрагмент поверх элемента навигации на
главной странице (рис. 2.75).
4. Выделите фрагмент с помощью инструмента Указатель (Pointer).
5. В инспекторе свойств, в поле ввода Ссылка (Link), укажите ссылку на страницу, которую вы ранее создали на палитре Страницы (Pages).
Например, фрагмент был нарисован поверх кнопки Магазин,
и ссылка указывает на страницу
shop.htm (рис. 2.76). Так как этот
фрагмент находится на главной
странице, при экспорте интерактивного прототипа все страницы
наследуют фрагмент со ссылкой.
Рис. 2.76. Укажите ссылку в инспекторе свойств
6. Продолжайте
добавлять
фрагменты и ссылки к элементам навигации, где необходимо.
7. Добавьте фрагменты в области между элементами навигации и за пределами основных
областей контента (рис. 2.77).
Фрагменты к контенту на уровне страницы вы добавите в следующих шагах.
8. Перейдите на отдельную страницу, выбрав ее на палитре Страницы (Pages).
Цифровой дизайн: основы веб-дизайна 299
Рис. 2.77. Создайте фрагменты главной страницы
9. С помощью инструмента Фрагмент (Slice) и направляющих создайте фрагменты внутри области основного контента тела страницы, такие же, как на главной странице.
Возможно, вам придется применить несколько фрагментов, чтобы охватить макет целиком.
Следите, чтобы фрагменты не накладывались друг на друга, когда будете рисовать их на
холсте.
10. С помощью инструмента Указатель (Pointer) выберите любой фрагмент макета, содержащий текст, который нужно преобразовать в HTML-текст.
11. Выделив фрагмент, выберите пункт HTML в раскрывающемся списке Тип (Type) в инспекторе свойств (рис. 2.78).
Фрагмент HTML обозначает область, в которой в браузере отобразится обычный текст
HTML, которые вы позже сможете отредактировать в программе Adobe Dreamweaver
(рис. 2.79).
300 Проект 2. Веб-дизайн и планирование
Рис. 2.78. Инспектор свойств
Фрагменты HTML
Рис. 2.79. Фрагменты макета
12. Продолжайте добавлять фрагменты, пока не будут охвачены все области контента всех
отдельных страниц.
13. Выберите команду меню Файл ⇒Экспорт (File ⇒ Export).
Откроется диалоговое окно Экспорт (Export) (рис. 2.80).
14. В раскрывающемся списке Экспорт (Export) выберите вариант CSS и изображения
(CSS and Images) (.htm).
15. В раскрывающемся списке Страницы (Pages) выберите вариант Все страницы (All
Pages).
Цифровой дизайн: основы веб-дизайна 301
Рис. 2.80. Диалоговое
окно Экспорт
16. Установите флажок Изображения в подпапку (Put Images In Subfolder).
17. Нажмите кнопку Параметры (Options), чтобы настроить свойства HTML-страницы.
Появится диалоговое окно Настройка HTML (HTML Setup) (рис. 2.81).
Рис. 2.81. Диалоговое окно Настройка HTML
302 Проект 2. Веб-дизайн и планирование
18. Если у вас есть фоновое изображение, нажмите кнопку Обзор (Browse), чтобы выбрать
фон и установить мозаичное отображение:
xx Для отображения изображений однократно выберите вариант Нет (No Repeat) в раскрывающемся списке Повторить (Repeat).
xx Чтобы повторить изображение или задать мозаичное отображение по горизонтали и вертикали, выберите вариант По осям X и Y (Repeat) в раскрывающемся списке Повторить
(Repeat).
xx Чтобы задать мозаичное отображение по горизонтали, выберите вариант По оси X
(Repeat-х) в раскрывающемся списке Повторить (Repeat).
xx Чтобы задать мозаичное отображение по вертикали, укажите вариант По оси Y (Repeat-y)
в раскрывающемся списке Повторить (Repeat).
19. Установите выравнивание страниц в браузере — Слева (Left), По центру (Center) или
Справа (Right) в раскрывающемся списке Выравнивание страниц (Page alignment).
20. В раскрывающемся списке Вложение (Scrolling) выберите вариант Прокрутка (Scroll)
или Фиксированное (Fixed).
21. Нажмите кнопку OK, чтобы закрыть диалоговое окно Настройка HTML (HTML Setup)
22. Нажмите кнопку Сохранить (Save) (Windows) или Экспорт (Export) (OS X).
Макет будет экспортирован в HTML-формат.
23. Перейдите к папке с сохраненными файлами. Щелкните мышью по одному из HTMLфайлов и проверьте, чтобы ссылки в прототипе работали надлежащим образом (рис. 2.82)
Рис. 2.82. Прототип, отображенный в окне браузера