Требования к дизайну элементов страниц сайта

Предоставляемые, по окончании работ, материалы
По окончании работ над дизайном должно быть передано следующее:
1. PSD-файл макета дизайна и, для сверки, JPEG-файл макета дизайна,
сохранять строго в RGB
2. Исходники в векторном виде всех изначально векторных графических
элементов (логотипы, 3D-модели, пиктограммы и пр.), использующихся в
дизайне сайта.
3. Сопроводительный текстовый документ, в котором должно быть чётко
описано следующее:
Растягиваемость сайта — должен ли сайт иметь фиксированную
ширину, или быть растягиваемым (растягиваться на всю ширину окна
браузера при изменении его размеров или разрешения монитора).

В случае растягиваемого сайта — минимальная и максимальная
ширина страниц сайта, а также алгоритмы и нюансы поведения всех
элементов дизайна при изменении ширины страницы (размеров окна
браузера): относительная (или абсолютная) ширина областей
отображения, относительные позиции других элементов страницы и т.д.
Иногда для удобства воприятия информации,и принципов движения
фунциональных элементов сайта, делаются 2 варианта дизайна для
узкого и широкого мониторов


Список всех использующихся в дизайне сайта шрифтов.
Требования к макету дизайна сайта
Общие требования
1. Новый элемент — новый слой
Все элементы дизайна сайта должны быть предоставлены в PSD-файле на
отдельных понятно названных по-русски слоях, логически объединённых в
понятно названные по-русски группы. Например: слои «Форма поиска» и
«Кнопка поиска» объединены в группу «Поиск», которая вместе со слоями
«Логотип» и «Слоган» объединена в группу «Шапка».
2. Размер макета для «резинового» шаблона
Если шаблон «резиновый» — в шапке и подвале страницы не менее 20-50
пикселей с правой стороны должны быть отрисованы так, чтобы их без
проблем можно было дублировать
3. Правильно рисуйте фон
Фон страницы должен быть однородным и повторяющимся. В том случае,
если требуется использовать текстурирование — текстура точно так
же должна быть однородной и легко дублируемой.
Если вы используете сложные фоновые элементы, обязательно хотя бы
небольшую часть изображения сделайте однотипной — для дублирования
в случае необходимости.
4. Не используйте фоновые фотографии
Использование в качестве фона «тяжелых» изображений (например,
полноразмерных фотографий) — не допускается.
5. В PSD-файле все нестандартные для программы “Adobe Photoshop”
стили или фильтры должны быть «сведены» в отдельные обычные
слои.
6. Используйте направляющие
Все выравнивания слоев должны делаться по направляющим (rulers),
которые не удаляются из макета.
7. Используйте стандартные шрифты
Для текстового содержимого должны использоваться стандартные
шрифты. В случае использования нестандартного шрифта, он должен
прилагаться к макету и в обязательном порядке должен быть указан
шрифт-заменитель из стандартного набора.
8. Используйте текст по назначению
Любые изменения текста должны проводиться в рамках стандартных
действий — уменьшение-увеличение размера, междустрочные интервалы,
кернинг и т.д. Выгибание текста «аркой», «рыбьим глазом» и прочие
видоизменения в рамках работы с текстом — не допускаются, это
прерогатива изображений.
9. Осторожно обращайтесь с формами
Стандартные элементы форм должны подвергаться изменениям только
в рамках здравого смысла. Для дизайнера, не знакомого с возможностями
CSS в этой области, оптимальным будет использование стандартных
элементов.
10. Готовьте сборку дизайна
Мелкие элементы дизайна (иконки, стрелки, буллеты и т.д.) в случае их
многократного повторения в макете (например, маркированный список,
меню и прочее) должны быть представлены в отдельных файлах. В самом
макете все повторения могут размещаться в одном слое.
11. Оформляйте внешний вид меню
Выпадающие-выезжающие-разворачивающиеся меню должны
быть отображены в двух видах:

собранный;

разложенный.
12. Оформляйте пункты меню
Пункты меню должны быть отображены в 2 видах:

пассивный (курсор не наведен)

активный (курсор наведен).
Кроме того, тексты пунктов меню должны учитывать
возможность длинного названия раздела и переноса его на вторую строку.
13.Оформляйте навигационные цепочки
Навигационные цепочки должны быть прописаны с учетом реальных
названий разделов и переноса слов.
14.Выравнивание слоев – строго по Guide. Их не удалять. Оставлять в
макете.
15.Rulers должны быть выровнены строго с точностью до одного пикселя.
Полпикселя не допустимо.
16.Недопустимо использовать прозрачность для элементов, содержащих
текст.
17.Эффекты подсвечивания не допустимы. Например при наведении на
ссылку, фон ссылки становится полупрозрачным «облаком».
18.Минимум элементов, которые потребуют создания графических
файлов png-24 (полупрозрачность etc).
19.Обязательно должна присутствовать favicon.ico для сайта.
20.В связи с популярностью продукции компании Apple, необходимо
также отрисовать иконки в формате PNG с размером 57х57, 72х72 и
114х114 пикселей.
21.Если применяется градиент к слою, использовать обычный режим
наложения (blend Mode: normal) и его реальные цвета. Не должно быть
никаких полупрозрачных градиентов и сложных режимов наложения
типа ''multiply, screen, overlay, и т.д.".
22.Нежелательно использовать «слой на слое» для создание различных
эффектов, типа градиента, слой должен быть один.
23.Никаких градиентных границ (бордеров, stroke)
24.Не использовать сложных режимов наложения (blend mode) касается
любых свойств слоя (типа inner shadow, drop shadow и т.д.).
25.По возможности — не использовать в макете больше 2-х не
стандартных шрифтов, их кол-во сильно влияет на рендеринг страницы
в браузере, что негативно сказывается на отношения пользователя к
сайту.
26.Если есть скрытые слои или папки, которые показывают какие-то части
сайта (модальные окна, выпадающие панели и т.д.) — необходимо
выделять папку / слой — цветом, чтобы его не пропустить, также он
должен иметь название, которое близко по смыслу его
функциональности.
Требования к дизайну элементов страниц сайта
1. В макете дизайна должны быть представлены все элементы, указанные в
ТЗ — навигаторы, формы, текстовые области, тематические картинки,
пиктограммы и пр. В том числе стоит обратить внимание на следующее:
 Дополнительная навигация. Ссылки на некоторые служебные
страницы, не входящие, как правило, в основную карту сайта.
Например: «Личный кабинет, RSS, Прайс, Карта сайта, Контакты,
Написать письмо»). Могут быть в виде пиктограмм. Из них
рекомендуется предусмотреть по крайней мере «Личный кабинет»,
«RSS», «Карту сайта» и «Написать письмо», поскольку
соответствующие страницы при всей своей важности, как правило,
труднодоступны из основной навигации по сайту.
 Путь по сайту (Главная страница ? Продукция ? Люстры). Нужно
учитывать, что он может быть довольно длинным.
 «Подвал» с контактной и правовой информацией, кнопкой
техподдержки, местом для счётчиков и т.п.
2. В макете дизайна должны быть представлены как минимум первые три
уровня основного навигатора и карты сайта. Остальные уровни, если их
внешний вид не представлен в макете дизайна, будут смотреться так же, как
и третий уровень с увеличенным отступом слева.
3. Для каждого уровня навигации можно предусмотреть свой стиль — для
активных и неактивных разделов, но важно, чтобы это были одинаковые
стили для всех пунктов навигации данного уровня. То же верно и для карты
сайта.
4. Все элементы навигации должны быть доступны пользователю на
каждой странице сайта.
5. Высоту шапки для внутренних страниц информационного сайта
желательно делать не более 300 пикселей.
6. Все тексты на сайте обязаны хорошо читаться и на плохо настроенном
мониторе. Рекомендация по шрифтам для обычного текста — “Verdana”, 1113 пикселей.
7.
Быть внимательными в использовании нестандартных шрифтов.
Стандартных шрифтов очень мало, которые есть в каждой операционной
системе. Можно, конечно, подгрузить шрифт, но 100% не будет работать в
старых браузерах.
8.
Шрифт должен быть бесплатным или должна быть приобретена
лицензия на его использование.
9.
Лучше всего шрифты выбирать на сайте www.google.com/webfonts.
Выбрав тут шрифты, можно без проблем подключить их на сайте, и тем
более использовать.
10.
Минимум изменений стандартных контролов форм.
11. Все текстовые элементы должны быть без сглаживания, т.е
стандартный шрифт.
12. Предпочтительно использовать тёмный шрифт на светлом фоне.
13. Текст, который должен быть представлен на сайте в виде графики, в
макете дизайна должен быть переведён в растр. Текст, который должен быть
представлен на сайте в виде текста, должен быть оставлен в макете дизайна
текстом.
14. В макете дизайна необходимо обозначить внешний вид всех типов
ссылок:





Обычная ссылка
Активная ссылка
Ссылка посещённой страницы
Ссылка при наведении курсора мыши
Ссылка в фокусе
15. Внешний вид всех типов ссылок должен отличаться от внешнего вида
всех других элементов сайта (заголовков, текста, выделенного полужирным,
и пр.) цветом и (или) подчёркиванием.
16. Назначение пиктограмм («иконок») должно быть интуитивно понятно
посетителю сайта.
17. В основном навигационном меню используются исключительно
текстовые ссылки. При необходимости дополнительно можно использовать
тематические картинки к разделам с жёстко прописанными адресами этих
страниц. Так же, исключительно текстом, должны быть представлены все
заголовки всех уровней. Желательно так же — название сайта, слоган,
контактная информация и т.д. В идеале — весь текст должен быть текстом, а
не графикой.
18. Меню основной навигации стоит располагать в верхней и нижней части
страницы, если в ТЗ не оговорено другое.
19. Пункт меню навигации может быть достаточно длинным (состоящим из
многих и (или) длинных слов). Также, само меню навигации может
содержать произвольное количество пунктов. Необходимо учитывать это при
разработке дизайна сайта.
Замечания по компоновке страниц сайта
1. Специфика движка сайта предполагает следующую иерархию
расположения информации (контента) на страницах сайта, что
должно учитываться при разработке дизайна:
На сайте может быть несколько шаблонов страниц, отличающихся по
внутреннему иерархическому строению. Например, в одном шаблоне
должно быть три колонки с текстом, шапка должна быть большой и
содержать контактную информацию, форму авторизации и т.д. А в
другом шаблоне в шапке должен быть лишь логотип со слоганом, поиском
и дополнительной навигацией, в то время как форма авторизации должна
находиться в левой колонке, а правой колонки быть не должно вообще.

Каждый шаблон страницы (тип страницы) содержит несколько
областей отображения контента. Как правило, их три (но теоретически
может быть неограниченно много) — левая с навигацией и
второстепенными информационными блоками, центральная с основным
наполнением и правая с различными информационными врезками,
например, комментариями по основному наполнению, лентой новостей и
пр. Часто правую область(-ти) имеет смысл сделать в виде
обтекаемого(-ых) основным текстом блока(-ов) вместо реализации
полной колонкой.

Каждая из областей отображения содержит несколько
функциональных блоков, представляющих собой тот или иной вид
контента — обычный текст, ленту новостей, фотоальбом, каталог
товаров, анкету, опрос и пр. В одной и той же ОО может быть по
единственному экземпляру той или иной функции. Например, в левой ОО
могут быть представлены один блок с текстом, одна лента новостей и
один фотоальбом.

Каждый из функциональных блоков содержит в себе несколько
объектов своих функций. Например, блок с лентой новостей содержит
несколько новостей с датой, названием-ссылкой и анонсом, блок с
текстом может содержать несколько разных объектов текста (хоть
это и не столь очевидно внешне), блок с фотоальбомом содержит в себе
несколько фотографий с названиями, описанием и пр.

2. Для страниц сайта с требовательным к ширине страницы контентом
(таблица товаров и т.п.) следует предусмотреть отсутствие правой(-ых)
колонки (области отображения информации).
3. Создавая узкие области отображения, важно помнить, что бывают
длинные слова или слишком широкие баннеры и таблицы, которые будут не
укладываться в отведённое для них место.
4. Функциональный блок желательно визуально выделять в дизайне сайта
для лучшего восприятия информации — фоном, рамкой или какими-либо
графическими элементами (в основном это касается ФБ слева и справа).
5. Функциональный блок, как правило, имеет заголовок, а многие объекты
внутри блока — изображения (превьюшки). Нужно предусмотреть для них
место.
6. Создавая макет дизайна страницы, важно помнить, что никто не
помешает заказчику ввести в любую позицию (область отображения) и
функциональный блок произвольное количество информации. Т.е., высота (а
часто и ширина) любого ОО и ФБ непредсказуемы. Дизайн это должен
учитывать.
Требования к оформлению контента
В макете дизайна необходимо предусмотреть внешний вид всех элементов
контента — заголовков разных уровней, абзацев, ссылок, списков, таблиц,
всех элементов форм и пр. Элементы контента нужно вывести (представить)
как:
1. Текст со следующими элементами:





Заголовки всех, с первого по шестой, уровней
Параграфы
Таблица с заголовками
Картинка
Нумерованный и ненумерованный списки
2. Новости с датой, заголовком, анонсом и картинкой:
 Блок с последними новостями (боковая панель)
 Основной блок с новостями в центральной области отображения
3. Подробный просмотр новости (дата, заголовок, картинка, текст новости,
автор, ссылка на источник)
4. Форма ввода со следующими элементами:






Поле ввода
Флаг
Переключатель
Многострочное поле ввода
Выпадающий список
Обычная кнопка
5. Фотоальбом с картинкой, названием, описанием, автором, ссылкой на
источник и флагом «Проголосовать» в каждом из как минимум двух
представленных объектов
6. Голосование
7. Гостевая книга
8. Все остальные функциональные блоки, указанные в ТЗ на сайт и
имеющие индивидуальный дизайн (Каталог, галерея, Интернет магазин,
карта и т.д.)