Веб-дизайн в культуре и искусстве.

Веб-дизайн в культуре и искусстве.

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

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

Конечным продуктом работы веб-дизайнера является дизайн-макет: картинка, представляющая предполагаемый будущий внешний вид страниц сайта, размером приблизительно 960х640 px (пикселей) — размер, соответствующий среднему стандарту, связанный с необходимостью дальнейшей привязки к разным разрешениям экрана монитора. Картинка эта является многослойной, где почти каждая деталь — отдельный слой, приложенный к другим слоям-картинкам, за счёт чего может легко выполняться доработка, замена, перекомпоновка и другие задачи. В зависимости от идеи и целей макет может включать фотографии, сложные коллажи, иллюстрации, текстовые слои, уникальные иконки. Для главной страницы и внутренних иногда рисуются отдельные макеты с дополнениями или изменениями в соответствии с тематикой страницы.

Изображение первоначально может быть векторным или растровым, выполненным в Adobe Illustrator, Adobe Photoshop, GIMP или другом визуальном редакторе (например, Scribus или Inkscape), но для верстальщика изображение, как правило, переводится в растровый формат.

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

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

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

 

Принципы проектирования web-сайтов. Этапы проектирования веб-узла.

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

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

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

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

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

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

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

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

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

· Оптимизация и размещение[уточнить] материалов сайта;

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

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

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

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

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

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

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

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

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

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

HTML-верстка

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

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

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

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

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

Завершающим этапом разработки сайта является тестирование

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

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

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

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

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

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

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

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

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

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

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

Логическая структура сайта.

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

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

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

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

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

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

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

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

Логическая структура сайта " дерево" - это наиболее часто встречающаяся модель организации сайта. " Дерево" – иерархическая структура – позволяет посетителям сайта по своему желанию управлять глубиной посещения сайта. Посетители могут заходить только на страницы верхних уровней иерархии или же «спуститься» к нижним уровням. При этом свобода выбора посетителей зависит от «ширины дерева».

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

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

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

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

 

 

Этапы анализа веб-сайта

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

1. Анализ внутренней среды сайта:

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

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

1.1. Технический анализ сайта: анализ кода сайта; анализ скорости загрузки сайта; анализ работы функционала сайта на предмет ошибок; проверка правильности настройки откликов сервера; анализ сайта на предмет дублей страниц; анализ безопасности сайта.

1.2. Маркетинговый и seo анализ сайта: проверка robots.txt; анализ контента сайта; анализ ключевых слов на сайте; анализ дизайна сайта; анализ оптимизации сайта; анализ структуры сайта;

2. Анализ внешней среды сайта:

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

2.1. Поисковый анализ сайта: анализ позиций сайта в поисковиках; анализ внешних ссылок на сайт;

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

2.2. Маркетинговый анализ сайта: анализ аудитории сайта; анализ действий посетителей сайта; сравнительный анализ сайтов конкурентов.

Цели и задачи сайта

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

Сайт должен обеспечивать выполнение следующих задач:

· Имиджевая (сайт является «лицом» организации/компании в сети Интернет, создание хорошего Интернет представительства существенно улучшит имидж организации);

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

· Коммуникативная (сайт обеспечивает двустороннюю связь с посетителями);

· Рекламная (сайт должен привлекать внимание клиентов и партнёров).

Текст и фон

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

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

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

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

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

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

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

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

Размер

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

Вертикальные линии кажутся тоньше равных им горизонтальных, поэтому вертикальные элементы букв в шрифтах искусственно утолщают. Что касается цвета, то объекты, окрашенные в теплые цвета как бы приближаются к зрителю, темные же — напротив, отдаляются и уменьшаются в размерах.

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

Пропорции

Излюбленное соотношение архитекторов и художников заключено в формуле: b / a = a / ( a + b ), или b = 0, 618a.

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

Подпишитесь на рассылку Pandia.ru!

Размещение

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

· одноуровневые элементы

· разноуровневые элементы

К элементам первого типа можно отнести, например, кнопки навигационной панели web-страницы (или объекты, расположенные вдоль одной прямой вертикально или горизонтально). К этому же типу относятся и пункты списка, которые часто выделяют маркерами.

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

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

Плотность

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

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

Форма

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

· состоящие из прямых линий (вертикальные и горизонтальные линии, прямоугольники)

· криволинейные (в форме которых выделяется окружность или ее часть)

· бесформенные (аморфные) элементы

Прямые

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

Прямоугольники

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

Круги и закругления

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

Кривые Безье

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

Рис 5. Кривые Безье

Текстуры

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

Плоский цвет

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

Геометрические текстуры

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

Фотографические текстуры

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

Материальные текстуры

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

Получить полный текст

Шрифт и текст

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

Элементы шрифта

Рассмотрим классификацию шрифтов, их разновидности и терминологию. Гарнитура — это набор начертаний одного шрифта, различающихся по толщине штрихов, ширине букв, общему рисунку (прямое или курсивное) и другим параметрам.

Все существующие в природе шрифты можно разделить на пять видов:

· шрифты с засечками,

· шрифты без засечек — рубленые,

· моноширные — с одинаковой шириной всех букв и знаков,

· декоративные — всевозможные стилизации (готический, древнерусский), рукописные и шрифты с различными эффектами («трехмерные», с тенями),

· и специальные (содержат математические, музыкальные знаки, декоративные элементы и т. д.).

Выделяют следующие начертания внутри одной гарнитуры:

· прямое начертание

· курсивное (наклоненный вправо, более округлый и рукописный почерк)

· жирное начертание

· сверхжирное начертание

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

Основы навигации

Англоязычному термину «Usebility» не нашлось аналога в русском языке, и поэтому его перевели как «юзабилити». Под термином скрывается все, как мы используем какой-нибудь объект. Объектом может быть пульт дистанционного управления, телефон или в нашем случае web-сайт. Признанный мэтр в данной области Стив Круг написал книжку, которая называется «Не заставляйте меня думать». Стив Круг не противник размышлений, но он утверждает, что не нужно думать о том, как пользоваться дверной ручкой, или чайником или сайтом. Обращение с ними должно быть интуитивно-понятными. Эти вещи должны быть простыми в использовании. Если человек начнет задумываться даже на долю секунды куда он попадет щелкая на ссылку «назад», то из этих мгновений будут складываться минуты, а вместо с ними будет расти раздражение посетителя сайта, вынужденного тратить свои усилия на понимание замысла дизайнера.

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

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

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

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

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

Рис. 38. Топология сайтов.

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

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

Рис. 39. Главное меню. Обратите внимание, как выделен раздел,
в котором мы находимся в данный момент.

Вспомогательное меню может состоять уже из достаточно большого числа объектов. Если ссылок много - группируйте их по какому-нибудь значимому признаку. На рисунке 40 показаны разные варианты вспомогательного меню: (1) - вспомогательное меню раздела «О компании». (2) - пример группы ссылок, они не только взяты в рамку, но и еще озаглавлены. (3) - еще одна группа, все ссылки снабжены маркерами, которые облегчают визуальное разделение отдельных объектов. При наведении мыши, ссылка меняет цвет.

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

Рис. 40. Вспомогательные меню (они взяты из разных фрагментов сайта).

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

Рис. 41. Строка с кнопками интерактивных сервисов.

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

Рис. 42. Хлебные крошки показывают, что мы находимся на странице посвященной жидкокристаллическим телевизорам и позволяют быстро перейти на верхние уровни сайта.

На современных системах управления контентом (SMC), например, PHP-Nuke вся информация располагается в базах данных, поэтому при добавления нового раздела, новой страницы по индексам такие ссылки формируются автоматически. В статичных страницах «хлебные крошки» придется создавать вручную.

Абсолютный URL-адрес

Абсолютный URL-адрес содержит обозначение протокола, доменный или IP-адрес компьютера, путь к файлу, а также имя файла. Например:

 

http: //sevidi.ru/webd/htmpage.html

 

Если файл находится в корневой папке, то путь может отсутствовать:

 

http: //sevidi.ru/news.html

 

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

 

http: //sevidi.ru/

 

http: //sevidi.ru/webd/

 

Относительный URL-адрес

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

 

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

веб-страницы, находящейся по адресу:

 

http: //sevidi.ru/webd/htmpage1.html

 

нужно перейти на страницу:

 

http: //sevidi.ru/webd/htmpage2.html

 

то ссылка будет такой:

 

< a href = " htmpage2.html" > Текст ссылки< /a>

 

если с веб-страницы, находящейся по адресу

http: //sevidi.ru/webd/dweb/file1.html

 

нужно перейти на

 

http: //sevidi.ru/webd/dweb/htmtest/file2.html

 

то ссылку можно указать так:

 

< a href = " htmtest/file2.html" > Текст ссылки< /a>

 

если с веб-страницы, находящейся по адресу

http: //sevidi.ru/webd/dweb/htmtest/file2.html

 

нужно перейти на

 

http: //sevidi.ru/webd/dweb/file1.html

 

то ссылка будет такой

 

< a href = "../file1.html" > Текст ссылки< /a>

 

А при переходе с

 

http: //sevidi.ru/webd/dweb/htmtest/file2.html

 

на

 

http: //sevidi.ru/webd/file3.html

 

ссылка будет такой

 

< a href = "../../file3.html" > Текст ссылки< /a>

 

12345678910Следующая ⇒

Поделиться: