Современный веб дизайн pdf

Html5+css3, основы современного web-дизайна, Кириченко А.В., Хрусталев А.А., 2018

Html5+css3, основы современного web-дизайна, Кириченко А.В., Хрусталев А.А., 2018.

Что такое HTML?

Сеть Интернет — сеть глобального пользования, и поэтому вся информация и сети должна быть представлена на универсальном языке, который понимали бы все пользователи. Языком публикации, используемым в World Wide Web, является HTML (Hiper Text Markup Language — язык разметки гипертекста). Техническую информацию об этом языке (его спецификацию) на английском языке можно найти на сайте World Wide Web Consorcium — w3c.com
HTML — язык разметки, предоставляющий разработчикам следующие возможности:
• Представлять информацию в сети в виде электронных документов, с информационным содержимым в виде форматированного текста, таблиц, списков, фотографий;
• Включать в документы звуковые фрагменты, видеоклипы, электронные таблицы и другие приложения, и элементы мультимедиа;
• Осуществлять загрузку документов посредством активизации гипертекстовой ссылки
• Разрабатывать формы для осуществления взаимодействия с удаленными службами (поисковыми роботами, on-line магазинами и т.п.)

Какова структура документа html?

Документ в формате HTML состоит из трех основных частей:
• строки, объявляющей файл как документ на языке HTML5;
• заголовка, заключенного в тег HEAD;
• тела документа, представляющего собой тег BODY, если документ имеет классическое, одноиконной представление. В теле документа, собственно, и содержится вся, предлагаемая пользователю, информация.
Заголовок и тело документа заключены в тег-контейнер HTML. Все остальные теги разметки располагаются либо в заголовке, либо теле документа.
Минимальная структура HTML-документа представлена ниже:

Заголовок страницы
Здесь располагается текст страницы

Источник

Современный веб-дизайн. Эпоха Веб 3.0 (2013) Ю.А. Сырых

Книга “Современный веб-дизайн. Эпоха Веб 3.0” предназначена для начинающих веб-дизайнеров. Она не только подскажет, как успешно нарисовать неплохой коммерческий дизайн, но и поможет прийти к пониманию самой сути веб-дизайна, усвоить основные принципы разработки дизайн-макетов сайтов, создаваемых в различных стилях и для разных целях.

Читатель найдет здесь

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

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

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

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

Источник

Т. В. Макарова. ВЕБ-ДИЗАЙН Учебное пособие

1 МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РФ Федеральное государственное бюджетное образовательное учреждение высшего профессионального образования «Омский государственный технический университет» Т. В. Макарова ВЕБ-ДИЗАЙН Учебное пособие Допущено Учебно-методическим объединением вузов по университетскому политехническому образованию в качестве учебного пособия для студентов высших учебных заведений, обучающихся по направлению подготовки «Информационные системы и технологии» Омск Издательство ОмГТУ 2015

2 УДК ББК M15 Рецензенты: Д. А. Хворостов, д-р. пед. наук, профессор, ОГУ Е. А. Сидорова, д-р. техн. наук, доцент, ОмГУПС Т.В. Макарова М15 Веб-дизайн: учебное пособие. Омск: Изд-во ОмГТУ, с. ISBN Пособие ориентировано на изучение основ веб-дизайна. Рассмотрены теоретические вопросы: гипертекстовый способ представления информации в компьютерной сети; основные принципы визуального дизайна веб-страниц; разработка концепции, структуры, макета, сайта; анализ юзабилити. Изложены практические вопросы верстки веб-страниц с использованием HTML и CSS, представленные в виде комплекса учебных работ. Учебное пособие предназначено для студентов, обучающихся по направлению «Информационные системы и технологии», профиль «Информационные технологии в медиаиндустрии». Отдельные разделы пособия могут использоваться для обучения студенов направления «Дизайн». Омский государственный технический университет,

3 Оглавление ВВЕДЕНИЕ. 4 ГЛАВА 1. ОБЩИЕ СВЕДЕНИЯ О ГИПЕРТЕКСТОВЫХ СИСТЕМАХ Гипертекст. Топология гипертекстовой системы Виды веб-сайтов Веб-сайт компании. Этапы создания веб-сайта (жизненный цикл) ГЛАВА 2. ОСНОВЫ ВИЗУАЛЬНОГО ДИЗАЙНА ВЕБ-РЕСУРСОВ Основные принципы дизайна Верстка веб-страниц Адаптивный дизайн сайтов Основные аспекты улучшения качества веб-ресурса. Юзабилити Основные тенденции и тренды современного веб-дизайна ГЛАВА 3. ПРАКТИКУМ: ОСНОВЫ HTML И CSS В ВЕБ-ДИЗАЙНЕ Основные разделы HTML-документа. Описание раздела body Форматирование текста в HTML Организация гиперссылок Добавление графики на веб-страницу. Особености веб-графики Метаданные веб-документов Организация таблиц. Использование табличных структур для верстки веб-страницы Вложенные таблицы. Табличная верстка веб-страниц Добавление мультимедиа на страницу Стилевое оформление веб-страницы с использованием CSS Текстовые блоки. Верстка веб-страницы блоками

4 ВВЕДЕНИЕ За бурным ростом веб-технологий, обеспечивающих гипертекстовое представление и быструю передачу значительных объемов текстовографических данных, последовало столь же стремительное развитие сферы обеспечения эстетики предъявляемой пользователям веб-сети информации и появилось новое направление профессиональной деятельности веб-дизайн. В понятии «веб-дизайн» отчетливо определены две его составляющие: «веб» (русифицированное от англ. «web» сеть, паутина) ключевое слово в выражении World Wide Web, которое является названием основной службы Интернета, обеспечивающей поиск и просмотр гипертекстовых документов; и «дизайн» (от англ. «design», проектировать, создавать, конструировать) деятельность по проектированию эстетических свойств изделия с учетом его назначения и специфики использования, а также результат этой деятельности. Из сказанного следует, что веб-дизайн направлен на разработку и оформление объектов информационной среды Интернета. В общем случае, веб-дизайном ( web page design ) называют процесс проектирования, планирования, моделирования и реализации доставки электронного содержимого через сеть (Web) с использованием технологий, подходящих для интерпретации и визуализации веб-браузером или другим графическим веб-интерфейсом пользователя. Доставленное пользователю электронное содержимое отображается в браузере в виде веб-страницы. Именно она являет собой продукт деятельности вебдизайнера. Веб-страница логическая единица Интернета. Это специальный документ, написанный на языке гипертекстовой разметки, пригодный для обработки, манипулирования и просмотра посредством веб-браузера. Контент информационное содержание веб-страницы включает текст, изображения, анимацию и прочие компоненты, часть которых предусматривает интерактивное взаимодействие с пользователем. Совокупность веб-страниц, объединенных тематически, стилистически, связанных системой гиперссылок и физически находящихся на одном сервере составляют веб-сайт. Веб-дизайнеры проектируют логическую структуру сайта и каждой его страницы, продумывают наиболее удобные решения подачи информации, проектируют художественное оформление. Эта работа требует от специалиста 4

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

6 ГЛАВА 1. ОБЩИЕ СВЕДЕНИЯ О ГИПЕРТЕКСТОВЫХ СИСТЕМАХ 1.1. Гипертекст. Топология гипертекстовой системы Существует устойчивое мнение, что популярность сетевых технологий главным образом обусловлена гипертекстовым способом представления информации. Такое мнение небезосновательно, ведь ценность веб-контента (по сравнению с материалами традиционных энциклопедий) состоит в возможности мгновенного получения дополнительной информации при обращении к гипертекстовой ссылке. Термин «гипертекст» был введен в 1965 г. Тедом Нельсоном 1 для описания документов, которые выражают нелинейную структуру идей, в противоположность линейной структуре традиционных книг, фильмов и речи. Под гипертекстом Нельсон понимал непоследовательную запись, текст, «который ветвится или осуществляется по запросу». «Обычно процесс письма осуществляется последовательно по следующим двум причинам. Во-первых, потому, что он является производным от речи. которая не может не быть последовательной (так как у нас для этого только один канал), и, во-вторых, потому, что книги неудобно читать иначе как последовательно. Однако мысли образуют структуры, которые не являются последовательными они связаны многими возможными переходами» 2. Свои цели Нельсон описывает следующим образом: «Руководствуясь идеями, характер которых литературный, а не технический, мы создали систему для хранения и поиска текста, в котором введены взаимосвязи и «окна». Наша фундаментальная единица, документ, может иметь «окна» на любые другие документы. «Информационное тело» системы эволюционирует, непрерывно расширяясь без изменения своей основы. Новые связи и новые «окна» постоянно добавляют новые пути доступа к старому материалу». Идея гипертекста состоит в том, чтобы дать возможность человеку воспринимать информацию в последовательности, отвечающей его интересам. В этой связи гипертекстовые документы, выстраивают особенным образом, чтобы сделать хорошо видимыми взаимосвязи-отсылки на другие документы. 1 Тед Нельсон (Theodor Holm Nelson) Landow G.P. Hypertext: The Convergence of Contemporary Critical Theory and Technology. Baltimore: The Johns Hopkins University Press,

7 Топология гипертекстовой сети Возможности гипертекстовой среды заложены в основу ассоциативной навигации, предполагающей перемещение от одних информационных блоков к другим с учетом их «семантической смежности». Разбивка информации на смысловые блоки, ее структурирование и распределение по отдельным страницам приводит к выстраиванию системы (сети), в которой отражены информационные блоки (как узлы гипертекстовой сети) и логические связи между ними. Когда речь идет об описании компоновки сетевых компонентов, большинство профессионалов используют термин «топология», обозначающий схему соединения устройств (например, компьютеров в сети). В этом случае различают классические топологии типа: звезда, кольцо, шина. Важно понимать, что в главное топологии это узлы и связи, а не расстояние между компьютерами и физические характеристики соединения. Топология гипертекстовой системы это, структура, отражающая основные магистральные связи между страницами. Существует несколько основных типов таких структур древовидная (иерархическая), радиально-кольцевая, линейная (последовательная). Древовидное строение гипертекстовой системы предполагает, что содержимое каждой страницы (кроме первой) входит на правах подраздела в страницу более высокого уровня. Такая структура имеет ярко выраженное начало первую страницу, корень дерева (с него обычно начинается старт, хотя можно стартовать и из любой другой точки), но не имеет однозначного конца (страницы, посещение которой логически завершает сеанс работы с сайтом). В такой сети можно спускаться и подниматься с уровня на уровень и перемещаться по горизонтали бесконечно долго, пока не будет решена задача или пока не исчерпается все содержимое. Древовидная структура лучше всего подходит для компонования достаточно разнородного или сложно устроенного материала каталогов, сборников статей или ссылок (рис. 1). Древовидное строение характерно для сайтов компаний и организаций, где отчетливо выделена главная (домашняя) страница, с которой, как правило, начинается знакомство с сайтом,. Рис. 1. Вид древовидной структуры гипертекстовой сети Некоторым подобием древовидной структуры является радиально-кольцевая, примером которой может служить городская транспортная сеть (рис. 2). В 7

8 отличие от древовидной, в этой структуре больше развиты горизонтальные связи, а радиальные являются не столько иерархичными (раздел-подраздел), сколько просто отражающими направления логических переходов. Рис. 2. Вид радиально-кольцевой структуры гипертекстовой сети В подобной сети может присутствовать центральная точка, центр паутины, но она редко является точкой входа и, скорее, служит «пресс-центром», который обязан быть для обеспечения всевозможных формальностей. Старт, как правило, осуществляется из любой произвольной точки, движение происходит по горизонталям и вертикалям, не обращаясь к центру. Так как конца у такой системы не существует, то выходом также может становиться любая произвольная точка. Примером такой гипертекстовой паутины является сайт проекта Википедия. Линейные (последовательные) структуры используются, если материал, представленный в гипертекстовой системе, выстраивается в логическую цепочку как, к примеру, главы одной книги или последовательные шаги оформления заказа в электронном магазине (рис. 3). Рис. 3. Вид линейной (последовательной) структуры гипертекстовой сети Линейная цепочка страниц всегда имеет логические начало и конец, причем «запрыгивание в вагон на ходу» (т. е. вход в систему с одной из промежуточных страниц) обычно не имеет смысла, так как в этом случае тяжело поймать нить изложения. В подобном случае, пользователю приходится делать несколько шагов вверх по цепочке до достижения какого-либо понятного логического начала. Большинство веб-сайтов имеют в своей топологии комбинацию древовидной и последовательной структуры. Например, начав с иерархического каталога товаров в интернет-магазине, после осуществления выбора, дальнейшее продвижение происходит в линейной последовательности: оформление заказа, выбор способа доставки, оплата. Возможность генерации страниц «на лету» в ответ на запросы пользователя и применение динамического HTML для создания «живых», изменяющихся по мере прочтения и взаимодействия с ними страниц размывают стройную картину структуры гипертекстовых систем. На многих современных сайтах просто невозможно точно сказать, из скольких страниц они состоят и сколько связей содержат. 8

9 Топология веб-сайта находит отражение в визуальном оформлении его страниц и обуславливает выбор того или иного способа организации гипертекстовых переходов при проектировании системы навигации сайта. Гипертекст может существовать только в технически сложной среде, способной обеспечить необходимую быстроту предъявления выбираемых фрагментов. В этой связи, гипертекстом часто называют не только нелинейную, сетевую форму организации текстово-графического материала, но так же и технологию, без которой невозможна такая организация в широких масштабах. Основой такой технологии является язык гипертекстовой разметки документов HTML (HyperText Markup Language). УПРАЖНЕНИЕ 1. Определение топологии веб-сайта. 1. Выберите сайт для анализа. Исследуя навигационное меню и перемещаясь по внутренним ссылкам определите топологическую структуру сайта, изобразите ее схематически на рисунке. Примечание: Вероятно, исследуя структуру сайта, обнаружите гибрид из двух-трех топологических схем. Выделите доминирующую. Контрольные вопросы по теме «Гипертекст. Топология гипертекстовой системы». 1. Кто является автором термина «гипертекст»? Когда был введен термин, что означает? 2. Что называют гипертекстовой топологией сети? 3. Назовите три основные топологические структуры гипертекстовой сети. Приведите примеры сайтов, имеющих в своей основе структуру каждого типа. 9

10 1.2. Виды веб-сайтов Веб-сайт представляет собой совокупность электронных страниц, объединенных по смыслу, связанных системой гиперссылок, и физически находящихся на одном сервере. Веб-сайт позволяет: создавать благоприятный имидж человека, фирмы, товара или услуги; обеспечивать доступность информации всем заинтересованным лицам; реализовывать возможности мультимедийного представления информации (с использованием графики, звука, анимации и видео); оперативно реагировать на различные ситуации: обновлять данные, анонсировать события, обеспечивать информационную поддержку проводимых мероприятий; предлагать услуги и продавать продукцию через Интернет; организовывать обратную связь и общение с людьми. Классификация веб-сайтов Веб-разработчики создают оригинальные и уникальные интернет-сайты различной направленности и различного уровня сложности. При этом многие сайты имеют схожие цели, задачи, способы представления информации и т.п. На основании схожих целей, контента и типа представления данных, сайты разделяют на группы. Для этого выделяют некоторые характерные принципы организации сайтов, которые выступают в качестве основных классификационных критериев, внутри которых происходит деление. Веб-сайты можно классифицировать по следующим признакам: По возможностям взаимодействия с контентом. В этой категории сайты разделяют на: информационные (документно-ориентированные) сайты Подобные сайты предоставляют информацию и обеспечивают ограниченный уровень интерактивности (есть возможность просмотра, поиска и сортировки предоставленной информации). проблемно-ориентированные сайты Сайты позволяют взаимодействовать с информацией для выполнения какойлибо задачи (например, купить авиабилет или пообщаться с коллегой). Страницы таких сайтов могут генерироваться в соответствии с запросом 10

11 пользователя. Например, так формируется страница результатов поиска, информация для которой извлекается из специальной базы данных (рис. 4). гибридные сайты Объединяют возможности двух первых типов. Рис. 4. Страница проблемно-ориентированного сайта авиакомпании ( сформирована в ответ на запрос о поиске рейсов на указанные даты вылета По частоте изменений контента. В зависимости от частоты обновления информации, различают: статические сайты К статичным относят сайты, страницы которых создаются однажды и в течение длительного времени не изменяются. динамические сайты Динамичными называют сайты, содержимое которых со временем изменяется (обновляется). Содержимое может модифицироваться на регулярной основе (с 11

12 заявленной периодичностью, например, ежедневно, еженедельно, ежемесячно) или по мере поступления свежей информации (рис. 5). Рис. 5. Сайт новостного агентства РИА-новости ( имеет динамическую структуру По назначению. По основному предназначению, сайты можно разделить на: коммерческие сайты Коммерческие сайты создаются преимущественно для поддержания бизнеса какой-либо организации. Основной аудиторией сайта являются потенциальные и настоящие клиенты организации, инвесторы, партнеры. Среди основных целей существования коммерческих сайтов можно выделить: распространение основной информации о компании, ее продукции и услугах, установление связи с инвесторами и общественностью, поиск служащих, электронная коммерция и др. (рис. 6). 12

13 Рис. 6. Главная страница коммерческого сайта АО Газпромбанк ( информационные сайты К информационным сайтам относятся, как правило, правительственные, образовательные, новостные сайты, а также сайты некоммерческих организаций, религиозных групп и т.д. В основе управления могут лежать некоторые коммерческие факторы, но основная цель, заключается в предоставлении информации. Аудитория сайта состоит из тех, кто имеет интерес или необходимость обратиться за информацией к авторитетному Интернет-источнику (рис. 7). развлекательные сайты Развлекательные сайты могут быть коммерческими и некоммерческими. Главное их предназначение развлечь своих посетителей, поэтому продаваемым товаром является само развлечение (рис. 8). 13

14 Рис. 7. Информационный сайт Президента Российской Федерации ( Рис. 8. Страница развлекательного сайта «Цитатник Рунета» ( общественные сайты Общественные сайты предоставляют возможность простого взаимодействия между посетителями и служат для них местом встреч, (гостевые книги, форумы и т.д.). На основе общественных сайтов строятся так называемые социальные сети. Интерактивные страницы, подобные площадкам общественных сайтов, могут присутствовать также на сайтах других видов, при этом, наличие 14

15 форумов, чатов или гостевых книг не означает, что сайта относится к категории общественных. навигационные сайты Навигационные сайты призваны оказывать пользователям помощь в поиске нужной информации в сети Интернет. К этому типу сайтов относят порталы, являющиеся своеобразными центрами, размещающие указатели на другие точки в Интернете, а также поисковые системы и каталоги сайтов (рис. 9). Рис. 9. Главная страница поисковой системы «Yandex.ru» ( художественные сайты (электронные выставочные площадки) Художественные сайты являются предметом самовыражения художника и служат для того, чтобы вдохновить, просветить или развлечь его посетителей (рис. 10). 15

16 Рис. 10. Художественный сайт галереи «Art Dozor» ( Галерея современной живописи «Art Bay» ( По характеру решаемых маркетинговых задач. Коммерческие сайты по характеру решаемых маркетинговых задач и, соответственно, уровню интерактивности, сайты можно разделить на следующие типы: сайт-визитка (сайт-буклет, сайт-каталог) К данной категории относятся простые сайты, состоящие из нескольких статичных страниц, имеющих общий дизайн-шаблон, основанный на фирменном стиле компании, на которых представлена минимальнонеобходимая (чаще всего только вводная и контактная) информация о фирме и продукции (рис. 11). Сайт-визитка подходит для небольших фирм или творческих групп, а также используется тогда, когда основной сайт находится на реконструкции или в процессе создания, либо когда руководство решает, что контактной информации о компании в сети Интернет достаточно для первого знакомства с клиентом. Сайт-буклет и сайт-каталог отличаются от сайта-визитки большим количеством информации (более подробной) о товарах и услугах. 16

17 Рис. 11. Главная страница сайта-буклета ресторана «У Швейка» ( Интернет-представительство Интернет-представительствами принято называть информационные, (как правило, коммерческие) сайты, содержащие полную информацию об организации: цели, задачи, политика, принципы работы, планы на будущее и т.д. Такие сайты создаются для решения задач формирования имиджа, привлечения новых клиентов, завоевания новых рынков и т.п. На страницах Интернет-представительства могут быть размещены каталоги продукции, подробная информация о товарах и услугах, новости, гостевые, форумы, система «вопрос-ответ» и т.п. Данный тип сайта подходит средним и большим компаниям, желающим расширить сферы своей деятельности. Интернетпредставительство обычно имеет простой, но элегантный дизайн на основе фирменного стиля компании (рис. 12). 17

18 Рис. 12. Главная страница сайта ОмГТУ, выполняющего функции Интернетпредставительства ( промо-сайт Промосайтом называют небольшие по рамеру сайты, предназначенные для информационного освещения проводимой акции, продвижения какого-либо товара или услуги. Такие сайты создаются, например, если компания продвигает на региональный рынок новый товар, в этом случае, промо-сайт будет посвящен только ему. Такие сайты обычно имеют яркий креативный дизайн с графикой, анимацией, оригинальной системой навигации и т.п. На таком сайте нет новостей или сложных программных модулей, но зато он привлекателен и хорошо запоминаем (рис. 13). Промо-сайты чаще всего создаются только на период проведения мероприятия. 18

19 Рис. 13. Промо-сайт, посвященный продвижению нового товара «Ручка агента 007» ( интернет-магазин Интернет-магазин или «электронный супермаркет» это самостоятельный сайт или группа страниц, которая может быть реализована вместе с любым другим видом сайта, начиная от визитки и заканчивая порталом. Интернет-магазин содержит товарные группы, позиции и цены товаров, страницы с потребительскими корзинами, формы заказов и др. порталы Порталами называют большие, со сложной внутренней структурой ресурсы, посвященные какой-либо теме, товару и т.д. (например, сотовой связи, поэзии, медицине и т.п.). Портал, как правило, содержит большое количество информации по определенной тематике, включая каталоги, списки телефонов, обзоры, статьи, форумы, ссылки на аналогичные по тематике сайты и т.п. (рис. 14). 19

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

21 Рис. 15. Для сайта, посвященного рекламе выбран вариант текстового дизайна ( стилизованные под пользовательский интерфейс Один из самых популярных способов организации сайтов можно назвать «сайты, действующие как обычные программные приложения». Дизайн таких сайтов стилизован под GUI (graphical user interface графический пользовательский интерфейс), то есть напоминает оформление пользовательского интерфейса, большинства программных продуктов среды Windows. Навигационные элементы представлены как меню, состоящее из разделов с вложенными подразделами и страницами, что повторяет способ организации документов большинства программных приложений (рис. 16). Этот тип дизайна предпочитают опытные пользователи, поскольку он является привычным, удобным и интуитивно понятным, что способствует увеличению скорости работы с сайтом и облегчению поиска нужной информации. 21

22 Рис. 16. Навигация сайта организована по принципу традиционного интерфейса большинства пользовательских приложений ( метафорические сайты Оформление такого рода сайтов основано на метафоре, то есть на использовании визуальных образов, связанных с образами реального мира. При метафорическом сравнении с объектами реального мира, знакомыми и понятными для посетителей, общение с сайтом становится простым и интуитивно понятным для не только для опытных, но и для начинающих пользователей. Однако, здесь существует опасность не все пользователи смогут понять метафору. Метафоричность проявляется главным образом в организации системы навигации по сайту. Такое исполнение привлекает внимание и хорошо запоминается, поэтому подходит для художественных или промо-сайтов, а так же редкопосещаемых страниц (рис. 17). Сайты, созданные с привлечением метафоры часто выполняют рекламные функции благодаря яркому запоминающемуся дизайну и навигации. 22

23 Рис. 17. Дизайн страниц сайта основан на метафоре, которой является книга, с вложенными закладками для удобного поиска и открытия наиболее нужных страниц ( нетрадиционный дизайн Сайты с экспериментальным или нетрадиционным дизайном отличает несоблюдение каких-либо соглашений, нарушение правил, предоставление содержимого и навигации в неожиданном варианте. Подобный тип дизайна используется чаще всего на сайтах, посвященных развлечениям, искусству, рекламе и т.п. УПРАЖНЕНИЕ 2. Определение топологии веб-сайта. 1. Выберите сайт для анализа. Классифицируйте сайт по: возможностям взаимодействия с контентом, частоте изменений контента, назначению, характеру решаемых маркетинговых задач (для коммерческих сайтов), типу дизайна (исполнения) сайта. 2. На основе анализа сделайте вывод о соответствие контента и оформления сайта целевой аудитории посетителей этого ресурса и решаемым посредством сайта задачам. УПРАЖНЕНИЕ 3. Выявление общих тенденций в оформлении сайтов одной категории. 23

24 1. Отыскать в Интернете 5-10 примеров сайтов одной из категорий: сайтвизитка, интернет-представительство, промо-сайт, портал. 2. Выявить общие тенденции в оформлении сайтов выбранной категории. Контрольные вопросы по теме «Виды веб-сайтов». 1. Что представляет собой веб-сайт? 2. По каким признакам классифицируют Интернет-сайты? 3. Какие задачи выполняет веб-сайт компании? 24

25 1.3. Веб-сайт компании. Этапы создания веб-сайта (жизненный цикл) Планируя разработку и запуск веб-проекта, следует начинать с главного определения его цели. Определение целей создания сайта необходимо для лучшего понимания истинных задач, которые владелец собирается решать с помощью сайта. Правильно и четко сформулированная генеральная цель позволит поставить конкретные задачи, решение которых приведёт к превращению сайта в эффективный инструмент рекламной, коммерческой или иной деятельности. Задачи сайта Компании могут преследовать различные цели присутствия сайта в сети Интернет, например: 1. Создание инструмента распространения информации о компании и ее бизнесе. Полноценный Интернет-сайт компании предоставляет документы, фото, аудио- и видеоматериалы, необходимые для формирования правильного представления о возможностях и деятельности компании, всем желающим. 2. Помощь компании в поддержании старых и установлении новых связей на рынке. Информационная среда Интернета упрощает процесс деловой переписки и общения. Кроме того, создание сайта позволяет избежать стандартных процедур ознакомления с деятельностью компании на ее территории. 3. Информационная и сервисная поддержка клиентов и партнеров. Посредством Интернет-сайта можно не только оперативно отвечать на вопросы, возникающие у пользователей продуктов и услуг компании, но и формировать базу часто задаваемых вопросов. Тем самым удастся избежать многократных разъяснений по решению одних и тех же задач. 4. Увеличение объема продаж и поиск новых покупателей продуктов компании. Компания, успешно работающая на традиционном рынке, при помощи Интернет-сайта может охватить большую целевую аудиторию, хотя бы потому, что расстояние не играет в сети Интернет такого принципиального значения, как в реальной жизни. 5. Реализация удаленной демонстрации товара для продвижения продаж (sales-promotion). На Интернет-сайте компании может быть представлена развернутая информация о товарах и услугах. Помимо общего описания в рамках ресурса возможна публикация рейтингов и аналитических отчетов, организация консультаций клиентов, партнеров и дилеров. 25

26 6. Осуществление информационной поддержки и информационного обмена с удаленными представительствами и торговыми точками. Для компании с региональными представительствами или несколькими торговыми точками в одном городе, Интернет может стать альтернативным каналом обмена информацией, обладающим более высокой скоростью, чем традиционные. При этом Интернет позволяет одинаково успешно передавать различную информацию: документацию, презентационные материалы, инструкции, внутренние документы и т.д. 7. Обеспечение круглосуточного предоставления услуг клиентам и партнерам. Интернет-сайт функционирует не разделяя время на «рабочее» и «нерабочее», поэтому к нему можно обращаться круглосуточно. Таким образом, в любое урочное и неурочное время, запросы клиентов, которым потребуются услуги или информация о бизнесе компании будут удовлетворены. 8. Организация оперативной обратной связи с клиентами в любой точке мира. Создание сайта позволяет компании не только предоставлять информацию посетителям, но и проводить маркетинговые исследования. Анализ результатов опросов, интерактивного общения, а также статистики посещений помогут компании определить эффективность отдельных мероприятий, скорректировать работу сайта и максимально приблизить информационное наполнение ресурса к запросам целевых аудиторий. 9. Взаимодействие с традиционными и электронными средствами массовой информации. СМИ проявляют повышенный интерес к Интернету как источнику первичной информации, поэтому сайт может использоваться как канал воздействия на журналистов. Сайт, представляющий в Интернете компанию, должен не просто нести информацию и делать рекламное или коммерческое предложение от лица организации, но, наряду с этим, быть ценным для пользователя. Он должен не только обозначать факт присутствия в сети, а формировать новый позитивный взгляд на продвигаемую марку/услугу/прочее. Жизненный цикл информационной системы Веб-сайт представляет собой информационную систему (ИС), жизненный цикл которой включает в себя все этапы развития от возникновения потребности и определенного целевого назначения сайта, до полного прекращения его использования вследствие морального старения или потери необходимости решения соответствующих задач. 26

27 Понятие жизненного цикла является одним из базовых в методологии проектирования информационных систем. Жизненный цикл системы процесс создания и сопровождения сайта представляется перечнем этапов (стадий) и выполняемых на них процессов. Для каждого этапа определяются временные рамки, состав и последовательность выполняемых работ, получаемые результаты, методы и средства, необходимые для выполнения работ, роли и ответственность участников и т. д. Такое формальное описание жизненного цикла ИС позволяет спланировать и организовать процесс коллективной разработки и обеспечить управление этим процессом. Полный жизненный цикл информационной системы, как правило, включает в себя: стратегическое планирование, анализ, проектирование, реализацию, внедрение, эксплуатацию, утилизацию. Структура, определяющая последовательность выполнения этапов работ и взаимосвязи процессов, действий и задач на протяжении жизни ИС называется моделью жизненного цикла информационной системы. Модель ЖЦ ИС включает в себя: стадии (часть процесса создания ИС, ограниченная определенными временными рамками и заканчивающаяся выпуском конкретного продукта (техническое задание, макет веб-страниц, пр.), определяемого заданными для данной стадии требованиями); результаты выполнения работ на каждой стадии; ключевые события (точки завершения работ и принятия решений). В настоящее время в проектировании информационных продуктов используются следующие модели жизненного цикла. Каскадная модель (рис. 18) предусматривает последовательное выполнение всех этапов проекта в строго фиксированном порядке. Переход на следующий этап означает полное завершение работ на предыдущем этапе. 27

28 Рис. 18. Каскадная модель жизненного цикла ИС Поэтапная модель с промежуточным контролем (рис. 19). Разработка ИС ведется итерациями с циклами обратной связи между этапами. Межэтапные корректировки позволяют учитывать реально существующее взаимовлияние результатов разработки на различных этапах; время жизни каждого из этапов растягивается на весь период разработки. Рис. 19. Поэтапная модель с промежуточным контролем Спиральная модель (рис. 20). На каждом витке спирали выполняется создание очередной версии продукта, уточняются требования проекта, определяется его качество, и планируются работы следующего витка. Особое внимание уделяется начальным этапам разработки — анализу и проектированию, где реализуемость тех или иных технических решений проверяется и обосновывается посредством создания прототипов (макетирования). 28

29 Рис. 20. Спиральная модель ЖЦ ИС В практике создания веб-ресурсов наибольшее распространение получили две основные модели жизненного цикла: каскадная и спиральная модели. Аудитория веб-сайта При создании сайта важно понимать для кого он создаётся, то есть обозначить характеристики целевой аудитории. При описании аудитории учитываются: география проживания; демографические характеристики (национальность, язык, пол, возраст, образование, род занятий и т. п.); уровень технической подготовки; конфигурация компьютера, тип соединения с сетью, тип используемого браузера; пути попадания пользователей на сайт; задачи, которые пользователи пытаются решить посредством сайта; время и продолжительность посещения сайта; число и причины повторных визитов, предпочтения, тип поведения пользователей др. Помимо основных, перечисленных выше, характеристик аудитории, важно также определить причины, побуждающие пользователей обращаться к сайту и то, каким образом посетители решают свои задачи. Знание целевой аудитории позволяет сформулировать конкретные и измеримые цели существования сайта, а также его дизайн-концепцию. Составляющие процесса создания рекламно-информационного сайта Процесс создания веб-сайта включает в себя несколько этапов: выбор доменного имени сайта; определение информационного наполнения (контента); разработку структуры и системы навигации по сайту; разработку дизайна сайта; разработку инструментов работы с аудиторией (интерактивности). Выбор доменного имени (адреса) и названия сайта Чаще всего, посетители попадают на сайт, просто угадывая его название, исходя из своих представлений о существовании некой услуги или торговой марки. Кроме того, на сайт могут попасть те пользователи, кто-то уже посещал ресурс (например, перейдя на него по ссылке) и запомнил его название с целью повторного посещения. Помимо этого, аудитория сайта активно пополняется из числа тех, кто, обратил внимание на Интернет-адрес компании, указанный в рекламных материалах (на радио, в буклетах, в газетах, визитках и т.п.) в офлайн среде. 29

30 В описанных примерах, да и в реальной практике, посещаемость сайта напрямую зависит от правильности выбора доменного имени 3. Грамотный подход к выбору доменного имени не только способствует привлечению дополнительных пользователей, но и становится одной из наиболее значимых частей маркетинговой кампании. Для выбора доменного имени существуют следующие рекомендации: доменное имя должно однозначно ассоциироваться с компанией владельцем сайта (содержать название компании либо указывать на сферу её деятельности и т.п.); имя должно быть достаточно коротким и легко произносимым; доменное имя должно быть простым в написании (во избежание ошибок пользователей при его наборе) и легко запоминаться. доменное имя не должно быть похожим на имя конкурентов (в случае его неправильного написания). Соблюдение данных рекомендаций помогает получить дополнительный приток посещений за счет более легкого обнаружения веб-сайта пользователями, обладающими первоначально малым объемом информации об искомой организации. По адресам (для доменных зон:.com,.org,.net,.org) и (для доменной зоны.ru) можно проверить, зарегистрировано ли уже на кого-либо выбранное имя. Кроме того, проверить, занято ли выбранное доменное имя, а также получить список только что освободившихся доменов, можно на сайте Определение информационного наполнения сайта (контента) Одной из самых важных составляющих сайта является контент. Контент это информационное наполнение сайта: тексты, иллюстрации, интерактивные элементы, подобранные и упорядоченные в соответствии с заранее продуманной концепцией и структурой сайта. Собственно, контент это то, ради чего посетители приходят на сайт. Наполнение сайта тематической информацией, выполняет одновременно две важные функции: повышение ценности и значимости сайта по сравнению с конкурентами; повышение его значимости для поисковых систем. 3 Дополнительная информация в книге: Серго А. Г. Доменные имена: монография. М.: Российская государственная академия интеллектуальной собственности (ФГБОУ ВПО РГАИС), с. 30

31 Различают «стартовое» информационное наполнение веб-сайта, которое проектируется на этапе создания, и текущее информационное наполнение, которое организуется на этапе эксплуатации веб-сайта в рамках работ по сопровождению (поддержке) или модернизации сайта. В работе по созданию контента учитываются следующие факторы: тип, формат представления и полнота информационного наполнения интернет-ресурса; удобство восприятия и поиска информации на страницах сайта (структурирование), корректность отображения информации на различных программных платформах (на компьютерах посетителей сайта); стиль изложения информации, соответствие стиля особенностям основной целевой аудитории; акценты в представлении информации, определяемые логикой подачи материалов; предполагаемая периодичность обновления и добавления информации; использование ключевых фраз, поисковых слов и т.п., требуемых для продвижения ресурса. При разработке контента особые требования предъявляются к форме подачи информации. Вызвано это рядом объективных причин: особенностью поиска информации в сети В Интернете, в отличие от прочих масс-медиа, продукция конкурентов (сайты сходной тематики) присутствует в огромном количестве и находится на расстоянии одного щелчка мыши. Поэтому важно максимально быстро завладеть вниманием пользователя и постараться удержать его. Из-за дефицита внимания, в Интернете часто практикуется пирамидальная структура представления информации: сначала главное, ниже — подробности. Самый важный материал, дающий представление о теме, выносится в начало страницы (на первый экран). Кроме того, применяется представление информации посредством заголовка и краткого анонса — если интересно, нажми на ссылку «подробнее» и прочитай полный текст. особенностью восприятия информации на экране Человеку привычно считывать информацию не с экрана, а с печатного листа, когда глаз скользит по коротким текстовым строкам, а движение глаза направляют специальные засечки на символах типографских шрифтов. Текст 31

32 же экранной строки имеет большее количество символов (длину строки) и, как правило, оформляется шрифтом без засечек, поэтому чтение с экрана быстро утомляет и большинство пользователей избегают читать с экрана длинные тексты. Для удобства чтения, большие текстовые блоки на экране уместно разбивать на небольшие абзацы, разделённые между собой пустыми строками, и дублировать «версией для печати», которую, напротив, рекомендуется делать «нормального» размера, а не дробить на небольшие куски. Кроме того, в целях облегчения восприятия, рекомендуется расставлять смысловые акценты, используя выделение цветом, размером шрифта и т.п. необходимостью оплачивать время, проведённое в сети, либо полученный объем информации. Несмотря на большое разнообразие способов подключения к Интернету и вариантов оплаты, можно утверждать, что только пользователи с подключением, предполагающим безлимитный трафик и достаточно высокую скорость передачи данных, не испытывают тревогу относительно времени загрузки и размера (в байтах) страницы сайта, а так же быстроты поиска на нем нужной информации. Чтобы знакомство с сайтом было наиболее комфортным для пользователя, следует делать так, чтобы уже по главной странице пользователь смог понять, что представляет собой сайт и чем будет интересен и полезен. В связи с этим, на главной странице уместно помещать анонсы новостей, оповещать о новых продуктах и маркетинговых программах. Очень важным является и размер файлов загружаемых документов (страниц). Нельзя допустить потери посетителя только потому, что он не смог дождаться окончания загрузки сайта. Желательно не делать объем заглавной страницы более 70 килобайт (у прочих страниц размер должен быть еще меньше). Графика, которая используется, на сайте, должна быть максимально оптимизирована в соответствии с данным требованием. В настоящее время особое внимание уделяется возможности персонализации контента. С помощью средств персонализации пользователь может сам формировать состав и форму подачи ему информации на том либо ином сайте, включать только интересные ему новости, получать информацию в удобном для него оформлении и т.д. Разработка системы навигации по сайту 32

33 Разбивка информации на смысловые блоки, ее структурирование и распределение по отдельным страницам приводит к необходимости создания продуманной системы навигации веб-сайта. Система навигации веб-сайта представляет собой совокупность гипертекстовых ссылок, связывающих воедино все страницы сайта по определенному принципу. Главное ее предназначение состоит в том, чтобы сориентировать пользователя при поиске информации на сайте и оказать помощь в перемещении по сайту. Основные требование к системе навигации: навигация должна быть интуитивно понятной для пользователя с любым уровнем подготовки; должна обеспечивать быстрый поиск необходимой посетителю информации; должна давать представление о том, из чего состоит сайт и что полезного можно в нем найти. Существует целый набор разноплановых средств навигации, каждое из которых удобно для определенного круга пользователей, либо для конкретного типа поиска информации на сайте. При этом, некоторые элементы навигации дублируют друг друга. Основными группами навигационных элементов являются: навигация сверху (снизу), навигация слева, навигация справа. Навигация сверху в виде меню удобна и популярна, поскольку напоминает интерфейс большинства пользовательских программных приложений. В ней содержится перечень разделов и подразделов сайта, который, как правило, дублируется также снизу страницы, чтобы избавить пользователя, достигшего конца страницы и желающего продолжить изучение сайта, от лишней прокрутки. Навигация слева страницы является самой распространенной для людей читающих слева направо, поскольку находится в начале пути следования глаз читающего. Навигация справа используется также довольно часто, поскольку расположение рядом с полосой прокрутки удобно для пользователей, нацеленных на быстрое перемещение по сайту, т.к. позволяет сократить расстояние, которое пробегает мышь. 33

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

35 Инструменты работы с аудиторией (интерактивность) Для эффективной работы рекламно-ниформационного сайта существует комплекс средств работы с аудиторией, направленный как на удержание целевой аудитории, так и на сбор информации. Обратная связь позволяет посетителю не только пассивно просматривать информацию, но и быть задействованным в формировании контента веб-сайта. В качестве средств обратной связи между пользователем и владельцем вебресурса могут выступать: почтовая форма (пользовательская форма, в которой посетитель может изложить суть обращения и предоставить свои персональные данные для получения ответа (чаще всего по электронной почте); гостевая книга (электронная книга жалоб и предложений, в которой любой желающий может оставить свой отзыв, замечание, и т.п., содержание которого будет доступно всем посетителям; интернет-форум (способ организации диалога между человеком, задающим вопрос, и специалистом компании, таким образом, чтобы в обсуждении могли принять участие все заинтересованные лица. Поднятая тема и ответы участников доступны для просмотра всем посетителям сайта в течение долгого времени. Темы диалогов сгруппированы по разделам, что делает их поиск наиболее удобным); чат (способ организации единовременного общения многих пользователей в режиме реального времени. В отличие от форумов, диалог в чате возможен только между посетителями, одновременно находящимися в комнате чата). Для изучения пользовательского спроса на тот или иной вид товаров и услуг, выявления и последующего анализа реакции посетителей на какие-либо события, на сайте могут устраиваться всевозможные опросы, анкетирования, голосования, тесты и пр. Электронные бланки, предлагаемые для заполнения посетителям сайта, информация с которых будет передана на сервер для обработки, называются пользовательскими формами. Для получения авторизованного доступа к более подробной или адресной информации, посетителям сайта может быть предложена регистрация на сервисе и составление пользовательского профиля. Пользовательским профилем называется совокупность персональных данных, которые указывает о себе посетитель при регистрации (имя, регион проживания, возраст, увлечения и т.п.) и которые впоследствии может изменить путем редактирования. 35

36 Таким образом, для создания ощущения сопричастности потребителей к жизни организации, формирования и объединения активной аудитории сайта, необходимо разрабатывать и активно использовать в работе веб-проекта различные формы интерактивности. УПРАЖНЕНИЕ 4. Жизненный цикл персонального сайта. 1. Продумайте и опишите этапы создания собственного персонального сайта. Представьте в виде подробной схемы жизненный цикл данного информационного продукта. Контрольные вопросы по теме «Веб-сайт компании. Этапы создания вебсайта». 1. Назовите возможные цели создания Интернет-сайта компании? 2. Перечислите основные этапы создания рекламно-информационного сайта 3. Объясните, как выбор доменного имени сайта влияет на его посещаемость. Чем следует руководствоваться и чего избегать при выборе доменного имени сайта? 4. Что представляет собой система навигации веб-сайта? Каково ее назначение, что входит в состав? 5. Какие основные функции выполняет дизайн сайта? 6. Какие инструменты интерактивности используются для организации обратной связи с посетителями сайта? 36

37 ГЛАВА 2. ОСНОВЫ ВИЗУАЛЬНОГО ДИЗАЙНА ВЕБ-РЕСУРСОВ Страницы сайта проектируются таким образом, чтобы обеспечить ясное представление информации, составляющей основной контент веб-ресурса. При этом, накопленный опыт исследования и проектирования различных информационных продуктов показал, что любое визуальное средство отображения информации должно прорабатываться не только в плане узкой функциональной задачи с целью передачи конкретного содержания, но и как объект эстетического восприятия Основные принципы дизайна Специалисты в области графического дизайна утверждают, что из множества факторов, определяющих эстетический уровень визуального объекта, особенно существенное влияние на процесс восприятия информации оказывает композиция. Под композицией веб-страницы принято понимать общее расположение, построение всех составных элементов графического макета документа таким образом, чтобы обеспечивались единство и цельность, соподчинение компонентов друг другу и целому. Всю работу по созданию композиционного решения графического средства представления информации можно разделить на два этапа: 1) компоновку и 2) художественно-композиционное решение графического средства. «Компоновка» подразумевает работу, направленную на достижение функциональной и эргономической целесообразности средства представления информации, «композиция» же направлена на обеспечение высокого художественного уровня этого средства. Экспериментальные эргономические исследования специалистов в области проектирования различных типов графических средств представления информации позволили сформулировать ряд общих принципов компоновки. Общие принципы компоновки 4. Принцип лаконичности. Графическое средство представления информации должно содержать лишь те элементы, которые необходимы для сообщения наблюдателю существенной информации, точного понимания ее значения или принятия соответствующего оптимального решения. Принцип обобщения и унификации. 1) Основные формы графического средства не следует излишне дробить, включая в них элементы, несущественные для 4 Боумен У. Графическое представление информации. (перевод с англ.) М.: Мир, с. 37

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

39 Основные принципы графического дизайна. Акцентирование. Акцентирование подчеркивание особой важности и значимости какого-либо элемента. Некоторые дизайнеры используют иное название для обозначения принципа акцентирования «фокусная точка». Фокусной точкой называют визуальный объект, который используется как средство привлечения внимания, точка, от которой пользователь начинает свое путешествие по странице («точка входа»). Фокусная точка самая важная деталь любого макета. Это та часть изображения, которая обращает на себя внимание, она привлекает глаз зрителя к наиболее важным деталям изображения, где бы ни располагалась. Применяются и другие термины (в некотором смысле, синонимы), которые описывают данный прием: эмфаза 5 ; визуальный центр. Существуют два правила, касающиеся использования фокусной точки: 1) фокусная точка должна быть. Без нее зритель не поймет, на что смотреть в первую очередь; 2) фокусная точка на странице должна быть одна. Фокусной точкой может быть все что угодно, впечатляющая фотография, иллюстрация, текст или комбинация элементов (рис. 21). Для правильной расстановки акцентов в рамках одного документа (вебстраницы) требуется проанализировать содержимое, выяснить иерархию элементов в содержимом, выстроить элементы в порядке их важности. Подобное действие позволит избежать акцентирования на всём сразу, а также избежать случайной иерархии. 5 Эмфаза визуальное выделение части текста (изображения) с целью сделать его более заметным, эмоционально окрашенным 39

40 Рис. 21. Большая фотография, крупный шрифт надписи и яркая кнопка акцентируют внимание на информации о новом тарифе ( Контрастирование. Контрастирование визуальная дифференциация двух и более элементов. Контрастирование связано с акцентированием, и направлено на удобство восприятия информации на странице веб-сайта. Оно вносит вклад в формирование визуальной иерархии, определяющей важность элементов (рис. 22). Характеристики элементов, которыми можно манипулировать для повышения контраста: цвет; размер; местоположение; тип и толщина шрифта. 40

41 Рис. 22. Контрастирование цветом и размером диффиринцирует информационные блоки на странице сети магазинов «Мега» ( Балансировка Балансировка распределение визуальной нагрузки в рамках веб-страницы. Группирование элементов в дизайне создает визуальную нагрузку. Она уравновешивается путем использования равнозначной нагрузки «на противоположной чаше весов» (рис.23). Различают два вида баланса: 1) симметричный левая и правая части относительно некоторой оси являются зеркальными копиями друг друга и несут идентичную визуальную нагрузку ( ( 2) ассиметричный визуальная нагрузка равномерно распределяется по некоторой оси, но отдельные элементы двух составляющих дизайна не являются зеркально одинаковыми ( 41

42 Рис. 23. Визуальная нагрузка левой и правой частей страницы уравновешены ( Встречается также радиальный баланс, когда элементы располагаются вокруг центра кругами. Выравнивание Схожие по смыслу элементы часто объединяют в группы. Для визуального обозначения множества элементов как единой группы, их обычно выстраивают в определенном порядке и выравнивают (рис. 24). Выравнивание упорядочивание элементов таким образом, чтобы они максимально близко подступали к естественным линиям или границам, которые они образуют. Невыравненные элементы отбиваются от общей группы. Примерами выравненных элементов могут служить расположенные на одной линии заголовки нескольких столбцов или выстроенные в столбец элементы, левые края которых находящиеся на одной вертикальной линии. 42

43 Повторение Повторение неоднократное использование в дизайне одних и тех же элементов разными способами. Повторение может выражаться в использовании того же: цвета; очертаний; линий; шрифтов; изображений; общего подхода к стилизации. Преимущество повторения предсказуемость, согласованность, постоянство, визуальная связанность. Рис. 24. В обозначении радиостанций повторяется форма. Группы элементов выравнены ( 43

44 Движение взгляда (обеспечение удобства восприятия) Люди склонны осматривать те или иные вещи в предсказуемой манере. При визуальном ознакомлении с элементами веб-страницы, глаз следует определенной траектории. Принцип движения основывается на том, что хороший дизайн контролирует и направляет движение глаз по композиции веб-страницы. Восприятие страницы динамично отдельные участки взгляд пробегает быстро, на других задерживается дольше. Взгляд посетителя веб-сайта скользит от одной части композиции к другой, ведомый непрерывными линиями или фигурами, а также градациями цвета или фигур. Динамическое движение (перемещения взгляда по веб-странице), чаще всего, организовывается в соответствие с некоторой схемой. В коммерческом графическом дизайне (дизайне рекламы) есть несколько распространенных схем: Z-схема (естественная траектория движения взгляда) и подобнае ей «Зиг-заг» (рис. 25 а, б); а) Траектория движения глаза соответствует букве Z 44

45 б) Траектория движения глаза напоминает зиг-заг Рис. 25. Страницы, при изучении которых глаз следует по зигзагообразной линии круговая (приводит взгляд читателя обратно к началу, чтобы послание прочитывалось еще раз) (рис. 26); 45

46 Рис. 26. Страница, при изучении которой глаз следует по круговой линии ( F-схема (Е) (рис. 27) 46

47 Рис. 27. Страница, при изучении которой траектория движения глаза напоминает букву F УПРАЖНЕНИЕ 5. Анализ использования основных принципов графического дизайна в оформлении веб-страниц. 1. Найдите в оформлении веб-страниц сайтов различного назначения отражение основных, описанных в тексте параграфа, принципов дизайна. 2. Сделайте вывод о том, соответствует ли дизайн большинства исследованных страниц принципам графического дизайна. 3. Найдите примеры страниц, где композиция направляет движение взгляда пользователя: по Z-схеме, F-схеме, круговой схеме. Контрольные вопросы по теме «Основные принципы дизайна». 1. Назовите основные принципы графического дизайна, используемые в оформлении веб-страниц. 2. Почему на веб-странице не могут присутствовать две фокусные точки? 3. Назовите основные схемы движения взгляда по веб-странице. 47

48 2.2. Верстка веб-страниц В веб-дизайне, как и в традиционной полиграфии, под версткой понимается процесс размещения текста и иллюстраций в заданном пространстве листа. При верстке веб-страница рассматривается как набор прямоугольных блоков, которые располагаются в определенном порядке. Слово «порядок» предполагает обращение к одному из основных принципов дизайна выравниванию. Выравнивание обеспечивает порядок, который, кроме прочего, позволяет быстро найти интересующий нас предмет. Для обеспечения выравнивания, верстку уместно выполнять с применением вспомогательных вертикальных и горизонтальных линий. Расчерченную горизонтальными и вертикальными линиями поверхность называют сеткой. Каркас из линий сетки позволяет задавать скелетную структуру макета документа. По линиям сетки группируют и выравнивают визуальные объекты, текст и отрицательное пространство 6. Сетка позволяет стабилизировать структуру веб-страницы, облегчает размещение разнообразных данных в плоскости документа. В этом смысле сетка представляет собой логический шаблон для создания сайта. (ОПАСНОСТЬ: используя сетку, легко забыть о главных и дополнительных элементах дизайна сетка уравнивает всех. Сетка инструмент, а не самоцель дизайна) Для создания сетки, которая станет основой будущего макета, следует определить: Формат формат (размер площадки размещения контента веб-страницы); тип сетки (регулярная или ассиметричная; колончатая или клеточная). Веб-страницы просматриваются пользователями экранах разных размеров и с разными соотношениями сторон. Кроме того, окно браузера не обязательно будет открыто пользователем «во весь экран». Эти обстоятельства заставляют уже на начальном этапе создания сетки определиться (естественно, на основе аргументов), какой из двух вариантов использовать: формат, фиксированный по ширине; 6 Положительным называют пространство, которое занимают объекты и элементы дизайна. Отрицательное пространство это область вокруг объектов. 48

49 гибкий формат (резиновая сетка используется для адаптивной верстки). Модульная сетка Модульная сетка это набор скрытых направляющих, вдоль которых могут располагаться элементы веб-страницы, модуль условный блок в конкретной сетке, шаг в ее ритме. Модульная сетка четко задает структуру макета, описывает размещение блоков в дизайне сайта. Кроме того, она позволяет создать единый стандарт возможного расположения блоков для всех страниц сайта 7. Структура модульной сетки в веб-дизайне такова: cетка состоит из юнитов и промежутков между ними (рис. 28). Юнит это единичный компонент, на основе которого формируются колонки. Каждый юнит по умолчанию имеет правый отступ и левый отступ, эти отступы одинаковой ширины. Расстояние между юнитами сумма правого и левого отступов соседних юнитов. Между крайними юнитами и границами сетки тоже есть отступы. Таким образом, модульную сетку описывают три основных параметра: 1) ширина всей сетки; 2) ширина юнита; и 3) ширина отступов между юнитами. 960 px 1 юнит 80 px 60 px Рис. 28. Структура модульной сетки Представляемые на веб-странице данные размещают по колонкам. Колонки это группы юнитов, которые объединяются, чтобы создать рабочую зону, подходящую для размещения материала. Большинство текстовых колонок состоят из двух или нескольких юнитов. Например, сетка из двенадцати юнитов может образовывать шесть колонок по два юнита в каждой, либо три колонки по четыре юнита в каждой и т.д. 7 онлайн сервис для генерации модульной сетки. Позволяет создать собственную модульную сетку и скачать ее в формате PNG, в виде паттерна для Фотошопа или прозрачной маски. 49

50 В зависимости от количества материала и целей сайта применяют различные типы модульной сетки термины одно-, двух-, трех- или многоколонные. Рассмотрим эти варианты. Обычно при создании эскиза применяют схематические обозначения. Например, текст обозначают горизонтальной штриховкой, а изображения перечеркнутыми прямоугольниками или затемненными блоками. Одноколонный макет Одноколончатая модульная сетка чаще всего применяется при публикации большого текста. Такой дизайн отличает минимализм оформления здесь основное внимание уделяется содержательной части. В типичной схеме одноколонной модульной сетки обычно присутствуют четыре основных блока: заголовок страницы, навигация по сайту, основной текст, контактная и правовая информация (в самом низу страницы). При большом объеме основного текста, когда высота страницы очень большая, то внизу дублируют блок навигации по сайту или ставят ссылку «Наверх» (рис. 29). Рис. 29. Одноколонная верстка веб-страницы Как видно из примера, на странице могут присутствовать рисунки, иллюстрирующие текст, при этом, текст обтекает их по контуру. Если на сайте планируется размещать много изображений, то удобнее всего применять фиксированный макет. В этом случае изображения можно делать одного размера, с которым они идеально впишутся в макет веб-страницы. 50

51 Двухколонный макет Такая модульная сетка состоит из двух колонок: в одной размещается основной текст, во второй навигация и другая необходимая информация. Колонка с навигацией может располагаться как слева так и справа (рис.30). Рис. 30. Двухколонная верстка веб-страницы Двухколонные сетки очень удобны для создания информационных сайтов. В таком макете все элементы находятся в непосредственной близости: и основной текст и навигация, и ссылки. Основным недостатком сайтов, свёрстанных на основе двухколончатого макета является то, что такие сайты выглядят достаточно однообразно. Однако, оно же и плюс пользователям удобно работать с сайтом привычного вида. Трехколонный макет Чаще всего трехколоночную сетку применяют на главной странице сайта, где пользователю нужно показать много информации. Также такая сетка применяется и на внутренних страницах, если двух колонок не хватает для размещения всей информации (рис. 31). Рис. 31. Техколонная верстка веб-страницы 51

52 В таком макете в одной колонке размещают навигацию, во второй основной текст, а в третьей колонке помещают дополнительную информацию (ссылки, рекламу и т. д.). Многоколонный макет В настоящее время активно используют многоколонные модульные сетки. Такая сетка позволяет разбить контент веб-страницы на отдельные фрагменты, объединить колонки или отделить различные блоки (рис. 32). Рис. 32. Многоколонная верстка веб-страницы 52

53 Существуют специальные ресурсы, которые генерируют своеобразный cssфреймворк (файл описания параметров блоков), верстальщику остаётся только скачать этот файл, подключить его, и использовать уже готовые блоки нужной ширины. УПРАЖНЕНИЕ 6. Верстка веб-страниц на основе модульной сетки. 1. Найдите примеры веб-страниц с одно-, двух-, трех- и многоколонной версткой. 2. С помощью любого онлайн-сервиса, предоставляющего услуги генерации модульной сетки, создайте собственную модульную сетку и на ее основе выполните верстку макета главной страницы или страницы «Мои фотографии» воображаемого персонального сайта. Контрольные вопросы по теме «Верстка веб-страниц». 1. Какой процесс называется версткой сайта? 2. Что представляет собой модульная сетка, для чего она используется? 3. Для каких типов веб-страниц характерны одно-, двух-, трех- и многоколонный макеты? 53

54 2.3. Адаптивный дизайн сайтов Благодаря развитию мобильных технологий, в последние годы все больше и больше людей используют свои гаджеты для доступа в Интернет. Однако, такие особенности мобильных устройств, как небольшой размер дисплея и сенсорный экран делают их неудобными для просмотра обычных веб-сайтов. По версии исследовательской компании Morgan Stanley Research, число мобильных интернет-пользователей в 2014 году превысит число стационарных пользователей во всем мире, а это означает, что более половины трафика будут генерировать мобильные устройства (мобильные телефоны, смартфоны и коммуникаторы) (рис. 33). Рис. 33. График изменения числа мобильных интернет-пользователей По заявлениям некоторых специалистов, данный прогноз говорит, что «если веб-ресурс не будет оптимизирован под мобильные устройства, пользователи будут бежать с такого сайта, как от чумы». Из этого следует сайты должны адаптироваться к растущему числу мобильных устройств с их относительно небольшими экранами. Решением проблемы стала бы разработка дизайна, адаптирующегося к параметрам устройства вывода, отзывчивого дизайна (рис. 34). Впервые термин «отзывчивый веб-дизайн» (Responsive Web Design, RWD) был обозначен в одноименной статье Итана Маркотта, опубликованной 25 мая 2010 года в журнале A List Apart. 54

55 Рис. 34. Издание книги Итана Маркотта «Отзывчивый веб-дизайн» предлагается читателям в печатном и электронном виде, адаптированном для всех типов устройств Отзывчивым, или реагирующим или адаптивным веб-дизайном был назван подход к разработке сайтов, согласно которому ресурс должен быть удобным для просмотра с любого устройства, независимо от размера экрана. Таким устройством может быть: стационарный компьютер, ноутбук, планшет и пр. Рассмотрим подробнее идеологию (и технологию) адаптивного дизайна. Современные мобильные устройства обладают широким функционалом и по многим параметрам уже не уступают настольным компьютерам. Однако у них есть своя специфика и особенности использования, которые следует учитывать: маленький экран. Этот параметр может трактоваться двояко. Вопервых, мобильные устройства имеют меньший размер экрана. У смартфонов этот размер составляет 3-4 дюйма, у планшетов -7-10, тогда 55

56 как средний ноутбук имеет размер экрана 15 дюймов, а настольный монитор 19 и больше. Во-вторых, разрешение экрана смартфонов также не превышает разрешения современных мониторов; низкое быстродействие. Несмотря на стремительное развитие, смартфоны пока отстают по этому параметру от настольных компьютеров и ноутбуков; меньшая пропускная способность мобильных сетей. Даже при поддержке 3G она, как правило, не превышает 1 Мбит/сек, а более ранние протоколы имеют еще меньшую скорость передачи данных; способ ввода. Большинство современных смартфонов и планшетов оснащены сенсорными экранами, которые характеризуются ограниченной точностью позиционирования; неудобство клавиатуры. Известно, что любая, даже qwerty-клавиатура мобильного устройства, уступает в удобстве самой простой настольной из-за маленького размера клавиш и сложности набора некоторых символов; ограниченная многозадачность. Работа в сети Интернет с помощью мобильных устройств сопровождается большим количеством ограничений. Например, возможность полноценного перемещения между открытыми вкладками крайне проблематична. Перечисленные аспекты, и, в особенности, маленький размер дисплея, делают просмотр обычного веб-сайта на мобильном устройстве несколько затруднительным. Широко распространенным подходом решения этой проблемы является создание самостоятельной версии сайта для каждого из устройств (PDAверсии от англ. Personal Digital Assistant персональный цифровой помощник). Однако, разнообразие портативных устройств настолько велико, что возникает необходимость создания сразу нескольких версий для мобильных устройств, что экономически нецелесообразно. Кроме того, дублирование информации на различных версиях сайта плохо сказывается на позициях сайта в поисковых системах и вебометрических рейтингах. Гораздо более перспективным является создание адаптивного веб-сайта, способного приспосабливаться к требуемым параметрам различных устройств. Технология построения сайтов по принципу адаптивного дизайна позволяет создать один сайт, имеющий оптимальное отображение на всех видах устройств, при этом не требующий никаких действий со стороны 56

57 пользователя (ручной или автоматический переход на мобильную версию, если разрешение меньше заданного). Основная идея адаптивного веб-дизайна состоит в том, что сайт должен «реагировать» на устройство, на котором его просматривают. Итан Маркотт, автор книги «Отзывчивый веб-дизайн», полагает, что для создания отзывчивого дизайна требуются три основных компонента: гибкий макет на основе сетки (flexible, grid-based layout) гибкие изображения (flexible images) медиазапросы (media queries), модуль спецификации CSS3. В более широком плане это может означать следующее: адаптацию шаблона в соответствии с различными размерами экранов, начиная от широкоэкранных настольных компьютеров до крошечных телефонов; изменение размеров изображения в соответствии с разрешением экрана; обслуживание низкоскоростных изображений на мобильных устройствах; упрощение элементов страницы для использования в мобильных устройствах; скрытие несущественных элементов на небольших экранах; предоставление больших по размеру и удобных для нажатия пальцами ссылок и кнопок для мобильных пользователей; выявление и реагирование на мобильные функции, такие как геолокация и ориентация устройства. В основу «гибкого макета» положен принцип пропорций (fluid grids). Идея «гибкого» или «текучего» макета состоит в том, что при верстке вместо абсолютных величин используются относительные, т.е. значения задаются в процентах и «em». Так, например, для задания ширины блока в процентах, искомое значение находится по следующей формуле: ширина блока (%) = ширина блока (px)/ширина макета (px). Основная идея «гибких изображений» (flexible images) заключается в том, что для изображений следует применять свойство . В этом случае изображения не будут выходить за пределы родительского блока, даже если они превышают размеры блока. Изображение при этом будет 57

58 пропорционально уменьшаться. Этот же подход применим к видео, флешвставкам и другим объектам. Медиазапросы (media queries) являются частью стандарта CSS, которая позволяет применять стили на основе информации о разрешении экрана, высоте и ширине браузера, ориентации в пространстве и возможностях устройства. Идея медиазапросов заключается в том, чтобы определить, как размещать информацию, какую информацию показывать, а какую нет, в зависимости от значения всех этих параметров. Например, при создании media query для окон, ширина которых менее 700 пикселей, можно применить набор пользовательских правил CSS, которые автоматически подстраивают элементы страницы, когда страница выводится на узкие окна браузера. Вот некоторые наборы правил стандарта CSS media queries, где width это ширина окна браузера, а device-width ширина экрана устройства: min-width: width (применяется, если ширина окна больше или равна ширине шаблона); max-width: width (применяется, если ширина окна меньше или равна ширине шаблона); min-device-width: width (применяется при ширине экрана устройства больше или равной ширине шаблона); max-device-width: width (применяется при ширине экрана устройства меньше или равной ширине шаблона). Если экран маленький, необходимо перегруппировать все элементы так, чтобы они разумно умещались на экране, если большой, значит нужно оптимально занять доступное место. При создании адаптивного сайта следует учитывать, что мобильные устройства, с которых будет просматриваться сайт, в большинстве случаев имеют сенсорный экран. Человеческие пальцы не самый точный инструмент. Им не хватает аккуратности компьютерной мыши. При разработке тач-интерфейса сайта необходимо это учитывать. Так, ссылки, элементы навигации и пункты меню не следует делать слишком мелкими. Таким образом, следует придерживаться правила: чем важнее выполняемая задача, тем крупнее должна быть зона касания. В руководстве ios Human Interface Guidelines Apple рекомендует, чтобы размер зоны для нажатия составлял пункта. В качестве единицы измерения компания Apple 58

59 использует пункты, а не пикселы, поскольку экраны разных устройств имеют разное разрешение. Компания Microsoft также применяет этот подход в руководстве для Windows Phone 7. В частности, предусмотрено, что оптимальный размер тач-зоны (исходя из средних размеров человеческого пальца) должен составлять 9 мм, минимальный 7 мм, а минимальное расстояние между различными зонами 2 мм. Существуют и другие руководства для разработчиков, которые рекомендуют примерно такие же размеры, как и Microsoft. Методология адаптивного дизайна не ограничивается лишь дизайном макета сам процесс разработки также претерпевает изменения. Если ранее разработчики при создании сайта ориентировались, прежде всего, на стационарные ПК, а уже потом дорабатывали и упрощали его для корректной работы в мобильных браузерах, то сейчас считается целесообразным начинать разработку «от простого к сложному». Таким образом, первостепенной задачей считается воплощение базового функционала для мобильных устройств с последующим развитием дополнительных возможностей для пользователей стационарных компьютеров. Такой подход вынуждает сконцентрироваться на наиболее приоритетных задачах и функциях, приняв ограничения, присущие мобильным устройствам. УПРАЖНЕНИЕ 7. Адаптивный дизайн сайтов. 1. Выберите для анализа интернет-ресурсы трех типов: новостной, интернет-представительство, сайт-визитка (не менее 3 каждого типа). 2. Откройте выбранные сайты на двух-трех устройствах, имеющих возможность просмотра веб-содержимого: персональном компьютере и смартфоне/планшете. Оцените адаптацию сайтов разного типа к просмотру на маленьком экране. Отметьте: 1) предусмотрена или нет адаптация сайта для просмотра на мобильных устройствах? Отметьте, если адаптация предусмотрена, то это решено существованием дух версий (полная и для мобильных устройств) или адаптивным дизайном (мобильная версия имеет собственный URL, как правило, отличающийся от url полной версии сайта ). 2) изменяются размеры рисунков при просмотре на маленьком экране 3) скрывается часть несущественного контента 4) предусмотрена адаптация навигационных элементов для работы на сенсорном экране — изменяются размеры кликабельных областей 59

60 (крупные кнопки), увеличенное расстояние между кликабельными элементами) 5) происходит перераспределение элементов веб-страницы при вертикальной и горизонтальной ориентации экрана 3. На основании проведенного исследования сделайте вывод сайты какого типа лучше адаптированы к просмотру на мобильном устройстве? Как полагаете, почему? Контрольные вопросы по теме «Адаптивный дизайн сайтов». 1. Что подразумевает адаптивный/отзывчивый дизайн сайтов? Чем обусловлена его актуальность? 2. Назовите три основных компонента отзывчивого дизайна (по версии Итана Маркотта). 3. Какие правила следует соблюдать при разработке тач-интерфейса? 60

61 2.4. Основные аспекты улучшения качества веб-ресурса. Юзабилити Одним из ключевых факторов, определяющих качество интернет-ресурса является юзабилити. Понятие «юзабилити» относительно молодое и имеет множество трактовок. В микроэргономике 8 понятие «юзабилити» (от англ. usability способность быть использованным) обозначает итоговый уровень удобности предмета для использования в заявленных целях. В этом случае, термин имеет связь с понятием «эргономичность», но в отличие от последнего, меньше ассоциируется с технической эстетикой, с внешним видом и более привязан к утилитарности «юзабельного» объекта. При разработке пользовательских интерфейсов словом «юзабилити» обозначают общую концепцию их удобства при использовании программного обеспечения, логичность и простоту в расположении элементов управления. Иными словами, юзабилити рассматривают как эргономическую характеристику того, насколько продукт может быть эффективно, экономично и с удовольствием использован определенными пользователями для достижения поставленных целей в заданном контексте использования. Международный стандарт ISO определяет юзабилити как «Свойство продукции, при наличии которого установленный пользователь может применить продукцию в определенных условиях использования для достижения установленных целей с необходимой результативностью, эффективностью и удовлетворенностью». С точки зрения веб-дизайна, юзабилити, как характеристика сайта, включает в себя удобство и простоту интерфейса, навигации, типографику (для удобства восприятия текстовой информации), цветовую схему и другие аспекты коммуникации. Причины по которым необходимо уделять внимание юзабилити следующие: во-первых, чем удобнее пользоваться услугами интернет-ресурса, тем чаще пользователи выполняют полезные для бизнеса действия; во-вторых, повышается лояльность к ресурсу, что увеличивает конкурентоспособность; 8 Эргономика это наука о приспособлении должностных обязанностей, рабочих мест, предметов и объектов труда, а также компьютерных программ для наиболее безопасного и эффективного труда работника. Микроэргономика, в свою очередь, область эргономики, рассматривающая дизайн интерфейсов между человеком и др. элементами системы, включая интерфейсы человек программное обеспечение. 61

62 в-третьих, такие поисковые машины как Google и Яндекс и др. косвенно анализируют юзабилити сайтов (сравнивая количество рекламы, время пребывания пользователя на сайте и контрастность текстов) и поднимают их позиции при выдаче. Важно отметить, что юзабилити решает вопросы именно удержания пользователя на ресурсе, а не его привлечения. Юзабилити имеет важное значение для повышения показателя (коэффициента) конверсии в электронной коммерции. Конверсией называют соотношение всех посетителей интернет-ресурса к числу тех, кто совершил полезное действие. Полезное действие здесь это выполнение пользователем задачи, для решения которой он воспользовался интернет-ресурсом. Например, для интернет магазина полезным действием является покупка, для промо-сайта регистрация промо-кода и т.д. Для того, чтобы понять насколько удобно людям использовать некоторый искусственный объект (веб-сайт) для его предполагаемого применения, разработчики проводят юзабилити-тестирование. Юзабилити-тестирование помогает ответить на следующие вопросы: Понимают ли пользователи основное назначение сайта? Могут ли пользователи найти на сайте нужную информацию или услуги? Насколько простым является для них использование этих услуг? Достигаются ли цели, которые определили владельцы сайта? Каждый тип интернет-ресурса и каждый тип страниц акцентирует внимание на определенных аспектах юзабилити. Для главных страниц интернет-магазинов, например, ключевым фактором является навигация по сайту: от того, насколько быстро пользователь найдет необходимый товар, будет зависеть количество продаж. При этом, дизайн страниц магазина, продающего одну категорию товаров, может значительно отличаться от магазина, являющегося гипермаркетом. Для страниц оплаты товара или оформления доставки, задачей юзабилити будет обеспечение простоты заполнения пользовательских форм и оперативный, интуитивно понятный доступ к элементам, где размещены ответы на возникающие в данной ситуации вопросы. Таким образом, требования юзабилити каждого интернет-ресурса определяются его назначением. 62

63 Средства и технологии выявления проблем юзабилити интернет-ресурса Существующие на данный момент технологии позволяют точно отслеживать статистику и поведение пользователей. Это помогает выявить недостатки дизайна, придумать более эффективное решение и протестировать его. Эффективными средствами для сбора данных по пользованию сайтом являются Google Analytics и Яндекс.Метрика. Оба средства являются подключаемыми к сайту модулями, и предоставлят обширные возможности для сбора данных. Для детального анализа юзабилити отдельной страницы, сервисы предоставляют следующие инструменты. Карта кликов. На карте кликов соответствующим цветом помечаются места, куда часто нажимают пользователи. С ее помощью можно отследить правильно ли пользователи понимают кликабельные элементы страницы и нажимают ли они туда, куда нужно, для эффективной работы сервиса. Рис 35. Пример карты кликов Карта скроллинга. Карта cкроллинга позволяет понять, какая часть страницы более интересна посетителям. Работает этот инструмент следующим образом: на исследуемую страницу сайта накладывается тепловая карта, при этом каждой части страницы помечается цветом, соответствующим среднему времени просмотра данного участка страницы и количеству просмотров. Карта скроллинга поможет подобрать оптимальную длину страницы, и подскажет, в какой части страницы необходимо расположить наиболее важную информацию. 63

64 Рис 36. Пример карты скроллинга Вебвизор. Данный инструмент присутствует в Яндекс.Метрике. Вебвизор позволяет просматривать видеозапись посещений, в том числе передвижения курсора, клики и прочее. Такие данные позволяют увидеть поведение реальных посетителей на основе следа от движения курсора мыши. Рис 37. Фрагмент из промо-ролика Яндекс, демонстрирующий работу Вебвизора Eye tracking. Данная технология представляет собой программно-аппаратный комплекс для слежения за взглядом пользователя. Так как пользователь не всегда передвигает курсор вслед за взглядом, то данные вебвизора не позволяют выявить в какой последовательности он изучает веб-страницу и удалось ли дизайнеру решить задачу управления вниманием посетителя. 64

65 Отслеживание взгляда является наиболее эффективным инструментом анализа поведения пользователя. Актуальность технологии обечпечивается тем, что текущие тенденции развития управления техникой сводятся к управлению пальцами и жестами (т.е. без курсора). Результатом работы комплекса Eye tracking является тепловая карта, демонстрирующая частоту и продолжительность взгляда, а так же траекторию его движения. Отслеживание траектории взгляда значительно важнее отслеживания того, куда пользователь направляет курсор, так как чтобы направить его, пользователь должен вначале что-то увидеть. Рис 38. Аппаратная составляющая комплекса Eye tracking Основными параметрами при анализе результатов работы пользователя с вебстраницей являются: скорость просмотра. Если на сайте есть очень важный текст, но он большой и посетители его быстро проматывают, значит, они его не читают. Нужно проанализировать, за какое время просматриваются другие страницы, сравнить, попробовать прочитать этот текст. Блоки с большим объемом информации необходимо делать максимально читабельными. Большие тексты разбивать на абзацы с подзаголовками. Убедится, что оптимально подобран шрифт, кегль, интерлиньяж и прочие параметры. Если есть потребность в том, чтобы пользователь обязательно прочитал информацию (например, лицензионное 65

66 соглашение), то ее стоит выводить поэтапно, снабжая краткими тезисами. фокусы внимания. Грамотное управление вниманием пользователя подразумевает использование объектов, которые привлекают к себе взгляд. Если этого не происходит, пользователь, например, не видит цену, или время работы магазина, то это повод сделать их заметнее. Места кликов и клики по некликабельным элементам и областям. Зачастую пользователи ведут себя совсем не так, как было задумано автором и некоторые элементы ставят пользователя в тупик. Как правило это касается элементов навигации и управления интернетресурса. Например, неочевидная кнопка, или наоборот, кнопка, которая является всего лишь частью изображения. Помимо анализа отдельных страниц Яндекс.Метрика и Analytics позволяют узнать с каких устройств и браузеров пользователи посещали интернетресурс. Эти данные позволяют создать ресурс оптимизированный под устройства, предпочитаемые представителями реальной аудитории сайта. Помимо описанных выше, подсоединяемых к сайту модулей, существуют онлайн инструменты юзабилити-тестирования. Они помогают выяснить, насколько продукт соответствует ожиданиям пользователей, и в то же время, экономят время и средства на проведение исследований. Использовать эти сервисы можно даже не имея рабочего сайта, загрузив только макеты будущих страниц. Кратко рассмотрим некоторые сервисы. Userfly. Userfly является браузерным онлайн-инструментом. Это одно из самых распространенных и доступных средств анализа. Когда пользователи посещают сайт, фиксируется как пользователь водил мышью, что нажимал, куда переходил. Сервис доступен по адресу: userfly.com/. UsabilityHub. Данный сервис предоставляет три инструмента: Navflow, Fivesecondtest, ClickTest. Первый позволяет анализировать, насколько легко пользователи ориентируются на странице сайта, второй помогает выявлять элементы дизайна, привлекающие наибольшее внимание посетителей, а третий создает карту кликов (heatmap), показывающую области вебстраницы, на которые пользователи кликают чаще всего. Особенностью приложения является возможность выбора языка тестирования, причем проект на русском языке, например, можно показывать только русскоязычным пользователям. Сервис доступен по адресу: 66

67 Feng-GUI. Данный сервис имитирует взгляд пользователя в течение первых 5 секунд воздействия визуального эффекта. Это приложение создает карту движения глаз по странице (heatmap) на основе алгоритма, который предсказывает, на что, скорее всего, будет смотреть реальный человек. На главной странице сайта предусмотрена возможность добавить скриншот (мгновенный снимок экрана) веб-страницы и увидеть вероятные области повышенного внимания посетителя. Сервис доступен по адресу: Optimal Workshop. На сайте OptimalWorkshop можно оптимизировать сайт, используя три разных инструмента: Optimalsort это инструмент, который помогает организовать структуру сайта с помощью метода сортировки карточек. Treejack приложение для тестирования многоуровневой информационной архитектуры сайта. Calkmark предназначен для тестирования юзабилити веб-страниц. Он помогает понять, насколько просто (или сложно) пользователям сайта находить нужную информацию. Чтобы начать работу, требуется загрузить скриншот веб-страницы и поставить перед пользователями какую-либо задачу. Calkmark накапливает ответы и выдает результаты тестирования в виде тепловой карты кликов, а также сообщает среднее время, необходимое для выполнения каждой задачи. В сервисе также присутствует русский язык, что позволяет тестировать соответствующие макеты. Сервис доступен по адресу: Помимо специализированных сервисов, в сети Интернет есть специальные сообщества, где можно продемонстрировать свой макет, или обсудить макеты других участников сообщества. Примеры подобных сообществ: SitePolice, Revision.ru, Russiancreators.ru, Behance, Dribbble, ConceptFeedback. УПРАЖНЕНИЕ 8. Анализ юзабилити веб-ресурса. 1. Имитируя обращение к услугам электронной регистратуры медицинского учреждения, проанализируйте удобство пользования сайтом «Электронная регистратура Омского здравоохранения» ( 2. Оцените юзабилити интернет-ресурса, составьте перечень предложений по улучшению юзабилити данного сайта. 67

68 Контрольные вопросы по теме «Основные аспекты улучшения качества вебресурса. Юзабилити». 1. Что означает термин «юзабилити»? 2. Для чего веб-разработчики проводят юзабилити-тестирование сайтов? 3. Какие средства используют для анализа юзабилити веб-сайта? 68

69 2.5. Основные тенденции и тренды современного веб-дизайна Под словом «тенденция», как правило, понимают направление, в котором идет развитие некоего явления. Тенденция это стремление, намерение, свойственное кому-либо или чему-либо; направленность во взглядах или действиях. Устойчивая во времени тенденция называется трендом. Тренд выражает закономерность, которая характеризует общую долгосрочную тенденцию в изменениях показателей временного ряда. В экономике «тренд» это отрезок числового ряда на котором разница начальных и конечных значений ряда существенно больше колебаний значений внутри отрезка. (Пример графика) Тренд является одним из инструментов анализа, позволяющим стратегически прогнозировать поведение чего-либо. Поскольку понятие «тренд» имеет математические и экономические корни, можно говорить о ряде общих правил определения силы тренда: чем дольше по времени сохраняется тренд, тем он сильнее, однако у него есть предел; чем линия тренда круче и быстрее, тем тренд сильнее; продолжительный пологий тренд имеет большие шансы на свое продолжение; очень крутой тренд может также круто перевернуться; любой тренд со временем ослабевает, однако вероятность продолжения тренда в любой его точке выше вероятности его разворота. Ничто не стоит на месте, и современные технологии движутся в своем развитии весьма стремительно. Сфера медиаиндустрии очень чутко реагирует на технические новшества, и весьма тщательно отслеживает любые «революционные» изменения. В этой связи, специалисты веб-дизайна пытаются заглянуть в будущее и спрогнозировать, какие тренды станут главенствовать в веб-дизайне в предстоящем году. Чтобы узнать, что будет востребовано в веб-дизайне в ближайший период, принято анализировать тенденции минувшего года. В анализе присутствуют, как правило, две составляющие: одна это тренды, диктуемые развитием современных мобильных технологий и дизайнерской мысли (в частности, присутствие сильного тренда адаптивного веб-дизайна обусловлено стремительным и массовым развитием мобильного интернета); а вторая это 69

70 модные предпочтения, комбинация из которых позволяет дизайнерам создавать уникальные и неповторимые вещи. В конце каждого года, лучшие специалисты в области веб-технологий публикуют свои прогнозы относительно тенденций года наступающего. Ниже приведена подборка актуальных трендов веб-дизайна на 2015 года, сформированная на основе анализа авторских материалов. Итак, в ближайшем будущем будут актуальны: в области технологических решений: Адаптивный веб-дизайн. Технический бум всевозможных мобильных и не только устройств жестко призывает веб-дизайнеров делать сайты, адаптированные под всевозможные разрешения, будь то небольшой экран карманного смартфона, средний размер планшетника или огромная диагональ современного монитора. CSS3 эффекты. Возможности CSS3 технологий позволяют веб-дизайнерам творить чудеса, ограниченные лишь размахом их фантазии. Всевозможные движения, появления, трансформации контента, сложные перестроения все это делает сайты интересными и уникальными. Параллакс скроллинг. Взаимодействие различных элементов сайта, движущихся с разной скоростью при вертикальной прокрутке страницы, создает очень интересный эффект, который и называется параллакс скроллинг. Возможно, уходящий тренд: Смысл, который последний год все вкладывают в параллакс, создать «вау-эффект». В итоге каждый второй сайт с параллаксом, и никакого «вау» пользователь уже не чувствует. Сохранится как инструмент интерактивного сторителлинга там, где это уместно. Видео бэкграунд (Фоновое видео, встроенное на базе HTML5). Большие фоновые видео еще одна новомодная тенденция. Эмоциональное воздействие полноэкранного видео при знакомстве с сайтом может стать главным решающим фактором и сделать его запоминающимся, так как имеет сильный презентационный эффект. Отличная альтернатива фотографиями и адекватный способ показать, например, технологический процесс без длинных описаний. SVG-графика. Диапазон разрешений разных устройств заставляет делать как можно больше графики в векторном формате (особенно актуально для иконок, логотипов, маскирующих фигур). 70

71 в области навигации и организации перемещений по странице: Одностраничные сайты. Одностраничные сайты имеют неоспоримое преимущество в том, что нет необходимости переходить на следующую страницу. Все манипуляции осуществляются в пределах одной страницы. К нужному контенту пользователь попадает либо с помощью мягкого скроллинга, либо в модальных окнах, либо с помощью подгружающегося контента. Прокрутка (вертикальный и горизонтальный скроллинг). Вертикальный скроллинг. Этот тренд опять таки породили особенности технических устройств, когда оптимально прокручивать контент движением снизу вверх по экрану. А вариации с постраничным вертикальным скроллингом смотрятся очень стильно и современно. Смещение акцентов на мобильное пользование вернула на сцену и горизонтальный скроллинг, который легко делается свайпом 9 на планшете/смартфоне. Задача дизайнеров в том, чтобы не затруднять пользование с десктопа, дать подсказку пользователям и предложить вариант навигации, адекватный свайпу (скроллинг колеса мыши не самый удачный вариант для горизонтальной прокрутки). Фиксированная навигация. Суть этого тренда в том, что при прокрутке страницы, сверху жестко фиксируется верхнее меню навигации. Это сделано опять-таки в угоду мобильным девайсам. Встречается также и фиксированное нижнее меню. Боковое сворачивающееся меню. Для бокового свернутого меню уже есть соответствующий узнаваемый значок в виде трех параллельных горизонтальных полосок. В мобильных версиях этот значок закреплен вверху экрана, нажимая на который становится доступным развернутое меню. в оформлении внешнего вида: Плоский дизайн. Плоский дизайн (Flat UI) это ультра минималистический подход к содержимому, когда избавляются абсолютно ото всего лишнего (объемы, шумы, градиенты и прочие украшательства), оставляя только плоские цвета и интуитивно понятные визуальные элементы. В общем, только суть и ничего лишнего. 9 Свайп (от англ. swipe проводить не отрывая, скользить) это специальный жест, когда вы кладете палец наэкран, а затем ведете его в каком либо направлении не отрывая от экрана, после чего убираете его с экрана. 71

72 Нескучная типографика. Типографика прочно обосновалась среди современных трендов веб-дизайна. Если раньше акцент делался на красоту и разнообразие изысканных шрифтов, то теперь добавились еще и эксперименты с геометрией, когда текст или слово вписываются в пространство дизайна и напрямую взаимодействуют с другими элементами. Модульные конструкции. Очень удачное и интересное решение, когда контент представлен в виде четко локализованных и плотно скомпонованных модульных конструкций или карточек с единообразным оформлением. Большое фото на заднем фоне. Красивая большая картинка на бэкграунде стала уже устоявшимся трендом минувших лет. Это смотрится броско, эффектно и презентабельно, а также очень активно воздействует на зрителя. Раньше от этого удерживал только слабый интернет-канал у большинства пользователей. Теперь же обратной дороги к крохотными миниатюрам просто нет. Фотографии с уникальными углами обзора. Этот креативный подход позволяет проиллюстрировать материал одним из самых оригинальных способов. Анимированные иконки. Тренд, относительно недавно вошедший в моду. Будет жить в 2015-ом. Простые цветовые схемы. Данная тенденция предполагает использование в дизайне одного, двух или трех чистых простых монохромных цветов в сочетании с классическим черным или белым для остальных элементов дизайна. Своего рода цветная вариация минимализма. Эффекты «объема» при плоском дизайне. Внешний вид большинства элементов останется «плоским», будет сделан упор на их реалистичной анимации. Контурная иллюстрация. Сегодня глобальные эстетические предпочтения тяготеют к простоте, а контурные рисунки и контурная иллюстрация в целом становятся все более популярными (рис. ). 72

73 Рис 39. Простые и понятные контурные иллюстрации в представлении контента: Сторителлинг, сайты-истории. Сайт-история сильнее вступает в коммуникацию с пользователем, нежели «просто сайт», где сухо перечисляют преимущества продукта. Сайт-история это современная форма промо-сайта, требующая серьезной работы с контентом. Тренд получит развитие в будущем. Интерактивный сторителлинг подразумевает, что посетитель не просто листает страницы сайта, а участвует в создании своеобразной истории, что является дополнительным стимулом к взаимодействию с сайтом. Конечно, подходит данный прием далеко не для каждого сайта, но тем не менее он находит свою аудиторию. Интерактивная инфографика. Инфографика как тренд мощно заявила о себе в прошлом году. Дальше больше. Сегодня уже стало возможным использовать на сайте интерактивную типографику. Когда, например, при наведении на нужный год или объект меняется соответствующая информация в визуальном блоке. Новые тренды, в том числе перечисленные здесь, быстро становятся обычным явлением в веб-дизайне. Часть из них вскоре отмирает, заменяется другими, нередко контрастными к предыдущим. УПРАЖНЕНИЕ 9. Анализ использования современных тенденций веб-дизайна. 73

74 1. Создайте в поисковой системе запрос об основных тенденциях и трендах веб-дизайна в текущем году. Ознакомьтесь с авторскими публикациями, найденными по этой теме. 2. Просматривая веб-сайты разных тематик и категорий, акцентируйте свое внимание на наличии (или отсутствии) в их дизайне современных тенденций, описанных в рассмотренных в п.1 материалах. Сделайте вывод о том, сайты каких компаний (организаций) чаще других следуют модным тенденциям и с чем это связано. Контрольные вопросы по теме «Основные тенденции и тренды современного веб-дизайна». 1. Что означают термины «тенденция», «тренд»? 2. Назовите современные тенденции веб-дизайна в области технологических решений; в оформлении внешнего вида сайтов. 74

75 ГЛАВА 3. ПРАКТИКУМ: ОСНОВЫ HTML И CSS В ВЕБ-ДИЗАЙНЕ Веб-страница представляет собой электронный документ, содержимое которого включает как непосредственно контент страницы, так и правила отображения этого контента, указывающие программам просмотра (браузерам) форму представления описанной в документе информации. Эти правила составляются с помощью языка гипертекстовой разметки HTML (Hyper Text Markup Language). Разметка это код, который сопровождает содержание документа и предоставляет браузеру (или другой обрабатывающей программе) информацию о том, как следует интерпретировать те или иные фрагменты содержания. Язык HTML предназначен в первую очередь для структурной (логической) разметки, т. е. для обозначения каждого элемента в соответствии с его местом и ролью в структуре документа. Структурная разметка не имеет никакого отношения к внешнему виду документа. Документ может быть отображен на экране компьютера, написан от руки или напечатан на пишущей машинке, но все заголовки в нем останутся заголовками, все пeречни перечнями, а цитаты цитатами. Структурная роль элементов документа, в отличие от оформления, никак не меняется в зависимости от того, какими средствами просматривают этот документ. Таким образом, структурная разметка это разметка, обозначающая роль каждого элемента в структуре документа. Структурная разметка говорит о том, чем является тот или иной элемент, а не о том, как его следует или не следует отображать. Грамотная структурная разметка обеспечивает независимость документа от устройства вывода. Структурная разметка не говорит о том, как конкретно должен быть выделен текст. Но это не мешает разработчику оформить его нужным образом. Оформительские возможности HTML очень скудны. Для эффектного оформления отдельных элементов и придания комплексу веб-страниц единого узнаваемого стиля, используют технологию CSS (Cascading Style Sheets каскадные таблицы стилей). Таким образом, структурная разметка и оформление дополняют друг друга. Итак, на сегодняшний день, язык HTML является основой всех размещенных в Интернете электронных документов. Он выступает в роли фундамента, на 75

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

77 3.1. Основные разделы HTML-документа. Описание раздела body Язык HTML представляет собой набор определенных правил, в соответствии с которыми браузер отображает содержимое электронной страницы. Каждому правилу соответствует свое название (символьное обозначение, код), свойство (или набор свойств, называемых параметрами либо атрибутами) и значение (значения этих атрибутов). Для выделения управляющего кода из текстового массива, его символьное обозначение заключается в угловые скобки . Подобная конструкция: называется тегом. Язык HTML не чувствителен к регистру текстовых символов, поэтому название тега и атрибутов допускается набирать как прописными ( ), так и строчными ( ) символами. Теги бывают одинарными и парными: пример непарного тега: ; пример парного тега: .. Структура HTML-документа Документ HTML условно состоит из трех частей: 1. Строка, содержащая декларацию типа документа; 2. Заголовок (шапка) документа; 3. Тело документа. В первой строке заявляется тип документа (DOCTYPE), а также правила, которым следует разметка, и согласно которым она будет проверяться. Правила оформления строки можно найти на соответствующих ресурсах сети Интернет. Основные правила представлены в Приложении. 1. Вторая и третья части находятся в границах тега HTML. Таким образом, схема HTML-документа выглядит так: . Раздел заголовка .. Раздел тела документа 77

Источник