Дизайн сайта

Дизайн сайта
Мы рассмотрим важные принципы,
следуя которым можно получить сайт с
хорошими пользовательскими
качествами.
Педагог ДО Щёголева И.В.
Постоянные элементы сайта

Логотип. Расположен, как правило, в левом верхнем углу
страницы. На внутренних страницах логотип является
ссылкой на главную страницу;

Заголовок сайта. Расположен в самом верху страницы;

Главное меню сайта. Состоит из прямых потомков
начальной страницы. Начальная страница традиционно также
включается в состав главного меню. Главное меню
расположено горизонтально под заголовком и (или) слева,
образуя вертикальный ряд.
Постоянные элементы сайта
Заголовок страницы и окна
Заголовок страницы должен располагаться
ниже горизонтального меню и совпадать с
заголовком окна.
В любом случае заголовок окна –
дополнительная подсказка пользователю о
его текущем положении на сайте.
Заголовок страницы и окна
Главное меню
Количество, название пунктов, их порядок в главном меню не
должен меняться при листании страниц.
В меню обязательно должен присутствовать пункт,
указывающий на текущую страницу.
Названия пунктов должны быть краткими.
Самое лучшее – одно слово.
Главное меню полезно повторять на концах страниц.
Навигация
Навигация является удобной, если на любой
странице легко ответить на три вопроса:


где я?
куда я могу пойти?

где меню?
Где я?
На этот вопрос помогают ответить следующие
элементы сайта.
Логотип и заголовок – они называют сайт.
 Заголовок страницы, заголовок окна и позиция
меню, которая не является ссылкой, - отмечают
текущую страницу сайта.
 Меню «хлебные крошки» показывает путь от
главной страницы к текущей.

Куда я могу пойти?
Пользователь должен легко определять
возможные направления движения с текущего
места сайта.
Где меню?
Меню обязано быть в начале
страницы, чтобы пользователю было
удобно пролистывать сайт, и в конце,
чтобы продолжить движение по сайту
после прочтения страницы.
Пример глубокой иерархии
Если сайт имеет третьи, четвертые и более глубокие
иерархические уровни, то на каждой странице
должны присутствовать следующие элементы:

Главное меню сайта (корень «начало» и список
прямых потомков)
Понятно, что текущая страница «кураторы» имеет прямым предком страницу
«университет».
Пример глубокой иерархии

Меню текущей страницы.
В это меню записывают страницысестры текущей страницы, т.е.
страницы, имеющие общего прямого
предка с текущей. В этом меню запись
на текущую страницу обязательно
присутствует, но не является ссылкой.
Меню страницы «кураторы» на
Роботландском сайте имеет
следующий вид:
Пример глубокой иерархии

Меню «хлебные крошки».
Это меню показывает путь к текущей странице от
главной по иерархической схеме сайта. Пункты
этого меню отделяются друг от друга каким-либо
направленным знаком. Последняя запись
(указание на текущую страницу) ссылкой не
является.
Авторская подпись
На каждой странице должна быть авторская
подпись с адресом электронной почты, записанном
в явном виде. Эта запись может располагаться в
начале страницы или в ее конце
Внешние ссылки

На сайте обязательно должны быть внешние ссылки,
иначе сайт – тупик.

Внешние ссылки полезно собирать на отдельной странице
(с названием «ссылки») и дополнительно распределять по
страницам, исходя из контекста.

В каждом случае внешние ссылки желательно
прописывать в явном виде (чтобы пользователь не путал
их со ссылками на страницы текущего сайта и смог
скопировать через буфер обмена).

Внешние ссылки должны быть прокомментированы.
Главная страница
Не нужно помещать на главную страницу
рекламные лозунги, приветственные спичи
и другой шум из ряда «общей болтологии».
Гораздо полезнее сформулировать идею
сайта, разместить анонсы материалов и
новости.
Текст на сайте

Текст нужно разбивать на небольшие абзацы, так как
большие абзацы читать с экрана трудно.

Красные строки лучше не использовать – они образуют
«гребенку» на левом крае страницы.

Текст на странице должен комфортно читаться. На
«шершавом фоне» текст лучше записывать в одноцветной
области.

Не записывайте основной текст увеличенным размером
шрифта и тем более жирным или курсивным начертанием.

Конструируйте текст по принципу перевернутой
пирамиды – сначала вывод, затем подробности.

Структурируйте текст. Используя иерархию заголовков и
абзацное деление.