Правило № 4: согласованность в макете и дизайне

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

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

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

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

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


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

На веб-странице могут проявляться визуальный контраст и связанность элементов:

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

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

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

4. Дерево ссылок (breadcrumbs - «хлебные крошки») указывает пользователю, на какой странице он сейчас находится.

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

6. Подзаголовки (также могут быть графическими) описывают разделы веб-сайта.


Двойные стрелки в подзаголовках подсказывают пользователю, что это гиперссылки.

7. Текстовые ссылки внизу страницы соответствуют кнопкам главной схемы навигации. Они указывают, на каких страницах пользователь уже побывал. Цвета гипертекстовых ссылок повторяют стандартные цвета броузера, поскольку не все целевые пользователи могут быть хорошо знакомы с Интернетом.

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

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела Продвижение сайтов на эту тему:
Анализ компонента «Ссылки»
Интернет-каталоги
Модели с оплатой за включение
Понимание результатов поиска
Правила веб-дизайна