Сергей Бердышев - Искусство оформления сайта. Практическое пособие
- Название:Искусство оформления сайта. Практическое пособие
- Автор:
- Жанр:
- Издательство:Литагент «Ай Пи Эр Медиа»db29584e-e655-102b-ad6d-529b169bc60e
- Год:неизвестен
- ISBN:нет данных
- Рейтинг:
- Избранное:Добавить в избранное
-
Отзывы:
-
Ваша оценка:
Сергей Бердышев - Искусство оформления сайта. Практическое пособие краткое содержание
Читатель держит в своих руках уникальный самоучитель по искусству веб-дизайна, позволяющий любому человеку, даже плохо знающему компьютер и Интернет, за несколько дней научиться создавать отличные, графически безупречно оформленные сетевые ресурсы: персональные, коммерческие, развлекательные, консультационные и т. д. В книге объясняется технология создания красочных надписей, геометрических фигур, собственных оригинальных курсоров, бегущих строк, прочих динамических эффектов и многого другого, что делает веб странички исключительно привлекательными. Настоящее пособие – одно из первых в России пособий, дополняемых учебным сайтом (http://obrazcats.narod.ru).
Искусство оформления сайта. Практическое пособие - читать онлайн бесплатно ознакомительный отрывок
Интервал:
Закладка:
1) главная страничка вашего сайта;
2) главная страничка раздела;
3) искомый документ; [5]
> неважные разделы меньше нуждаются в приметности, чем важные, но не меньше – в упорядоченности, то есть изначальная структура сайта должна всегда соблюдаться;
> посетителю должно быть понятно, в какой секции (в каком разделе) сайта он найдет нужные ему материалы;
> родственные по тематике разделы и странички необходимо объединить более тесными связям;
> читателю должна быть предельно ясна тематика сайта.
Впрочем, говорить о целом сайте пока еще рановато. Намотаем сказанное на ус и вернемся к проблеме комфортности отдельной странички. Рассмотрим, как соблюдаются перечисленные правила, на примере нашей собственной ученической странички, для чего откроем вновь файл index.wpm. Столь удачный шаблон в полной мере соответствует высоким требованиям юзабилити. Здесь много свободного места, тексты и картинки не наляпаны друг на дружку, навигация предельно проста и понятна. Любой человек легко перейдет в нужный ему раздел сайта «Образованные котята». И в то же время глаз не натыкается на пустые, незаполненные пятна.
Эргономика (а именно так, если вы помните, называется наука об удобстве человека при работе с любой техникой) дает нам и другие подсказки касательно веб-дизайна. Например, она показывает, что при быстром считывании процент ошибок зависит от расположения информации, достигая максимума при вертикальном (в столбик) размещении слов и особенно цифр. Чем выше процент, тем ниже понимание материалов сайта. Определенное значение имеет цветовая комбинация текста и фона. На первый взгляд, достаточно добиться контраста, но такое мнение ошибочно. Свет клином на контрасте не сходится. Белые значки на черном фоне контрастны, однако их удобно считывать с расстояния много большего, чем разделяющее глаза юзера и экран монитора. Для малых расстояний нужен другой контраст: темные значки на светлом фоне.
Покончив с разговорами об удобстве юзера, перейдем непосредственно к обсуждению красоты, привлекательности проекта. Страничка index.wpm, маячащая сейчас перед вашими глазами, выглядит милой еще и потому, что все в ней гармонично. Те непоседливые веб-дизайнеры, которым удалось «поверить алгеброй гармонию», добиваются такого баланса цветов и объектов, действуя на строго научной основе. И наука, которая им помогает, называется сенсорной инженерией. Само по себе слово «сенсорика» означает чувственное восприятие. Первое и самое главное, что воспринимает человек, оказываясь в какой-либо среде, – это пространство данной среды.
Адекватное сенсорное восприятие веб-пространства формируется за счет четкого представления пользователя о структуре сайта. Посетитель должен с первых секунд пребывания на страничке получить «прозрачную» информацию о том, какой вид имеет веб-узел и как по этому узлу путешествовать, чтобы было и быстро, и комфортно. При этом информация должна облегчать интуитивную ориентацию пользователя, когда он, без дополнительных подсказок, предвидит, интуитивно понимает, куда ему следует продвигаться, чтобы заполучить желаемые сведения. Компасом юзера является меню и прочие инструменты навигации. От дизайнера требуется структурировать навигацию таким образом, чтобы посетитель всегда:
> за минимальное количество кликов мог найти на сайте искомый документ;
> мог найти материалы по смежной тематике «не отходя от кассы»;
> знал о материалах неродственной тематики, но потенциально интересных, зовущих в большое путешествие по ресурсу.
Хоть простота – хуже воровства, однако дизайнер обязан предельно упростить серфинг по сайту, и это составляет зерно оформления интерфейса. (Напомню, что интерфейсом в дизайненазывается «пульт управления» узлом и отдельными страничками, то есть весь антураж и инструментарий, который обеспечивает движение потока данных до юзера.) Ключевыми деталями интерфейса надлежит признать меню и форму поиска, а ведущим инструментом навигации – карту сайта. При этом целесообразно размещать:
> форму поиска – на каждой странице;
> главное меню – на страницах, открывающих какие-либо разделы, после чего оно не повторяется;
> ссылки на главную и карту сайта присутствуют на всех страничках, причем ссылка на главную оформлена, как правило, в виде логотипа ресурса или компании, размещенного в левом верхнем углу странички.
Нетрудно догадаться, что добиться всего перечисленного выше возможно лишь в том простом случае, когда автором ресурса отлично продуманы логическая и физическая структуры сайта. Следует знать, что логическая и физическая структуры сайта чаще всего не совпадают, хотя могут быть сильно похожи, в том числе и тем, что обе являются древовидными. Логическая структура воплощает в себе логические связи между контентом разных страничек и влияет таким образом на конструирование навигации по ресурсу. Физическая структура несколько отходит от логической, а иногда и вовсе на нее не похожа. Связана она с видовой группировкой файлов, составляющих веб-узел. Предельно оптимизированная физическая структура условного веб-узла имеет следующий вид.
1. КОРНЕВАЯ ПАПКА (папка на хостинге, выделенная под ваш веб-узел).
1.1. Главная страничка (часто называется index.html или default.html).
1.2. Контакты (страничка с контактными данными и, иногда, формами для осуществления обратной связи).
1.3. ГРАФИКА (папка, а точнее – субдиректория, обычно называемая images) – сюда сбрасываются графические элементы, общие для всех страничек сайта. Это преимущественно различные рисунки в формате GIF, в особенности общие детали интерфейса страничек и баннеры, а также иконки (в том числе favicon). Обо всем этом мы еще поговорим, когда конкретно остановимся на графике.
1.4. РАЗДЕЛ 1. Такие папки отведены под тематические разделы и повторяют логическую структуру сайта с богатым контентом. Сколько тематических блоков можно выделить в контенте вашего ресурса, столько и папок «Раздел» нужно создать. Внутри каждой папки такого рода целесообразно выделить следующие субдиректории второго порядка:
1.4.1. ТЕКСТОВЫЕ МАТЕРИАЛЫ. Субдиректория содержит только html-странички, содержащие нужный контент.
1.4.2. ГРАФИКА. В субдиректорию загружаются рисунки *.gif и *.jpg, относимые только к отдельным или всем страничкам данной субдиректории. Это схемы, графики, диаграммы, фото, сканированные копии с репродукций и тому подобные материалы, предназначенные для иллюстрирования статей, выложенных на веб-узле. Внутри этой папки бывает уместно выделить следующие субдиректории третьего порядка.
1.4.2.1. Превьюшки – рисунки предварительного просмотра (preview), очень небольшие, кликнув на которые можно получить крупное изображение. Мы непременно научимся делать такие.
Читать дальшеИнтервал:
Закладка: