В практике разработчика сайта часто встречается следующая ситуация — заказчик обращается к разработчику с готовым (уже согласованным и утвержденным) макетом и предлагает на его основе создать сайт.
На первый взгляд, ничего экстраординарного в таком варианте нет, за исключением того факта, что сами макеты в большинстве случаев сделаны с нарушением технических требований, в результате чего у разработчика практически сразу возникают трения с заказчиком.
Приведу наиболее яркий диалог из собственной практики:
Заказчик: У нас есть макет, мы на его основе хотим сделать сайт.
Я: Ок, давайте посмотрим на макет.
…
Я: Простите, но презентация в PowePoint никак не может быть макетом сайта… Вы уверены? Возможно, это только блок-схема?
Заказчик: Нет, это макет сайта — нам знакомый дизайнер так нарисовал и сказал, что проблем не возникнет! Он хороший специалист, нам его […] рекомендовали!
Обосновать свою точку зрения удалось исключительно демонстрацией нескольких настоящих дизайн-макетов. А вот вернуть потраченные на вот такой «дизайн» деньги, насколько мне известно, заказчику удалось с некоторым трудом, а кроме того, затраченное на подобную «разработку» время привело к срыву сроков запуска сайта.
Если вам нужен сайт, но вы собираетесь заказывать разработку макета у своего дизайнера — для того, чтобы не попасть в такую ситуацию, обязательно убедитесь в том, что дизайнер ознакомлен с изложенными ниже основными требованиями, которые выдвигаются к дизайн-макетам сайтов.
1.Используйте правильные форматы файлов
Макет представляется только в одном из 2-х форматов — PSD (Photoshop Document) или TIFF (Tagged Image File Format).
PDF, AI, EPS, BMP, QXD, QXT и прочие, не говоря уже о расширениях файлов пакета программ Microsoft Office — не допускаются.
2. Новый элемент — новый слой
Каждый элемент дизайна должен быть представлен в отдельном слое. Это означает, что любой элемент цельного изображения является автономным и может быть в любой момент включен/выключен/удален/изменен — не затрагивая другие элементы.
3. Размер макета для фиксированного по ширине шаблона
Если планируется фиксированный по ширине шаблон — ширина макета обязательно должна учитывать отступы справа-слева от края экрана. Кроме того, отдельно указывается цвет фона «подложки».
4. Размер макета для «резинового» шаблона
Если шаблон «резиновый» — в шапке и подвале страницы не менее 20-50 пикселей с правой стороны должны быть отрисованы так, чтобы их без проблем можно было дублировать.
5. Учитывайте рамки и отступы браузера
Если шаблон рисуется под определенное разрешение, необходимо учитывать, что размер макета создается в соответствии с разрешением окна браузера, а не монитора. Например, при разрешении монитора 1024, размер макета составляет 1002 пикселя.
6. Правильно рисуйте фон
Фон страницы должен быть однородным и повторяющимся. В том случае, если требуется использовать текстурирование — текстура точно так же должна быть однородной и легко дублируемой.
Если вы используете сложные фоновые элементы, обязательно хотя бы небольшую часть изображения сделайте однотипной — для дублирования в случае необходимости.
7. Не используйте фоновые фотографии
Использование в качестве фона «тяжелых» изображений (например, полноразмерных фотографий) — не допускается.
8. Используйте направляющие
Все выравнивания слоев должны делаться по направляющим (rulers), которые не удаляются из макета.
9. Используйте стандартные шрифты
Для текстового содержимого должны использоваться стандартные шрифты. В случае использования нестандартного шрифта, он должен прилагаться к макету и в обязательном порядке должен быть указан шрифт-заменитель из стандартного набора.
10. Используйте текст по назначению
Любые изменения текста должны проводиться в рамках стандартных действий — уменьшение-увеличение размера, междустрочные интервалы, кернинг и т.д. Выгибание текста «аркой», «рыбьим глазом» и прочие видоизменения в рамках работы с текстом — не допускаются, это прерогатива изображений.
11.Осторожно обращайтесь с формами
Стандартные элементы форм должны подвергаться изменениям только в рамках здравого смысла. Для дизайнера, не знакомого с возможностями CSS в этой области, оптимальным будет использование стандартных элементов.
12. Готовьте сборку дизайна
Мелкие элементы дизайна (иконки, стрелки, буллеты и т.д.) в случае их многократного повторения в макете (например, маркированный список, меню и прочее) должны быть представлены в отдельных файлах. В самом макете все повторения могут размещаться в одном слое.
13. Оформляйте внешний вид меню
Выпадающие-выезжающие-разворачивающиеся меню должны быть отображены в двух видах:
- собранный;
- разложенный.
14. Оформляйте пункты меню
Пункты меню должны быть отображены в 2 видах:
- пассивный (курсор не наведен)
- активный (курсор наведен).
Кроме того, тексты пунктов меню должны учитывать возможность длинного названия раздела и переноса его на вторую строку.
15. Оформляйте ссылки
Оформление ссылок должно быть указано в 3 статусах: обычная ссылка (link), ссылка при наведении курсора (hover link), посещенная ссылка (visited link).
16. Оформляйте навигационные цепочки
Навигационные цепочки должны быть прописаны с учетом реальных названий разделов и переноса слов.