Дизайн сайта

Лицо сайта – его первая страница

Формат страницы

Полосы прокрутки

 Вступление к странице – Заглавие.

Навигация вашего сайта

Текст ваших веб-страниц.

Веб-дизайн создается не для удовлетворения
эстетических вкусов заказчика, а для целевой аудитории сайта.

Дизайн сайта.

Лицо сайта – его первая страница.

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

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

• Заголовок, логотип.
• Меню навигации сайта
• Список новостей
• Список обновлений на сайте
• Презентация сайта или фирмы владельца.
• Рекламные модули.

Для размещение всех элементов страницы на ней обычно используется верстка – которая делит страницу на несколько колонок. Отдельные детали и стиль исполнения в большинстве случае зависти от целей сайта (коммерческий, не коммерческий ресурс) и в большей стпени определяется дизайнером сайта

Формат страницы

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

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

Пи́ксел (англ. pixel, сокр. от англ. PICture'S ELement, элемент изображения), пи́ксель — мельчайшая единица цифрового изображения в растровой графике. Он представляет собой неделимый объект прямоугольной (обычно квадратной) формы, обладающий определенным цветом. Любое растровое компьютерное изображение состоит из пикселов, расположенных по строкам и столбцам. Если изображение увеличить, вы увидите ряды пикселов.

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

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

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

Разреше́ние изображения описывает, насколько детальным является данное изображение. Термин обычно применяется к изображениям в цифровой форме, хотя его можно применить, например, для описания уровня грануляции фотопленки, фотобумаги или иного физического носителя. Более высокое разрешение означает более высокий уровень детализации.Разрешение может выражаться в виде двух целых чисел, например: 1600 × 1200 — в этом случае эти числа означают размеры изображения в пикселях по горизонтали и вертикали. В других случаях используется единица DPI (англ. dots per inch) — количество пикселей на дюйм. Указание DPI позволяет «привязать» изображение, размеры которого задаются в относительных единицах (пикселях) к физическим — дюймам.

Разреше́ние устройства описывает разрешение изображения, получаемого с помощью устройства вывода или устройства ввода. Например, под разрешением экрана монитора обычно понимают размеры изображения в пикселах: 800 × 600, 1024 × 768, 1280 × 1024. Разрешение принтера, сканера обычно указывают в DPI: 300 DPI, 600 DPI, 1200 DPI. Википедия

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

Полосы прокрутки

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

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

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

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

Хотя в последнее время есть некие приемы использование которых позволяет избежать неправильного отображения страниц сайта (CSS).

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

1. Основное содержание страницы должно сразу быть видно после ее загрузки – это может быть Заголовок, начало основного текста, меню навигации, меню (ссылки на основные разделы) и , реклама).
2. Интересным приемом может быть размещение в начале статьи оглавления статьи, с ссылками на помещенные ниже разделы. Также около каждого заголовка раздела можно поставить кнопку-перевод на начало страницы.

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

• Текстовые блоки
• Графические блоки (вставки).
• Прочие – формы, Java-апплеты  и т.п.

Вступление к странице – Заглавие.

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

Заголовки страницы (headings).

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

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

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

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

Разделители.

Разделители применяются для улучшения формата текста страницы, что помогает избежать его монолитности и монотонности. Выстраивание текста на веб странице облегчает пользователю чтение и восприятие текстового материала. Главное условие – построение текста должно гармонировать с другими элементами страницы.

Навигация вашего сайта.

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

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

Общий обзор навигационных решений сайта.

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

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

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

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

Семантика навигации сайта. Какие ссылки вашего сайта стоит включать в навигационное меню верхнего уровня?  Требования к главному меню сайта следующие:

• Число кнопок не должно превышать 10, оптимально около 7;
• Более привычно смотрится вертикальное меню, слева от основного содержимого и вертикальное - вверху или внизу страницы.
• Деление внутренних страниц сайта можно провести по принципу: материалы и инструменты. Материалы это содержание, которое может быть интересно пользователю. Инструменты представляют по своей сути вспомогательные материалы самого сайта, облегчающие доступ к основной информации – карта сайта, страницу поиска, страницы инструкций.

Дизайн навигационной панели. Главная задача дизайнера – сделать кнопку более интегрированной в дизайн сайта, не раздражала своим утилитарным назначением, в то же время была достаточно эффективной и понятной. Интуитивно навигационная панель должна восприниматься пользователям и кричать о том, что на нее можно нажимать.

Навигационные кнопки строятся на основе текстовых надписей, но реализованы они при помощи графического дизайна. Принадлежность их к ссылкам «подчеркивается» стандартными местами расположения, рамки вокруг надписей, горизонтальные или вертикальные линии-разделители, акцентирование внимания достигается также расположением около надписи кружков, треугольников, небольших иконок. Безусловно, также, что кнопки должны выглядеть однородными – быть одного размера, или не зависеть от размера текста, помещенного на кнопку. Имейте в виду, что выравнивание длин надписей с помо¬щью искажения пропорций букв и даже просто изменения кегля шрифта от одной надписи к другой совершенно недопустимо. Графические особенности декорирования кнопок менее зависимы от прикладной функции данного элемента дизайна.   Это может быть общее для все панели фоновое изображение, абстрактная текстура, плавно перемещающаяся с кнопки на кнопку.  Но если страница сама по себе насыщена фотографиями и изображениями можно решить навигационную панель в более строгом ключе и при помощи прямых линий.

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

Текст ваших веб-страниц.

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

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

Кегль. Размер букв на странице зависит от двух факторов – базового кегля (устанавливаемым в настройках браузера) и относительного размера, определяемого в HTML коде страницы (теги small, Big и font). Дизайнер обязан помнить и учитывать в визуальной конструкции страницы, что размеры блока текста на экране могут быть в принципе любыми. Это выражено в том. Что все элементы. Граничащие с текстовым блоком должны уметь растягиваться и сжиматься без каких-либо технических или эстетических проблем.

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

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

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

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

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

При выборе шрифта гармонирующего с задумками дизайнера и подходящий по кодировке нужно решить еще одну проблему – нужно сделать так, что бы его увидел не только дизайнер, но и пользователь. Для этого надо как минимум переслать на файл шрифта на пользовательский компьютер. Если переслать шрифт невозможно, то нужно указать браузеру, какой шрифт имеется в виду (надеясь, что такой шрифт или похожий у пользователя уже есть), что и реализуется при помощи тегов  я языке HTML, CSS и CSS 2.  По умолчанию любая графическая система использует один из приведенных шрифтов:

Гарнитура Times Roman (с засечками), Arial (рубленный), моноширинный Courier. Отметим что более часто встречаются рубленный шрифт.